From 2ef01327ee39cb5de96941bd0a586699363a6920 Mon Sep 17 00:00:00 2001
From: ParamagicDev <konnor5456@gmail.com>
Date: Fri, 28 Jan 2022 20:26:48 -0500
Subject: [PATCH] fix the flash on docs site

---
 docs/src/_partials/_font_loader.erb     | 30 ------------
 docs/src/_partials/_head.erb            | 64 ++-----------------------
 docs/src/_partials/_top_nav.erb         |  2 +-
 docs/src/frontend/styles/components.css | 34 +++++++++++++
 docs/src/frontend/styles/defaults.css   | 13 +++++
 docs/src/frontend/styles/variables.css  |  2 +-
 6 files changed, 52 insertions(+), 93 deletions(-)
 delete mode 100644 docs/src/_partials/_font_loader.erb

diff --git a/docs/src/_partials/_font_loader.erb b/docs/src/_partials/_font_loader.erb
deleted file mode 100644
index 796624b9..00000000
--- a/docs/src/_partials/_font_loader.erb
+++ /dev/null
@@ -1,30 +0,0 @@
-<!-- https://fonts.gstatic.com is the font file origin -->
-<!-- It may not have the same origin as the CSS file (https://fonts.googleapis.com) -->
-<style>
-  @font-face {
-    font-family: 'Montserrat';
-    font-style: normal;
-    font-weight: 400;
-    font-display: swap;
-    src: url(https://fonts.gstatic.com/s/montserrat/v21/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw0aXx-p7K4KLjztg.woff) format('woff');
-  }
-</style>
-
-<link rel="preconnect" href="https://fonts.googleapis.com">
-<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-
-<!-- We use the full link to the CSS file in the rest of the tags -->
-<link rel="preload"
-      as="font"
-      href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" />
-
-<link rel="stylesheet"
-      as="font"
-      href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"
-      media="print" onload="this.media='all'" />
-
-<noscript>
-  <link rel="stylesheet"
-        as="stylesheet"
-        href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" />
-</noscript>
diff --git a/docs/src/_partials/_head.erb b/docs/src/_partials/_head.erb
index 28fa5e98..1198eda4 100644
--- a/docs/src/_partials/_head.erb
+++ b/docs/src/_partials/_head.erb
@@ -18,74 +18,16 @@
 <meta property="twitter:card" content="summary_large_image">
 <meta property="twitter:title" content="<%= site.metadata.title %>">
 
-<!-- Fonts -->
-<%= render "font_loader" %>
-
-<!-- Critical CSS -->
-<style>
-  html {
-    height: 100%;
-  }
-
-  body {
-    font-family: var(--font-sans);
-    min-height: 100%;
-    display: grid;
-    grid-template-rows: auto 1fr auto;
-    grid-template-columns: 100%;
-    margin: 0;
-  }
-
-  :where(:not(:defined)) {
-    display: none;
-  }
-
-  /* layout components */
-  :root {
-    --container-min-width: 0px;
-    --container-relative-width: 75%;
-    --container-max-width: var(--xl2);
-  }
-
-  .container {
-    width: clamp(var(--container-min-width), var(--container-relative-width), var(--container-max-width));
-    margin-right: auto;
-    margin-left: auto;
-  }
-
-  .container--xs {
-    --container-max-width: var(--xs);
-  }
-
-  .container--sm {
-    --container-max-width: var(--sm);
-  }
-
-  .container--md {
-    --container-max-width: var(--md);
-  }
-
-  .container--lg {
-    --container-max-width: var(--lg);
-  }
-
-  .container--xl {
-    --container-max-width: var(--xl);
-  }
-</style>
-
 <!-- App CSS -->
-<link rel="preload" data-turbolinks-track="reload" href="/frontend/styles/index.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
-<noscript><link rel="stylesheet" data-turbolinks-track="reload" href="/frontend/styles/index.css"></noscript>
+<link rel="stylesheet" data-turbolinks-track="reload" href="/frontend/styles/index.css">
 
 <!-- Shoelace -->
-<link rel="preload" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.64/dist/themes/light.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
-<noscript><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.64/dist/themes/light.css"></noscript>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.64/dist/themes/light.css">
 
 <%= render "importmaps" %>
 
 <!-- App JS -->
-<script type="module" defer data-turbolinks-track="reload">
+<script type="module" data-turbolinks-track="reload">
   import { Controller, Application } from "stimulus"
   import { setBasePath } from 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.64/dist/utilities/base-path.js';
   setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.64/dist/');
diff --git a/docs/src/_partials/_top_nav.erb b/docs/src/_partials/_top_nav.erb
index cb826533..8edd7d9d 100644
--- a/docs/src/_partials/_top_nav.erb
+++ b/docs/src/_partials/_top_nav.erb
@@ -32,7 +32,7 @@
       <%= render "categories" %>
     </div>
     <a target="_blank" rel="noreferrer noopener" href="<%= site.metadata.github_url %>" class="nav-link top-nav__github">
-      <sl-icon name="github">Link to GitHub</sl-icon>
+      <sl-icon name="github" label="Link to GitHub"></sl-icon>
     </a>
   </div>
 </nav>
diff --git a/docs/src/frontend/styles/components.css b/docs/src/frontend/styles/components.css
index c1d3e14e..c484d9a8 100644
--- a/docs/src/frontend/styles/components.css
+++ b/docs/src/frontend/styles/components.css
@@ -1,3 +1,35 @@
+  /* layout components */
+  :root {
+    --container-min-width: 0px;
+    --container-relative-width: 75%;
+    --container-max-width: var(--xl2);
+  }
+
+  .container {
+    width: clamp(var(--container-min-width), var(--container-relative-width), var(--container-max-width));
+    margin-right: auto;
+    margin-left: auto;
+  }
+
+  .container--xs {
+    --container-max-width: var(--xs);
+  }
+
+  .container--sm {
+    --container-max-width: var(--sm);
+  }
+
+  .container--md {
+    --container-max-width: var(--md);
+  }
+
+  .container--lg {
+    --container-max-width: var(--lg);
+  }
+
+  .container--xl {
+    --container-max-width: var(--xl);
+  }
 .btn {
   display: inline-flex;
   align-items: stretch;
@@ -129,6 +161,8 @@ a:hover > .logo__image {
 
 .top-nav__github {
   font-size: 2rem;
+  width: 2rem;
+  height: 2rem;
 }
 
 .top-nav__links {
diff --git a/docs/src/frontend/styles/defaults.css b/docs/src/frontend/styles/defaults.css
index 79f1315f..f0fb4dbd 100644
--- a/docs/src/frontend/styles/defaults.css
+++ b/docs/src/frontend/styles/defaults.css
@@ -1,3 +1,16 @@
+html {
+  height: 100%;
+}
+
+body {
+  font-family: var(--font-sans);
+  min-height: 100%;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: 100%;
+  margin: 0;
+}
+
 [hidden] {
   display: none !important;
 }
diff --git a/docs/src/frontend/styles/variables.css b/docs/src/frontend/styles/variables.css
index 1377a66e..cf6b148b 100644
--- a/docs/src/frontend/styles/variables.css
+++ b/docs/src/frontend/styles/variables.css
@@ -9,7 +9,7 @@
 
   /* fonts */
   --font-mono: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
-  --font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif,
+  --font-sans: Roboto, -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif,
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
   --font-serif: Georgia, 'Times New Roman', serif;