fix the flash on docs site

KonnorRogers · Jan 29, 2022 · 2ef0132 · 2ef0132
1 parent 0d58773
commit 2ef0132
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 93 deletions.
diff --git a/docs/src/_partials/_font_loader.erb b/docs/src/_partials/_font_loader.erb
diff --git 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/[email protected]/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/[email protected]/dist/themes/light.css"></noscript>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/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/[email protected]/dist/utilities/base-path.js';
   setBasePath('https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/dist/');

diff --git 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
@@ -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
@@ -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
@@ -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;