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