chore: clean up logic + data + feeds
This commit is contained in:
parent
74d3fe1b44
commit
fa2ac170b3
41 changed files with 400 additions and 481 deletions
|
|
@ -153,23 +153,19 @@ window.addEventListener("load", () => {
|
|||
: plainText;
|
||||
};
|
||||
|
||||
const formatArtistTitle = (title, totalPlays) =>
|
||||
totalPlays > 0
|
||||
? `${title} <strong class="highlight-text">${totalPlays} plays</strong>`
|
||||
: title;
|
||||
|
||||
const renderSearchResults = (results) => {
|
||||
const resultHTML = results
|
||||
.map(
|
||||
({ title, url, description, type, total_plays }) => `
|
||||
<li class="search__results--result">
|
||||
<a href="${url}">
|
||||
<h3>${
|
||||
type === "artist" && total_plays
|
||||
? formatArtistTitle(title, total_plays)
|
||||
: title
|
||||
}</h3>
|
||||
</a>
|
||||
<h3>
|
||||
<a href="${url}">${title}</a>
|
||||
${
|
||||
type === "artist" && total_plays
|
||||
? ` <strong class="highlight-text">${total_plays} plays</strong>`
|
||||
: ""
|
||||
}
|
||||
</h3>
|
||||
<p>${truncateDescription(description)}</p>
|
||||
</li>
|
||||
`
|
||||
|
|
@ -225,13 +221,14 @@ window.addEventListener("load", () => {
|
|||
.map(
|
||||
({ title, url, description, type, total_plays }) => `
|
||||
<li class="search__results--result">
|
||||
<a href="${url}">
|
||||
<h3>${
|
||||
<h3>
|
||||
<a href="${url}">${title}</a>
|
||||
${
|
||||
type === "artist" && total_plays
|
||||
? formatArtistTitle(title, total_plays)
|
||||
: title
|
||||
}</h3>
|
||||
</a>
|
||||
? ` <strong class="highlight-text">${total_plays} plays</strong>`
|
||||
: ""
|
||||
}
|
||||
</h3>
|
||||
<p>${truncateDescription(description)}</p>
|
||||
</li>
|
||||
`
|
||||
|
|
|
|||
|
|
@ -1,17 +1,15 @@
|
|||
html body {
|
||||
html,
|
||||
body {
|
||||
font-family: var(--font-mono);
|
||||
color: var(--text-color);
|
||||
background: var(--background-color);
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
html {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--accent-color) var(--gray-light);
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-base);
|
||||
letter-spacing: -0.035rem;
|
||||
word-spacing: -0.15rem;
|
||||
}
|
||||
|
|
@ -42,13 +40,7 @@ p {
|
|||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
}
|
||||
|
||||
:is(p, ul, ol) a {
|
||||
text-decoration: underline;
|
||||
text-underline-offset: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.highlight-text,
|
||||
details > summary {
|
||||
.highlight-text {
|
||||
color: var(--text-color-inverted);
|
||||
background-color: var(--accent-color);
|
||||
padding: var(--spacing-xs);
|
||||
|
|
@ -56,7 +48,6 @@ details > summary {
|
|||
}
|
||||
|
||||
details > summary {
|
||||
cursor: pointer;
|
||||
display: inline;
|
||||
}
|
||||
|
||||
|
|
@ -68,27 +59,10 @@ blockquote {
|
|||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
}
|
||||
|
||||
code {
|
||||
padding: var(--spacing-xs);
|
||||
color: var(--text-color-inverted);
|
||||
background-color: var(--background-color-inverted);
|
||||
border-radius: var(--border-radius-slight);
|
||||
}
|
||||
|
||||
p:not(.banner p) > svg {
|
||||
margin-bottom: var(--inline-margin-bottom);
|
||||
}
|
||||
|
||||
:is(h1, h2, h3, h4, h5, h6) svg {
|
||||
:is(h1, h2, h3) svg {
|
||||
stroke-width: var(--stroke-width-bold);
|
||||
}
|
||||
|
||||
:is(h1, h2, h3, h4, h5, h6):has(svg) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
}
|
||||
|
||||
strong,
|
||||
blockquote {
|
||||
font-weight: var(--font-weight-bold);
|
||||
|
|
@ -105,7 +79,29 @@ svg {
|
|||
stroke-width: var(--stroke-width-default);
|
||||
}
|
||||
|
||||
/* brand colors */
|
||||
/* images */
|
||||
img {
|
||||
border-radius: var(--border-radius-slight);
|
||||
|
||||
&.image-banner {
|
||||
border: var(--border-default);
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
/* lists */
|
||||
ul,
|
||||
ol {
|
||||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
padding-left: var(--spacing-base);
|
||||
|
||||
& li:not(:last-child) {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
}
|
||||
|
||||
/* brand + section colors */
|
||||
.article,
|
||||
.books,
|
||||
.brand-github,
|
||||
|
|
@ -211,51 +207,44 @@ svg {
|
|||
/* links */
|
||||
a {
|
||||
color: var(--accent-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
:is(a:hover, a:active, a:focus) svg[data-tablericon-name^="arrow-"] {
|
||||
stroke: var(--accent-color-hover);
|
||||
}
|
||||
|
||||
a:hover,
|
||||
a:focus,
|
||||
a:active,
|
||||
:is(.main-title, footer nav.sub-pages) a:hover,
|
||||
:is(.main-title, footer nav.sub-pages) a:focus,
|
||||
:is(.main-title, footer nav.sub-pages) a:active {
|
||||
color: var(--accent-color-hover);
|
||||
transition: color var(--transition-duration-default)
|
||||
var(--transition-ease-in-out);
|
||||
}
|
||||
|
||||
:is(a:has(svg):hover, a:has(svg):active, a:has(svg):focus) svg {
|
||||
stroke: var(--accent-color-hover);
|
||||
}
|
||||
|
||||
:is(a):has(svg) {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
& > img {
|
||||
border: var(--border-default);
|
||||
}
|
||||
|
||||
& svg {
|
||||
stroke: var(--accent-color);
|
||||
}
|
||||
|
||||
&:hover svg,
|
||||
&:active svg,
|
||||
&:focus svg {
|
||||
stroke: var(--accent-color-hover);
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:active {
|
||||
color: var(--accent-color-hover);
|
||||
transition: color var(--transition-duration-default)
|
||||
var(--transition-ease-in-out);
|
||||
|
||||
& > img {
|
||||
border-color: var(--accent-color-hover);
|
||||
transition: border var(--transition-duration-default)
|
||||
var(--transition-ease-in-out);
|
||||
}
|
||||
|
||||
& > svg {
|
||||
stroke: var(--accent-color-hover);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:is(h1, h2, h3, a, p:not(.banner p), span, th, td, .post-meta):has(svg) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
/* headers */
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
h3 {
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--line-height-md);
|
||||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
|
|
@ -264,48 +253,32 @@ h6 {
|
|||
h1 {
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
h4 {
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
h5 {
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
h6 {
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
h1 {
|
||||
font-size: var(--font-size-3xl);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--font-size-2xl);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: var(--font-size-xl);
|
||||
}
|
||||
h4 {
|
||||
font-size: var(--font-size-lg);
|
||||
}
|
||||
h5 {
|
||||
font-size: var(--font-size-base);
|
||||
}
|
||||
h6 {
|
||||
font-size: var(--font-size-md);
|
||||
}
|
||||
}
|
||||
|
||||
/* dividers */
|
||||
hr {
|
||||
height: 1px;
|
||||
background-color: var(--gray-light);
|
||||
border: 0;
|
||||
color: var(--gray-light);
|
||||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
}
|
||||
|
||||
|
|
@ -322,19 +295,11 @@ article {
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
&.standalone .associated-media:last-of-type > hr {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& h3 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& .post-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-sm);
|
||||
|
||||
& svg {
|
||||
stroke: var(--gray-dark);
|
||||
width: var(--sizing-svg-sm);
|
||||
|
|
@ -362,10 +327,6 @@ img + .associated-media,
|
|||
& li:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
& .footnote-item > p {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
&:has(~ *) {
|
||||
|
|
@ -375,11 +336,7 @@ img + .associated-media,
|
|||
|
||||
sup.footnote-ref {
|
||||
line-height: var(--line-height-xs);
|
||||
}
|
||||
|
||||
sup.footnote-ref a,
|
||||
.footnote-backref {
|
||||
text-decoration: none;
|
||||
padding: var(--spacing-xs);
|
||||
}
|
||||
|
||||
/* tables */
|
||||
|
|
@ -476,8 +433,8 @@ td:first-of-type,
|
|||
.active,
|
||||
.active svg {
|
||||
cursor: not-allowed;
|
||||
color: var(--accent-color);
|
||||
stroke: var(--accent-color-hover);
|
||||
color: var(--accent-color-active);
|
||||
stroke: var(--accent-color-active);
|
||||
}
|
||||
|
||||
/* layout */
|
||||
|
|
@ -506,8 +463,7 @@ main {
|
|||
main,
|
||||
footer {
|
||||
width: 80%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin: 0 auto;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
max-width: 768px;
|
||||
|
|
@ -555,28 +511,4 @@ footer {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:is(.main-title, footer nav.sub-pages) a {
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
/* lists */
|
||||
ul,
|
||||
ol {
|
||||
list-style-position: inside;
|
||||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
padding-left: var(--spacing-base);
|
||||
|
||||
& li:not(:last-child) {
|
||||
margin-bottom: var(--spacing-lg);
|
||||
}
|
||||
}
|
||||
|
||||
/* images */
|
||||
.image-banner {
|
||||
border: var(--border-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
.addon-links {
|
||||
margin-top: var(--spacing-base);
|
||||
display: grid;
|
||||
gap: var(--sizing-base);
|
||||
grid-template-columns: var(--grid-columns-one);
|
||||
|
|
@ -15,9 +16,8 @@
|
|||
border-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
& ol,
|
||||
ul {
|
||||
padding: 0;
|
||||
& ul,
|
||||
& ol {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,5 +14,7 @@
|
|||
|
||||
& img {
|
||||
image-rendering: pixelated;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,14 +8,12 @@ button,
|
|||
border: 2px solid var(--accent-color);
|
||||
border-radius: var(--border-radius-full);
|
||||
padding: var(--spacing-xs) var(--spacing-md);
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-base);
|
||||
font-weight: var(--font-weight-bold);
|
||||
line-height: var(--line-height-base);
|
||||
white-space: nowrap;
|
||||
color: var(--text-color-inverted);
|
||||
background-color: var(--accent-color);
|
||||
appearance: none;
|
||||
transition: color var(--transition-duration-default)
|
||||
var(--transition-ease-in-out);
|
||||
|
||||
|
|
@ -23,10 +21,7 @@ button,
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:not(.active):hover,
|
||||
&:not(.active):active,
|
||||
&:not(.active):focus,
|
||||
&:not(.active):focus-within {
|
||||
&:not(.active):is(:hover, :active, :focus, :focus-within) {
|
||||
background-color: var(--accent-color-hover);
|
||||
border-color: var(--accent-color-hover);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,61 +3,29 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="email"],
|
||||
input[type="search"],
|
||||
input:not([type="button"]):not([type="submit"]):not([type="reset"]),
|
||||
textarea {
|
||||
font: var(--font-weight-base) var(--font-size-base) var(--font-mono);
|
||||
line-height: var(--line-height-base);
|
||||
color: var(--text-color);
|
||||
background-color: var(--background-color);
|
||||
border: var(--border-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
padding: var(--spacing-sm);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
|
||||
input:not([type="button"]):not([type="submit"]):not([type="reset"]),
|
||||
textarea,
|
||||
select {
|
||||
color: var(--text-color);
|
||||
border-radius: var(--border-radius-slight);
|
||||
background-color: var(--background-color);
|
||||
padding: var(--spacing-sm);
|
||||
border: var(--border-gray);
|
||||
}
|
||||
|
||||
form:has(+ *),
|
||||
label:has(input):has(+ *) input,
|
||||
input[type="text"]:has(+ *),
|
||||
input[type="email"]:has(+ *),
|
||||
input[type="search"]:has(+ *),
|
||||
input:not([type="button"]):not([type="submit"]):not([type="reset"]):has(+ *),
|
||||
textarea:has(+ *) {
|
||||
margin-bottom: var(--spacing-base);
|
||||
}
|
||||
|
||||
select {
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
border: var(--border-gray);
|
||||
border-radius: var(--border-radius-slight);
|
||||
background-color: var(--background-color);
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
}
|
||||
|
||||
fieldset {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
padding: var(--spacing-lg) 0 0 0;
|
||||
border: none;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
flex-direction: row;
|
||||
gap: var(--spacing-lg);
|
||||
}
|
||||
|
||||
& label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sizing-xs);
|
||||
}
|
||||
|
||||
& input[type="checkbox"] {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.search__form {
|
||||
margin-top: 0;
|
||||
|
||||
|
|
@ -79,9 +47,5 @@ fieldset {
|
|||
margin-bottom: var(--sizing-base);
|
||||
border-bottom: var(--border-gray);
|
||||
}
|
||||
|
||||
& a {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,4 @@
|
|||
.mastodon-post-wrapper {
|
||||
margin-bottom: var(--spacing-base);
|
||||
|
||||
& dl,
|
||||
dt {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
.icon-link + .media-grid {
|
||||
a + .media-grid {
|
||||
margin-top: var(--spacing-base);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -23,7 +23,6 @@ menu {
|
|||
margin: 0;
|
||||
padding: var(--spacing-sm) 0;
|
||||
width: 100%;
|
||||
color: var(--text-color);
|
||||
background: var(--background-color);
|
||||
|
||||
& a {
|
||||
|
|
|
|||
|
|
@ -39,13 +39,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
& a:has(img) {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
& img {
|
||||
border: var(--border-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
width: calc(var(--sizing-3xl) * 1.5);
|
||||
height: calc(var(--sizing-3xl) * 1.5);
|
||||
|
||||
|
|
@ -92,18 +86,17 @@
|
|||
|
||||
& .title,
|
||||
& .subtext,
|
||||
& .subtext p,
|
||||
& .timestamp {
|
||||
& time {
|
||||
line-height: var(--line-height-md);
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
& .subtext,
|
||||
& .timestamp {
|
||||
& time {
|
||||
font-size: var(--font-size-sm);
|
||||
}
|
||||
|
||||
& .timestamp {
|
||||
& time {
|
||||
margin-top: var(--spacing-sm);
|
||||
margin-left: 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -2,24 +2,23 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.pagination button {
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
& button {
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.pagination a {
|
||||
display: flex;
|
||||
}
|
||||
& a {
|
||||
display: flex;
|
||||
|
||||
.pagination p {
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
&.disabled svg[data-tablericon-name^="arrow-"] {
|
||||
cursor: not-allowed;
|
||||
stroke: var(--gray-medium);
|
||||
stroke-width: var(--stroke-width-default);
|
||||
}
|
||||
}
|
||||
|
||||
.pagination a.disabled svg[data-tablericon-name^="arrow-"] {
|
||||
cursor: not-allowed;
|
||||
stroke: var(--gray-medium);
|
||||
stroke-width: var(--stroke-width-default);
|
||||
& p {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
#tracks-recent,
|
||||
#tracks-chart,
|
||||
#tracks-recent ~ .tracks-recent,
|
||||
#tracks-chart ~ .tracks-chart {
|
||||
.tracks-recent,
|
||||
.tracks-chart {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -15,7 +15,7 @@ input[id="tracks-chart"] ~ .tracks-chart {
|
|||
margin-top: var(--spacing-base);
|
||||
}
|
||||
|
||||
input[id="tracks-recent"] ~ [for="tracks-recent"]:has(+ [for="tracks-chart"]) {
|
||||
[for="tracks-recent"] {
|
||||
margin-right: var(--spacing-xs);
|
||||
}
|
||||
|
||||
|
|
@ -37,4 +37,4 @@ input[id="tracks-recent"] ~ [for="tracks-recent"]:has(+ [for="tracks-chart"]) {
|
|||
#tracks-chart:not(:checked) ~ [for="tracks-chart"]:hover,
|
||||
#tracks-chart:not(:checked) ~ [for="tracks-chart"]:active {
|
||||
color: var(--accent-color-hover);
|
||||
}
|
||||
}
|
||||
|
|
@ -2,6 +2,15 @@ youtube-video {
|
|||
aspect-ratio: 16/9;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
border: var(--border-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
|
||||
&:hover {
|
||||
border-color: var(--accent-color-hover);
|
||||
transition: border var(--transition-duration-default)
|
||||
var(--transition-ease-in-out);
|
||||
}
|
||||
|
||||
&:has(+ *) {
|
||||
margin-bottom: var(--spacing-base);
|
||||
|
|
|
|||
|
|
@ -37,13 +37,13 @@
|
|||
);
|
||||
--accent-color: light-dark(var(--blue-400), var(--blue-200));
|
||||
--accent-color-hover: light-dark(var(--blue-600), var(--blue-100));
|
||||
--accent-color-active: light-dark(var(--blue-600), var(--blue-100));
|
||||
|
||||
--brand-buy-me-a-coffee: #ff5f5f;
|
||||
--brand-buy-me-a-coffee: light-dark(#0d0c22, #ffdd00);
|
||||
--brand-github: light-dark(#333, #f5f5f5);
|
||||
--brand-fastmail: light-dark(#0067b9, #ffc107);
|
||||
--brand-listenbrainz: #e97941;
|
||||
--brand-mastodon: #6364ff;
|
||||
--brand-npm: #cc3534;
|
||||
--brand-mastodon: light-dark(#563acc, #858afa);
|
||||
--brand-npm: #cb3837;
|
||||
--brand-rss: #f26522;
|
||||
|
||||
--article: light-dark(#007272, #00ffff);
|
||||
|
|
@ -149,7 +149,7 @@
|
|||
--inline-margin-bottom: -5px;
|
||||
|
||||
/* shadows */
|
||||
--box-shadow-media: inset 0 -85px 60px -40px var(--gray-900);
|
||||
--box-shadow-media: inset 0 -85px 60px -40px var(--color-darkest);
|
||||
--box-shadow-text-toggle: inset 0 -120px 60px -60px var(--background-color);
|
||||
--text-shadow-default: rgba(0, 0, 0, 0.7) 0px 0px 10px;
|
||||
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
</h3>
|
||||
<xsl:value-of select="description" disable-output-escaping="yes" />
|
||||
<xsl:if test="enclosure">
|
||||
<img src="{enclosure/@url}" alt="{title}" />
|
||||
<img class="image-banner" src="{enclosure/@url}" alt="{title}" />
|
||||
</xsl:if>
|
||||
</div>
|
||||
</xsl:for-each>
|
||||
|
|
|
|||
|
|
@ -16,10 +16,10 @@
|
|||
/* page styles */
|
||||
@import url("./pages/about.css") layer(page);
|
||||
@import url("./pages/books.css") layer(page);
|
||||
@import url("./pages/blogroll.css") layer(page);
|
||||
@import url("./pages/contact.css") layer(page);
|
||||
@import url("./pages/feeds.css") layer(page);
|
||||
@import url("./pages/links.css") layer(page);
|
||||
@import url("./pages/media.css") layer(page);
|
||||
@import url("./pages/music.css") layer(page);
|
||||
@import url("./pages/watching.css") layer(page);
|
||||
@import url("./pages/webrings.css") layer(page);
|
||||
|
|
|
|||
|
|
@ -13,14 +13,10 @@
|
|||
margin-bottom: var(--spacing-sm);
|
||||
width: 100%;
|
||||
|
||||
& .interior {
|
||||
display: flex;
|
||||
|
||||
& img {
|
||||
width: var(--avatar-size);
|
||||
height: var(--avatar-size);
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
& img {
|
||||
width: var(--avatar-size);
|
||||
height: var(--avatar-size);
|
||||
image-rendering: pixelated;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
.blog-roll-icons {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
border-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
|
||||
& .book-meta .description {
|
||||
& .media-meta .description {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -27,28 +27,17 @@
|
|||
max-width: calc(var(--sizing-3xl) * 4);
|
||||
height: auto;
|
||||
aspect-ratio: var(--aspect-ratio-vertical);
|
||||
transition: border-color var(--transition-duration-default)
|
||||
var(--transition-ease-in-out);
|
||||
}
|
||||
|
||||
& a:focus img,
|
||||
& a:focus-within img,
|
||||
& a:hover img,
|
||||
& a:active img {
|
||||
border-color: var(--accent-color-hover);
|
||||
}
|
||||
|
||||
& .book-meta {
|
||||
& .media-meta {
|
||||
margin-top: var(--sizing-base);
|
||||
align-items: center;
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
margin-top: 0;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
& p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& .description {
|
||||
margin-bottom: var(--spacing-base);
|
||||
}
|
||||
|
|
@ -65,38 +54,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.book-entry,
|
||||
.book-focus {
|
||||
& img {
|
||||
border: var(--border-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
}
|
||||
|
||||
& .book-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
|
||||
& p.title {
|
||||
font-size: var(--font-size-xl);
|
||||
line-height: var(--line-height-md);
|
||||
}
|
||||
|
||||
& p.sub-meta {
|
||||
font-size: var(--font-size-sm);
|
||||
|
||||
& svg {
|
||||
width: var(--sizing-svg-sm);
|
||||
height: var(--sizing-svg-sm);
|
||||
}
|
||||
}
|
||||
|
||||
& p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.book-focus {
|
||||
margin-top: var(--spacing-base);
|
||||
border-bottom: 0;
|
||||
|
|
@ -113,7 +70,7 @@
|
|||
align-items: start;
|
||||
}
|
||||
|
||||
& .book-meta {
|
||||
& .media-meta {
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
|
||||
|
|
@ -122,10 +79,6 @@
|
|||
align-items: start;
|
||||
}
|
||||
|
||||
& p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
& .progress-bar-wrapper {
|
||||
max-width: 50%;
|
||||
|
||||
|
|
|
|||
|
|
@ -22,11 +22,6 @@
|
|||
}
|
||||
|
||||
& img {
|
||||
border: var(--border-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin-top: var(--sizing-base);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,16 @@
|
|||
.link-grid {
|
||||
display: grid;
|
||||
gap: var(--spacing-sm);
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
grid-template-columns: var(--grid-columns-one);
|
||||
margin-bottom: var(--spacing-base);
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
grid-template-columns: var(--grid-columns-two);
|
||||
}
|
||||
|
||||
& .link-box {
|
||||
border: var(--border-gray);
|
||||
border-radius: var(--border-radius-slight);
|
||||
padding: var(--spacing-xs) var(--spacing-sm);
|
||||
padding: var(--spacing-sm) var(--spacing-md);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
19
src/assets/styles/pages/media.css
Normal file
19
src/assets/styles/pages/media.css
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
.media-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
|
||||
& .title {
|
||||
font-size: var(--font-size-xl);
|
||||
line-height: var(--line-height-md);
|
||||
}
|
||||
|
||||
& .sub-meta {
|
||||
font-size: var(--font-size-sm);
|
||||
|
||||
& svg {
|
||||
width: var(--sizing-svg-sm);
|
||||
height: var(--sizing-svg-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -12,7 +12,6 @@
|
|||
|
||||
& img {
|
||||
border: var(--border-default);
|
||||
border-radius: var(--border-radius-slight);
|
||||
width: 100%;
|
||||
height: auto;
|
||||
aspect-ratio: var(--aspect-ratio-square);
|
||||
|
|
@ -33,33 +32,12 @@
|
|||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
& .artist-meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
& .media-meta {
|
||||
margin-top: var(--spacing-base);
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
& p {
|
||||
margin: 0;
|
||||
|
||||
&.title {
|
||||
font-size: var(--font-size-xl);
|
||||
line-height: var(--line-height-md);
|
||||
}
|
||||
|
||||
&.sub-meta {
|
||||
font-size: var(--font-size-sm);
|
||||
|
||||
& svg {
|
||||
width: var(--sizing-svg-sm);
|
||||
height: var(--sizing-svg-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -72,13 +50,4 @@
|
|||
|
||||
.concert-list {
|
||||
margin-top: 0;
|
||||
padding-left: 0;
|
||||
|
||||
& li .modal-toggle {
|
||||
height: calc(var(--sizing-lg) * 1.6);
|
||||
}
|
||||
}
|
||||
|
||||
p.concerts + ul + hr {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,6 @@ a:active > .watching.hero::after {
|
|||
|
||||
& img {
|
||||
aspect-ratio: var(--aspect-ratio-banner);
|
||||
border-radius: var(--border-radius-slight);
|
||||
height: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -62,33 +61,8 @@ a:active > .watching.hero::after {
|
|||
margin-top: var(--spacing-base);
|
||||
border-bottom: 0;
|
||||
|
||||
& img {
|
||||
aspect-ratio: var(--aspect-ratio-banner);
|
||||
}
|
||||
|
||||
& .meta {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--spacing-sm);
|
||||
& .media-meta {
|
||||
margin: var(--margin-vertical-base-horizontal-zero);
|
||||
|
||||
& p {
|
||||
margin: 0;
|
||||
|
||||
&.title {
|
||||
font-size: var(--font-size-xl);
|
||||
line-height: var(--line-height-md);
|
||||
}
|
||||
|
||||
&.sub-meta {
|
||||
font-size: var(--font-size-sm);
|
||||
|
||||
& svg {
|
||||
width: var(--sizing-svg-sm);
|
||||
height: var(--sizing-svg-sm);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& .footnotes {
|
||||
|
|
@ -97,6 +71,6 @@ a:active > .watching.hero::after {
|
|||
}
|
||||
}
|
||||
|
||||
.icon-link + .poster.grid {
|
||||
a + .poster.grid {
|
||||
margin-top: var(--spacing-base);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,9 +1,15 @@
|
|||
code {
|
||||
padding: var(--spacing-xs);
|
||||
color: var(--text-color-inverted);
|
||||
background-color: var(--background-color-inverted);
|
||||
border-radius: var(--border-radius-slight);
|
||||
}
|
||||
|
||||
code,
|
||||
pre {
|
||||
color: var(--blue-100);
|
||||
background: none;
|
||||
border-radius: var(--border-radius-slight);
|
||||
text-shadow: 0 1px rgba(0, 0, 0, 0.3);
|
||||
font-family: var(--font-mono);
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
|
|
@ -32,8 +38,8 @@ pre {
|
|||
|
||||
pre,
|
||||
:not(pre) > code {
|
||||
background: var(--gray-900);
|
||||
border: 1px solid var(--gray-300);
|
||||
background: var(--color-darkest);
|
||||
border: var(--border-gray);
|
||||
}
|
||||
|
||||
.namespace {
|
||||
|
|
|
|||
|
|
@ -1,29 +1,135 @@
|
|||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: var(--line-height-md);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-size-adjust: none;
|
||||
:where([hidden]:not([hidden='until-found'])) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
input,
|
||||
button,
|
||||
textarea,
|
||||
select {
|
||||
font: inherit;
|
||||
:where(html) {
|
||||
font-size: 100%;
|
||||
-webkit-text-size-adjust: none;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-gutter: stable;
|
||||
tab-size: 2;
|
||||
}
|
||||
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
overflow-wrap: break-word;
|
||||
:where(html:has(dialog:modal[open])) {
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
:where(html:focus-within) {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
:where(body) {
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-base);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
:where(button) {
|
||||
all: unset;
|
||||
}
|
||||
|
||||
:where(input, button, textarea, select) {
|
||||
font: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
:where(textarea) {
|
||||
resize: vertical;
|
||||
resize: block;
|
||||
}
|
||||
|
||||
:where(button, label, select, summary, [role='button'], [role='option']) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
:where(:disabled) {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
:where(label:has(> input:disabled), label:has(+ input:disabled)) {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
:where(a) {
|
||||
color: inherit;
|
||||
text-underline-offset: var(--spacing-xs);
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: number;
|
||||
}
|
||||
|
||||
:where(ul, ol) {
|
||||
list-style-position: inside;
|
||||
}
|
||||
|
||||
:where(img, svg, video, canvas, audio, iframe, embed, object) {
|
||||
display: block;
|
||||
}
|
||||
|
||||
:where(p, h1, h2, h3) {
|
||||
overflow-wrap: break-word;
|
||||
}
|
||||
|
||||
:where(h1, h2, h3) {
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
:where(hr) {
|
||||
border: none;
|
||||
border-block-start: 1px solid;
|
||||
border-block-start-color: currentColor;
|
||||
color: inherit;
|
||||
block-size: 0;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
:where(dialog, [popover]) {
|
||||
border: none;
|
||||
background: none;
|
||||
color: inherit;
|
||||
inset: unset;
|
||||
max-width: unset;
|
||||
max-height: unset;
|
||||
}
|
||||
|
||||
:where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
:where(:focus-visible) {
|
||||
outline: var(--border-default);
|
||||
outline-offset: 1px;
|
||||
border-radius: var(--border-radius-slight);
|
||||
box-shadow: 0 0 0 1px var(--accent-color);
|
||||
}
|
||||
|
||||
:where(:focus-visible, :target) {
|
||||
scroll-margin-block: 8vh;
|
||||
}
|
||||
|
||||
:where(.visually-hidden:not(:focus-within, :active)) {
|
||||
clip-path: inset(50%) !important;
|
||||
height: 1px !important;
|
||||
width: 1px !important;
|
||||
overflow: hidden !important;
|
||||
position: absolute !important;
|
||||
white-space: nowrap !important;
|
||||
border: 0 !important;
|
||||
user-select: none !important;
|
||||
}
|
||||
Reference in a new issue