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

New style initial

Browse Source
This commit is contained in:
Nathan Upchurch
2026-06-28 20:18:03 -05:00
parent 9938f0f8ff
commit 677bf18e5b
45 changed files with 1454 additions and 667 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
public/css/comments.css
View File

@@ -1,21 +1,124 @@
.isso-comment-header {
height: var(--space-2xl) !important;
.isso-auth-section {
display: flex !important;
flex-flow: row wrap;
gap: var(--space-3xs);
& .isso-input-wrapper {
flex-basis: 30%;
flex-grow: 1;
}
}
@container (width < 460px) {
.isso-auth-section {
flex-flow: column;
}
}
h4.isso-thread-heading {
color: var(--text-color) !important;
font-size: var(--step-2) !important;
font-variation-settings:
"opsz" 50,
"wght" 350,
"SOFT" 20,
"WONK" 1 !important;
line-height: calc(var(--step-2) * 0.25 + var(--step-2)) !important;
margin-bottom: var(--space-m) !important;
margin-top: var(--space-m) !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
text-wrap: pretty !important;
.isso-comment {
& > .isso-avatar {
margin-left: var(--space-l);
margin-top: var(--space-l);
& img {
border-radius: var(--large-rounded-radius);
border-top-left-radius: 0;
}
}
& .isso-comment-footer {
display: flex;
flex-flow: row nowrap;
align-items: center;
& a {
position: inherit;
}
& .isso-reply {
color: var(--contrast-color);
font-family: var(--font-family-ui);
font-size: var(--step--2);
font-variation-settings: "wght" 700;
letter-spacing: var(--wide-letter-spacing);
text-align: end;
text-transform: uppercase;
}
& .isso-spacer {
display: none;
}
& .isso-votes {
color: var(--contrast-color);
font-family: var(--font-family-ui);
font-size: var(--step--1);
font-variation-settings: "wght" 700;
letter-spacing: var(--wide-letter-spacing);
text-transform: uppercase;
}
& svg {
fill: var(--contrast-color) !important;
}
}
& .isso-comment-header {
color: var(--contrast-color) !important;
margin-bottom: var(--space-s);
& a[href].isso-author, a[href].isso-author:visited, a[href].isso-author:hover {
color: var(--contrast-color) !important;
}
& .isso-author {
color: var(--contrast-color);
font-family: var(--font-family-ui);
font-size: var(--step--1);
font-variation-settings: "wght" 600;
&::after {
content: "\A";
white-space: pre;
}
}
& .isso-permalink {
color: var(--contrast-color);
font-family: var(--font-family-ui);
font-size: var(--step--2);
font-variation-settings: "wght" 500;
}
& .isso-spacer {
display: none;
}
}
& > .isso-follow-up {
border-top-right-radius: 0;
margin-top: var(--space-xs);
margin-bottom: var(--space-l);
& .isso-text-wrapper {
border-top-left-radius: var(--large-rounded-radius);
border-top-right-radius: 0;
}
}
& > .isso-text-wrapper {
background-color: var(--contrast-color-tint);
border-radius: var(--large-rounded-radius);
border-top-left-radius: 0;
padding: var(--space-l);
& .isso-text p {
font-style: italic;
margin-block: 0 1lh !important;
}
}
&:not(:first-of-type), .isso-follow-up .isso-comment {
border-top: none !important;
}
}
section#isso-thread {
& h4.isso-thread-heading {
color: var(--contrast-color);
font-family: var(--font-family-ui);
font-size: var(--step-0);
font-variation-settings: "wght" 450;
letter-spacing: var(--wide-letter-spacing);
line-height: calc(var(--step-0) * 0.25 + var(--step-0));
margin-block: 0 1lh;
margin-top: var(--space-m);
padding-bottom: 0;
padding-top: 0;
text-transform: uppercase;
text-wrap: pretty;
}
}
.isso-text > h1,
@@ -24,15 +127,15 @@ h4.isso-thread-heading {
}
.isso-form-wrapper > .isso-auth-section > .isso-post-action > input {
background-color: var(--contrast-color) !important;
background-color: var(--contrast-color-tint) !important;
border: none !important;
border-radius: var(--border-radius) !important;
color: var(--background-color) !important;
color: var(--contrast-color) !important;
font-family: var(--font-family-ui) !important;
font-size: var(--step--2) !important;
font-variation-settings: var(--font-variation-ui) !important;
height: var(--space-m-l) !important;
letter-spacing: var(--ui-letter-spacing) !important;
letter-spacing: var(--wide-letter-spacing) !important;
margin: var(--space-s) 0 0 0 !important;
padding: 0 var(--space-xs) !important;
text-transform: uppercase !important;
@@ -44,8 +147,7 @@ p.isso-input-wrapper {
display: block !important;
margin: 0 !important;
max-width: 100% !important;
& > label,
& > input {
& > label {
font-family: var(--font-family-ui) !important;
font-size: var(--step--2) !important;
font-variation-settings: var(--font-variation-ui) !important;
@@ -55,15 +157,56 @@ p.isso-input-wrapper {
margin-block: inherit !important;
}
}
@container (width < 460px) {
p.isso-input-wrapper > label {
margin-top: 0 !important;
}
}
.isso-postbox {
background-color: var(--contrast-color);
border-radius: var(--large-rounded-radius);
border-top-left-radius: 0;
color: var(--background-color);
padding: var(--space-l) calc((100cqw - (var(--grid-gutter) * 11)) / 12) var(--space-2xs) calc((100cqw - (var(--grid-gutter) * 11)) / 12);
margin-left: calc(((100cqw - (var(--grid-gutter) * 11)) / 12) * -1) !important;
margin-block: 1lh 1lh;
width: calc(((100cqw) / 12) * 14);
}
@container (width < 460px) {
.isso-postbox {
padding: var(--space-l) var(--space-m) var(--space-s) var(--space-m);
}
}
.isso-post-action {
display: inline-block !important;
float: inherit !important;
margin: 0 var(--space-2xs) 0 0 !important;
margin-left: 0 !important;
&::after {
content: "" !important;
}
}
@container (width < 460px) {
.isso-post-action {
margin-bottom: 0 !important;
}
}
.isso-text {
color: var(--text-color);
& > blockquote {
margin: 0;
padding: var(--space-3xs) var(--space-s);
&::before {
font-size: var(--step-5);
margin-top: -4.5px;
}
& p {
padding: 0 0 0 var(--space-s);
}
}
& p {
margin-bottom: 0 !important;
}
}
textarea.isso-textarea {
background-color: var(--background-color) !important;
@@ -76,7 +219,13 @@ textarea.isso-textarea {
font-variation-settings: var(--font-variation-default) !important;
margin-bottom: 0 !important;
min-height: var(--space-l) !important;
padding: 0 var(--space-3xs) !important;
resize: vertical !important;
width: 100%;
}
@media (max-width: 900px) {
.isso-postbox {
margin-left: auto !important;
width: 100%;
}
}

8
public/css/continue-discussion-on-mastodon.css
View File

@@ -2,6 +2,12 @@
grid-column: var(--span-grid);
}
.continue-discussion button {
margin-top: calc(var(--space-s) * -1);
margin-bottom: var(--space-m);
& > svg {
aspect-ratio: 1 / 1;
fill: var(--background-color);
height: var(--space-xs);
margin-right: var(--space-2xs);
width: var(--space-xs);
}
}

9
public/css/dropcap.css
View File

@@ -1,16 +1,13 @@
main > section > article.post > p:not(.nodropcap):first-of-type:first-letter {
float: left;
font-size: var(--step-5);
padding: var(--space-2xs);
font-size: var(--step-4);
padding-top: var(--space-3xs);
color: var(--contrast-color);
border: solid 2px var(--contrast-color);
font-family: var(--font-family-headline);
font-variation-settings:
"opsz" 144,
"wght" 500,
"wght" 600,
"SOFT" 10,
"WONK" 0;
margin: 0.5rem 0.7rem 0 0;
border-radius: 0.2em;
border-top-left-radius: 0;
}

3
public/css/gallery-images.css
View File

@@ -7,7 +7,8 @@
width: var(--space-7xl-8xl);
height: var(--space-7xl-8xl);
.gallery-image {
border-radius: var(--border-radius);
border-radius: 1em;
border-top-left-radius: 0;
width: var(--space-7xl-8xl);
height: var(--space-7xl-8xl);
object-fit: cover;

31
public/css/guestbook.css
View File

@@ -1,31 +1,48 @@
.guestbook-message blockquote {
margin-bottom: var(--space-m);
margin-top: var(--space-3xs);
padding: var(--space-m) var(--space-2xl);
&:before {
color: var(--contrast-color);
content: "“";
font-size: 10rem;
font-variation-settings:
"opsz" 72,
"wght" 360,
"SOFT" 0,
"WONK" 0;
margin-left: calc((var(--space-xl) * 1.25) * -1);
margin-top: calc((var(--space-s) * 1.3) * -1);
position: absolute;
}
}
.guestbook-message p {
margin-block: 0 0;
position: relative;
z-index: 1;
}
.guestbook-message p b,
.guestbook-message p small {
font-family: var(--meta-font-family);
font-size: var(--meta-font-size);
font-variation-settings: var(--meta-font-variation-settings);
color: var(--color-metadata);
font-family: var(--font-family-metadata);
font-size: var(--font-size-metadata);
font-variation-settings: var(--font-variation-settings-metadata);
text-transform: var(--text-transform-metadata);
letter-spacing: var(--letter-spacing-metadata);
& a[href] {
color: var(--color-metadata);
}
}
#guestbooks___challenge-answer-container br,
.guestbooks___input-container br {
display: none;
}
.guestbook-message-reply {
border-left: var(--border-details);
margin-left: var(--space-l);
margin-top: calc(var(--space-s) * -1);
opacity: 0.9;
padding-left: var(--space-s);
font-style: italic;
& blockquote {
margin-left: 0;
padding-left: var(--space-s);
}
& blockquote::before {
content: "";

832
public/css/index.css
View File

File diff suppressed because it is too large Load Diff

23
public/css/me.css
View File

@@ -16,16 +16,27 @@
justify-content: center;
width: 100%;
margin: 0 0 var(--space-s) 0;
& > img {
max-width: var(--space-s);
& > svg {
fill: var(--background-color);
margin-right: var(--space-xs);
width: var(--space-s);
height: var(--space-s);
}
}
h1.socialTitle {
padding: 0;
margin: 0;
font-size: var(--step-4);
line-height: calc(var(--step-4) * 0.5 + var(--step-4));
margin-top: var(--space-m);;
color: var(--contrast-color);
font-family: var(--font-family-ui);
font-size: var(--step-0);
font-style: normal;
font-variation-settings: "wght" 450;
letter-spacing: var(--wide-letter-spacing);
line-height: calc(var(--step-0) * 0.25 + var(--step-0));
text-transform: uppercase;
text-wrap: pretty;
}
.links-container p {
@@ -37,5 +48,5 @@ h1.socialTitle {
img.profilePic {
max-width: var(--space-6xl);
border-radius: 50%;
border: solid 2px var(--text-color);
border: solid 2px var(--contrast-color);
}

32
public/css/metadata.css
View File

@@ -1,32 +0,0 @@
.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;
}

61
public/css/microblog.css
View File

@@ -1,5 +1,5 @@
.microblog-comment {
p {
& p {
font-style: italic;
margin: 0;
padding: var(--space-s) 0 0 0;
@@ -12,20 +12,42 @@
}
.microblog-icon {
filter: var(--logo-filter);
fill: var(--contrast-color);
height: var(--space-4xl);
padding-right: var(--space-s);
width: var(--space-2xl);
}
.microblog-list {
.post-metadata {
& .postlist-item-container {
display: flex;
flex-flow: column nowrap;
gap: var(--space-s);
& .postlist-item {
& .post-copy {
& .post-metadata {
& .post-metadata-copy {
& p {
margin-bottom: 0;
}
}
}
& h3 {
&:before {
content: "";
margin-left: 0;
}
}
}
}
}
& .post-metadata {
padding: 0;
}
}
.microblog-post {
display: flex;
.microblog-comment {
p {
& .microblog-comment {
& p {
padding-top: 0;
padding-bottom: var(--space-2xs);
}
@@ -37,25 +59,28 @@
align-items: center;
padding: var(--space-s);
}
.microblog-status-copy {
& h2 {
margin-top: var(--space-m);
}
& .microblog-status-copy {
align-items: center;
display: flex;
flex-flow: column nowrap;
p {
margin: 0;
}
.status-metadata {
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));
& .status-metadata {
color: var(--color-metadata);
font-family: var(--font-family-metadata);
font-size: var(--font-size-metadata);
font-variation-settings: var(--font-variation-settings-metadata);
letter-spacing: var(--letter-spacing-metadata);
line-height: calc(var(--font-size-metadata) * 0.5 + var(--font-size-metadata));
text-transform: var(--text-transform-metadata);
& a[href] {
color: var(--color-metadata);
text-decoration: none;
}
}
}
}
.postlist-item-container {
display: flex;
flex-flow: column nowrap;
gap: var(--space-s);
}

36
public/css/navigator.css
View File

@@ -2,43 +2,45 @@
display: grid;
gap: var(--space-2xs) var(--space-2xs);
grid-template-columns: repeat(auto-fill, minmax(var(--space-6xl), 1fr));
margin-bottom: var(--space-xl);
margin-top: var(--space-xl);
width: 100%;
.navigatorItem {
background-color: var(--background-color);
border: 1.5px solid var(--color-gray-20);
border: var(--border-header-footer);
border-radius: var(--border-radius);
color: var(--text-color);
display: flex;
flex-flow: column wrap;
flex-flow: row nowrap;
height: var(--space-3xl);
text-align: center;
a {
& a[href] {
height: 100%;
padding: var(--space-s) var(--space-xs);
text-decoration: none;
width: 100%;
img {
& p {
font-family: var(--font-family-ui);
font-size: var(--step--2);
font-variation-settings: var(--font-variation-ui);
text-transform: uppercase;
letter-spacing: var(--wide-letter-spacing);
}
& svg {
aspect-ratio: 1 / 1;
filter: var(--logo-filter);
fill: var(--text-color);
max-height: var(--space-m);
width: var(--space-m);
}
}
&:hover {
background-color: var(--text-color);
border: 1.25px solid var(--text-color);
background-color: var(--contrast-color);
transition: var(--transition-normal);
a {
& a {
color: var(--background-color);
transition: var(--transition-normal);
img {
filter: none;
transition: var(--transition-normal);
}
@media (prefers-color-scheme: dark) {
img {
filter: brightness(0) saturate(100%) invert(16%) sepia(0%)
saturate(1024%) hue-rotate(177deg) brightness(99%) contrast(88%);
}
& svg {
fill: var(--background-color);
}
}
}

91
public/css/post-list.css
View File

@@ -1,91 +0,0 @@
/* 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);
}
.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;
}
@container postlist (max-width: 500px) {
.postlist-item {
flex-flow: column wrap;
}
.post-image-container {
margin-left: 0;
min-height: var(--space-10xl);
width: 100%;
}
.post-image-container img.post-image {
width: 100cqw;
height: var(--space-10xl);
}
.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;
}
}

6
public/css/profile-pic.css
View File

@@ -1,6 +0,0 @@
.profilePic:not(.links-container > img.profilePic) {
border-radius: 100%;
height: var(--space-xl);
margin-right: var(--space-s);
width: var(--space-xl);
}

4
public/css/quiz.css
View File

@@ -18,7 +18,7 @@ details:not(.toc) {
font-size: var(--step--2);
font-variation-settings: var(--font-variation-ui);
text-transform: uppercase;
letter-spacing: var(--ui-letter-spacing);
letter-spacing: var(--wide-letter-spacing);
font-family: var(--font-family-ui);
::marker {
@@ -40,7 +40,7 @@ details:not(.toc) {
font-size: var(--step--2);
font-variation-settings: var(--font-variation-ui);
text-transform: uppercase;
letter-spacing: var(--ui-letter-spacing);
letter-spacing: var(--wide-letter-spacing);
font-family: var(--font-family-ui);
}
}

33
public/css/search.css
View File

@@ -28,13 +28,44 @@ mark {
font-family: var(--font-family-ui) !important;
font-size: var(--step--2) !important;
font-variation-settings: var(--font-variation-ui) !important;
letter-spacing: var(--ui-letter-spacing) !important;
letter-spacing: var(--wide-letter-spacing) !important;
margin: var(--space-xs) 0 0 0 !important;
padding: 0 var(--space-xs) !important;
text-transform: uppercase !important;
transition: var(--transition-normal) !important;
white-space: nowrap !important;
}
.pagefind-ui__results-area {
.pagefind-ui__message {
font-family: var(--font-family-ui);
font-size: var(--step--2);
font-variation-settings: "wght" 500;
letter-spacing: var(--wide-letter-spacing);
padding-top: 0;
text-transform: uppercase;
}
.pagefind-ui__results {
& .pagefind-ui__result {
& .pagefind-ui__result-inner {
& .pagefind-ui__result-excerpt {
font-size: var(--step-0);
line-height: calc(var(--step-0) * 0.5 + var(--step-0));
}
& .pagefind-ui__result-title {
font-family: var(--font-family-ui);
font-size: var(--step--1);
font-variation-settings: "wght" 700;
letter-spacing: var(--wide-letter-spacing);
line-height: calc(var(--step--1) * 0.5 + var(--step--1));
text-transform: uppercase;
& a[href] {
color: var(--contrast-color);
}
}
}
}
}
}
.pagefind-ui__search-clear {
font-family: var(--meta-font-family) !important;

22
public/css/tags.css
View File

@@ -1,31 +1,27 @@
a.post-tag {
background-color: var(--color-gray-20);
border-radius: 1rem;
color: var(--text-color);
color: var(--background-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);
color: var(--background-color);
}
a.post-tag:hover {
color: var(--text-color);
a[href].post-tag:hover {
color: var(--background-color);
}
.tag-feed-icon {
fill: var(--rss-orange);
height: var(--space-m);
height: var(--space-s);
transition: var(--transition-normal);
width: var(--space-m);
width: var(--space-s);
&.small {
height: var(--space-s);
width: var(--space-s);
height: var(--space-xs);
width: var(--space-xs);
}
}
.taglist {

43
public/css/toc.css
View File

@@ -1,11 +1,46 @@
details.toc {
padding-bottom: var(--space-m);
}
.toc {
padding-bottom: var(--space-m);
& div.toc {
background-color: var(--contrast-color-tint);
border-radius: var(--large-rounded-radius);
border-top-left-radius: 0;
color: var(--contrast-color);
font-family: var(--font-family-ui);
font-variation-settings: "wght" 360;
margin-left: 0;
margin-right: 0;
padding: var(--space-s) var(--space-l) var(--space-m) var(--space-m);
}
& ol {
margin-bottom: 0;
margin-top: 0;
padding-left: var(--space-m);
& li {
font-size: var(--step--1);
& a {
text-decoration: none;
}
}
}
&[open] {
& summary::marker {
content: "✸ ";
font-size: var(--step--1);
}
}
& summary {
cursor: pointer;
font-family: var(--font-family-ui);
font-size: var(--step--2);
font-variation-settings: "wght" 700;
letter-spacing: var(--wide-letter-spacing);
margin-left: -1.5em;
text-transform: uppercase;
&::marker {
color: var(--contrast-color);
content: "✸ ";
font-size: var(--step--1);
padding-top: 1em;
}
}
}

6
public/xsl/basic.xsl
View File

@@ -11,14 +11,12 @@
</title>
<link rel="stylesheet" href="../css/index.css"/>
<link rel="stylesheet" href="../css/webfonts/webfonts.css"/>
<link rel="stylesheet" href="../css/post-list.css"/>
<link rel="stylesheet" href="../css/metadata.css"/>
</head>
<body>
<main>
<h1>RSS Feed Preview</h1>
<h1 class="feed-preview">RSS Feed Preview</h1>
<p class="nodropcap page-block">This is an RSS feed. Subscribe by copying the URL from the address bar into your newsreader. Don’t have a newsreader? <a href="../about-feeds/">Learn more and get started</a>. It’s free. Below is a preview of what you’ll see in your newsreader when you subscribe. Done here? <a href="../">Go back to nathanupchurch.com</a></p>
<h2>Posts</h2>
<section class="postlist">
<div class="postlist-item-container">
<xsl:for-each select="/atom:feed/atom:entry">
@@ -40,7 +38,7 @@
<xsl:attribute name="href">
<xsl:value-of select="atom:link/@href"/>
</xsl:attribute>
<h3>
<h3 class="postlist-link">
<xsl:value-of select="atom:title"/>
</h3>
</a>