n_u/nathanupchurch.com
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Get rid of web components

Browse Source
This commit is contained in:
Nathan Upchurch
2025-11-21 17:56:20 -06:00
parent 3e24bb336a
commit 87fa41f2ac
7 changed files with 45 additions and 460 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
public/css/index.css
View File

@@ -127,18 +127,6 @@
/* Shadow */
--box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
/* Web Component Tokens */
--wc-card-background-color: var(--card-color);
--wc-card-border-radius: var(--border-radius);
--wc-card-margin: 0 0 var(--space-s) 0;
--wc-card-box-shadow: var(--box-shadow);
--wc-link-color: var(--text-color);
--wc-link-decoration-color: var(--contrast-color);
--wc-link-decoration-thickness: var(--link-decoration-thickness);
--wc-comment-text-margin: var(--space-xs) 0 0 0;
--wc-profile-pic-size: var(--space-l);
--wc-profile-pic-border-radius: 10rem;
}
@media (prefers-color-scheme: dark) {
@@ -438,7 +426,7 @@ body.barebones {
text-align: center;
}
figcaption {
figcaption:not(.mplayerInfo) {
font-size: var(--step--1);
font-style: italic;
padding-top: var(--space-3xs);
@@ -504,43 +492,47 @@ table th {
}
/* Audio Player */
wc-mplayer {
width: 100%;
.albumCover {
object-fit: cover;
}
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);
.albumCover,
.coverContainer {
width: var(--space-4xl);
height: var(--space-4xl);
border-radius: var(--border-radius);
}
wc-mplayer::part(captionAndPlayer) {
.artist {
font-size: var(--meta-font-size);
margin-bottom: var(--space-s);
}
.captionAndPlayer {
display: flex;
flex-flow: column nowrap;
justify-content: space-between;
width: 100%;
}
wc-mplayer::part(main) {
.mplayer {
background-color: var(--card-color);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
display: flex;
gap: var(--space-s);
margin: 0;
margin: 0 0 var(--space-s) 0;
padding: var(--space-m);
width: 100%;
}
wc-mplayer::part(player) {
.player {
align-self: flex-end;
border-radius: var(--border-radius);
width: 100%;
}
wc-mplayer::part(title) {
.songTitle {
font-size: var(--step-1);
font-variation-settings:
"opsz" 50,
@@ -550,41 +542,13 @@ wc-mplayer::part(title) {
}
/* 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 {
@@ -1062,6 +1026,18 @@ article.post {
margin-right: var(--space-3xs);
}
}
.card {
align-items: flex-start;
background-color: var(--card-color);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
display: flex;
flex-flow: row nowrap;
justify-content: flex-start;
margin: 0 0 var(--space-s) 0;
padding: var(--single-gap) 1.1rem var(--single-gap) 1.1rem;
width: 100%;
}
.gallery-images {
display: flex;
flex-flow: row wrap;