diff --git a/content/blog/blog.css b/content/blog/blog.css
index 97afb4b..4f61cf3 100644
--- a/content/blog/blog.css
+++ b/content/blog/blog.css
@@ -1,6 +1,3 @@
-@import url(/styles/reset.css);
-@import url(/styles/root.css);
-
:root {
--post-item-highlight-color: #efefef;
@@ -42,6 +39,7 @@
border-radius: 6px;
display: grid;
gap: 1em;
+ padding: 0.1em;
transition: background-color 0.25s;
}
@supports not (display: subgrid) {
@@ -66,15 +64,6 @@
text-align: end;
}
-.post-list b {
- background-color: #ddd;
- display: block;
- grid-area: thing;
- height: 100%;
- text-align: end;
- width: 100%;
-}
-
.post-list li h1 {
font-family: var(--font-family-body);
grid-area: title;
@@ -96,11 +85,54 @@
color: inherit;
}
+.post-list a:hover {
+ text-decoration: none;
+}
+
+.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;
+}
+
+.post-title {
+ align-items: baseline;
+ display: flex;
+ flex-wrap: wrap;
+ gap: 0 4rem;
+ margin-bottom: var(--body-item-spacing);
+}
+
+.post-title h1 {
+ flex-grow: 1;
+ margin-block: 0;
+ padding-bottom: 0;
+}
+
+.post-title > .post-date {
+ color: var(--light-dim);
+ display: inline-block;
+ font-size: 1.75rem;
+ inline-size: min-content;
+ letter-spacing: 1px;
+ margin-block-start: 0.5rem;
+ white-space: nowrap;
+}
+
.blog footer .tags {
display: flex;
padding-inline-start: 0;
}
+
.blog footer .tags li {
background-color: var(--tag-background-color);
border-radius: 4px;
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 7ed13a6..e9dda76 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -22,7 +22,6 @@
font-style: normal;
}
-
{{ if not hugo.IsProduction }}
diff --git a/static/styles/main.css b/static/styles/main.css
deleted file mode 100644
index b726be0..0000000
--- a/static/styles/main.css
+++ /dev/null
@@ -1,288 +0,0 @@
-/* main.css
- * Global stylesheet for erynwells.me
- * Eryn Wells
- */
-
-:root {
- --header: 8rem;
- --footer: calc(8rem + var(--safe-bottom));
-
- --light-dim: #888;
- --highlight-color: rgb(50, 186, 228);
- --hljs-bg: #111;
-
- --safe-bottom: 0;
-
- --body-padding: 4rem;
- --body-width: 80rem;
-
- --heading-color: var(--body-foreground-color);
- --link-color: var(--highlight-color);
-
- --menu-icon-size: 20px;
- --social-menu-padding: 1rem;
-
- --tag-text-color: var(--dark);
- --tag-background-color: #eee;
- --tag-hover-background-color: #bbb;
-}
-
-@media (prefers-color-scheme: dark) {
- :root {
- --tag-text-color: var(--light-dim);
- --tag-background-color: rgb(40, 40, 40);
- --tag-hover-background-color: rgb(73, 73, 73);
- }
-}
-
-blockquote {
- border-inline-start: 4px solid var(--separator-color);
- padding-inline-start: 2rem;
- margin-inline-start: 2rem;
-}
-
-figure.bordered {
- padding: 0.5rem;
- border: 2px solid #eee;
-}
-
-.header,
-.footer {
- padding: 2rem 0;
-}
-
-/*
- * Header
- */
-
-.header {
- align-items: baseline;
- border-bottom: 1px solid var(--separator-color);
- display: flex;
- flex-direction: row;
-}
-
-.header h1 {
- margin: 0;
- margin-right: 2rem;
- font-size: 4.5rem;
-}
-
-.header h1 a {
- color: var(--heading-color);
- text-decoration: none;
-}
-
-.header h1 a:hover {
- border: 0;
-}
-
-.p5-sketch {
- display: block;
- position: relative;
- width: 100%;
-}
-
-.social menu li + li {
- margin-left: var(--social-menu-padding);
-}
-
-.social {
- display: flex;
- letter-spacing: 2px;
- margin-left: auto;
-}
-
-.social a {
- background-image: var(--url);
- background-repeat: no-repeat;
- background-size: var(--menu-icon-size);
- display: block;
- height: var(--menu-icon-size);
- width: var(--menu-icon-size);
-}
-
-.social a span {
- display: none;
-}
-
-.social > li + li:before {
- color: var(--dark);
- padding: 0 0.5rem;
-}
-
-.title-and-menu {
- align-items: baseline;
- display: flex;
- flex-direction: row;
-}
-
-.youtube iframe {
- aspect-ratio: 16 / 9;
- margin-bottom: -3px;
- width: 100%;
-}
-
-@media (max-width: 475px) {
- :root {
- --menu-icon-size: 18px;
- --social-menu-padding: 0.5rem;
- }
-
-
- .menu {
- margin-top: 1rem;
- }
-
- .social {
- margin-top: 1rem;
- }
-
- .title-and-menu {
- align-items: flex-start;
- flex-direction: column;
- }
-}
-
-@media (max-width: 320px) {
- .header h1 {
- font-size: 3.5rem;
- }
-}
-
-/*
- * Main
- */
-
-.main > header {
- align-items: baseline;
- display: flex;
-}
-
-.main {
- margin: 3.5rem 0;
-}
-
-.main :first-child {
- margin-top: 0;
-}
-
-.main h1 {
- font-size: 3.5rem;
-}
-
-.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;
-}
-
-.main .main-title {
- margin-bottom: 0;
-}
-
-.post-list {
- margin-top: 1rem;
- line-height: 1.4;
-}
-
-.post-list h1,
-.post-list h2,
-.post-list h3,
-.post-list h4,
-.post-list h5,
-.post-list h6 {
- display: block;
- margin: 0;
-}
-
-.post-list h2 {
- font-size: 2.5rem;
-}
-
-.post-list article {
- color: gray;
- font-style: oblique;
- font-size: 1.8rem;
- margin-top: 0.5rem;
-}
-
-.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;
-}
-
-.post-title {
- align-items: baseline;
- display: flex;
- flex-wrap: wrap;
- margin-bottom: 2rem;
-}
-
-.post-title > h1 {
- flex-grow: 1;
- margin-block-end: 0;
- padding-bottom: 0;
-}
-
-.post-title > .post-date {
- color: var(--light-dim);
- display: inline-block;
- font-size: 1.75rem;
- inline-size: min-content;
- letter-spacing: 1px;
- margin-block-start: 0.5rem;
- white-space: nowrap;
-}
-
-@media (max-width: 620px) {
- .main h1 {
- font-size: 3rem;
- margin-bottom: 0.5rem;
- }
-
- .post-list {
- padding-inline-start: 4rem;
- }
-
- .post-list h2 {
- display: block;
- font-size: 2rem;
- }
-
- .post-list time {
- font-size: 1.8rem;
- margin-left: 0;
- }
-}
-
-@media (max-width: 704px) {
- :root {
- --body-padding: 2rem;
- }
-
- html {
- font-size: 7px;
- }
-}
diff --git a/static/styles/monokai.css b/static/styles/monokai.css
index 71c5089..523390e 100644
--- a/static/styles/monokai.css
+++ b/static/styles/monokai.css
@@ -1,7 +1,26 @@
-.chroma { line-height: 1.4; }
+:root {
+ --highlight-background-color: rgb(var(--super-lt-gray));
+ --highlight-foreground-color: var(--foreground-body-color);
+}
+@media (prefers-color-scheme: dark) {
+ :root {
+ }
+}
+
+.chroma {
+ line-height: var(--body-line-height);
+}
+
+.bg {
+ color: var(--highlight-foreground-color);
+ background-color: var(--highlight-background-color);
+}
+
+.chroma {
+ color: var(--highlight-foreground-color);
+ background-color: var(--highlight-background-color);
+}
-/* Background */ .bg { color: #272822; background-color: #fafafa }
-/* PreWrapper */ .chroma { color: #272822; background-color: #fafafa; }
/* Other */ .chroma .x { }
/* Error */ .chroma .err { color: #960050; background-color: #1e0010 }
/* CodeLine */ .chroma .cl { }
diff --git a/static/styles/root.css b/static/styles/root.css
index eecc278..9fd77ad 100644
--- a/static/styles/root.css
+++ b/static/styles/root.css
@@ -1,8 +1,10 @@
:root {
--black: 0, 0, 0;
+ --sub-dk-gray: 16, 16, 16;
--dk-gray: 32, 32, 32;
--mid-gray: 128, 128, 128;
--lt-gray: 223, 223, 223;
+ --super-lt-gray: 240, 240, 240;
--white: 255, 255, 255;
--lt-blue: 69, 212, 243;
@@ -24,18 +26,23 @@
--header-box-shadow-color: var(--box-shadow-color);
--font-family-body: Verdana, Helvetica, sans-serif;
- --font-family-monospace: monospace;
+ --font-family-monospace: "Courier New", Courier, monospace;
--font-family-heading: Museo_Slab, Tahoma, sans-serif;
- --font-family-site-heading: /*Krungthep,*/ Museo_Slab, Tahoma, sans-serif;
+ --font-family-site-heading: Museo_Slab, Tahoma, sans-serif;
--font-size-min: 7px;
--font-size-max: 8px;
--body-item-spacing: 1em;
+ --body-line-height: 1.4;
+ --body-header-line-height: 1.1;
+ --body-code-background-color: rgb(var(--super-lt-gray));
--content-width: 80rem;
--transition-duration: 0.7s;
+ --social-menu-padding: 1rem;
+ --menu-icon-size: 20px;
--twitter-icon: url(/icons/twitter.svg);
--github-icon: url(/icons/github.svg);
--instagram-icon: url(/icons/instagram.svg);
@@ -48,6 +55,7 @@
--foreground-header-color: rgb(var(--white));
--separator-color: rgb(var(--dk-gray));
--box-shadow-color: rgba(var(--dk-gray), 0.8);
+ --body-code-background-color: rgb(var(--dk-gray));
--twitter-icon: url(/icons/twitter-dark.svg);
--github-icon: url(/icons/github-dark.svg);
@@ -66,10 +74,24 @@ a:hover {
}
a:visited { color: none; }
+blockquote {
+ border-inline-start: 4px solid var(--separator-color);
+ padding-inline-start: 2rem;
+ margin-inline-start: 2rem;
+}
+
body {
color: var(--foreground-body-color);
font-size: 2rem;
- line-height: 1.2;
+ line-height: var(--body-line-height);
+}
+
+code {
+ background-color: var(--body-code-background-color);
+ border-radius: 0.25rem;
+ font-family: var(--font-family-monospace);
+ display: inline-block;
+ padding-inline: 0.6rem;
}
figcaption {
@@ -89,6 +111,11 @@ figure {
width: 100%;
}
+figure.bordered {
+ padding: 0.5rem;
+ border: 2px solid #eee;
+}
+
figure a,
figure a:hover {
border: 0;
@@ -159,7 +186,8 @@ footer.site p + p {
h1, h2, h3, h4, h5, h6 {
color: var(--foreground-header-color);
font-family: var(--font-family-heading);
- margin-block: 1em 0.25em;
+ margin-block: 3.5rem 1rem;
+ line-height: var(--body-header-line-height);
}
html {
@@ -188,6 +216,7 @@ h1.site {
radial-gradient(circle at 100% 100%, rgb(var(--purple)), rgb(var(--lilac)) 100%),
radial-gradient(circle at 45% 100%, rgb(var(--lilac)), rgb(var(--purple)) 60%),
radial-gradient(ellipse at 50% 50%, rgb(var(--dk-blue)), transparent 80%);
+ -webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@@ -234,7 +263,7 @@ header.site .grid {
display: grid;
gap: 0.5em;
grid-template-columns: max-content auto max-content;
- grid-template-rows: max-content;
+ grid-template-rows: minmax(2em, min-content);
grid-template-areas:
"title menu social";
max-width: var(--content-width);
@@ -306,13 +335,58 @@ nav.bulleted li::before {
p {
letter-spacing: 0.025em;
- line-height: 1.4;
+ line-height: var(--body-line-height);
}
p { margin-block-end: var(--body-item-spacing); }
p:last-child { margin-block-end: 0; }
+.social menu li + li {
+ margin-left: var(--social-menu-padding);
+}
+
+.social {
+ display: flex;
+ letter-spacing: 2px;
+ margin-left: auto;
+}
+
+.social a {
+ background-image: var(--url);
+ background-repeat: no-repeat;
+ background-size: var(--menu-icon-size);
+ display: block;
+ height: var(--menu-icon-size);
+ width: var(--menu-icon-size);
+}
+
+.social a span {
+ display: none;
+}
+
+.social > li + li:before {
+ color: var(--dark);
+ padding: 0 0.5rem;
+}
+
+.youtube iframe {
+ aspect-ratio: 16 / 9;
+ margin-bottom: -3px;
+ width: 100%;
+}
+
+.p5-sketch {
+ display: block;
+ position: relative;
+ width: 100%;
+}
+
/** SYNTAX HIGHLIGHTING **/
+.highlight code {
+ background-color: inherit;
+ margin-block: 0.5em;
+}
+
.highlight .line {
display: grid;
grid-template-columns: max-content auto;