Added preload directives, load SVG symbols from external file

1 files changed, 9 insertions, 6 deletions

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>