From d1171e992fc72c6921ff719395f411cb336a7014 Mon Sep 17 00:00:00 2001 From: Eryn Wells Date: Sun, 9 Oct 2022 12:12:44 -0700 Subject: [PATCH] Distribute all the main.css styles to their own stylesheets and remove main.css --- content/blog/blog.css | 56 +++++-- layouts/_default/baseof.html | 1 - static/styles/main.css | 288 ----------------------------------- static/styles/monokai.css | 25 ++- static/styles/root.css | 86 ++++++++++- 5 files changed, 146 insertions(+), 310 deletions(-) delete mode 100644 static/styles/main.css 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;