From f3b2705e8cdd3bf3749816e09a5641aa3451e99f Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 28 Apr 2021 06:53:58 +0200
Subject: Added preload directives, load SVG symbols from external file

---
 content/symbols.svg          | 73 ++++++++++++++++++++++++++++++++++++++++++++
 templates/base.html          | 15 +++++----
 templates/layouts/index.html | 10 +++---
 templates/symbols.svg        | 73 --------------------------------------------
 4 files changed, 87 insertions(+), 84 deletions(-)
 create mode 100644 content/symbols.svg
 delete mode 100644 templates/symbols.svg

diff --git a/content/symbols.svg b/content/symbols.svg
new file mode 100644
index 0000000..acc7f4f
--- /dev/null
+++ b/content/symbols.svg
@@ -0,0 +1,73 @@
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
+   <defs>
+      <symbol id="logo" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+         <path fill="currentColor" stroke="none" d="M 3.879982,13 H 6.0160181 L 2.6160361,3 H 0.48 Z" />
+         <path fill="currentColor" stroke="none" d="m 9.91599,13 h 2.168035 L 8.584018,3 H 6.4159819 Z" />
+         <path fill="currentColor" stroke="none" d="M 9.915975,13 H 12.08401 L 15.584018,3 h -2.168036 z" />
+      </symbol>
+
+      <symbol id="icon-arrow-down-right" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+         <path d="m5.25 11.75h6.5v-6.5m0 6.5-7.5-7.5" fill="none" stroke="currentColor" />
+      </symbol>
+
+      <symbol id="icon-arrow-up" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+         <path d="m12.25 7.25-4.5-4.5-4.5 4.5m4.5-4.5v10.5" fill="none" stroke="currentColor" />
+      </symbol>
+
+      <symbol id="icon-arrow-right" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+         <path d="m8.75 3.75 4.5 4.5-4.5 4.5m-6-4.5h10.5" fill="none" stroke="currentColor" />
+      </symbol>
+
+      <symbol id="icon-envelope" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+         <path
+            d="m1.25 3.5c0-0.4155 0.3345-0.75 0.75-0.75h12c0.4155 0 0.75 0.3345 0.75 0.75v8.5c0 0.4155-0.3345 0.75-0.75 0.75h-12c-0.4155 0-0.75-0.3345-0.75-0.75zm0 0.25 5.2845 4.3681c1.0065 0.83198 1.9181 0.82912 2.9676-0.03704l5.2479-4.3311"
+            fill="none" stroke="currentColor" />
+      </symbol>
+
+      <symbol id="icon-hash" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+         <path d="m4.7501 14.25 0.99984-12m4 12 1.0002-12m-8.5001 3.5h11m-11 5h11" fill="none" stroke="currentColor" />
+      </symbol>
+
+      <symbol id="icon-messages" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+         <path
+            d="m1.5 1.25h9c0.4155 0 0.75 0.3345 0.75 0.75v6.9999c0 0.4155-0.3345 0.75-0.75 0.75h-7.25l-2.5 2.5001v-10.25c0-0.4155 0.3345-0.75 0.75-0.75z"
+            fill="none" stroke="currentColor" />
+         <path d="m5.25 12.75h7.5l2.5 2.5001v-10.25c0-0.4155-0.3345-0.75-0.75-0.75h-0.25" fill="none"
+            stroke="currentColor" />
+      </symbol>
+
+      <symbol id="icon-arrow-up-right" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+         <path d="m5.25 4.25h6.5v6.5m0-6.5-7.5 7.5" fill="none" stroke="currentColor" />
+      </symbol>
+
+      <symbol id="icon-parallelogram" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+         <path d="m15.25 4.25-5 7.5h-9.5l5-7.5z" fill="none" stroke="currentColor" />
+      </symbol>
+
+      <symbol id="icon-video" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+         <path d="m6.75 6.25 2.5 2-2.5 2z" fill="currentColor" stroke="currentColor" />
+         <rect x=".75" y="2.25" width="14.5" height="12" ry=".75" fill="none" stroke="currentColor" />
+      </symbol>
+
+      <symbol id="icon-graph" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+         <path
+            d="m15.25 10.5a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm-10 2.5a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm2.5-10a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm-2.5378 9.4469 5.5686-1.3921m0.61265-2.1613-4.2845-4.2845m-2.1627 0.6058-1.4004 5.6015"
+            fill="none" stroke="currentColor" />
+      </symbol>
+
+      <symbol id="icon-git-branch" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+         <path
+            d="m12.25 5.75c0 3.5899-2.9101 6.5-6.5 6.5m3e-7 0c0 1.1046-0.89543 2-2 2s-2-0.89543-2-2 0.89543-2 2-2 2 0.89543 2 2zm8.5-8.5c0 1.1046-0.89543 2-2 2s-2-0.89543-2-2 0.89543-2 2-2 2 0.89543 2 2zm-10.5 6.4998v-7.9998"
+            fill="none" stroke="currentColor" />
+      </symbol>
+
+      <symbol id="icon-smile" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
+         <path d="m11.309 9.7658c-0.63143 1.1808-1.8764 1.9842-3.3091 1.9842-1.4381 0-2.6872-0.80955-3.3163-1.9978"
+            fill="none" stroke="currentColor" />
+         <circle cx="8" cy="8" r="6.75" fill="none" stroke="currentColor" />
+         <path d="m10.25 5.75v1.5" fill="none" stroke="currentColor" />
+         <path d="m5.75 5.75v1.5" fill="none" stroke="currentColor" />
+      </symbol>
+
+   </defs>
+</svg>
diff --git a/templates/base.html b/templates/base.html
index 4ebd507..039b0d1 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -28,6 +28,13 @@
 
     <title>$if(section.is_index)$$else$$title$ – $endif$$site.title$</title>
 
+    <link rel="preload" href="/style.css" as="style" />
+    <link rel="preload" href="/symbols.svg" as="other" type="image/svg+xml" />
+    <link rel="preload" href="/IBMPlexSans-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
+    <link rel="preload" href="/IBMPlexSans-Medium.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
+    <link rel="preload" href="/IBMPlexSans-Bold.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
+    <link rel="preload" href="/GaretVariable.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
+
     <link rel="stylesheet" href="/style.css" />
 </head>
 
@@ -36,7 +43,7 @@
         <a class="c-outer-button c-outer-button--inverted" href="/" title="$site.title$">
             <span class="c-outer-button__icon">
                 <svg class="c-outer-button__icon-symbol">
-                    <use href="#logo"></use>
+                    <use href="/symbols.svg#logo"></use>
                 </svg>
             </span>
         </a>
@@ -70,16 +77,12 @@ ${layouts/page()}
             <a class="c-outer-button" href="#" title="To the top">
                 <span class="c-outer-button__icon">
                     <svg class="c-outer-button__icon-symbol o-icon">
-                        <use href="#icon-arrow-up"></use>
+                        <use href="/symbols.svg#icon-arrow-up"></use>
                     </svg>
                 </span>
             </a>
         </footer>
     </main>
-
-    <div class="u-vh" aria-hidden="true">
-        ${symbols.svg()}
-    </div>
 </body>
 
 </html>
diff --git a/templates/layouts/index.html b/templates/layouts/index.html
index 1099d27..18b1c69 100644
--- a/templates/layouts/index.html
+++ b/templates/layouts/index.html
@@ -24,7 +24,7 @@
                         $endif$
                             $if(it.icon)$
                                 <svg class="c-card__icon o-icon">
-                                    <use href="#icon-$it.icon$"></use>
+                                    <use href="/symbols.svg#icon-$it.icon$"></use>
                                 </svg>
                             $endif$
                             <div class="c-card__content">
@@ -33,7 +33,7 @@
                             </div>
                             $if(it.url)$
                                 <svg class="c-card__icon o-icon">
-                                    <use href="#icon-arrow-up-right"></use>
+                                    <use href="/symbols.svg#icon-arrow-up-right"></use>
                                 </svg>
                             $endif$
                         $if(it.url)$
@@ -55,7 +55,7 @@ $body$
         <a class="c-outer-button" href="#projects">
             <span class="c-outer-button__icon">
                 <svg class="c-outer-button__icon-symbol o-icon">
-                    <use href="#icon-arrow-down-right"></use>
+                    <use href="/symbols.svg#icon-arrow-down-right"></use>
                 </svg>
             </span>
             <span class="c-outer-button__content">
@@ -73,7 +73,7 @@ $body$
                 <div class="c-project__card c-card">
                     $if(it.category.icon)$
                         <svg class="c-card__icon o-icon">
-                            <use href="#icon-$it.category.icon$"></use>
+                            <use href="/symbols.svg#icon-$it.category.icon$"></use>
                         </svg>
                     $endif$
                     <div class="c-card__content">
@@ -81,7 +81,7 @@ $body$
                         <strong class="u-db">$it.title$</strong>
                     </div>
                     <svg class="c-card__icon o-icon">
-                        <use href="#icon-arrow-right"></use>
+                        <use href="/symbols.svg#icon-arrow-right"></use>
                     </svg>
                 </div>
             </a>
diff --git a/templates/symbols.svg b/templates/symbols.svg
deleted file mode 100644
index acc7f4f..0000000
--- a/templates/symbols.svg
+++ /dev/null
@@ -1,73 +0,0 @@
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
-   <defs>
-      <symbol id="logo" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
-         <path fill="currentColor" stroke="none" d="M 3.879982,13 H 6.0160181 L 2.6160361,3 H 0.48 Z" />
-         <path fill="currentColor" stroke="none" d="m 9.91599,13 h 2.168035 L 8.584018,3 H 6.4159819 Z" />
-         <path fill="currentColor" stroke="none" d="M 9.915975,13 H 12.08401 L 15.584018,3 h -2.168036 z" />
-      </symbol>
-
-      <symbol id="icon-arrow-down-right" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
-         <path d="m5.25 11.75h6.5v-6.5m0 6.5-7.5-7.5" fill="none" stroke="currentColor" />
-      </symbol>
-
-      <symbol id="icon-arrow-up" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
-         <path d="m12.25 7.25-4.5-4.5-4.5 4.5m4.5-4.5v10.5" fill="none" stroke="currentColor" />
-      </symbol>
-
-      <symbol id="icon-arrow-right" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
-         <path d="m8.75 3.75 4.5 4.5-4.5 4.5m-6-4.5h10.5" fill="none" stroke="currentColor" />
-      </symbol>
-
-      <symbol id="icon-envelope" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
-         <path
-            d="m1.25 3.5c0-0.4155 0.3345-0.75 0.75-0.75h12c0.4155 0 0.75 0.3345 0.75 0.75v8.5c0 0.4155-0.3345 0.75-0.75 0.75h-12c-0.4155 0-0.75-0.3345-0.75-0.75zm0 0.25 5.2845 4.3681c1.0065 0.83198 1.9181 0.82912 2.9676-0.03704l5.2479-4.3311"
-            fill="none" stroke="currentColor" />
-      </symbol>
-
-      <symbol id="icon-hash" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
-         <path d="m4.7501 14.25 0.99984-12m4 12 1.0002-12m-8.5001 3.5h11m-11 5h11" fill="none" stroke="currentColor" />
-      </symbol>
-
-      <symbol id="icon-messages" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
-         <path
-            d="m1.5 1.25h9c0.4155 0 0.75 0.3345 0.75 0.75v6.9999c0 0.4155-0.3345 0.75-0.75 0.75h-7.25l-2.5 2.5001v-10.25c0-0.4155 0.3345-0.75 0.75-0.75z"
-            fill="none" stroke="currentColor" />
-         <path d="m5.25 12.75h7.5l2.5 2.5001v-10.25c0-0.4155-0.3345-0.75-0.75-0.75h-0.25" fill="none"
-            stroke="currentColor" />
-      </symbol>
-
-      <symbol id="icon-arrow-up-right" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
-         <path d="m5.25 4.25h6.5v6.5m0-6.5-7.5 7.5" fill="none" stroke="currentColor" />
-      </symbol>
-
-      <symbol id="icon-parallelogram" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
-         <path d="m15.25 4.25-5 7.5h-9.5l5-7.5z" fill="none" stroke="currentColor" />
-      </symbol>
-
-      <symbol id="icon-video" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
-         <path d="m6.75 6.25 2.5 2-2.5 2z" fill="currentColor" stroke="currentColor" />
-         <rect x=".75" y="2.25" width="14.5" height="12" ry=".75" fill="none" stroke="currentColor" />
-      </symbol>
-
-      <symbol id="icon-graph" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
-         <path
-            d="m15.25 10.5a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm-10 2.5a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm2.5-10a2.25 2.25 0 0 1-2.25 2.25 2.25 2.25 0 0 1-2.25-2.25 2.25 2.25 0 0 1 2.25-2.25 2.25 2.25 0 0 1 2.25 2.25zm-2.5378 9.4469 5.5686-1.3921m0.61265-2.1613-4.2845-4.2845m-2.1627 0.6058-1.4004 5.6015"
-            fill="none" stroke="currentColor" />
-      </symbol>
-
-      <symbol id="icon-git-branch" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
-         <path
-            d="m12.25 5.75c0 3.5899-2.9101 6.5-6.5 6.5m3e-7 0c0 1.1046-0.89543 2-2 2s-2-0.89543-2-2 0.89543-2 2-2 2 0.89543 2 2zm8.5-8.5c0 1.1046-0.89543 2-2 2s-2-0.89543-2-2 0.89543-2 2-2 2 0.89543 2 2zm-10.5 6.4998v-7.9998"
-            fill="none" stroke="currentColor" />
-      </symbol>
-
-      <symbol id="icon-smile" viewBox="0 0 16 16" preserveAspectRatio="xMinYMid">
-         <path d="m11.309 9.7658c-0.63143 1.1808-1.8764 1.9842-3.3091 1.9842-1.4381 0-2.6872-0.80955-3.3163-1.9978"
-            fill="none" stroke="currentColor" />
-         <circle cx="8" cy="8" r="6.75" fill="none" stroke="currentColor" />
-         <path d="m10.25 5.75v1.5" fill="none" stroke="currentColor" />
-         <path d="m5.75 5.75v1.5" fill="none" stroke="currentColor" />
-      </symbol>
-
-   </defs>
-</svg>
-- 
cgit v1.2.3-70-g09d2