diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 23a5db2..12fadef 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -15,10 +15,9 @@
{{ end }}
-
-
- {{ if .IsHome }}
-
+
+ {{ range $stylesheet := .Resources.Match "*.css" }}
+
{{ end }}
{{ if and .IsPage (not site.Params.disableHLJS) }}
@@ -31,35 +30,24 @@
{{ end }}
{{ range $.Scratch.Get "social-list" }}
-
+
{{ end }}
-
-
+
+
{{ hugo.Generator }}
{{ range .AlternativeOutputFormats }}
-
+
{{ end }}
{{ if or hugo.IsProduction (eq site.Params.env "production") }}
- {{ template "_internal/google_analytics_async.html" . }}
-
- {{ template "_internal/google_news.html" . }}
-
- {{ template "_internal/opengraph.html" . }}
-
{{ template "_internal/schema.html" . }}
{{ template "_internal/twitter_cards.html" . }}
diff --git a/static/styles/main.css b/static/styles/main.css
new file mode 100644
index 0000000..ca86bbe
--- /dev/null
+++ b/static/styles/main.css
@@ -0,0 +1,325 @@
+/* main.css
+ * Global stylesheet for erynwells.me
+ * Eryn Wells
+ */
+
+:root {
+ --header: 8rem;
+ --footer: calc(8rem + var(--safe-bottom));
+
+ --light: white;
+ --dark: rgb(22, 22, 22);
+ --highlight-color: rgb(50, 186, 228);
+ --hljs-bg: #111;
+
+ --safe-bottom: 0;
+
+ --body-padding: 4rem;
+ --body-width: 80rem;
+
+ --body-background-color: var(--light);
+ --body-foreground-color: var(--dark);
+
+ --link-color: var(--highlight-color);
+
+ --tag-text-color: var(--dark);
+ --tag-background-color: #eee;
+ --tag-hover-background-color: #bbb;
+
+ --separator-color: #888;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --body-background-color: var(--dark);
+ --body-foreground-color: var(--light);
+
+ --tag-text-color: #aaa;
+ --tag-background-color: rgb(40, 40, 40);
+ --tag-hover-background-color: rgb(73, 73, 73);
+ }
+}
+
+a {
+ color: var(--link-color);
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+ text-underline-position: from-font;
+}
+
+body {
+ display: flex;
+ flex-direction: column;
+ font-size: 2rem;
+ line-height: 1.2;
+ margin: 0 auto;
+ max-width: var(--body-width);
+ padding: 0 var(--body-padding);
+}
+
+figcaption h4 {
+ margin-bottom: 0;
+}
+
+figure {
+ border-radius: 0.5rem;
+ display: inline-block;
+ margin: 0;
+ padding: 1rem;
+}
+
+figure a,
+figure a:hover {
+ border: 0;
+}
+
+figure img {
+ border-radius: 0.5rem;
+ height: auto;
+ max-width: 100%;
+ margin-bottom: -3px;
+}
+
+figure + p {
+ margin-top: 1rem;
+}
+
+figure .youtube {
+ line-height: 1;
+ overflow: hidden;
+ width: calc(var(--body-width) - 2rem);
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+ font-family: 'SF Pro Rounded', ui-rounded, 'Arial Rounded MT', system-ui, -apple-system, sans-serif;
+ /*font-family: Palatino, Rockwell, Courier;*/
+ font-weight: 600;
+ letter-spacing: 2px;
+}
+
+html {
+ font-family: 'SF Pro', sans-serif;
+ font-size: 8px;
+}
+
+img {
+ height: auto;
+ max-width: 100%;
+}
+
+p {
+ line-height: 1.4;
+}
+
+.header,
+.footer {
+ padding: 2rem 0;
+}
+
+/*
+ * Header
+ */
+
+.header {
+ align-items: baseline;
+ display: flex;
+}
+
+.header h1 {
+ margin: 0;
+ margin-right: 2rem;
+ font-size: 4.5rem;
+}
+
+.header h1 a {
+ text-decoration: none;
+}
+
+.header h1 a:hover {
+ border: 0;
+}
+
+.menu > a + a:before {
+ color: var(--dark);
+ content: "•";
+ padding: 0 0.5rem;
+}
+
+.menu menu,
+.social menu {
+ display: inline-block;
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+ text-transform: lowercase;
+}
+
+.menu menu li,
+.social menu li {
+ display: inline-block;
+}
+
+.menu menu li + li:before,
+.social menu li + li:before {
+ content: "•";
+ font-size: 1.5rem;
+ margin-right: 0.5rem;
+}
+
+.social {
+ display: flex;
+ margin-left: auto;
+}
+
+.social > li + li:before {
+ color: var(--dark);
+ padding: 0 0.5rem;
+}
+
+.youtube iframe {
+ aspect-ratio: 16 / 9;
+ margin-bottom: -3px;
+ width: 100%;
+}
+
+/*
+ * Footer
+ */
+
+.footer {
+ align-items: center;
+ border-top: 1px solid var(--separator-color);
+ display: flex;
+ flex-direction: column;
+ font-size: 1.8rem;
+}
+
+.footer p {
+ margin: 0;
+}
+
+.footer p + p {
+ margin-top: 0.25rem;
+}
+
+/*
+ * Main
+ */
+
+.main {
+ margin: 3.5rem 0;
+}
+
+.main :first-child {
+ margin-top: 0;
+}
+
+.main h1,
+.main h2,
+.main h3,
+.main h4,
+.main h5,
+.main h6 {
+ margin-top: 3.5rem;
+ margin-bottom: 2rem;
+}
+
+.main figcaption h4 {
+ margin-bottom: 0;
+}
+
+.main p:last-child {
+ margin-bottom: 0;
+}
+
+.post-nav {
+ align-items: baseline;
+ display: flex;
+ margin-top: 3.5rem;
+}
+
+.post-nav .next {
+ margin-left: auto;
+}
+
+.post-single footer {
+ margin-block-start: 3.5rem;
+}
+
+ul.post-tags {
+ display: flex;
+ padding-inline-start: 0;
+}
+
+ul.post-tags li {
+ background-color: var(--tag-background-color);
+ border-radius: 4px;
+ display: inline-block;
+ letter-spacing: 2px;
+}
+
+ul.post-tags li:hover {
+ background-color: var(--tag-hover-background-color);
+}
+
+ul.post-tags li a {
+ color: var(--tag-text-color);
+ display: block;
+ height: 100%;
+ width: 100%;
+ padding: 1rem 1.5rem;
+}
+
+ul.post-tags li a:hover {
+ text-decoration: none;
+}
+
+ul.post-tags li + li {
+ margin-inline-start: 1rem;
+}
+
+.post-title {
+ align-items: baseline;
+ display: flex;
+}
+
+.post-title .post-date {
+ display: inline-block;
+ margin-left: auto;
+}
+
+/*
+ * Color Theme -----------------------------------------------------------------
+ */
+
+body {
+ background-color: var(--body-background-color);
+}
+
+figure {
+ border: 1px solid var(--separator-color);
+}
+
+.header {
+ border-bottom: 1px solid var(--separator-color);
+}
+
+body,
+.header h1 a,
+.menu > a + a:before {
+ color: var(--body-foreground-color);
+}
+
+@media (max-width: 704px) {
+ html {
+ font-size: 7px;
+ }
+}