refactor: migrate base styles

2023-01-20 00:28:44 +01:00 · 2023-01-20 00:28:44 +01:00 · b63a14d8ce
commit b63a14d8ce
parent 5b5c027ea6
6 changed files with 456 additions and 170 deletions
--- a/src/scss/main.scss
+++ b/src/scss/main.scss
@ -0,0 +1,202 @@
+@import "@/scss/base";
+
+:root {
+  font-family: var(--font-family-copy);
+  font-size: var(--font-size);
+  text-size-adjust: 100%;
+}
+
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+  margin: 0;
+  font-weight: normal;
+}
+
+body {
+  min-height: 100vh;
+
+  background-color: var(--color-background);
+  color: var(--color-text);
+
+  line-height: var(--text-line-height);
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  transition: color 0.5s, background-color 0.5s;
+
+  &:before,
+  &:after {
+    content: "";
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+
+  &:before {
+    background: url(@/assets/subtle-prism.svg);
+    mix-blend-mode: multiply;
+    z-index: -1;
+  }
+
+  &:after {
+    background: var(--page-background);
+    z-index: -2;
+  }
+
+  &.scroll-lock {
+    overflow: hidden;
+  }
+}
+
+main {
+  min-height: 100vh;
+  padding: 1rem 0;
+  transition: 0.4s;
+}
+
+section {
+  margin: auto;
+  padding: 0 var(--container-spacing-right-safe) 0
+    var(--container-spacing-left-safe);
+  max-width: var(--section-max-width);
+
+  h1:first-child {
+    margin-top: 0;
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-family-headings);
+}
+
+h1 {
+  font-size: var(--font-size-h1);
+  margin: 1.625rem 0;
+  text-transform: capitalize;
+}
+
+h2 {
+  font-size: var(--font-size-h2);
+  margin: 1.875rem 0;
+}
+
+h3 {
+  font-size: var(--font-size-h3);
+  margin: 1.5rem 0;
+}
+
+p {
+  margin: 1rem 0;
+}
+
+a {
+  color: var(--color-link-text);
+}
+
+blockquote {
+  font-style: italic;
+  background: linear-gradient(90deg, rgba(#000, 0.5), transparent);
+  margin: 0;
+  border-left: 0.125rem solid var(--theme-c-indian-yellow);
+  padding: 1rem;
+}
+
+ul {
+  margin: 1rem 0;
+
+  &.col-2 {
+    columns: 2 auto;
+  }
+
+  &.col-3 {
+    columns: 3 auto;
+  }
+
+  &.col-4 {
+    columns: 4 auto;
+  }
+
+  &.social {
+    display: flex;
+    flex-flow: var(--social-links-flex-flow);
+    justify-content: space-evenly;
+
+    margin: 1rem 0;
+    padding: 0;
+    list-style: none;
+
+    li {
+      flex: var(--social-links-flex);
+      padding: 0.25rem;
+      text-align: center;
+
+      &:before {
+        margin: 0 0.375rem 0 0;
+      }
+
+      &.twitter:before {
+        content: "🐦";
+      }
+
+      &.mastodon:before {
+        content: "🐘";
+      }
+
+      &.telegram:before {
+        content: "📨";
+      }
+
+      &.furaffinity:before {
+        content: "🐾";
+      }
+    }
+  }
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+  max-width: var(--table-max-width);
+  margin: auto;
+
+  thead {
+    border-top: var(--table-border);
+  }
+
+  tbody {
+    border-top: var(--table-border);
+    border-bottom: var(--table-border);
+
+    tr:hover {
+      background: rgba(0, 0, 0, 0.3);
+    }
+  }
+
+  th,
+  td {
+    padding: var(--table-cell-padding);
+  }
+
+  th {
+    font-weight: bold;
+  }
+}
+
+.nav-logo {
+  display: block;
+  margin: 0 0.5rem 0 0.25rem;
+  height: 2rem;
+  border: 0.125rem solid #fff;
+  border-radius: 100%;
+  box-shadow: var(--container-box-shadow);
+}