Styleguide: improve swatches, add font styles

styleguide/assets/style/styleguide.scss

@@ -0,0 +1,72 @@
+@import "main";
+
+a {
+  &.a-regular {
+    color: var(--color-accent-1);
+  }
+
+  &.a-hover {
+    color: var(--color-accent-3);
+  }
+
+  &.a-visited {
+    color: var(--color-accent-2);
+  }
+}
+
+.layout-column {
+  display: flex;
+
+  & > * {
+    width: 100%;
+  }
+
+  @media (max-width: $breakpoint-md) {
+    flex-wrap: wrap;
+    & > * {
+      width: 100%;
+    }
+  }
+}
+
+.swatch-grid {
+  background-color: var(--color-background);
+  color: var(--color-foreground);
+  padding: 1rem;
+
+  section {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1rem;
+    margin-top: 2rem;
+
+    & > span {
+      width: 100%;
+      font-size: var(--text-xl);
+    }
+
+    .swatch-container {
+      display: inline-flex;
+      flex-direction: column;
+      align-items: end;
+      gap: 0.25rem;
+      background-color: var(--color-background);
+      border-radius: 1rem;
+      padding: 0.5rem;
+      border: 0.125rem solid var(--color-foreground);
+
+      .swatch {
+        background-color: var(--swatch-color);
+        width: 8rem;
+        height: 8rem;
+        border-radius: 0.5rem;
+      }
+
+      span {
+        font-family: "Departure Mono", ui-monospace, monospace;
+        color: var(--color-foreground);
+        line-height: 1.5;
+      }
+    }
+  }
+}