feat: spruce up design

src/assets/styles/components/badge-grid.css

@@ -2,6 +2,7 @@
   display: grid;
   gap: var(--sizing-md);
   grid-template-columns: repeat(3,minmax(0,1fr));
+  margin-top: var(--sizing-2xl);
 
   &  > * {
     display: flex;

src/assets/styles/components/banners.css

@@ -19,7 +19,7 @@
       vertical-align: middle;
       height: var(--sizing-lg);
       width: var(--sizing-lg);
-      margin-right: var(--sizing-xs);
+      margin-right: var(--sizing-sm);
     }
   }
 

src/assets/styles/components/forms.css

@@ -7,14 +7,13 @@ input[type="text"],
 input[type="email"],
 input[type="search"],
 textarea {
-  font-family: var(--font-sans);
+  font-family: var(--font-mono);
   color: var(--text-color);
   background-color: var(--background-color);
   border: 1px solid var(--accent-color);
   padding: var(--sizing-sm);
   font-size: var(--font-size-base);
   width: 100%;
-  border-radius: var(--rounded);
   outline: none;
   margin-bottom: var(--sizing-base);
   font-weight: var(--font-weight-base);

src/assets/styles/components/media-grid.css

@@ -3,32 +3,6 @@
   --grid-vertical: repeat(3,minmax(0,1fr));
 }
 
-.now-header {
-  margin: var(--sizing-3xl) 0 var(--sizing-lg);
-}
-
-.default-wrapper > .now-header:first-of-type {
-  margin-top: 0;
-}
-
-.now-header-buttons {
-  margin: 0 0 var(--sizing-lg);
-
-  & > button {
-    margin-bottom: var(--sizing-sm);
-
-    &:last-of-type {
-      margin-right: 0;
-    }
-  }
-}
-
-.now-header-wrapper {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
 .media-grid {
   display: grid;
   gap: var(--sizing-sm);
@@ -60,7 +34,6 @@
       content: '';
       top: 0;
       left: 1px;
-      border-radius: calc(var(--sizing-xs) * .85);
       box-shadow: inset 0 -70px 50px -40px #000;
       width: calc(100% - 2px);
       height: calc(100% - 1px);
@@ -103,7 +76,6 @@
 
   & img {
     border: 1px solid var(--accent-color);
-    border-radius: var(--rounded);
     transition-property: border-color;
     transition-timing-function: var(--transition-ease-in-out);
     transition-duration: 300ms;
@@ -115,16 +87,4 @@
     --grid-square: repeat(4,minmax(0,1fr));
     --grid-vertical: repeat(6,minmax(0,1fr));
   }
-
-  .now-header-wrapper {
-    flex-direction: row;
-  }
-
-  .now-header-buttons {
-    margin: var(--sizing-3xl) 0 var(--sizing-lg);
-
-    & > button {
-      margin-bottom: 0;
-    }
-  }
 }

src/assets/styles/components/menu.css

@@ -0,0 +1,124 @@
+.menu-primary {
+  display: flex;
+  flex-direction: row;
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  gap: var(--sizing-md);
+
+  & > li {
+    overflow: hidden;
+    margin: 0;
+
+    & .icon > svg {
+      display: block;
+    }
+
+    & .icon > span {
+      display: none;
+    }
+  }
+}
+
+theme-toggle {
+  margin-left: var(--sizing-md)
+}
+
+.menu-button-container {
+  display: none;
+}
+
+#menu-toggle {
+  display: none;
+}
+
+.menu-button-container .menu-open,
+.menu-button-container .menu-closed {
+  cursor: pointer;
+}
+
+.menu-button-container svg {
+  transform: rotate(0deg);
+  transition-property: transform;
+  transition-timing-function: var(--transition-ease-in-out);
+  transition-duration: var(--transition-duration-default);
+}
+
+.menu-button-container svg:hover,
+.menu-button-container svg:active,
+.menu-button-container svg:focus {
+  stroke: var(--accent-color-hover);
+  transform: rotate(8deg);
+}
+
+#menu-toggle:checked + .menu-button-container .menu-closed {
+  display: none;
+}
+
+#menu-toggle:checked + .menu-button-container .menu-open {
+  display: block;
+}
+
+#menu-toggle:not(:checked) + .menu-button-container .menu-closed {
+  display: block;
+}
+
+#menu-toggle:not(:checked) + .menu-button-container .menu-open {
+  display: none;
+}
+
+@media (max-width: 768px) {
+  .menu-primary {
+    position: absolute;
+    top: 0;
+    left: 0;
+    margin-top: calc(var(--sizing-3xl) * 2.25);
+    flex-direction: column;
+    width: 100%;
+    justify-content: center;
+    align-items: center;
+    gap: 0;
+
+    & > li {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0;
+      padding: var(--sizing-sm) 0;
+      width: 100%;
+      color: var(--text-color);
+      background: var(--background-color);
+
+      & .icon > svg {
+        display: none;
+      }
+
+      & .icon > span {
+        display: inline;
+      }
+    }
+  }
+
+  #menu-toggle ~ .menu-primary li {
+    height: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+  }
+
+  #menu-toggle:checked ~ .menu-primary li {
+    border-bottom: 1px solid var(--gray-light);
+    height: var(--sizing-3xl);
+    padding: var(--sizing-sm);
+
+    &:first-child {
+      border-top: 1px solid var(--gray-light);
+    }
+  }
+
+  .menu-button-container {
+    display: unset;
+    width: var(--sizing-svg-base);
+    height: var(--sizing-svg-base);
+  }
+}

src/assets/styles/components/music-chart.css

@@ -13,7 +13,6 @@
 
     & img {
       border: 1px solid var(--accent-color);
-      border-radius: var(--rounded);
     }
 
     & img,

src/assets/styles/components/paginator.css

@@ -16,6 +16,14 @@
     }
   }
 
+  & :is(a:hover, a:active, a:focus) svg,
+  & a svg:hover,
+  & a svg:active,
+  & a svg:focus {
+    transform: rotate(0deg);
+    stroke: var(--accent-color-hover);
+  }
+
   & span.disabled svg {
     cursor: not-allowed;
     stroke: color-mix(in srgb, var(--text-color), transparent 50%);

src/assets/styles/components/theme-toggle.css

@@ -1,3 +1,9 @@
+theme-toggle {
+  width: var(--sizing-svg-base);
+  height: var(--sizing-svg-base);
+  display: flex;
+}
+
 .theme-toggle {
   background: transparent;
   padding: 0;
@@ -6,11 +12,6 @@
     cursor: pointer;
   }
 
-  &:hover,
-  & svg:hover {
-    stroke-width: var(--stroke-width-bold);
-  }
-
   & > .light svg { stroke: var(--sun) !important; }
   & > .dark svg { stroke: var(--moon) !important; }