Initial commit

src/styles/global.css

@@ -0,0 +1,111 @@
+:root {
+  --nav-height: 3rem;
+  --standard-border: 0.0625rem solid var(--tertiary-background-color);
+  --background-color: hsl(0 0% 100%);
+  --secondary-background-color: hsl(0 0% 95%);
+  --tertiary-background-color: hsl(0 0% 90%);
+  --text-color: hsl(0 0% 10%);
+  --accent-color: #1e40af;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-color: hsl(0 0% 10%);
+    --secondary-background-color: hsl(0 0% 15%);
+    --tertiary-background-color: hsl(0 0% 20%);
+    --text-color: hsl(0 0% 90%);
+    --accent-color: #93c5fd;
+
+    color-scheme: dark;
+  }
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  line-height: 1.6;
+  margin: 0;
+  font-family: "Roboto", sans-serif;
+  background-color: var(--background-color);
+  color: var(--text-color);
+}
+
+nav, header, main, footer {
+  padding-inline: 1rem;
+}
+
+.container {
+  max-inline-size: 65ch;
+  margin-inline: auto;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  scroll-margin-block-start: var(--nav-height);
+}
+
+img {
+  display: block;
+  max-inline-size: 100%;
+  block-size: auto;
+}
+
+svg {
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  vertical-align: middle;
+}
+
+table {
+  display: block;
+  max-inline-size: 100%;
+  overflow-x: auto;
+}
+
+td, th {
+  border: var(--standard-border);
+  padding-inline: 0.5rem;
+  padding-block: 0.25rem;
+}
+
+pre {
+  padding: 1rem;
+}
+
+code {
+  font-family: "JetBrains Mono", monospace;
+  font-size: 0.875rem;
+}
+
+.heading-linker {
+  color: inherit;
+  text-decoration: none;
+}
+
+.heading-linker::before {
+  content: "#";
+  color: var(--accent-color);
+  margin-inline-end: 0.25rem;
+}
+
+input {
+  font: inherit;
+  padding-inline: 0.5rem;
+}
+
+summary, button {
+  cursor: pointer;
+}
+
+button {
+  color: inherit;
+}
+
+ul, ol {
+  line-height: 2;
+}
+
+a {
+  color: var(--accent-color);
+}