n_u/nathanupchurch.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Styling tweaks

Browse Source
This commit is contained in:
Nathan Upchurch 2025-01-23 14:22:51 -06:00
parent a2dd293bf0
commit 7c06d746d4
1 changed files with 90 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

172
public/css/index.css
View File

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