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-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;
}
.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;
overflow: hidden;
width: 15rem;
}
.postlist-date,
.postlist-item:before {
color: var(--color-gray-90);
font-size: var(--meta-font-size); /* 13px /16 */
}
.postlist-date {
word-spacing: -0.5px;
}
.postlist-link {
font-size: var(--step-5); /* 19px /16 */
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;
}
.post-image {
width: 15rem;
height: 15rem;
object-fit: cover;
object-position: 50% 50%;
}
@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);
text-decoration: none;
}
a.post-tag:before {
content: "#";
}
a.post-tag:visited {
color: var(--text-color-tag);
}
a.post-tag:hover {
color: var(--text-color-tag);
}
.tag-feed-icon {
fill: var(--rss-orange);
height: 3.5rem;
transition: var(--transition-normal);
width: var(--space-l);
}
.taglist {
display: flex;
flex-flow: row wrap;
list-style-type: none;
padding-left: 0;
}
.taglist li {
margin: 0em 0.5em 1.25em 0em;
}
.taglist li a {
font-size: var(--step-2);
}
.postlist-item > .post-tag {
align-self: center;
}
/* Post Metadata */
.post-metadata {
display: flex;
flex-flow: row nowrap;
padding: var(--space-m) 0 var(--space-l) 0;
}
.post-metadata-copy {
display: flex;
flex-flow: column nowrap;
justify-content: center;
padding-left: var(--space-s);
}
.post-metadata p,
.post-metadata ul,
.post-metadata ul li,
time,
.metadata {
display: flex;
flex-flow: row wrap;
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));
list-style: none;
margin: 0;
padding-left: 0em;
}
.post-metadata time {
padding-left: 0.15rem;
}
.profilePic:not(.links-container > img.profilePic) {
width: var(--space-xl);
border-radius: 100%;
}
/* 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: 1 / span 12;
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);
}
}
/* Add fleuron after
in article when footnotes are present */
p:has(+ hr.footnotes-sep):after {
content: "\2766";
display: inline;
font-size: var(--step-1);
}
/* 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);
}