CSS Checkpoint

- Add the system_css template - Name the CSS files in the css directory with a numeric prefix so they sort by priority.
2024-06-28 09:03:28 -07:00 · 2024-06-28 09:03:28 -07:00 · 4bc1390b3c
commit 4bc1390b3c
parent 189a83a696
11 changed files with 863 additions and 63 deletions
--- a/assets/css/010_typography.css
+++ b/assets/css/010_typography.css
@ -0,0 +1,149 @@
+{{/*
+  typography.css
+  Eryn Wells <eryn@erynwells.me>
+  vim: set sw=2 sts=2:
+*/}}
+
+{{- $base := (index . "Base") | default 1 -}}
+{{- $unit := (index . "Unit") | default "rem" -}}
+{{- $factor := (index . "Factor") | default 1.200 -}}
+{{- $scale := partial "size_scale.html" . }}
+
+
+
+
+
+/********
+ # FONTS
+ ********/
+
+@import url("https://use.typekit.net/fji8aoy.css");
+
+:root {
+  --font-family-body: system-ui, Arial, sans-serif;
+  /* --font-family-heading: "rockwell", serif; */
+  --font-family-heading: "merriweather", Georgia, serif;
+  --font-family-monospace: "source-code-pro", monospace;
+
+  --text-base-size: 125%;
+  --text-base: {{ $base }}{{ $unit }};
+{{- range $scale }}
+  --text-{{ .Name }}: calc(var(--text-base) * pow({{ $factor }}, {{ .Value }}));
+{{- end }}
+}
+
+
+/* Font size utility classes */
+{{ range $scale }}
+.text--{{ .Name }} { font-size: var(--text-{{ .Name }}); }
+{{- end }}
+
+
+a {
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+@media (prefers-reduce-motion: reduce) {
+  a {
+    text-decoration: underline;
+  }
+}
+
+html {
+  font-family: var(--font-family-body);
+  font-size: var(--text-base-size);
+  line-height: 1.45;
+}
+
+
+/***********
+ ## HEADINGS
+ ***********/
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-family-heading);
+}
+
+h1 {
+  font-size: var(--text-xxl);
+  letter-spacing: 0.05em;
+}
+
+h2 {
+  font-size: var(--text-xl);
+  letter-spacing: 0.03em;
+}
+
+h3 {
+  font-size: var(--text-l);
+}
+
+h4 {
+  font-size: var(--text-m);
+}
+
+
+header {
+  font-weight: bold;
+}
+
+p {
+  letter-spacing: 0.01em;
+}
+
+p, pre {
+  font-size: var(--text-m);
+}
+
+figcaption, small {
+  font-size: var(--text-s);
+  letter-spacing: 0.01em;
+  line-height: 1;
+}
+
+sup {
+  font-size: 60%;
+}
+
+
+.title {
+  font-size: var(--text-xxl);
+  letter-spacing: 0.05em;
+}
+
+.subtitle {
+  font-weight: lighter;
+}
+
+
+.content {
+  .codeblock {
+    font-family: var(--font-family-monospace);
+  }
+
+  .heading, .title {
+    font-family: var(--font-family-heading);
+  }
+
+  .heading__anchor {
+    /* font-family: var(--font-family-monospace); */
+    font-size: 60%;
+    text-decoration: none;
+  }
+
+  .footnotes {
+    font-size: 90%;
+
+    li:not(:last-child) {
+      margin-block-end: var(--space-xs);
+    }
+
+    p {
+      font-size: inherit;
+    }
+  }
+}