Added preload directives, load SVG symbols from external file

3 files changed, 14 insertions, 11 deletions

diff --git a/templates/symbols.svg b/content/symbols.svg
index acc7f4f..acc7f4f 100644
--- a/templates/symbols.svg
+++ b/content/symbols.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>