feat: move css to own directory

src/css/global/global-styles.css

@@ -0,0 +1,169 @@
+/*
+  Global styles
+
+  Low-specificity, global styles that apply to the whole
+  project: https://cube.fyi/css.html
+*/
+html {
+  scrollbar-color: var(--color-primary) var(--color-indiglo-800);
+}
+
+body {
+  accent-color: var(--color-primary);
+  background-color: var(--color-background);
+  color: var(--color-text);
+  font-family: var(--font-family-body);
+  font-size: 1.125rem;
+  font-weight: var(--font-weight-body-regular);
+  letter-spacing: -0.03rem;
+  line-height: 2rem;
+  margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-family-display);
+}
+
+h1 {
+  font-size: 3rem;
+  font-weight: var(--font-weight-display-extrabold);
+  letter-spacing: -0.05rem;
+  line-height: 3rem;
+}
+
+h2 {
+  font-size: 2rem;
+  font-weight: var(--font-weight-display-bold);
+  letter-spacing: -0.05rem;
+  line-height: 2rem;
+}
+
+h3 {
+  font-size: 1.5rem;
+  font-weight: var(--font-weight-display-bold);
+  letter-spacing: -0.05rem;
+  line-height: 1.5rem;
+}
+
+h4 {
+  font-size: 1.125rem;
+  font-weight: var(--font-weight-display-bold);
+  letter-spacing: -0.05rem;
+  line-height: 1.125rem;
+  text-transform: uppercase;
+}
+
+a {
+  color: currentColor;
+  text-decoration-color: var(--color-primary);
+  text-decoration-thickness: 2px;
+  transition:
+    color var(--transition-duration),
+    text-decoration-color var(--transition-duration);
+}
+
+a:visited {
+  text-decoration-color: var(--color-shadow);
+}
+
+a:hover,
+a:active,
+a:focus-visible {
+  color: var(--color-primary);
+  text-decoration-color: var(--color-primary);
+}
+
+ul li::marker {
+  color: var(--color-primary);
+}
+
+ol li::marker {
+  color: var(--color-fadeText);
+}
+
+blockquote {
+  border-inline-start: 2px solid var(--color-primary);
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  padding-inline: 1rem;
+  background-color: var(--color-surface);
+}
+
+blockquote > * + * {
+  margin-block-start: 1rem;
+  margin-inline-start: 1rem;
+}
+
+:focus-visible {
+  outline: 3px solid;
+  outline-color: var(--color-primary);
+  outline-offset: 0.3ch;
+}
+
+strong {
+  font-weight: 650;
+}
+
+abbr {
+  text-decoration-color: var(--color-primary);
+}
+
+img[width][height] {
+  height: auto;
+}
+
+hr {
+  border-style: solid;
+  color: var(--color-surface);
+}
+
+:not(pre) > code {
+  background-color: var(--color-surface);
+  color: var(--color-primary);
+  border-color: var(--color-border);
+  border-style: solid;
+  border-width: 1px;
+  border-radius: 0.5em;
+  padding-block: 0.15em;
+  padding-inline: 0.25em;
+}
+
+pre {
+  overflow-x: auto;
+}
+
+figure {
+  margin-inline: 0;
+}
+
+figure figcaption {
+  color: var(--color-fadeText);
+  font-size: 0.8rem;
+  line-height: 1.125rem;
+  text-align: center;
+}
+
+picture source,
+picture img {
+  border-radius: 1rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html:focus-within {
+    scroll-behavior: auto;
+  }
+
+  *,
+  ::after,
+  ::before {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: 0.01ms !important;
+  }
+}

src/css/global/reset.css

@@ -0,0 +1,90 @@
+/* Box sizing rules */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+/* Prevent font size inflation */
+html {
+  -moz-text-size-adjust: none;
+  -webkit-text-size-adjust: none;
+  text-size-adjust: none;
+}
+
+/* Remove default margin in favour of better control in authored CSS */
+body,
+h1,
+h2,
+h3,
+h4,
+p,
+figure,
+blockquote,
+dl,
+dd {
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+
+/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
+ul[role="list"],
+ol[role="list"] {
+  list-style: none;
+}
+
+/* Set core body defaults */
+body {
+  min-height: 100vh;
+  line-height: 1.5;
+}
+
+/* Set shorter line heights on headings and interactive elements */
+h1,
+h2,
+h3,
+h4,
+button,
+input,
+label {
+  line-height: 1.1;
+}
+
+/* Balance text wrapping on headings */
+h1,
+h2,
+h3,
+h4 {
+  text-wrap: balance;
+}
+
+/* A elements that don't have a class get default styles */
+a:not([class]) {
+  text-decoration-skip-ink: auto;
+  color: currentColor;
+}
+
+/* Make images easier to work with */
+img,
+picture {
+  max-width: 100%;
+  display: block;
+}
+
+/* Inherit fonts for inputs and buttons */
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+/* Make sure textareas without a rows attribute are not tiny */
+textarea:not([rows]) {
+  min-height: 10em;
+}
+
+/* Anything that has been anchored to should have extra scroll margin */
+:target {
+  scroll-margin-block: 5ex;
+}

src/css/global/variables.css

@@ -0,0 +1,8 @@
+/* Global variables */
+:root {
+  --transition-duration: 250ms;
+  --transition-timing: ease;
+
+  --color-white: white;
+  --color-black: black;
+}