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: var(--span-grid);
/* font-size: var(--step-1); */
margin: 0;
padding-bottom: var(--space-l);
/*line-height: calc(var(--step-1) * 0.5 + var(--step-1));*/
&:has(+ a > button) {
padding-bottom: 0;
}
}
ul {
margin: 0;
grid-column: var(--span-grid);
}
a {
text-decoration-color: var(--contrast-color);
/*text-decoration-thickness: var(--link-decoration-thickness);*/
transition: var(--transition-normal);
}
/* https://www.a11yproject.com/posts/how-to-hide-content/ */
.visually-hidden {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
footer {
padding: var(--space-xl) 0 var(--space-m) 0;
}
footer .webring {
display: inline;
padding-right: var(--space-xs);
}
footer p {
font-size: var(--step-0);
grid-column: var(--span-grid);
}
h1,
h2,
h3 {
color: var(--text-color);
grid-column: var(--span-grid);
margin: 0;
width: 100%;
}
h1 {
font-family: var(--font-family-headline);
font-variation-settings:
"opsz" 100,
"wght" 500,
"SOFT" 10,
"WONK" 1;
font-size: var(--step-4);
font-style: normal;
line-height: calc(var(--step-4) * 0.25 + var(--step-4));
padding-bottom: var(--space-l);
}
h2 {
font-size: var(--step-2);
font-variation-settings:
"opsz" 50,
"wght" 350,
"SOFT" 20,
"WONK" 1;
padding-bottom: var(--space-s);
padding-top: var(--space-s);
}
h3 {
font-size: var(--step-1);
}
.logo {
filter: var(--logo-filter);
}
main {
display: grid;
grid-column: 1 / 12;
padding-top: var(--space-3xl);
}
main > p > img,
main > p > a > img {
width: 100%;
padding-top: var(--space-l);
}
.post > p,
section > p {
margin: 0;
padding-bottom: var(--space-s);
&:has(wc-card) {
padding-bottom: 0;
}
}
pre {
grid-column: var(--span-grid);
}
p {
margin-top: 0;
margin-bottom: 0;
}
p,
li {
font-size: var(--step-0);
line-height: calc(var(--step-0) * 0.5 + var(--step-0));
}
th {
font-variation-settings:
"opsz" 25,
"wght" 500,
"SOFT" 40,
"WONK" 0;
padding-bottom: var(--space-2xs);
text-align: left;
}
figure {
margin: 0;
padding: var(--space-m) 0 var(--space-m) 0;
width: 100%;
}
figure > a > img,
figure > div > iframe {
border-radius: 1em;
border-top-left-radius: 0;
padding: 0;
width: 100%;
/* box-shadow: var(--space-2xs) var(--space-2xs) 0 0 var(--contrast-color); */
}
html.barebones,
body.barebones {
background-color: var(--background-color);
text-align: center;
}
figcaption {
font-size: var(--step--1);
font-style: italic;
padding-top: var(--space-3xs);
text-align: center;
strong {
font-variation-settings: "wght" 600;
}
}
button {
background-color: var(--contrast-color);
border: none;
border-radius: var(--border-radius);
color: var(--background-color);
font-size: var(--step--2);
font-variation-settings: var(--font-variation-ui);
letter-spacing: var(--ui-letter-spacing);
margin: var(--space-xs) 0 0 0;
padding: 0 var(--space-xs);
text-transform: uppercase;
transition: var(--transition-normal);
white-space: nowrap;
}
button > img {
max-width: 1em;
margin-right: 0.5em;
margin-bottom: -0.1rem;
filter: var(--icon-filter);
}
a {
&: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);
cursor: pointer;
}
a[href]:not(.icon-button) {
color: var(--text-color-link);
}
a[href]:visited {
color: var(--text-color-link);
}
a[href]:hover:not(.icon-button),
a[href]:active:not(.icon-button) {
color: var(--contrast-color);
}
.links-nextprev {
padding: 0 0 var(--space-m) 0;
margin-top: var(--space-m);
}
table {
margin: 1em 0;
}
table td,
table th {
padding-right: 1em;
}
/* Audio Player */
wc-mplayer {
width: 100%;
}
wc-mplayer::part(artist) {
font-size: var(--meta-font-size);
}
wc-mplayer::part(cover),
wc-mplayer::part(coverContainer) {
width: var(--space-3xl);
height: var(--space-3xl);
border-radius: var(--border-radius);
}
wc-mplayer::part(captionAndPlayer) {
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
width: 100%;
}
wc-mplayer::part(main) {
border-radius: var(--border-radius);
display: flex;
gap: var(--space-s);
margin: 0;
padding: var(--space-m);
}
wc-mplayer::part(player) {
align-self: flex-end;
border-radius: var(--border-radius);
width: 100%;
}
wc-mplayer::part(title) {
font-size: var(--step-1);
font-variation-settings:
"opsz" 50,
"wght" 350,
"SOFT" 20,
"WONK" 1;
}
/* Comments */
#comments {
grid-column: var(--span-grid);
}
.continue-discussion {
grid-column: var(--span-grid);
}
.continue-discussion button {
margin-top: var(--space-xs);
}
wc-comment::part(author-link),
wc-toot::part(author-link) {
font-size: var(--step-0);
text-decoration: none;
}
wc-comment::part(main) {
padding: var(--space-m);
}
wc-comment::part(publish-date),
wc-toot::part(publish-date) {
font-family: var(--meta-font-family);
font-size: var(--meta-font-size);
font-style: var(--meta-font-style);
font-variation-settings: var(--font-variation-settings);
}
wc-toot::part(main) {
color: white;
font-family: var(--meta-font-family);
font-size: var(--step--1);
}
wc-toot::part(author),
wc-toot::part(author-link) {
color: white;
font-style: var(--meta-font-style);
font-variation-settings: "wght" 600;
}
/* Code Fences */
pre,
code {
font-family: var(--font-family-monospace);
}
pre:not([class*="language-"]) {
margin: 0.5em 0;
-moz-tab-size: var(--syntax-tab-size);
-o-tab-size: var(--syntax-tab-size);
tab-size: var(--syntax-tab-size);
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
direction: ltr;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
}
code {
word-break: break-all;
}
/* Footnotes */
.footnotes-list {
font-style: italic;
margin-top: 0;
margin-bottom: 0;
> li,
> li > p {
font-size: var(--step--1);
}
}
.footnote-item::marker {
font-style: normal;
}
.footnote-ref {
> a {
font-size: var(--step--2);
text-decoration: none;
}
:before {
content: " ";
}
}
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-5);
padding: var(--space-2xs);
color: var(--contrast-color);
border: solid 2px var(--contrast-color);
font-family: var(--font-family-headline);
font-variation-settings:
"opsz" 144,
"wght" 500,
"SOFT" 10,
"WONK" 0;
margin: 0.5rem 0.7rem 0 0;
border-radius: 0.2em;
border-top-left-radius: 0;
}
/* Header */
header .home-link {
display: grid;
grid-column: 1 / 1;
}
.logo {
width: var(--space-l-xl);
}
/* Nav */
.nav {
padding: 0;
margin: 0;
list-style: none;
}
nav ul {
align-items: end;
display: flex;
justify-content: flex-end;
gap: var(--space-xs-s);
flex-flow: row wrap;
}
.nav-icon {
fill: var(--color-gray-90);
height: var(--space-2xs);
margin-right: 0.25rem;
transition: var(--transition-normal);
width: var(--space-2xs);
}
.nav-item {
align-items: baseline;
border-top: var(--border-nav);
display: flex;
font-size: var(--step--2);
font-variation-settings: var(--font-variation-ui);
height: var(--space-l-xl);
margin-bottom: 0;
padding-top: var(--space-m);
text-transform: uppercase;
transition: var(--transition-normal);
letter-spacing: var(--ui-letter-spacing);
}
.nav-item a {
color: var(--text-color);
margin-top: calc(var(--space-xs-s) * -1); /* Compensate for padding */
padding-top: var(--space-xs-s); /* Give a larger click area */
}
.nav-item:hover {
border-top: var(--border-nav-hover); /* Increase border thickness */
}
.nav-item:hover a {
margin-top: calc(
var(--space-xs-s) * -2
); /* Compensate for border thickness */
}
.nav-item a[href]:visited {
color: var(--text-color);
}
.nav-item:hover a[href] {
color: var(--text-color);
text-decoration: none;
}
.nav-item a[href]:not(:hover) {
text-decoration: none;
}
.nav-item[data-currentpage="true"] {
border-top: var(--border-nav-currentpage);
}
.nav-item[data-currentpage="true"] a,
.nav-item[data-currentpage="true"] a[href]:visited,
.nav-item[data-currentpage="true"]:hover a {
color: var(--contrast-color);
margin-top: calc(
var(--space-xs-s) * -2
); /* Compensate for border thickness */
}
/* Posts list */
.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: var(--space-4xl);
max-height: var(--space-4xl);
overflow: hidden;
width: var(--space-4xl);
}
.postlist-date,
.postlist-item:before {
color: var(--color-gray-90);
font-size: var(--meta-font-size);
/*margin: var(--space-2xs) 0;*/
}
.postlist-date {
word-spacing: -0.5px;
}
.postlist-link {
font-size: var(--step-5);
padding-right: 0.5em;
text-decoration: none;
}
.postlist-link p {
background-color: var(--color-gray-90);
border-radius: 100px;
color: var(--background-color);
font-family: var(--font-family-ui);
font-size: var(--step--2);
font-variation-settings: var(--font-variation-ui);
letter-spacing: var(--ui-letter-spacing);
margin-top: calc(var(--space-3xs) * -1);
padding-left: var(--space-xs);
padding-right: var(--space-xs);
text-transform: uppercase;
width: max-content;
}
.post-copy {
display: flex;
flex-flow: column wrap;
}
sup {
line-height: 0;
}
/* Tags */
a.post-tag {
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);
}
a.post-tag:hover {
color: var(--text-color);
}
.tag-feed-icon {
fill: var(--rss-orange);
height: var(--space-m);
transition: var(--transition-normal);
width: var(--space-m);
&.small {
height: var(--space-s);
width: var(--space-s);
}
}
.taglist {
display: flex;
flex-flow: row wrap;
list-style-type: none;
padding-left: 0;
}
.taglist li a {
display: inline-block;
font-size: var(--step--1);
margin: 0 var(--space-2xs) var(--space-2xs) 0;
}
.postlist-item > .post-tag {
align-self: center;
}
/* Post Metadata */
.post-metadata {
display: flex;
flex-flow: row nowrap;
padding: 0 0 var(--space-l) 0;
}
.post-metadata-copy {
display: flex;
flex-flow: column nowrap;
justify-content: center;
}
.post-metadata p,
.post-metadata ul,
.post-metadata ul li,
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-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 {
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) {
border-radius: 100%;
height: var(--space-xl);
margin-right: var(--space-s);
width: var(--space-xl);
}
/* Direct Links / Markdown Headers */
a.header-anchor {
font-style: normal;
margin-left: 0.1em;
text-decoration: none;
}
a[href].header-anchor,
a[href].header-anchor:visited {
color: transparent;
}
a[href].header-anchor:focus,
a[href].header-anchor:hover {
text-decoration: underline;
}
a[href].header-anchor:focus,
:hover > a[href].header-anchor {
color: #aaa;
}
h2 + .header-anchor {
font-size: var(--step-2);
}
/* Components */
article.post {
grid-column: var(--span-grid);
container: article / inline-size;
/* Add fleuron after last in article */
> p:not(blockquote > p):last-child:after {
content: "\2766";
display: inline;
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;
}
}
.gallery-images {
display: flex;
flex-flow: row wrap;
row-gap: var(--space-xs-s);
column-gap: var(--space-m-l);
.gallery-image-container {
width: var(--space-7xl-8xl);
height: var(--space-7xl-8xl);
.gallery-image {
border-radius: var(--border-radius);
width: var(--space-7xl-8xl);
height: var(--space-7xl-8xl);
object-fit: cover;
}
}
}
/* Add fleuron after in article when footnotes are present */
p:has(+ hr.footnotes-sep):after {
content: "\2766";
display: inline;
font-size: var(--step-1);
}
/* Quiz */
.answerBox {
margin-bottom: var(--space-3xs);
}
.answersBox > input {
display: block;
}
details {
background-color: var(--card-color);
border: var(--border-details);
border-radius: var(--border-radius);
color: var(--text-color);
margin-top: var(--space-s);
padding: var(--space-xs);
width: 100%;
font-size: var(--step--2);
font-variation-settings: var(--font-variation-ui);
text-transform: uppercase;
letter-spacing: var(--ui-letter-spacing);
font-family: var(--font-family-ui);
::marker {
content: "+ ";
}
&[open] p {
font-size: var(--step--2);
line-height: calc(var(--step--2) * 0.25 + var(--step--2));
}
&[open] summary::marker {
content: "- ";
}
&[open] summary {
border-bottom: var(--border-details);
margin-bottom: var(--space-xs);
padding-bottom: var(--space-xs);
}
summary {
font-size: var(--step--2);
font-variation-settings: var(--font-variation-ui);
text-transform: uppercase;
letter-spacing: var(--ui-letter-spacing);
font-family: var(--font-family-ui);
}
}
dialog {
background-color: var(--card-color);
border: none;
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
width: var(--grid-max-width);
h2 {
padding-top: 0;
}
p {
color: var(--text-color);
}
&::backdrop {
background-color: var(--contrast-color);
opacity: 0.5;
}
img {
max-width: 100%;
padding-top: var(--space-s);
}
}
.questionBox {
margin: var(--space-s) 0;
figure {
padding-top: 0;
padding-bottom: 0;
}
}
.quizQuestion {
font-size: var(--step-2);
font-variation-settings:
"opsz" 50,
"wght" 350,
"SOFT" 20,
"WONK" 1;
line-height: calc(var(--step-2) * 0.25 + var(--step-2));
padding-bottom: var(--space-s);
padding-top: var(--space-s);
}
/* Utilities */
.grid-container {
max-width: var(--grid-max-width);
padding-inline: var(--grid-gutter);
margin-inline: auto;
}
.grid {
display: grid;
gap: var(--grid-gutter);
grid-template-columns: repeat(var(--grid-columns), 1fr);
}