More scss file splitting, now using font instead of direct SVG icons to optimize requests.

assets/scss/components/blocks/preview.scss

@@ -25,6 +25,10 @@
     background-repeat: no-repeat;
     
     // Base label setting
+    .label-link {
+        text-decoration: none;
+        color: black;
+        
         .label {
             transition: max-height 0.15s ease-in;
             max-height: 20%;
@@ -34,6 +38,15 @@
             padding: 0.5em;
             bottom: 0; 
             
+            .app-name {
+                float: left;
+            }
+            
+            .right-icon {
+                float: right;
+                line-height: 1em;
+            }
+            
             // Hide this information by default
             .show-on-hover {
                 display: none;
@@ -42,6 +55,12 @@
                 max-height: 0;
                 background: none;
             }
+            
+            p[role=button] {
+                line-height: 1em;
+                width: max-content;
+            }
+        }
     }
     
     // Used when the block is hovered/toggled

assets/scss/components/common/button.scss

@@ -16,7 +16,7 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
-a[role=button] {
+[role=button] {
     text-decoration: none;
     color: black;
     cursor: pointer;
@@ -45,6 +45,6 @@ a[role=button] {
     }
 }
 
-.text-white a[role=button]:not(.primary), a[role=button]:not(.primary).text-white {
+.text-white [role=button]:not(.primary), [role=button]:not(.primary).text-white {
     color: white;
 }

assets/scss/components/common/centering.scss

@@ -0,0 +1,40 @@
+/**
+ * Omegamma - Hugo theme for ad5001.eu and related websites.
+ * Copyright (C) 2021  Ad5001
+ * 
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+.center {
+    margin-right: auto !important;
+    margin-left: auto !important;
+}
+
+img.center {
+    display: block;
+    max-width: 100%;
+}
+
+.vertical-center {
+    margin-top: auto !important;
+    margin-bottom: auto !important;
+    max-height: 100%;
+}
+
+/* workaround for sometimes images don't position correctly vertically */
+.vertical-center-img {
+    margin: auto;
+    max-height: 100%;
+}

assets/scss/components/common/headers.scss

@@ -0,0 +1,32 @@
+/**
+ * Omegamma - Hugo theme for ad5001.eu and related websites.
+ * Copyright (C) 2021  Ad5001
+ * 
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+h1 {
+    font-size: xx-large;
+    &.larger {
+        font-size: xxx-large;
+    }
+}
+    
+h2 {
+    font-size: x-large;
+}
+
+h1, h2, h3 {
+    font-family: var(--light-font);
+}

assets/scss/components/common/icon.scss

@@ -0,0 +1,122 @@
+/**
+ * Omegamma - Hugo theme for ad5001.eu and related websites.
+ * Copyright (C) 2021  Ad5001
+ * 
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+.icon-as-text {
+    width: 1em;
+    height: 1em;
+    margin-top: -0.05em;
+    margin-right: 0.5em;
+    vertical-align: middle;
+}
+
+.icon-larger-text {
+    width: 1em;
+    height: 1em;
+    font-size: 1.4em;
+    margin-right: 0.35em;
+    margin-top: -0.14em;
+    vertical-align: middle;
+}
+
+.icon-larger2-text {
+    width: 1em;
+    height: 1em;
+    font-size: 1.6em;
+    margin-right: 0.31em;
+    margin-top: -0.19em;
+    vertical-align: middle;
+}
+
+.icon-twice-text {
+    width: 1em;
+    height: 1em;
+    font-size: 2em;
+    margin-right: 0.25em;
+    margin-top: -0.25em;
+    vertical-align: middle;
+}
+
+/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
+/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
+/*
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: 'omegicons';
+    src: url('../font/omegicons.svg?71804627#omegicons') format('svg');
+  }
+}
+*/
+[class^="icon-"]:before, [class*=" icon-"]:before {
+  font-family: "omegicons";
+  font-style: normal;
+  font-weight: normal;
+  speak: never;
+
+  display: inline-block;
+  text-decoration: inherit;
+  text-align: center;
+  /* opacity: .8; */
+
+  /* For safety - reset parent styles, that can break glyph codes*/  /* fix buttons height, for twitter bootstrap */
+  line-height: 1em;
+
+  /* Animation center compensation - margins should be symmetric */
+  /* remove if not needed */
+  /* margin-left: .2em; */
+
+  /* you can be more comfortable with increased icons size */
+  /* font-size: 120%; */
+
+  /* Font smoothing. That was taken from TWBS */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  /* Uncomment for 3D effect */
+  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
+}
+
+.icon-about:before { content: '\e800'; } /* '' */
+.icon-apps:before { content: '\e801'; } /* '' */
+.icon-bug:before { content: '\e802'; } /* '' */
+.icon-code:before { content: '\e803'; } /* '' */
+.icon-documentation:before { content: '\e804'; } /* '' */
+.icon-download:before { content: '\e805'; } /* '' */
+.icon-frameworks:before { content: '\e806'; } /* '' */
+.icon-free:before { content: '\e807'; } /* '' */
+.icon-git:before { content: '\e808'; } /* '' */
+.icon-keyboard:before { content: '\e809'; } /* '' */
+.icon-lang:before { content: '\e80a'; } /* '' */
+.icon-license:before { content: '\e80b'; } /* '' */
+.icon-lookup:before { content: '\e80c'; } /* '' */
+.icon-menu:before { content: '\e80d'; } /* '' */
+.icon-open-external:before { content: '\e80e'; } /* '' */
+.icon-person:before { content: '\e80f'; } /* '' */
+.icon-platforms:before { content: '\e810'; } /* '' */
+.icon-privacy:before { content: '\e811'; } /* '' */
+.icon-touch:before { content: '\e812'; } /* '' */
+.icon-wrench:before { content: '\e813'; } /* '' */
+.icon-firefox:before { content: '\e814'; } /* '' */
+.icon-linux:before { content: '\e815'; } /* '' */
+.icon-macosx:before { content: '\e816'; } /* '' */
+.icon-universal:before { content: '\e817'; } /* '' */
+.icon-web:before { content: '\e818'; } /* '' */
+.icon-windows:before { content: '\e819'; } /* '' */
+.icon-github:before { content: '\e81b'; } /* '' */
+.icon-mail:before { content: '\e81c'; } /* '' */
+.icon-mastodon:before { content: '\e81d'; } /* '' */
+.icon-twitter:before { content: '\e81e'; } /* '' */

assets/scss/components/common/padding.scss

@@ -0,0 +1,43 @@
+/**
+ * Omegamma - Hugo theme for ad5001.eu and related websites.
+ * Copyright (C) 2021  Ad5001
+ * 
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+.padding-container {
+    padding: 1em;
+}
+
+.padding-container-1 {
+    padding-left: 1em;
+    padding-right: 1em;
+}
+
+.padding-container-point3 {
+    padding-left: .3em;
+    padding-right: .3em;
+}
+
+.padding-container-3 {
+    padding-left: 3em;
+    padding-right: 3em;
+}
+@media screen and (max-width: 850px) {
+    .padding-container-1, .padding-container-3 {
+        padding-left: 0.5em;
+        padding-right: 0.5em;
+    }
+}

assets/scss/components/common/text.scss

@@ -0,0 +1,38 @@
+/**
+ * Omegamma - Hugo theme for ad5001.eu and related websites.
+ * Copyright (C) 2021  Ad5001
+ * 
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ * 
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ * 
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+
+.text-left {
+    text-align: left;
+}
+
+.text-center {
+    text-align: center;
+}
+
+.text-right {
+    text-align: right;
+}
+
+.text-white {
+    color: white;
+}
+
+p, .text-content {
+    line-height: 1.5em;
+}

assets/scss/font.scss

@@ -16,21 +16,39 @@
  * along with this program.  If not, see <https://www.gnu.org/licenses/>.
  */
 
+// Metropolis font
 @font-face {
   font-family: "Metropolis";
-  src: url(/fonts/metropolis/Metropolis-Regular.otf) format("opentype");
+  src: local('Metropolis'),
+       url(/fonts/metropolis/Metropolis-Regular.otf) format("opentype");
   font-display: swap;
 }
 
 @font-face {
   font-family: "Metropolis";
-  src: url(/fonts/metropolis/Metropolis-Bold.otf) format("opentype");
+  src: local('Metropolis Bold'),
+       url(/fonts/metropolis/Metropolis-Bold.otf) format("opentype");
   font-weight: bold;
   font-display: swap;
 }
 
 @font-face {
   font-family: "Metropolis Light";
-  src: url(/fonts/metropolis/Metropolis-Light.otf) format("opentype");
+  src: local('Metropolis Light'),
+       url(/fonts/metropolis/Metropolis-Light.otf) format("opentype");
+  font-display: swap;
+}
+
+// Omegicons font
+@font-face {
+  font-family: 'omegicons';
+  src: url('../fonts/omegicons/omegicons.eot?71804627');
+  src: url('../fonts/omegicons/omegicons.eot?71804627#iefix') format('embedded-opentype'),
+       url('../fonts/omegicons/omegicons.woff2?71804627') format('woff2'),
+       url('../fonts/omegicons/omegicons.woff?71804627') format('woff'),
+       url('../fonts/omegicons/omegicons.ttf?71804627') format('truetype'),
+       url('../fonts/omegicons/omegicons.svg?71804627#omegicons') format('svg');
+  font-weight: normal;
+  font-style: normal;
   font-display: swap;
 }

assets/scss/footer.scss

@@ -24,13 +24,17 @@ footer {
     a:not([role=button]) {
         color: #3DAEE9;
     }
+    
+    a[role=button] {
+        color: white;
+    }
 }
 
 .footer-social-list {
     display: flex;
     font-size: 30px;
-    a img {
+    a {
-        margin: 0.3em;
+        padding: 0.3em;
     }
 }
 

assets/scss/header.scss

@@ -170,14 +170,10 @@ nav {
     }
 
     /* removing white text from menu with light background */
-    nav.menu-shown.text-white li a[role=button], nav.menu-shown .text-white li a[role=button], nav.menu-shown a[role=button].text-white {
+    nav.menu-shown.text-white [role=button], nav.menu-shown.text-white button {
         color: black;
     }
 
-    nav.menu-shown.text-white .icon-monochrome {
-        filter: unset;
-    }
-
     nav.menu-shown.text-white .navbar-list li.background {
         background-color: var(--nav-background);
     }

layouts/_default/app.html

@@ -14,7 +14,6 @@
                 <h1>{{ .Params.About.Title }}</h1>
                 <p>{{ .Params.About.Content | markdownify }}</p>
             </section>
-            <!--<img class="center" src="{{ .Params.About.Screenshot | safeHTMLAttr }}"/>-->
             <!-- other sections -->
             {{ range .Params.Sections }}
             <section class="center content-center columns-container padding-container">
@@ -23,11 +22,11 @@
                     {{ .Content | markdownify }}
                 </div>
                 <div class="column col2">
-                    <img class="vertical-center fill-width" src="/img/{{ .Image }}.png"/>
+                    <img class="vertical-center fill-width" alt="{{ .Alt }}" src="/img/{{ .Image }}.png" loading="lazy"/>
                 </div>
             {{ else if eq .Type "image|text" }}
                 <div class="column col2">
-                    <img class="vertical-center fill-width" src="/img/{{ .Image }}.png"/>
+                    <img class="vertical-center fill-width" alt="{{ .Alt }}" src="/img/{{ .Image }}.png" loading="lazy"/>
                 </div>
                 <div class="column col2 text-left vertical-center">
                     {{ .Content | markdownify }}
@@ -35,7 +34,7 @@
             {{ else if eq .Type "text/image" }}
                 <div class="column text-center">
                     {{ .Content | markdownify }}
-                    <img src="/img/{{ .Image }}"/>
+                    <img src="/img/{{ .Image }}.png" alt="{{ .Alt }}" loading="lazy"/>
                 </div>
             {{ else if eq .Type "text" }}
                 <div class="column text-center">
@@ -47,64 +46,58 @@
             {{ end }}
             <section id="technical-details-section" class="center content-center padding-container">
                 <hr>
-                <h1 class="flex flex-center"><img src="/icons/wrench.svg" class="icon-larger-text" alt=""/>{{ i18n "technicalSheet" }}</h1>
+                <h1 class="flex flex-center"><i class="icon-wrench icon-larger-text" alt=""></i>{{ i18n "technicalSheet" }}</h1>
                 <div class="grid">
                     <p class="inline column col2">
-                        <img src="/icons/platform/Universal.svg" class="icon-as-text" alt=""/>
+                        <i class="icon-universal icon-as-text" alt=""></i>
                         {{ i18n "supportedPlatforms" }}&nbsp;{{ partial "platforms.html" $appdata.platforms }}
                     </p>
                     <p class="inline column col2">
-                        <img src="/icons/lang.svg" class="icon-as-text" alt=""/>
+                        <i class="icon-lang icon-as-text" alt=""></i>
                         {{ i18n "translated" }}&nbsp;{{ partial "translations.html" $appdata.translated }}
                     </p>
                     <p class="inline column col2">
-                        <img src="/icons/git.svg" class="icon-as-text" alt=""/>
+                        <i class="icon-git icon-as-text" alt=""></i>
                         {{ i18n "latestVersion" }}v{{ $appdata.version }}
                     </p>
                     <p class="inline column col2">
-                        <img src="/icons/git.svg" class="icon-as-text" alt=""/>
+                        <i class="icon-git icon-as-text" alt=""></i>
                         {{ i18n "status" }}{{ $appdata.status }}
                     </p>
                     <p class="inline column col2">
-                        <img src="/icons/code.svg" class="icon-as-text" alt=""/>
+                        <i class="icon-code icon-as-text" alt=""></i>
                         {{ i18n "programingLanguages" }}{{ delimit $appdata.languages ", " }}
                     </p>
                     <p class="inline column col2">
-                        <img src="/icons/frameworks.svg" class="icon-as-text" alt=""/>
+                        <i class="icon-frameworks icon-as-text" alt=""></i>
                         {{ i18n "frameworks" }}&nbsp;{{ delimit $appdata.frameworks ", " | markdownify }}
                     </p>
                     {{ if $appdata.touchfriendly }}
                     <p class="inline column col2">
-                        <img src="/icons/touch.svg" class="icon-as-text" alt=""/>
+                        <i class="icon-touch icon-as-text" alt=""></i>
                         {{ i18n "touchFriendly" }}
                     </p>
                     {{ end }}
                     {{ if $appdata.keyboardoriented }}
                     <p class="inline column col2">
-                        <img src="/icons/keyboard.svg" class="icon-as-text" alt=""/>
+                        <i class="icon-keyboard icon-as-text" alt=""></i>
                         {{ i18n "keyboardOriented" }}
                     </p>
                     {{ end }}
                     <p class="inline column col2">
-                        <img src="/icons/license.svg" class="icon-as-text" alt=""/>
+                        <i class="icon-license icon-as-text" alt=""></i>
                         {{ i18n "license" }}&nbsp;{{ $appdata.license | markdownify }}
                     </p>
                 </div>
                 <div class="grid flex-center">&nbsp;
-                    {{ range .Params.Technical.Links }}
+                    {{ partial "links.html" .Params.Technical.Links }}
-                    <div>
-                        <a href="{{ .URL | safeURL }}" role="button" class="primary" title="{{ .Title }}">
-                            <img src="/icons/{{ .Icon }}.svg" class="icon-as-text" alt="{{ .Icon }}">{{ .Title }}
-                        </a>&nbsp;
-                    </div>
-                    {{ end }}
                 </div>
             </section>
             {{ if .Params.Download.Show }}
             <!-- download section -->
             <section id="download-section" class="center content-center padding-container text-center">
                 <hr>
-                <h1 class="flex flex-center"><img src="/icons/download.svg" class="icon-larger-text" alt=""/>{{ i18n "download" }}</h1>
+                <h1 class="flex flex-center"><i class="icon-download icon-larger-text" alt=""></i>{{ i18n "download" }}</h1>
                 {{ i18n "downloadApp" (dict "Name" .Name "Platforms" (delimit $appdata.platforms ", ")) }}
                 <br><br>
                 <!-- download table -->
@@ -113,7 +106,7 @@
                     {{ range $download.Categories }}
                     <div class="column app-download col{{ len $download.Categories | safeHTMLAttr }}">
                         <div class="fill-width primary vertical-center app-download-platform">
-                            <img src="/icons/platform/{{ .Platform }}.svg" class="icon-as-text" alt=""/>{{ .Title }}
+                            <i class="icon-{{ lower .Platform }} icon-as-text" alt=""></i>{{ .Title }}
                         </div>
                         <div class="columns-container padding-container">
                             {{ $links := index $download.Links .Name }}

layouts/apps-list.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-    {{ partial "section1.html" (dict "Image" "/img/app0.png" "Content" .Content) }}
+    {{ partial "section1.html" (dict "Image" "/img/app0.webp" "Content" .Content) }}
     <div id="appslist" class="grid center">
     {{ $site := .Site }}
     {{ range .Site.Data.list }}
@@ -7,9 +7,16 @@
         {{ $data := index $site.Data $site.Language.Lang }}
         {{ with index $data.apps $index }}
         <div class="padding-container">
-            <div class="block-preview" style="background-image: url(/img/preview/{{ $index }}.png);">
+            <div class="block-preview" style="background-image: url(/img/preview/{{ $index }}.webp);">
+                <a href="{{ $index }}" class="label-link" alt="{{ .name }}">
                     <div class="label">
-                    <h2 class="flex">&nbsp;<img src="/icons/apps/{{ $index }}.png" class="icon-larger-text" alt=""/> {{ .name }}</h2>
+                        <h2>
+                            <span class="flex app-name" style="float: left">
+                                &nbsp;<img src="/icons/apps/{{ $index }}.svg" loading="lazy" class="icon-larger-text" alt=""/> {{ .name }}
+                            </span>
+                            <span class="right-icon"><i class="icon-lookup icon-as-text" alt="{{ i18n "learnMore" }}"/></i></span> <!-- Hint that you can click -->
+                            &nbsp;
+                        </h2>
                         <p class="show-on-hover">{{ .description }}</p>
                         <p class="show-on-hover">{{ i18n "status" }} {{ .status }}</p>
                         <p class="flex show-on-hover">{{ i18n "worksOn" }}&nbsp;
@@ -18,10 +25,9 @@
                         <p class="flex show-on-hover">{{ i18n "translated" }}&nbsp;
                             {{ partial "translations.html" .translated }}
                         </p>
-                    <div class="show-on-hover">
+                        <p class="primary" role="button"><i class="icon-lookup icon-as-text" alt="{{ i18n "learnMore" }}"></i>{{ i18n "learnMore" }}</p>
-                        <a href="{{ $index }}" role="button" class="primary"><img src="/icons/lookup.svg" class="icon-as-text" alt=""/>{{ i18n "learnMore" }}</a>&nbsp;
-                    </div>
                     </div>
+                </a>
             </div>
         </div>
         {{ end }}

layouts/main-index.html

@@ -6,13 +6,7 @@
             <h1 class="flex flex-center fill-width larger"><img src="/img/icon.png" class="icon-twice-text" alt="Ad5001's icon"/>Ad5001</h1>
             {{ .Params.Description | markdownify }}
             <div class="grid flex-center">&nbsp;
-                {{ range .Params.Links }}
+                {{ partial "links.html" .Params.Links }}
-                <div>
-                    <a href="{{ .URL | safeURL }}" role="button" class="primary" title="{{ .Title }}">
-                        <img src="/icons/{{ .Icon }}.svg" class="icon-as-text" alt="{{ .Icon }}">{{ .Title }}
-                    </a>&nbsp;
-                </div>
-                {{ end }}
             </div>
             <br>
             <br>
@@ -27,7 +21,7 @@
         <div class="column col3 vertical-center padding-container">
             <div class="card blue topleft2bottomright padding-container text-content">
                 <h2 class="flex flex-center text-center">
-                    <img src="/icons/free.svg" class="icon-larger2-text icon-monochrome" alt="Free (as in freedom) icon"/>
+                    <i class="icon-free icon-larger2-text" alt="Free (as in freedom) icon"></i>
                     {{ .Params.Cards.FLOSS.Title }}
                 </h2>
                 <p>
@@ -35,20 +29,14 @@
                 </p>
                 <br>
                 <div class="grid flex-center">&nbsp;
-                    {{ range .Params.Cards.FLOSS.Links }}
+                    {{ partial "links.html" .Params.Cards.FLOSS.Links }}
-                    <div>
-                        <a href="{{ .URL | safeURL }}" role="button" class="primary" title="{{ .Title }}">
-                            <img src="/icons/{{ .Icon }}.svg" class="icon-as-text" alt="{{ .Icon }}">{{ .Title }}
-                        </a>&nbsp;
-                    </div>
-                    {{ end }}
                 </div>
             </div>
         </div>
         <div class="column col3 vertical-center padding-container">
             <div class="card purple top2bottom padding-container text-content">
                 <h2 class="flex flex-center text-center">
-                    <img src="/icons/privacy.svg" class="icon-larger2-text icon-monochrome" alt="Privacy icon"/>
+                    <i class="icon-privacy icon-larger2-text" alt="Privacy icon"></i>
                     {{ .Params.Cards.Privacy.Title }}
                 </h2>
                 <p>
@@ -56,20 +44,14 @@
                 </p>
                 <br>
                 <div class="grid flex-center">&nbsp;
-                    {{ range .Params.Cards.Privacy.Links }}
+                    {{ partial "links.html" .Params.Cards.Privacy.Links }}
-                    <div>
-                        <a href="{{ .URL | safeURL }}" role="button" class="primary" title="{{ .Title }}">
-                            <img src="/icons/{{ .Icon }}.svg" class="icon-as-text" alt="{{ .Icon }}">{{ .Title }}
-                        </a>&nbsp;
-                    </div>
-                    {{ end }}
                 </div>
             </div>
         </div>
         <div class="column col3 vertical-center padding-container">
             <div class="card yellow topright2bottomleft padding-container text-content">
                 <h2 class="flex flex-center text-center">
-                    <img src="/icons/platforms.svg" class="icon-larger2-text icon-monochrome" alt="Privacy icon"/>
+                    <i class="icon-platforms icon-larger2-text" alt="Platforms icon"></i>
                     {{ .Params.Cards.Platforms.Title }}
                 </h2>
                 <p>
@@ -77,13 +59,7 @@
                 </p>
                 <br>
                 <div class="grid flex-center">&nbsp;
-                    {{ range .Params.Cards.Platforms.Links }}
+                    {{ partial "links.html" .Params.Cards.Platforms.Links }}
-                    <div>
-                        <a href="{{ .URL | safeURL }}" role="button" class="primary" title="{{ .Title }}">
-                            <img src="/icons/{{ .Icon }}.svg" class="icon-as-text" alt="{{ .Icon }}">{{ .Title }}
-                        </a>&nbsp;
-                    </div>
-                    {{ end }}
                 </div>
             </div>
         </div>
@@ -95,13 +71,7 @@
     {{ .Params.NewSection.Description | markdownify }}
     </p>
     <div class="grid">&nbsp;
-        {{ range .Params.NewSection.Links }}
+        {{ partial "links.html" .Params.NewSection.Links }}
-        <div>
-            <a href="{{ .URL | safeURL }}" role="button" class="primary" title="{{ .Title }}">
-                <img src="/icons/{{ .Icon }}.svg" class="icon-as-text" alt="{{ .Icon }}">{{ .Title }}
-            </a>&nbsp;
-        </div>
-        {{ end }}
     </div>
 </section>
 {{ end }}

layouts/partials/footer.html

@@ -1,5 +1,5 @@
 <footer>
-    <br><br>
+    <br>
     <div class="columns-container">
         <div class="col3 footer-social-list grid padding-container-point3">
             {{ range .Site.Menus.social }}
@@ -9,9 +9,11 @@
             {{ end }}
         </div>
         <div class="text-center col3">
+            <br>
             {{ .Site.Copyright }}
         </div>
         <div class="col3 text-right padding-container-1">
+            <br>
             {{ .Site.Params.usingTheme }} <a href="/omegamma">Omegamma</a><br>
             {{ .Site.Params.poweredBy }} <a href="https://gohugo.io">Hugo</a>
         </div>

layouts/partials/head.html

@@ -1,5 +1,10 @@
 <head>
     <title>{{ .Site.Title }} - {{ .Title }}</title>
+    <link rel="preload" as="font" crossOrigin="anonymous" href="/fonts/metropolis/Metropolis-Regular.otf">
+    <link rel="preload" as="font" crossOrigin="anonymous" href="/fonts/metropolis/Metropolis-Light.otf">
+    <link rel="preload" as="font" crossOrigin="anonymous" href="/fonts/omegicons/omegicons.eot?71804627">
+    <link rel="preload" as="font" crossOrigin="anonymous" href="/fonts/omegicons/omegicons.woff2?71804627">
+    <link rel="preload" as="font" crossOrigin="anonymous" href="/fonts/omegicons/omegicons.ttf?71804627">
     {{ $mainstyle := resources.Get "/scss/main.scss" | toCSS  | minify | fingerprint }}
     <link rel="stylesheet" href="{{ $mainstyle.Permalink }}">
     {{ if .Site.Params.includeAppsStyle }}

layouts/partials/header.html

@@ -4,12 +4,12 @@
         {{ $currentPage := . }}
         <div class="nav-mobile">
             <a class="navbar-brand" href="{{ .Site.Params.brandWebsite }}" role="button">
-                <img src="/img/icon.png" class="icon-brand" alt="Ad5001's icon"/>
+                <img src="/img/icon.png" loading=lazy class="icon-brand" alt="Ad5001's icon"/>
                 Ad5001
             </a>
         
-            <button id="navbar-toggler">
+            <button id="navbar-toggler" aria-label="Show menu" class="{{ if $white }}text-white{{ end }}">
-                <img src="/icons/menu.svg" class="icon-monochrome" alt="Menu icon"/>
+                <i class="icon-menu icon-larger2-text" alt="Menu icon"></i>
             </button>
         </div>
         
@@ -47,7 +47,7 @@
             {{ if .IsTranslated }}
                 <li class="menu-with-sub">
                     <a href="#" role="button">
-                        <img src="/icons/lang.svg" class="icon-as-text icon-monochrome" alt="{{ i18n "language" }} language flag"/>
+                        <i class="icon-lang icon-as-text" alt="{{ i18n "language" }} language flag"></i>
                         <span>{{ i18n "language" }}</span>
                     </a>
                     <ul class="sub-menu center">

layouts/partials/links.html

@@ -0,0 +1,7 @@
+{{ range . }}
+<div>
+    <a href="{{ .URL | safeURL }}" role="button" class="primary" title="{{ .Title }}">
+        <i class="icon-{{ lower .Icon }} icon-as-text" alt="{{ .Icon }}"></i>{{ .Title }}
+    </a>&nbsp;
+</div>
+{{ end }}

layouts/partials/platforms.html

@@ -1 +1,3 @@
-{{ range . }}<img src="/icons/platform/{{ . }}.svg" alt="{{ . }}" title="{{ . }}" class="icon-larger-text" />{{ end }}
+{{ range . }}
+<i class="icon-{{ lower . }} icon-larger-text" alt="{{ . }}" title="{{ . }}"></i>
+{{ end }}

layouts/partials/section-app-header.html

@@ -6,21 +6,15 @@
     <div class="columns-container">
         <div class="column col3 center text-right vertical-center {{ if .TextWhite }}text-white{{ end }}">
             <br>
-            <h1 class="flex flex-right">&nbsp;<img src="/icons/apps/{{ .AppIndex | safeHTML }}.png" class="icon-larger-text" alt=""/>{{ $appdata.name | safeHTML }}</h1>
+            <h1 class="flex flex-right">&nbsp;<img src="/icons/apps/{{ .AppIndex | safeHTML }}.svg" class="icon-larger-text" alt=""/>{{ $appdata.name | safeHTML }}</h1>
             <h2>{{ $appdata.description | safeHTML }}</h2>
             {{ if .ShowPlatforms }}
             <p class="flex flex-right">{{ i18n "availableOn" }}&nbsp;
-                <span class="icon-monochrome">{{ partial "platforms.html" $appdata.platforms }}</span>
+                {{ partial "platforms.html" $appdata.platforms }}
             </p>
             {{ end }}
             <div class="grid flex-right">&nbsp;
-                {{ range .Links }}
+                {{ partial "links.html" .Links }}
-                <div>
-                    <a href="{{ .URL | safeURL }}" role="button" class="primary" title="{{ .Title }}">
-                        <img src="/icons/{{ .Icon }}.svg" class="icon-as-text" alt="{{ .Icon }}">{{ .Title }}
-                    </a>&nbsp;
-                </div>
-                {{ end }}
             </div>
             <br>
         </div>

static/fonts/omegicons/omegicons.svg

@@ -0,0 +1,70 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>Copyright (C) 2021 by original authors @ fontello.com</metadata>
+<defs>
+<font id="omegicons" horiz-adv-x="1000" >
+<font-face font-family="omegicons" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
+<missing-glyph horiz-adv-x="1000" />
+<glyph glyph-name="about" unicode="&#xe800;" d="M500-150c276 0 500 224 500 500s-224 500-500 500-500-224-500-500 224-500 500-500z m42 250h-84v333h84v-333z m-42 510c29 0 52-23 52-52s-23-52-52-52-52 24-52 52 23 52 52 52z" horiz-adv-x="1000" />
+
+<glyph glyph-name="apps" unicode="&#xe801;" d="M917 600v-667h-834v667h834z m83 250h-1000v-1000h1000v1000z m-667-375h-166v-167h166v167z m250 0h-166v-167h166v167z m250 0h-166v-167h166v167z m-500-250h-166v-167h166v167z m250 0h-166v-167h166v167z" horiz-adv-x="1000" />
+
+<glyph glyph-name="bug" unicode="&#xe802;" d="M295 791c0 33 27 59 59 59 40 0 68-37 58-74-4-14-2-29 6-41 16-28 45-45 82-45 37 0 66 17 82 45 8 12 10 27 6 41-10 37 18 74 58 74 33 0 59-26 59-59 0-28-20-51-46-57-14-3-25-11-32-23-26-42 8-80 38-117-50-24-105-36-165-36-61 0-115 12-166 35 32 39 65 76 39 118-7 12-18 20-32 23-26 6-46 29-46 57z m562-585h99c24 0 44 20 44 43s-20 44-44 44h-100c-24 0-47 16-51 43-4 29 12 48 32 56l93 36c22 9 33 34 25 56-9 22-35 33-57 25l-96-38c-14-5-31-1-39 17-7 18-16 34-25 50-72-42-151-63-238-63-88 0-166 21-238 62-9-15-17-30-25-47-9-22-27-23-39-19l-95 38c-23 8-48-3-57-25-9-22 2-47 24-56l93-36c21-8 36-29 33-53-5-32-29-46-52-46h-100c-24 0-44-20-44-44s20-43 44-43h99c24 0 49-15 53-44 5-30-9-51-31-61l-101-45c-22-9-32-35-22-57s36-31 58-22l107 48c13 6 29 4 37-11 44-75 131-150 256-164 122 14 209 86 253 160 11 18 26 21 40 15l107-48c22-9 48 0 58 22 10 22 0 48-22 57l-101 45c-20 10-36 31-31 58 5 33 29 47 53 47z" horiz-adv-x="1000" />
+
+<glyph glyph-name="code" unicode="&#xe803;" d="M1000 394v-88l-333-165v93l235 116-235 116v93l333-165z m-667-160l-235 116 235 116v93l-333-165v-88l333-165v93z m294 449h-87l-167-666h87l167 666z" horiz-adv-x="1000" />
+
+<glyph glyph-name="documentation" unicode="&#xe804;" d="M473 767c174 0 110-250 110-250s250 68 250-103v-481h-666v834h306z m35 83h-425v-1000h834v599c0 100-277 401-409 401z m200-542h-416v42h416v-42z m0-83h-416v-42h416v42z m0-125h-416v-42h416v42z" horiz-adv-x="1000" />
+
+<glyph glyph-name="download" unicode="&#xe805;" d="M667 392h208l-375-417-375 417h208v458h334v-458z m41-459h-416v-83h416v83z" horiz-adv-x="1000" />
+
+<glyph glyph-name="frameworks" unicode="&#xe806;" d="M875 267v458h-458v125h-292v-125h-125v-83h125v-667h667v-125h83v125h125v292h-125z m-458 375h375v-375h-375v375z m500-584h-709v709h125v-42h-83v-42h83v-83h-83v-42h83v-83h-83v-42h83v-83h-83v-42h83v-83h-83v-42h83v-83h42v83h83v-83h42v83h83v-83h42v83h83v-83h42v83h83v-83h42v83h42v-125z" horiz-adv-x="1000" />
+
+<glyph glyph-name="free" unicode="&#xe807;" d="M767 849c-5-1-6-1-1-1 2 0 6-1 9-1 35-9 36-52 4-102l-7-10 0 7c0 4-1 14-2 23-3 49-6 68-12 74-2 3-4 3-8 1-6-4-12-12-33-42-21-31-32-47-46-64-10-11-14-16-14-15 0 0-1 3-2 5-3 7-7 7-11 1-1-1-7-13-14-26-10-18-14-24-17-27l-4-4 3 6c7 16 11 32 12 45 2 24-5 70-13 81-3 4-5 4-8 1-1-1-8-16-17-35-34-79-47-105-69-137-16-24-22-31-43-54-61-65-79-87-96-121-11-20-20-45-32-84-3-10-5-19-6-20-1-2-1-1-5 6-24 45-37 59-61 65-14 4-34 1-50-8-10-6-23-17-30-26-4-5-9-15-9-17 0-2-12-14-18-21l-6-4-7 5c-15 12-25 26-30 41-2 5-4 15-3 15 0 0 0-1 1-2 3-5 10-8 17-8 9 0 24 7 31 13 10 9 21 24 28 38 3 7 8 16 8 17 0 1-3 0-5-2-8-4-21-11-27-13-6-2-13-4-24-5-13-2-19-4-27-12l-3-3-1 6c-2 14-12 27-26 37l-7 5 3 1c4 1 7 3 12 8 7 7 11 19 12 36 1 5 1 12 1 14l-1 5-5-7c-7-10-13-16-22-22-8-5-9-7-11-10-4-6-4-10-3-15l1-3-2 2c-12 7-26 17-30 22l-2 2 2 0c6 0 12 10 12 18 0 8-4 24-5 24-1 0-1-1-1-2-2-5-6-13-9-18-5-6-6-8-6-11 0-1 0-2-1-2 0 0-6 10-8 14-1 2-2 5-2 9-2 6-3 8-2 2 2-12 6-22 13-32l4-5-3 0c-2 0-6-1-10-3-4-2-8-3-12-3-3 0-6 0-8-1l-2 0 3-2c4-4 13-8 19-9 10-3 21 1 21 8 0 2 1 2 2 0 2-2 13-10 26-19 12-7 13-8 11-8-5 0-10-3-18-9-9-7-11-8-25-13-12-4-12-3 1-7 9-4 18-5 28-5 9 0 14 1 21 5 6 4 9 7 9 13l1 4 3-4c4-6 8-15 9-21 1-2 1-11 2-19 0-8 0-16 1-17l0-2-2 2c-4 3-11 5-17 6-5 0-8 0-24-5-11-3-25-4-48-1l-5 0 7-7c4-4 9-8 12-10 10-8 25-16 35-20 7-2 23-3 29-1 10 2 16 8 18 16l1 3 1-5c5-10 16-23 27-32l4-4-10-9c-11-9-12-12-7-12 3 0 11 2 22 5l9 3 3-3c4-5 10-14 12-22 3-6 3-7 3-18 0-14-1-18-8-31-2-5-3-8-3-9 1-5 12-6 19-3 7 4 7 5 7 25-1 19-1 23-5 35-3 8-8 19-13 25l-3 5 6 2c4 1 7 2 8 2 2 0 14-10 22-17 7-8 14-17 16-24 3-6 4-13 6-29 4-35 9-52 23-73 17-25 42-46 83-69 25-14 55-24 92-29 27-3 48-12 68-27 18-16 37-44 55-83 11-25 19-51 30-101 3-14 6-24 7-25 1-3 6-5 9-5 10 0 29 9 48 24 3 3 6 5 6 5 1-1 0-3-2-6-3-8-9-13-19-16l-4-1 7 0c9 0 13 1 18 5 6 4 11 13 12 23l0 5 16 16 16 15-1-6c0-12-5-19-14-24l-3-2 4 1c11 1 20 8 22 18 1 4 1 13 0 19l-1 4 5 6c3 3 8 9 13 14 4 6 8 10 8 9 0 0 1-3 1-6 0-8-1-13-7-19-5-5-4-5 2-2 5 3 9 6 11 10 2 3 2 5 2 10 1 6 0 8-1 12l-2 5 5 8c8 13 15 28 16 37 1 8-1 13-6 16-2 1-6 2-11 3-41 8-70 19-92 35-19 14-43 34-53 44-14 13-19 20-43 52-11 14-22 29-27 34l-7 10 3 0c17 2 33 9 51 20l9 6 5 0c13 0 27 3 36 8 16 8 21 21 14 35-2 3-2 4-2 2 1-4 0-11-2-15-5-11-19-19-39-21l-3-1 3 2c5 5 17 16 23 23 7 6 23 25 29 33 3 4 3 5 8 6 7 1 18 5 23 8 15 9 20 21 15 34-2 3-4 6-4 7l-2 2 1-4c5-13-3-26-20-34-4-2-8-4-9-4-1 0 1 3 5 8 11 17 22 34 31 50l5 10 9 5c12 5 18 9 24 15 6 7 8 11 8 20 0 8-1 11-7 17-4 4-4 4-1 0 1-3 1-5 1-10 0-6 0-8-2-12-4-7-12-15-22-21-2-1-4-1-4-1 0 0 2 3 4 6 7 15 18 43 26 65l3 10 9 6c16 11 28 24 32 35 6 16 2 28-13 37-5 4-5 3-2 0 5-5 7-11 8-18 0-13-5-24-20-38-8-7-11-9-10-6 1 0 2 6 4 13 6 24 11 48 15 76l3 18 7 7c15 15 26 32 30 47 8 23 0 40-22 46-6 1-7 1-3-1 5-2 10-8 13-14 3-5 3-6 3-14 0-8-1-10-3-15-3-11-8-21-17-33-3-4-6-7-6-7 0 0 0 6 0 12 2 24 3 40 3 67l0 29 3 4c29 33 44 71 39 95-5 20-22 30-48 26z" horiz-adv-x="816" />
+
+<glyph glyph-name="git" unicode="&#xe808;" d="M981 395l-436 436c-13 13-29 19-46 19-16 0-33-6-45-19l-91-90 115-115c27 9 57 2 79-19 21-21 27-52 18-79l111-111c26 9 57 3 79-18 30-30 30-78 0-108-30-30-79-30-109 0-22 22-28 55-16 83l-104 103v-272c8-3 14-8 21-14 29-30 29-79 0-109-30-29-79-29-109 0-30 30-30 79 0 109 8 7 16 13 25 17v274c-9 4-17 9-25 17-22 22-28 56-16 84l-114 113-299-299c-13-13-19-29-19-46 0-16 6-33 19-45l437-437c12-13 29-19 45-19 17 0 33 6 46 19l434 434c13 13 19 30 19 46 0 17-6 33-19 46" horiz-adv-x="1000" />
+
+<glyph glyph-name="keyboard" unicode="&#xe809;" d="M917 392v-417h-834v417h834z m83 83h-1000v-583h1000v583z m-750-125h-125v-83h125v83z m125 0h-83v-83h83v83z m125 0h-83v-83h83v83z m125 0h-83v-83h83v83z m125 0h-83v-83h83v83z m125 0h-83v-83h83v83z m-167-250h-416v-83h416v83z m167 125h-167v-83h167v83z m-583 0h-167v-83h167v83z m125 0h-84v-83h84v83z m125 0h-84v-83h84v83z m125 0h-84v-83h84v83z m-182 409c-43 2-95 3-127 43-16 20-25 47-25 77 0 17 3 36 9 54l51-15c-9-26-12-62 7-85 19-24 58-22 99-25 89-6 126-59 126-111 0-19-5-39-14-55h-66c43 33 44 112-60 117z" horiz-adv-x="1000" />
+
+<glyph glyph-name="lang" unicode="&#xe80a;" d="M775 179c1-12 2-22 4-32-24-4-25 20-4 32z m-181-7h41l-20 60-21-60z m114 254c154 0 292-102 292-243 0-50-18-98-50-136-1-45 25-109 49-155-63 11-153 36-194 61-225-54-388 83-388 230 0 142 138 243 291 243z m-18-316l-60 158h-31l-61-158h34l13 37h59l13-37h33z m166 96l4 15-27 5-3-12c-9 1-18 1-28 0l1 19h30v26h-26l3 14-26 8c-2-7-3-13-5-22h-30v-26h27c-1-8-1-16-2-25-29-11-41-31-41-50 0-22 17-41 44-38 35 3 57 28 71 60 13-8 19-21 14-34-5-11-19-22-46-21v-28c30 0 60 11 71 39 11 27-2 56-31 70z m-52-45c7 8 13 17 17 27-6 0-13 0-19-1 0-9 1-18 2-26z m-437-112c-79 11-149 48-201 103-8 8-13 27-1 34l13 3c10 9-9 42-2 48 23 17 12 37-2 54-6 7-40 42-43 36 3 9-6 32-12 41-9 15-21 24-25 41-2 6-2 26-6 31-2 2-14 7-13 10 11 69 43 131 89 180l31 12c20 29 21 7 38 14 6 0 13 24 19 28 11 7 3 7 1 10-5 7 91 42 93 36 1-5-48-31-42-30-13-2-15-24-13-24 6 1 45 30 63 23 18-6 49 14 62 25 6 5 12 14 20 14 38 0 94-16 107-23 20-12-8-11-11-19-3-6-8-14-11-17-4-6-16-3-14 3 3 7 15 10-3 12-19 1-24 14-43-2-5-4-9-12-13-18-5-9-18-8-23-16-5-8 3-22 13-16 3 2 32-27 28-4-2 15 8 26 8 37 1 8 12 3 9-1-4-5-8-22 2-23 4 0 14 6 18 3-4 0-13-16-13-15-4-2-9 1-6-9 3-10-17-8-21-10-1-1-17 4-17 1-5 4 2 16-3 17-4-7-2-21-12-21-8 0-20-9-25-15-4-4-25-13-28-13 13-1 12-10 11-18-2-18-41-1-40-8 2-7-4-25-5-30-2-6 16-9 15-12 0 1 25 9 27 11l5 12c5 3 10 6 15 8l6 10c2 1 27 5 29 4 6-3 18-15 22-20 1-2 9-5 9-8 3-4-2-6 0-9 5-8 6 17 4 12 0 8 6-3 7-2l-27 27c-9 14 22-7 26-10 4-3 12-26 23-21 6 3 0 6 4 10l19 3c-15-11 11-25 7-23 7-3 11 3 15 1 3-1 28-1 24 3 6-3 3-31-2-35-9-7-49-4-58 2-15 11-13-11-20-14-14-6-36 19-51 20 8-1 1 18 1 20-6 7-43-1-52-2-18-3-37-3-51-14-10-8-10-21-20-27-7-4-14-3-19-8-10-9-21-23-27-35-2-5 3-17 2-24-13-40 3-96 52-102 10-2 21-6 32-5 55 120 190 205 347 205 39 0 77-5 112-15-46 180-209 313-403 313-230 0-417-186-417-416s187-417 417-417l3 0c-21 22-39 47-53 74z m199 543c3 0-4-6-4-6 2-9 8-13 20-18 15-5 2-16-7-13-5 1-29 9-30-1 0-6-23 0-20 6 3 4 2 13 7 19 6 9 13 4 13-1 0-13 14 13 21 14z m-189 12c4-5 29 7 25 6 8 4 1 5-3 7-2 7-3 19-8 23l3 4c-7 10-12-13-12-13l3 1-1-4c3-6 1-9 0-12l-5-3c-2-2 9-3 9-3 0-1-13-3-11-6z m-16 12c-3-3 0-5 3-4 4 2 10 2 11 8l2 4c2 1-2 4-3 5l-6-4-2-1-2-3 0-1-3-4z m110-88c-3 0-16-1-15-3 8-12 17 3 15 3z" horiz-adv-x="1000" />
+
+<glyph glyph-name="license" unicode="&#xe80b;" d="M882 490c-38-63-97-128-171-125-17-30-36-70-56-117l-55-23c39 98 93 207 154 291-27-22-72-68-110-115-46 76-13 153 40 215 1-26 15-50 25-61-4 22-5 62 8 98 30 30 57 53 88 73-3-20 4-43 11-57 1 21 10 60 22 77 38 30 97 57 162 62-3-40-18-107-43-150-21-17-50-28-74-34 20-4 43-4 62 0-11-31-23-60-42-95-28-20-65-31-91-35 19-7 53-10 70-4z m-577-158l27-33 199 116-28 32-198-115z m290 9l-28 32-200-117 27-32 201 117z m195 0c-18-8-36-14-54-16-5-10-10-21-16-33l13-14c26-29 19-71-16-93-32-21-222-141-266-168-3 30-15 58-34 81-20 23-255 307-314 382-19 25-24 52-12 76 11 23 35 38 60 38 38 0 58-27 64-50 7-27-1-52-26-71l56-67 324 185c60 44 76 125 39 188-26 44-73 71-124 71-49 0-33 1-399-186-51-25-85-75-85-134 0-36 13-73 37-103 60-75 315-383 317-386 16-21 18-47 7-70-12-23-34-37-60-37-38 0-59 27-64 51-7 26 0 50 25 69l-53 64c-35-28-54-62-58-102-9-92 64-166 151-166 25 0 54 7 76 21l393 248c40 28 62 74 62 121 0 31-10 60-28 83l-15 18z m-331 419c8 4 17 6 26 6 22 0 41-12 51-31 13-25 10-62-22-80l-213-120c-2 45-24 86-60 113l218 112z m88-557l15 37 10 26-144-84 27-33 92 54z" horiz-adv-x="1000" />
+
+<glyph glyph-name="lookup" unicode="&#xe80c;" d="M992-52l-258 259c48 67 77 149 77 238 0 223-182 405-406 405-223 0-405-182-405-405 0-224 182-406 405-406 85 0 164 26 229 71l260-260 98 98z m-873 497c0 158 129 286 287 286s286-128 286-286-128-287-286-287c-159 0-287 129-287 287z" horiz-adv-x="1000" />
+
+<glyph glyph-name="menu" unicode="&#xe80d;" d="M1000 600h-1000v167h1000v-167z m0-167h-1000v-166h1000v166z m0-333h-1000v-167h1000v167z" horiz-adv-x="1000" />
+
+<glyph glyph-name="open-external" unicode="&#xe80e;" d="M875 308v-416h-875v791h500v-83h-417v-625h709v333h83z m125 500h-458l168-166-290-295 117-118 291 295 172-174v458z" horiz-adv-x="1000" />
+
+<glyph glyph-name="person" unicode="&#xe80f;" d="M868 96c-144 33-277 62-212 184 196 371 52 570-156 570-212 0-353-206-155-570 66-123-72-152-213-184-128-30-132-93-132-204l0-42h1000l0 40c0 112-4 176-132 206z" horiz-adv-x="1000" />
+
+<glyph glyph-name="platforms" unicode="&#xe810;" d="M917 433h-42v84h-458v-542h208v-67c0-22 5-45 21-58h-208c-17 0-33 7-45 18-11 12-18 28-18 44v626c0 16 7 32 18 44 12 11 28 18 45 18h416c17 0 33-7 44-18 12-12 19-28 19-44v-105z m83-93c0 28-23 52-52 52h-229c-29 0-52-24-52-52v-438c0-29 23-52 52-52h229c29 0 52 23 52 52v438z m-642-490h-275l109 125h141v-75c0-24 14-46 25-50z m475 42c-23 0-41 18-41 41s18 42 41 42c23 0 42-19 42-42s-19-41-42-41z m125 125v251h-250v-251h250z m-83 625h-83v125h-709v-625h250v-84h-333v792h875v-208z m-21-292h-41c-12 0-21-9-21-21s9-21 21-21h41c12 0 21 10 21 21s-9 21-21 21z" horiz-adv-x="1000" />
+
+<glyph glyph-name="privacy" unicode="&#xe811;" d="M500 850c-125-125-312-167-458-167 0-357 211-670 458-833 247 163 458 476 458 833-146 0-333 42-458 167z m-371-246c102 11 246 43 371 136v-788c-167 128-344 359-371 652z" horiz-adv-x="1000" />
+
+<glyph glyph-name="touch" unicode="&#xe812;" d="M366 477c45 32 106 10 122-42-28 21-64 21-92 1-28-21-41-55-30-87-43 31-44 97 0 128z m132-450c35-12 144-42 269-135l233 166c-60 84-44 144-104 228-30 42-51 54-77 54-9 0-19-2-30-4l21-29c13-18-14-38-26-20l-19 27c-7 9-15 11-25 11-15 0-32-6-48-9l26-36c13-18-14-37-27-19l-22 31c-6 8-15 11-25 11-15 0-32-7-49-11l27-38c13-18-14-37-27-19l-110 154c-34 48-109-3-73-53l162-227c-17 6-48 12-68 12-62 0-85-68-8-94z m-113 115h-260v583h750v-313c57-23 100-85 125-141v454c0 46-37 83-83 83h-834c-46 0-83-37-83-83v-583c0-46 37-84 83-84h285c-5 29 0 57 17 84z" horiz-adv-x="1000" />
+
+<glyph glyph-name="wrench" unicode="&#xe813;" d="M188 839l157-157c17-78-97-194-177-177l-157 158c-7-25-11-50-11-75 0-67 25-134 76-185 57-56 132-81 206-75 39 3 77-12 105-39l402-403c24-24 56-36 87-36 70 0 126 57 124 126-1 31-13 62-36 85l-403 403c-27 27-41 66-38 104 5 74-20 150-76 206-51 51-118 76-185 76-25 0-50-4-74-11z m729-864c0-23-19-42-42-42-23 0-42 19-42 42s19 42 42 42 42-19 42-42z" horiz-adv-x="1000" />
+
+<glyph glyph-name="firefox" unicode="&#xe814;" d="M500 850c-276 0-500-224-500-500s224-500 500-500 500 224 500 500-224 500-500 500z m334-361c-54 139-186 192-231 189 147-57 182-252 169-310-13 68-53 126-78 141 142-333-201-436-306-320 27-7 80-3 120 23 38 25 41 27 65 29 29 2-2 58-64 49-26-4-68-34-120-14-63 24-61 109 4 84 14 18 4 52 4 52 19 17 42 30 57 38 9 6 34 21 33 51-5 4-13 10-32 8-72-4-77 22-82 34 3 28 22 64 57 81-53 8-95-17-116-49-34 8-55 8-89 2-13 10-27 28-36 49 76 86 187 141 311 141 246 0 344-179 334-278z" horiz-adv-x="1000" />
+
+<glyph glyph-name="linux" unicode="&#xe815;" d="M858 56c-23 19-14 60-38 80 23 140-42 264-119 343-64 67-44 131-44 187 0 90-36 184-147 184-119 0-152-99-153-156-3-136 27-171-52-270-94-116-108-232-86-294-10-11-24-24-49-35-68-30-18-80-37-116-5-10-8-20-8-30 0-32 25-59 70-55 61 6 117-37 153-37 32 0 59 18 71 43 57 14 128 12 186-3 10-28 38-47 69-47 68 0 81 77 159 103 28 9 42 37 42 62 0 16-6 32-17 41z m-382 436c-13 0-24 11-41 24-22 16-45 26-44 43 0 12 15 15 36 28 22 14 30 28 52 28 22 0 29-11 59-24 29-13 50-18 50-32 0-15-31-25-49-36-25-16-38-31-63-31z m70 218c37-6 41-71 23-103l-15 6c8 23 8 60-18 63-16 1-27-20-29-39-6 3-13 5-22 6 3 38 28 72 61 67z m-142-14c28 7 45-26 45-60l-13-8c-2 14-8 38-24 33-17-6-14-45-5-54l-13-7c-17 30-17 89 10 96z m-88-802c-82 37-110 29-125 29-33 0-43 24-31 47 10 19 7 39 5 56-4 25-5 33 19 44 34 14 49 33 61 46 31 39 63-22 89-77 17-35 51-53 61-92 9-37-30-76-79-53z m291 78c-58-28-131-41-186-12-8 23-21 38-35 54 22 6 39 34 19 62-21 30-65 51-109 85-41 31-54 110 2 197-27-77-11-149 3-169 2 41 6 110 62 192 28 42 29 97 29 131l26-18c19-14 35-29 58-29 34 0 52 19 78 35 10 7 26 13 39 22 21-103 111-228 116-298 21 43-6 146-6 146 35-53 38-98 40-153 24-10 51-36 53-70l-10 1c-5 38-109 94-118 22-50-7-32-86-42-137-4-23-13-42-19-61z m202 2c-41-16-69-50-88-71-36-40-85-21-90 17-6 40 15 62 24 108 8 41-1 104 18 111 12-73 86-43 103-23 27 0 29-9 35-35 4-16 9-29 24-45 18-19 13-47-26-62z m-333 542c-27 0-48 18-64 32-9 7 2 20 10 13 16-14 33-28 54-28 25 0 47 21 77 33 11 4 17-11 6-16-29-11-52-34-83-34z" horiz-adv-x="1000" />
+
+<glyph glyph-name="macosx" unicode="&#xe816;" d="M917 116c-33-95-131-263-232-265-67-1-89 40-165 40-77 0-101-38-164-41-107-4-273 243-273 458 0 198 138 296 259 298 64 1 125-44 165-44 39 0 113 54 191 46 33-1 124-13 183-99-156-102-132-314 36-393z m-218 734c-118-5-214-128-200-230 109-9 213 113 200 230z" horiz-adv-x="1000" />
+
+<glyph glyph-name="universal" unicode="&#xe817;" d="M0 850v-792h1000v792h-1000z m917-583h-834v500h834v-500z m-275-292l108-125h-500l108 125h284z" horiz-adv-x="1000" />
+
+<glyph glyph-name="web" unicode="&#xe818;" d="M548 510c-2 2 14 4 17 4 3-1-8-19-17-4z m-90 128l5 1c2-2-3-4-3-6 4-6 1-10 1-14-1-3-5-2-6-3-3-3 10-4 10-4 1-1-15-4-12-7 4-6 34 8 29 7 10 5 2 5-4 8-2 9-3 23-9 28l4 5c-9 12-15-15-15-15z m542-288c0-276-224-500-500-500-276 0-500 224-500 500s224 500 500 500c276 0 500-224 500-500z m-346 224c0 6-8 12-16 1-6-7-5-18-8-23-4-7 24-14 24-7 1 11 30 2 36 1 10-3 27 9 9 16-15 5-23 11-24 21 0 0 8 8 4 7-9-1-25-32-25-16z m262-224c0 43-7 87-15 110-2 7-8 13-15 15-10 5-55-24-62-10-5 9-14-6-24 0-5 2-19 21-25 19-13-5 20-40 28-45 9 6 36 19 42 1 11-33-31-70-52-89-32-29-26 19-48 35-12 9-11 28-23 34-5 3-29 31-29 34l0-7c-4-3-13 12-14 14 0-13 20-32 27-42 11-17 17-41 31-55 8-8 36-38 43-38 8 1 34 19 38 18 27-6-63-133-71-149-7-13 5-46 4-61-1-18-15-24-29-34-14-11-11-31-23-39-21-13-37-56-67-56-9 0-48-15-53 0-4 11-9 19-15 29-5 11 0 21-7 30-4 7-20 21-21 29 0 6 5 26 12 29 9 5 2 19 0 27-2 15-11 27-22 36-16 12-8 22-4 40 0 9-5 20-16 16-24-6-17 19-34 18-12-1-22-9-34-13-14-4-29 4-43 6-59 7-78 74-63 122 2 8-4 23-2 29 7 15 20 31 32 42 7 7 15 5 23 10 12 7 12 23 24 32 16 14 39 14 61 17 12 1 56 11 63 2 0-2 8-25-1-24 18-1 44-31 61-24 8 4 5 31 23 18 11-8 60-12 70-3 7 5 10 39 2 42 5-4-25-5-28-4-5 2-10-4-18-1 5-2-26 15-9 28-7-5-14 2-22-4-6-5 2-8-5-12-13-6-23 22-27 25-5 3-43 30-32 13l33-33c-2-1-9 12-9 2 2 6 1-24-4-14-3 4 3 6 0 11 0 4-10 7-12 9-5 7-19 21-26 25-2 1-32-4-34-5-3-4-6-8-8-13-6-2-12-5-17-9l-7-15c-3-2-32-12-32-12 1 3-20 7-19 13 2 7 9 29 7 36-2 9 45-11 48 10 1 10 2 21-13 22 3 0 29 10 33 15 6 7 20 19 30 19 12 0 10 17 15 25 6-2-3-16 4-21-1 4 18-2 20-1 4 2 29 1 25 12-4 11 2 8 7 10 0 0 15 26 17 18-2 8-17-3-23-3-13 1-7 22-2 28 3 5-11 10-11 1 0-13-13-26-10-44 5-28-30 7-33 5-12-7-22 9-16 18 7 10 21 9 28 20 4 7 9 16 16 22 22 18 28 3 50 1 22-2 8-5 5-13-3-8 12-11 17-4 3 4 9 13 12 20 4 10 38 9 14 23-16 9-84 28-129 28-10 0-17-11-24-18-15-12-53-36-74-29-22 8-68-27-76-27-2-1 1 26 15 28-6-1 52 29 51 36-2 7-117-34-112-43 3-4 13-4 0-12-8-5-16-33-23-33-21-10-22 18-46-17l-37-15c-55-59-94-134-107-216-1-4 13-10 15-12 5-6 5-30 7-38 6-20 20-31 31-49 7-11 17-38 14-49 4 7 44-34 52-43 17-20 30-45 2-65-9-6 14-47 2-57l-15-4c-15-9-8-31 1-41 76-79 183-128 301-128 230 0 416 186 416 416z m-479 265c5 2 12 2 13 9 0 6 1 2 3 4 1 2-3 6-5 6-2 1-4-3-6-4l-3-1-3-3 1-2-4-5c-3-3 0-6 4-4z" horiz-adv-x="1000" />
+
+<glyph glyph-name="windows" unicode="&#xe819;" d="M0 350v360l417 57v-417h-417z m458 0h542v500l-542-75v-425z m-41-42h-417v-318l417-57v375z m41 0v-383l542-75v458h-542z" horiz-adv-x="1000" />
+
+<glyph glyph-name="github" unicode="&#xe81b;" d="M500 850c-276 0-500-224-500-500 0-221 143-408 342-475 25-4 33 11 33 25v93c-139-31-168 59-168 59-23 58-56 73-56 73-45 31 4 30 4 30 50-3 77-51 77-51 44-77 117-55 145-42 5 32 17 55 32 67-111 13-228 56-228 247 0 55 20 99 52 134-6 13-23 64 4 133 0 0 42 13 138-52 40 12 83 17 125 17 43 0 85-5 125-17 96 65 138 52 138 52 27-69 10-120 5-133 32-35 51-79 51-134 0-192-117-234-228-247 18-15 34-45 34-92v-137c0-14 8-29 33-24 199 66 342 253 342 474 0 276-224 500-500 500z" horiz-adv-x="1000" />
+
+<glyph glyph-name="mail" unicode="&#xe81c;" d="M500 320l-499 405h998l-499-405z m0-107l-500 405v-643h1000v643l-500-405z" horiz-adv-x="1000" />
+
+<glyph glyph-name="mastodon" unicode="&#xe81d;" d="M883 491c0 178-117 230-117 230-114 53-418 52-532 0 0 0-116-52-116-230 0-212-12-475 193-530 74-19 138-23 189-20 93 5 145 33 145 33l-3 67s-66-20-141-18c-74 2-152 8-164 99-1 8-2 16-2 25 157-38 291-16 327-12 103 12 193 76 204 133 18 92 17 223 17 223z m-138-227h-85v207c0 91-117 94-117-13v-114h-85v114c0 107-117 104-117 13v-207h-86c0 224-9 268 34 318 47 53 146 56 190-11l21-36 21 36c44 68 143 64 190 11 44-50 34-95 34-318z" horiz-adv-x="1000" />
+
+<glyph glyph-name="twitter" unicode="&#xe81e;" d="M1000 660c-37-16-76-27-118-32 43 25 75 65 90 113-39-23-83-40-130-49-37 39-91 64-150 64-132 0-229-123-199-251-171 8-322 90-423 214-54-92-28-213 63-274-33 1-65 10-93 26-2-95 66-184 165-204-29-8-61-10-93-4 26-81 102-140 192-142-86-68-195-98-304-85 91-58 199-92 315-92 380 0 596 321 583 610 40 29 75 65 102 106z" horiz-adv-x="1000" />
+</font>
+</defs>
+</svg>