From 7c06d746d44a733ef496282bdef4e2491b82578e Mon Sep 17 00:00:00 2001 From: Nathan Upchurch Date: Thu, 23 Jan 2025 14:22:51 -0600 Subject: [PATCH] Styling tweaks --- public/css/index.css | 172 ++++++++++++++++++++++--------------------- 1 file changed, 90 insertions(+), 82 deletions(-) diff --git a/public/css/index.css b/public/css/index.css index 22b4fdc..9b1bdf1 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -20,9 +20,10 @@ Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace; - --meta-font-family: "Fraunces", serif; - --meta-font-size: var(--step--1); + --meta-font-family: "Manrope", sans-serif; + --meta-font-size: var(--step--2); --meta-font-style: normal; + --meta-font-variation-settings: "wght" 500; --ui-letter-spacing: calc(var(--space-3xs) * 0.5); } @@ -51,7 +52,7 @@ --color-gray-20: #e0e0e0; --color-gray-90: #333333; - --card-color: white; + --card-color: rgba(250, 250, 250, 1); --contrast-color: #027860; --background-color: #faf5f5; --rss-orange: rgb(255, 152, 0); @@ -156,7 +157,7 @@ @media (prefers-color-scheme: dark) { :root { - --color-gray-20: #e0e0e0; + --color-gray-20: #253848; --color-gray-90: #dad8d8; --card-color: #333333; --contrast-color: #04c49e; @@ -270,6 +271,9 @@ nav { grid-column: var(--span-grid); padding-bottom: var(--space-l); } +ol { + padding-left: 0; +} section { display: grid; grid-column: var(--span-grid); @@ -291,10 +295,10 @@ section { } .page-block { grid-column: var(--span-grid); - font-size: var(--step-1); + /* font-size: var(--step-1); */ margin: 0; padding-bottom: var(--space-l); - line-height: calc(var(--step-1) * 0.5 + var(--step-1)); + /*line-height: calc(var(--step-1) * 0.5 + var(--step-1));*/ &:has(+ a > button) { padding-bottom: 0; } @@ -302,12 +306,11 @@ section { ul { margin: 0; grid-column: var(--span-grid); - padding-bottom: var(--space-s); } a { text-decoration-color: var(--contrast-color); - text-decoration-thickness: var(--link-decoration-thickness); + /*text-decoration-thickness: var(--link-decoration-thickness);*/ transition: var(--transition-normal); } /* https://www.a11yproject.com/posts/how-to-hide-content/ */ @@ -346,9 +349,9 @@ h1 { "wght" 500, "SOFT" 10, "WONK" 1; - font-size: var(--step-5); + font-size: var(--step-4); font-style: normal; - line-height: calc(var(--step-5) * 0.25 + var(--step-5)); + line-height: calc(var(--step-4) * 0.25 + var(--step-4)); padding-bottom: var(--space-l); } h2 { @@ -417,7 +420,7 @@ figure > div > iframe { border-top-left-radius: 0; padding: 0; width: 100%; - box-shadow: var(--space-2xs) var(--space-2xs) 0 0 var(--contrast-color); + /* box-shadow: var(--space-2xs) var(--space-2xs) 0 0 var(--contrast-color); */ } html.barebones, @@ -429,7 +432,7 @@ body.barebones { figcaption { font-size: var(--step--1); font-style: italic; - padding-top: var(--space-s); + padding-top: var(--space-3xs); text-align: center; strong { font-variation-settings: "wght" 600; @@ -444,7 +447,7 @@ button { font-variation-settings: var(--font-variation-ui); letter-spacing: var(--ui-letter-spacing); margin: var(--space-xl) 0 0 0; - padding: var(--space-2xs) var(--space-xs); + padding: 0 var(--space-xs); text-transform: uppercase; transition: var(--transition-normal); white-space: nowrap; @@ -621,15 +624,16 @@ code { content: " "; } } -hr.footnotes-sep { +hr { border: var(--border-hr); + width: 100%; } /* Dropcap */ main > section > article > p:not(.nodropcap):first-of-type:first-letter { float: left; - font-size: var(--step-6); - padding: 0.5rem 0.5rem 0.5rem 0.5rem; + font-size: var(--step-5); + padding: var(--space-2xs); color: var(--contrast-color); border: solid 2px var(--contrast-color); font-family: var(--font-family-headline); @@ -721,48 +725,49 @@ nav ul { } /* Posts list */ -.postlist-item-container { - display: flex; - flex-flow: column nowrap; - gap: var(--space-xl); -} -.postlist-item { - align-items: flex-start; - background-color: var(--card-color); - border-radius: var(--border-radius); - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); - display: flex; - flex-flow: row nowrap; - justify-content: flex-start; - padding: var(--space-m) 1.1rem var(--space-m) 1.1rem; - width: 100%; -} .postlist, .links-nextprev { container: postlist / inline-size; } - +.postlist-item { + align-items: flex-start; + display: flex; + flex-flow: row nowrap; + justify-content: flex-start; + width: 100%; +} +.postlist-item-container { + display: flex; + flex-flow: column nowrap; + gap: var(--space-s); +} +.post-image { + width: var(--space-4xl); + height: var(--space-4xl); + object-fit: cover; + object-position: 50% 50%; +} .post-image-container { border-radius: var(--border-radius); box-shadow: var(--box-shadow); - height: 15rem; - margin-left: calc(var(--space-l) * -1); - max-height: 15rem; + height: var(--space-4xl); + max-height: var(--space-4xl); overflow: hidden; - width: 15rem; + width: var(--space-4xl); } .postlist-date, .postlist-item:before { color: var(--color-gray-90); - font-size: var(--meta-font-size); /* 13px /16 */ + font-size: var(--meta-font-size); + /*margin: var(--space-2xs) 0;*/ } .postlist-date { word-spacing: -0.5px; } .postlist-link { - font-size: var(--step-5); /* 19px /16 */ + font-size: var(--step-5); padding-right: 0.5em; text-decoration: none; } @@ -785,53 +790,31 @@ nav ul { display: flex; flex-flow: column wrap; } -.post-image { - width: 15rem; - height: 15rem; - object-fit: cover; - object-position: 50% 50%; -} + sup { line-height: 0; } -@container postlist (max-width: 500px) { - .postlist-item { - flex-flow: column wrap; - } - .post-image-container { - margin-left: 0; - margin-top: calc(var(--space-l) * -1); - width: 100%; - } - .post-image-container img.post-image { - width: calc(100cqw - var(--space-m)); - } - .postlist-link { - padding: 0; - } - .postlist-link h3 { - padding-top: var(--space-m); - } - .postlist-link p { - margin-top: var(--space-xs); - } -} - /* Tags */ a.post-tag { - color: var(--text-color-tag); - padding-right: var(--space-5xs); + background-color: var(--color-gray-20); + border-radius: 1rem; + color: var(--text-color); + font-family: var(--meta-font-family); + font-variation-settings: "wght" 300; + margin-top: var(--space-3xs); + margin-right: var(--space-3xs); + padding: 0 var(--space-3xs); text-decoration: none; } a.post-tag:before { content: "#"; } a.post-tag:visited { - color: var(--text-color-tag); + color: var(--text-color); } a.post-tag:hover { - color: var(--text-color-tag); + color: var(--text-color); } .tag-feed-icon { fill: var(--rss-orange); @@ -849,11 +832,10 @@ a.post-tag:hover { list-style-type: none; padding-left: 0; } -.taglist li { - margin: 0em 0.5em 1.25em 0em; -} .taglist li a { - font-size: var(--step-2); + display: inline-block; + font-size: var(--step--1); + margin: 0 var(--space-2xs) var(--space-2xs) 0; } .postlist-item > .post-tag { @@ -871,7 +853,6 @@ a.post-tag:hover { display: flex; flex-flow: column nowrap; justify-content: center; - padding-left: var(--space-s); } .post-metadata p, @@ -881,23 +862,50 @@ time, .metadata { display: flex; flex-flow: row wrap; + font-family: var(--meta-font-family); font-size: var(--meta-font-size); font-style: var(--meta-font-style); - font-variation-settings: var(--meta-font-variatoin-settings); - line-height: calc(var(--step--1) * 0.5 + var(--step--1)); + font-variation-settings: var(--meta-font-variation-settings); + line-height: calc(var(--meta-font-size) * 0.5 + var(--meta-font-size)); list-style: none; margin: 0; padding-left: 0em; } -.post-metadata time { +.post-metadata { padding-left: 0.15rem; } +@container postlist (max-width: 500px) { + .postlist-item { + flex-flow: column wrap; + } + .post-image-container { + margin-left: 0; + width: 100%; + } + .post-image-container img.post-image { + width: 100cqw; + } + .postlist-link { + padding: 0; + } + .postlist-link h3 { + padding-top: var(--space-m); + } + .postlist-link p { + margin-top: var(--space-xs); + } + .post-metadata { + padding-bottom: 0; + } +} + .profilePic:not(.links-container > img.profilePic) { - height: var(--space-xl); - width: var(--space-xl); border-radius: 100%; + height: var(--space-xl); + margin-right: var(--space-s); + width: var(--space-xl); } /* Direct Links / Markdown Headers */