Merge pull request #1447 from cachix/work/keys/fix-website

fix: Website UI bugs

docs/assets/extra.css

@@ -2,20 +2,6 @@
 @tailwind components;
 @tailwind utilities;
 
-body {
-    /* Override the mkdocs default of 0.5rem */
-    font-size: 0.8rem; /* 16px */
-}
-
-/* hide site name */
-.md-header__topic {
-    visibility: hidden;
-}
-/* mobile hide site name */
-.md-nav__title {
-    font-size: 0!important;
-}
-
 /* mobile make code snippets scrollable */
 .image-wrapper {
     overflow: auto!important;

docs/assets/output.css

@@ -930,24 +930,6 @@ html {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
-body {
-  /* Override the mkdocs default of 0.5rem */
-  font-size: 0.8rem;
-  /* 16px */
-}
-
-/* hide site name */
-
-.md-header__topic {
-  visibility: hidden;
-}
-
-/* mobile hide site name */
-
-.md-nav__title {
-  font-size: 0!important;
-}
-
 /* mobile make code snippets scrollable */
 
 .image-wrapper {

docs/assets/top-level.css

@@ -0,0 +1,21 @@
+/*
+This file is intended for site-wide, top-level CSS properties.
+It should not be used in conjunction with Tailwind CSS,
+as mixing both caused UI anomalies.
+*/
+
+body {
+    /* Override the mkdocs default of 0.5rem */
+    font-size: 0.8rem; /* 16px */
+}
+
+/* hide site name */
+/* Explicitly specifying what we want to hide to fix certain UI elements */
+.md-nav--lifted > label:nth-child(1) {
+    font-size: 0;
+}
+
+/* hide site name */
+.md-header__topic {
+    visibility: hidden;
+}

docs/overrides/home.html

@@ -3,6 +3,7 @@
 {% block styles %}
 {{ super () }}
 <link rel="stylesheet" href="/assets/github-dark.min.css">
+<link rel="stylesheet" href="/assets/output.css" />
 
 <style>
   /* Hide TOC */

mkdocs.yml

@@ -5,7 +5,7 @@ repo_name: 'cachix/devenv'
 repo_url: 'https://github.com/cachix/devenv'
 edit_uri: 'edit/main/docs'
 extra_css:
-  - assets/output.css
+  - assets/top-level.css
 theme:
   name: material
   logo: assets/logo.webp