aa957c3c0d993344cd4571236871f68a15ed164e — Manuel Groß 2 months ago c9db01e
Use fontawesome icons for weblog

Embedding SVGs is far more reliable than relying on random font’s
unicode symbol availability.
M content/about.md => content/about.md +5 -0
@@ 11,6 11,11 @@ I didn’t want to bloat this website with any webfonts (and also avoid helping Google tracking my website’s readers, if any), so I just use a serif font-family instead. If installed, it displays text in [Lora](https://github.com/cyrealtype/Lora-Cyrillic), which is a beautiful libre serif font.  
  For source code, I’m using [Hack](https://sourcefoundry.org/hack/), which is a brilliant monospace font I couldn’t live without.
  
+ ### Icons
+ 
+ In the “Weblog” section I’m using icons, which are SVG files from [Fontawesome](https://fontawesome.com/) (e.g. the star and the calendar). They are licensed under the [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) license, if you’d like to use them yourself.  
+ I’m using single SVGs since I don’t want anyone having to download the font for a few single icons.
+ 
  ### Influences
  
  Obviously I didn’t come up with the layout and design ideas completely myself, so here’s a quick plug to the websites and projects that helped influence this website’s design and structure:

M content/imprint.md => content/imprint.md +2 -0
@@ 22,4 22,6 @@   **Unless noted otherwise**, all content on this site is licensed under the [Creative Commons Attribution-ShareAlike 4.0 International](https://creativecommons.org/licenses/by-sa/4.0/) license.
  
+ The icons I use in the “Weblog” are [Fontawesome](https://fontawesome.com/) SVG files that are licensed under the [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) license.
+ 
  Have a nice day!

A static/fontawesome/bookmark-regular.svg => static/fontawesome/bookmark-regular.svg +1 -0
@@ 0,0 1,1 @@
+ <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="bookmark" class="svg-inline--fa fa-bookmark fa-w-12" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="currentColor" d="M336 0H48C21.49 0 0 21.49 0 48v464l192-112 192 112V48c0-26.51-21.49-48-48-48zm0 428.43l-144-84-144 84V54a6 6 0 0 1 6-6h276c3.314 0 6 2.683 6 5.996V428.43z"></path></svg>< 
\ No newline at end of file

A static/fontawesome/calendar-alt-regular.svg => static/fontawesome/calendar-alt-regular.svg +1 -0
@@ 0,0 1,1 @@
+ <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="calendar-alt" class="svg-inline--fa fa-calendar-alt fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"></path></svg>< 
\ No newline at end of file

A static/fontawesome/star-regular.svg => static/fontawesome/star-regular.svg +1 -0
@@ 0,0 1,1 @@
+ <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="star" class="svg-inline--fa fa-star fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M528.1 171.5L382 150.2 316.7 17.8c-11.7-23.6-45.6-23.9-57.4 0L194 150.2 47.9 171.5c-26.2 3.8-36.7 36.1-17.7 54.6l105.7 103-25 145.5c-4.5 26.3 23.2 46 46.4 33.7L288 439.6l130.7 68.7c23.2 12.2 50.9-7.4 46.4-33.7l-25-145.5 105.7-103c19-18.5 8.5-50.8-17.7-54.6zM388.6 312.3l23.7 138.4L288 385.4l-124.3 65.3 23.7-138.4-100.6-98 139-20.2 62.2-126 62.2 126 139 20.2-100.6 98z"></path></svg>< 
\ No newline at end of file

A static/fontawesome/sticky-note-regular.svg => static/fontawesome/sticky-note-regular.svg +1 -0
@@ 0,0 1,1 @@
+ <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="sticky-note" class="svg-inline--fa fa-sticky-note fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M448 348.106V80c0-26.51-21.49-48-48-48H48C21.49 32 0 53.49 0 80v351.988c0 26.51 21.49 48 48 48h268.118a48 48 0 0 0 33.941-14.059l83.882-83.882A48 48 0 0 0 448 348.106zm-128 80v-76.118h76.118L320 428.106zM400 80v223.988H296c-13.255 0-24 10.745-24 24v104H48V80h352z"></path></svg>< 
\ No newline at end of file

M static/mgr.css => static/mgr.css +4 -0
@@ 111,3 111,7 @@ margin-left: 0;
  	margin-bottom: 2rem;
  }
+ 
+ .icon {
+ 	height: 0.8rem;
+ }

M templates/weblog.html => templates/weblog.html +4 -4
@@ 8,13 8,13 @@ {% for page in section.pages %}
        {% if page.extra.microtype %}
          {% if page.extra.microtype == "note" %}
-           &#128456;&nbsp;<strong>{{ page.title }}</strong>
+           <img src="{{ config.base_url }}/fontawesome/sticky-note-regular.svg" class="icon" />&nbsp;<strong>{{ page.title }}</strong>
          {% elif page.extra.microtype == "date" %}
-           &#128197;&nbsp;<strong>{{ page.title }}</strong>
+           <img src="{{ config.base_url }}/fontawesome/calendar-alt-regular.svg" class="icon" />&nbsp;<strong>{{ page.title }}</strong>
          {% elif page.extra.microtype == "bookmark" %}
-           &#128278;&nbsp;<strong><a href="{{ page.extra.link }}">{{ page.title }}</a></strong>
+           <img src="{{ config.base_url }}/fontawesome/bookmark-regular.svg" class="icon" />&nbsp;<strong><a href="{{ page.extra.link }}">{{ page.title }}</a></strong>
          {% elif page.extra.microtype == "favourite" %}
-           &#10025;&nbsp;<strong><a href="{{ page.extra.link }}">{{ page.title }}</a></strong>
+           <img src="{{ config.base_url }}/fontawesome/star-regular.svg" class="icon" />&nbsp;<strong><a href="{{ page.extra.link }}">{{ page.title }}</a></strong>
          {% endif %}<br />
        <small><span class="monospace">{{ page.date | date(format="%Y-%m-%d") }}</span></small>
          {{ page.content|safe }}