Make CSS simpler again

src/errors/not_found/mod.rs

@@ -22,7 +22,9 @@ pub fn handler<B: 'static>(
             asset::Css::Shared("not-found.css"),
             array::from_fn(|_| {
                 (html! {
-                   .frame { "404" }
+                   .frame {
+                        a href="/" { "404" }
+                    }
                    .square .black {}
                    .square .magenta {}
                    .square .magenta {}

src/errors/not_found/not-found.css

@@ -1,7 +1,3 @@
-html {
-  font-weight: bold;
-}
-
 .face {
   display: grid;
   grid-template-columns: repeat(2, 1fr);

src/page/cube/cube.css

@@ -1,28 +1,11 @@
 html {
-  font-size: 450%;
+  font-size: min(9vw, 9vh, 4.5em);
   overscroll-behavior: none;
 }
 
-@media screen and (max-width: 400px) {
-  html {
-    font-size: 200%;
-  }
-}
-
-@media screen and (max-width: 800px) and (min-width: 400px) {
-  html {
-    font-size: 300%;
-  }
-}
-
 a {
-  /* Black on a white background. */
-  color: black;
-}
-
-a:hover {
-  /* The frame changes color only. */
   color: black;
+  font-weight: bold;
 }
 
 .frame {
@@ -36,6 +19,10 @@ a:hover {
   user-select: none;
 }
 
+.frame:hover {
+  background-color: yellow;
+}
+
 .scene {
   height: 100%;
   width: 100%;

src/page/page.css

@@ -2,14 +2,14 @@
   font-display: block;
   font-family: "BaiJam";
   font-weight: normal;
-  src: url("/assets/BaiJamjureeMedium.woff2");
+  src: url("/assets/BaiJamjureeMedium.woff2") format("woff2");
 }
 
 @font-face {
   font-display: block;
   font-family: "BaiJam";
   font-weight: bold;
-  src: url("/assets/BaiJamjureeBold.woff2");
+  src: url("/assets/BaiJamjureeBold.woff2") format("woff2");
 }
 
 html {
@@ -25,11 +25,5 @@ html {
 }
 
 a {
-  color: yellow;
-  font-weight: bold;
   text-decoration-line: none;
-}
-
-a:hover {
-  font-style: italic;
 }

src/page/text/text.css

@@ -26,7 +26,7 @@ nav {
 
 nav a {
   color: black;
-  font-style: normal;
+  font-weight: bold;
   margin-right: .6em;
 }
 
@@ -34,6 +34,14 @@ nav a:last-child {
   margin-right: 0;
 }
 
+a {
+  color: yellow;
+}
+
+a:hover {
+  font-style: italic;
+}
+
 footer {
   margin-bottom: 3em;
 }

src/routes/index/index.css

@@ -1,11 +1,3 @@
-a:hover {
-  font-style: normal;
-}
-
-.frame:hover {
-  background-color: yellow;
-}
-
 .face::after {
   z-index: -1;
 
@@ -71,4 +63,4 @@ a:hover {
 .left::after {
   background: linear-gradient(to bottom, cyan, blue);
   mask-image: linear-gradient(to left, blue, transparent);
-}
+}