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

Tidy up, style blogroll

Browse Source
This commit is contained in:
Nathan Upchurch 2024-09-25 13:06:12 -05:00
parent 0284950ba5
commit 7095d8850b
1 changed files with 62 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
public/css/index.css
View File

@ -101,6 +101,9 @@
--grid-gutter: var(--space-s-s, clamp(1.25rem, 1.1092rem + 0.7042vw, 1.5rem)); --grid-gutter: var(--space-s-s, clamp(1.25rem, 1.1092rem + 0.7042vw, 1.5rem));
--grid-columns: 12; --grid-columns: 12;
/* Span grid utility */
--span-grid: 1 / span 12;
/* Change <img> SVG color with filter */ /* Change <img> SVG color with filter */
--logo-filter: brightness(0) saturate(100%) invert(16%) sepia(0%) --logo-filter: brightness(0) saturate(100%) invert(16%) sepia(0%)
saturate(1024%) hue-rotate(177deg) brightness(99%) contrast(88%); saturate(1024%) hue-rotate(177deg) brightness(99%) contrast(88%);
@ -187,6 +190,11 @@ blockquote:before {
position: fixed; position: fixed;
filter: opacity(0.15); filter: opacity(0.15);
} }
.blogroll {
h2:first-of-type {
padding-top: 0;
}
}
body { body {
animation: var(--slide-in-blurred-bottom); animation: var(--slide-in-blurred-bottom);
font-size: var(--step-0); font-size: var(--step-0);
@ -223,24 +231,38 @@ nav {
} }
.now { .now {
display: grid; display: grid;
grid-column: 1 / span 12; grid-column: var(--span-grid);
padding-bottom: var(--space-xl); padding-bottom: var(--space-xl);
} }
section { section {
display: grid; display: grid;
grid-column: 1 / span 12; grid-column: var(--span-grid);
&.full-width-text {
p {
grid-column: var(--span-grid);
}
/* Add fleuron to last <p> in section */
> p:not(blockquote > p):last-child:after {
content: "\2766";
display: inline;
font-size: var(--step-1);
}
}
} }
::selection { ::selection {
background: var(--contrast-color); background: var(--contrast-color);
color: var(--background-color); color: var(--background-color);
} }
.page-block { .page-block {
grid-column: 1 / span 12; grid-column: var(--span-grid);
font-size: var(--step-1); font-size: var(--step-1);
margin: 0; margin: 0;
padding-bottom: var(--space-xl); padding-bottom: var(--space-xl);
padding-top: var(--space-l); padding-top: 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;
}
} }
a { a {
@ -267,13 +289,13 @@ footer .webring {
} }
footer p { footer p {
font-size: var(--step-0); font-size: var(--step-0);
grid-column: 1 / span 12; grid-column: var(--span-grid);
} }
h1, h1,
h2, h2,
h3 { h3 {
color: var(--text-color); color: var(--text-color);
grid-column: 1 / span 12; grid-column: var(--span-grid);
margin: 0; margin: 0;
width: 100%; width: 100%;
} }
@ -321,7 +343,7 @@ main > p > a > img {
padding-bottom: var(--space-s); padding-bottom: var(--space-s);
} }
pre { pre {
grid-column: 1 / span 12; grid-column: var(--span-grid);
} }
p:last-child { p:last-child {
margin-bottom: 0; margin-bottom: 0;
@ -377,18 +399,24 @@ button {
padding: var(--space-2xs) var(--space-xs); padding: var(--space-2xs) var(--space-xs);
text-transform: uppercase; text-transform: uppercase;
transition: var(--transition-normal); transition: var(--transition-normal);
white-space: nowrap;
} }
button > img { button > img {
max-width: 1em; max-width: 1em;
margin-right: 0.5em; margin-right: 0.5em;
filter: var(--icon-filter); filter: var(--icon-filter);
} }
a.link-button { a {
align-items: start; button {
display: flex; margin-top: var(--space-m);
grid-column: 1 / span 12; }
text-align: center; &:has(button) {
text-decoration: none; text-decoration: none;
}
&:has(button.full-width) {
display: inline-grid;
grid-column: var(--span-grid);
}
} }
button:hover { button:hover {
background-color: var(--color-gray-90); background-color: var(--color-gray-90);
@ -419,10 +447,10 @@ table th {
/* Comments */ /* Comments */
#comments { #comments {
grid-column: 1 / span 12; grid-column: var(--span-grid);
} }
.continue-discussion { .continue-discussion {
grid-column: 1 / span 12; grid-column: var(--span-grid);
} }
.continue-discussion button { .continue-discussion button {
margin-top: var(--space-xs); margin-top: var(--space-xs);
@ -710,9 +738,13 @@ a.post-tag:hover {
} }
.tag-feed-icon { .tag-feed-icon {
fill: var(--rss-orange); fill: var(--rss-orange);
height: 3.5rem; height: var(--space-m);
transition: var(--transition-normal); transition: var(--transition-normal);
width: var(--space-l); width: var(--space-m);
&.small {
height: var(--space-s);
width: var(--space-s);
}
} }
.taglist { .taglist {
display: flex; display: flex;
@ -794,7 +826,7 @@ h2 + .header-anchor {
/* Components */ /* Components */
article.post { article.post {
grid-column: 1 / span 12; grid-column: var(--span-grid);
container: article / inline-size; container: article / inline-size;
/* Add fleuron after last <p> in article */ /* Add fleuron after last <p> in article */
> p:not(blockquote > p):last-child:after { > p:not(blockquote > p):last-child:after {
@ -803,7 +835,19 @@ article.post {
font-size: var(--step-1); font-size: var(--step-1);
} }
} }
.blogroll {
display: inline;
}
.blogroll-category-group {
margin-bottom: var(--space-l);
margin-left: var(--space-m);
h3 {
display: inline;
}
p {
margin: var(--space-2xs) auto;
}
}
/* Add fleuron after <p> in article when footnotes are present */ /* Add fleuron after <p> in article when footnotes are present */
p:has(+ hr.footnotes-sep):after { p:has(+ hr.footnotes-sep):after {
content: "\2766"; content: "\2766";