Link to article: Tales By Year.
:root { --box-accent: #3b5c97; }
.page-calendar-box > ul {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(4.75rem, 100%), 1fr));
font-feature-settings: 'case', 'ss01', 'ss04', 'tnum';
}
.page-calendar-box > ul > li {
position: relative;
display: flex;
place-items: center;
box-shadow: inset 0 -.05rem 0 #ccc;
}
.page-calendar-box > ul > li > a {
display: block;
flex-grow: 1;
padding: .25rem;
text-align: center;
font-size: 0;
text-underline-offset: 0.1rem;
}
.page-calendar-box > ul > li > a::first-line {
font-size: 1.05rem;
}
.page-calendar-box > ul > li:is(:hover,:focus-within) > a {
background-color: #fff0f0dd;
}
.page-calendar-box > ul > li > ul {
position: absolute;
display: grid;
gap: .05rem;
top: 100%; left: 0;
width: 100%;
background: #fffa;
-webkit-backdrop-filter: blur(.25rem);
backdrop-filter: blur(.25rem);
padding: 0;
font-size: 1em;
opacity: 0;
pointer-events: none;
z-index: 1;
}
.page-calendar-box > ul > li:is(:hover, :focus-within) > ul {
opacity: 1;
pointer-events: auto;
}
.page-calendar-box > ul li ul li {
display: contents;
}
.page-calendar-box > ul li ul li a {
display: block;
padding: .325rem;
min-width: max-content;
box-shadow: 0 0 0 .05rem #ccc;
transition: background-color 0.125s ease-out;
font-size: 0;
text-align: center;
text-underline-offset: 0.1rem;
}
.page-calendar-box > ul li ul li a[href$=".1"] { --month: "January"; }
.page-calendar-box > ul li ul li a[href$=".2"] { --month: "February"; }
.page-calendar-box > ul li ul li a[href$=".3"] { --month: "March"; }
.page-calendar-box > ul li ul li a[href$=".4"] { --month: "April"; }
.page-calendar-box > ul li ul li a[href$=".5"] { --month: "May"; }
.page-calendar-box > ul li ul li a[href$=".6"] { --month: "June"; }
.page-calendar-box > ul li ul li a[href$=".7"] { --month: "July"; }
.page-calendar-box > ul li ul li a[href$=".8"] { --month: "August"; }
.page-calendar-box > ul li ul li a[href$=".9"] { --month: "September"; }
.page-calendar-box > ul li ul li a[href$=".10"] { --month: "October"; }
.page-calendar-box > ul li ul li a[href$=".11"] { --month: "November"; }
.page-calendar-box > ul li ul li a[href$=".12"] { --month: "December"; }
.page-calendar-box > ul li ul li a::before {
content: var(--month);
font-size: 0.775rem;
}
.page-calendar-box ul li.selected > a {
color: inherit;
pointer-events: none;
font-weight: bold;
}
.tale-list {
display: grid;
gap: .75rem;
margin-block: 1.5rem;
}
.tale-block {
background-color: #fff;
box-shadow: 0 0 0.325rem rgb(0 0 0 / 0.25);
contain: paint;
padding: .625rem;
--box-accent: inherit;
display: grid;
grid-template-areas:
"title index"
"info date"
"desc desc";
grid-template-columns: 1fr max-content;
gap: .425rem;
}
.tale-block .index {
grid-area: index;
display: grid;
text-align: end;
align-self: self-start;
color: #b7b7b7;
}
.tale-block .index span:first-child {
font-size: .575em;
}
.tale-block .index .numbering {
font-feature-settings: 'case', 'ss01', 'ss04', 'tnum';
font-size: .825em;
}
.tale-block .title {
grid-area: title;
display: flex;
gap: .325ex 0.75ex;
align-items: center;
flex-wrap: wrap;
}
.tale-block .title > a {
font-weight: bold;
font-size: 1.075em;
}
.tale-block .title > .author { font-size: .775em; flex-grow: 1; }
.author .printuser {
display: inline-flex;
align-items: baseline;
gap: .325em;
}
.author .printuser img {
margin: 0;
padding: 0;
padding-left: .475rem;
}
.tale-block .date {
grid-area: date;
font-feature-settings: 'case', 'ss01', 'ss04', 'tnum';
font-size: .825em;
}
.sec-info {
grid-area: info;
display: grid;
grid-template-columns: 6.25rem 3.25rem;
align-items: center;
gap: .5rem;
min-width: max-content;
font-size: .825em;
}
.sec-info > br { display: none; }
.sec-info .comments { text-align: end; }
.sec-info .comments > span { font-size: 0; }
.description { grid-area: desc; }
.description > :not(.preview) { display: none; }
.description:not(:has(> .preview)) { display: none; } /* progressive enhancement */
.description > .preview {
display: block;
font-size: .9125em;
padding-block-start: .425rem;
border-block-start: .05rem solid #ddd;
}
.description > .preview > p:first-child { margin-block-start: 0.25em; }
.description > .preview > p:last-child { margin-block-end: 0.25em; }
.tale-list .pager {
border-block-start: .225rem solid var(--box-accent);
}
tale-list
content-type-description
tale-block
index
numbering
title
author
date
sec-info
rating
comments
description