- {% if author %}
- {% if author.profilePic %}
-
- {% endif %}
-
-
{% if author.url %}{% endif %}
- {% if author.name %}By {{ author.name }}{% endif %}{% if author.url %} • {% endif %} • {{ content | emojiReadTime }}
-
- {% else %}
- {% if metadata.author.profilePic %}
-
- {% endif %}
-
-{% endif %}
-{{ content | safe }}
+{% if tags and not tags.includes('quiz') %}{{ content | safe }}{% endif %}
+{% if tags and not tags.includes('quiz') %}
+{% include "articleAuthor.njk" %}
+{% include "mastodonComments.njk" %}
+{% endif %}
{% include "issoCommenting.njk" %}
diff --git a/_includes/layouts/quizzes.njk b/_includes/layouts/quizzes.njk
index 7bfc0be..2622bd2 100644
--- a/_includes/layouts/quizzes.njk
+++ b/_includes/layouts/quizzes.njk
@@ -3,6 +3,12 @@ layout: layouts/post.njk
structuredData: none
---
{{ content | safe }}
+{% if imageURL %}
+
+{% endif %}
+
+
+ By {% if author %}{{ author.name }}{% else %}{{ metadata.author.name }}{% endif %}
diff --git a/content/tags/tag-page-generator.njk b/content/tags/tag-page-generator.njk
index e50d9a6..64e19e1 100644
--- a/content/tags/tag-page-generator.njk
+++ b/content/tags/tag-page-generator.njk
@@ -41,17 +41,25 @@ eleventyComputed:
Here’s everything I’ve posted tagged “{{ tag }}.” Want to be notified when I post on this topic? Subscribe to “{{ tag }}” using the button below.
-
-
-
-
-
-
+
+
+
+
+
+
+
+
{% set postslist = collections[ tag ] | reverse %}
diff --git a/public/css/comments.css b/public/css/comments.css
index 44dada7..0504845 100644
--- a/public/css/comments.css
+++ b/public/css/comments.css
@@ -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%;
+ }
+}
\ No newline at end of file
diff --git a/public/css/continue-discussion-on-mastodon.css b/public/css/continue-discussion-on-mastodon.css
index 2e9eb75..be283b6 100644
--- a/public/css/continue-discussion-on-mastodon.css
+++ b/public/css/continue-discussion-on-mastodon.css
@@ -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);
+ }
}
diff --git a/public/css/dropcap.css b/public/css/dropcap.css
index 88e5239..7fd4bc4 100644
--- a/public/css/dropcap.css
+++ b/public/css/dropcap.css
@@ -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;
}
diff --git a/public/css/gallery-images.css b/public/css/gallery-images.css
index 9ad7566..aa187d3 100644
--- a/public/css/gallery-images.css
+++ b/public/css/gallery-images.css
@@ -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;
diff --git a/public/css/guestbook.css b/public/css/guestbook.css
index 331f7e6..91c51cf 100644
--- a/public/css/guestbook.css
+++ b/public/css/guestbook.css
@@ -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: "";
diff --git a/public/css/index.css b/public/css/index.css
index f6e5119..207246a 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -5,15 +5,15 @@
--font-family-ui: "Manrope", sans-serif;
--font-variation-default: "opsz" 18, "wght" 310, "SOFT" 40, "WONK" 0;
--font-variation-ui: "wght" 500;
- --font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono,
- Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono,
- Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New,
- Courier, monospace;
+ --font-family-monospace:
+ Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console,
+ Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono,
+ Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
--meta-font-family: "Manrope", sans-serif;
- --meta-font-size: var(--step--2);
+ --meta-font-size: var(--step--1);
--meta-font-style: normal;
- --meta-font-variation-settings: "wght" 500;
- --ui-letter-spacing: calc(var(--space-3xs) * 0.5);
+ --meta-font-variation-settings: "wght" 350;
+ --wide-letter-spacing: 15%;
}
/* Design Tokens */
@@ -24,9 +24,11 @@
--card-color: rgba(250, 250, 250, 1);
--contrast-color: rgb(2, 120, 96);
- --contrast-color-translucent: rgba(2, 120, 96, 0.5);
- --background-color: #faf5f5;
+ --contrast-color-translucent: rgba(2, 94, 74, 0.5);
+ --background-color: rgb(235, 245, 240);
--rss-orange: rgb(255, 152, 0);
+ --contrast-color-tint: rgb(225, 240, 236);
+ --nav-footer-color: white;
--text-color: var(--color-gray-90);
--text-color-link: var(--text-color);
--text-color-tag: var(--contrast-color);
@@ -87,29 +89,33 @@
--grid-gutter: var(--space-s-s, clamp(1.25rem, 1.1092rem + 0.7042vw, 1.5rem));
--grid-columns: 12;
- /* Span grid utility */
+ /* Utilities */
--span-grid: 1 / span 12;
-
- /* Change
![]()
SVG color with filter */
- --logo-filter: brightness(0) saturate(100%) invert(16%) sepia(0%)
- saturate(1024%) hue-rotate(177deg) brightness(99%) contrast(88%);
- --icon-filter: none;
+ --color-metadata: var(--contrast-color);
+ --font-family-metadata: var(--font-family-ui);
+ --line-height-metadata: calc(var(--step--2) * 0.25 + var(--step--2));
+ --font-size-metadata: var(--step--2);
+ --letter-spacing-metadata: var(--wide-letter-spacing);
+ --text-transform-metadata: uppercase;
+ --font-variation-settings-metadata: "wght" 500;
/* Corners */
--border-radius: 0.3rem;
+ --large-rounded-radius: 1rem;
/* Transitions */
--transition-normal: all 0.3s allow-discrete;
/* Links */
- --link-decoration-thickness: 0.06rem;
+ --link-decoration-thickness: 0.15rem;
/* Borders */
--border-details: 1px solid var(--color-gray-20);
+ --border-header-footer: 1px solid var(--contrast-color);
--border-hr: 0.5px solid var(--color-gray-20);
- --border-nav: 1px solid var(--text-color);
- --border-nav-currentpage: var(--space-xs-s) solid var(--contrast-color);
- --border-nav-hover: var(--space-xs-s) solid var(--text-color);
+ --border-nav: 1px solid var(--background-color);
+ --border-nav-currentpage: var(--space-xs-s) solid var(--background-color);
+ --border-nav-hover: var(--space-xs-s) solid var(--background-color);
/* Shadow */
--box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
@@ -119,17 +125,14 @@
:root {
--color-gray-20: #253848;
--color-gray-90: #dad8d8;
- --card-color: #333333;
+ --card-color: rgb(0,50,40);
--contrast-color: rgb(4, 196, 158);
+ --contrast-color-tint: rgb(21, 58, 56);
--contrast-color-translucent: rgba(4, 196, 158, 0.5);
-
+ --nav-footer-color: rgb(0,50,40);
/* --text-color is assigned to --color-gray-_ above */
--text-color-link: var(--text-color);
-
- --background-color: #15202b;
- --logo-filter: none;
- --icon-filter: brightness(0) saturate(100%) invert(9%) sepia(76%)
- saturate(340%) hue-rotate(168deg) brightness(95%) contrast(94%);
+ --background-color: rgb(24, 27, 32);
}
.socialLinks a li img {
filter: auto;
@@ -148,12 +151,22 @@ body {
font-family: var(--font-family);
font-variation-settings: var(--font-variation-default);
font-variant-ligatures: normal;
- margin: 0 auto;
+ margin: 0;
padding: 0;
}
html {
font-size: 13px;
- overflow-y: scroll;
+ height: 100%;
+}
+abbr {
+ cursor: help;
+ text-decoration-thickness: var(--link-decoration-thickness);
+ text-decoration-color: var(--contrast-color);
+}
+article.post {
+ & > p:first-of-type {
+ margin-top: var(--space-xl);
+ }
}
input:not(.answer, .siteSettingsToggle input),
textarea {
@@ -167,50 +180,74 @@ textarea {
font-variation-settings: var(--font-variation-default);
margin-block: 0 1lh;
min-height: var(--space-l);
- padding: 0 var(--space-3xs);
width: 100%;
&:focus {
box-shadow: 0 0 0 2px var(--contrast-color);
outline: none;
}
+ &::placeholder {
+ font-style: italic;
+ }
}
label {
display: block;
margin-bottom: var(--space-3xs);
}
-article:not(.postlist-item) {
- & h2 {
- padding-top: var(--space-m);
+blockquote {
+ background-color: var(--contrast-color-tint);
+ border-radius: var(--large-rounded-radius);
+ border-top-left-radius: 0;
+ color: var(--contrast-color);
+ font-style: italic;
+ font-variation-settings:
+ "opsz" 18,
+ "wght" 360,
+ "SOFT" 40,
+ "WONK" 0;
+ margin-left: 0;
+ margin-right: 0;
+ padding: var(--space-m) var(--space-l) var(--space-3xs) var(--space-l);
+ position: relative;
+ z-index: -1;
+ & p {
+ padding-left: var(--space-xl);
}
}
-blockquote p {
- font-style: italic;
-}
+
blockquote:before {
color: var(--contrast-color);
content: "“";
font-size: 10rem;
- margin-left: -4rem;
- margin-top: -2rem;
+ font-variation-settings:
+ "opsz" 72,
+ "wght" 360,
+ "SOFT" 0,
+ "WONK" 0;
+ margin-left: calc(var(--space-s) * -1);
+ margin-top: calc(var(--space-s) * -1);
position: absolute;
- filter: opacity(0.15);
- z-index: 0;
}
+
.blogroll {
h2:first-of-type {
padding-top: 0;
}
}
body {
+ container-type: inline-size;
+ display: flex;
+ flex-direction: column;
font-size: var(--step-0);
- margin-inline: auto;
- max-width: var(--grid-max-width);
+ height: 100cqh;
padding-inline: var(--grid-gutter);
- padding-top: var(--space-m);
- padding-bottom: var(--space-m);
+ /*! width: 100vw; */
}
button {
+ align-items: center;
+ display: flex;
+ flex-flow: row nowrap;
height: var(--space-m-l);
+ width: fit-content;
}
.buttonContainer {
display: flex;
@@ -219,31 +256,28 @@ button {
margin-bottom: var(--space-m);
button {
margin-top: var(--space-s);
+ & svg {
+ fill: var(--background-color);
+ height: var(--space-2xs);
+ margin-right: var(--space-2xs);
+ width: var(--space-2xs);
+ }
}
&.galleryButtons {
margin-top: calc(var(--space-l) * -1);
+ width: 100%;
}
}
button,
.nav-item {
font-family: var(--font-family-ui);
}
-header,
-footer,
-main {
- display: grid;
- gap: var(--grid-gutter);
- grid-template-columns: repeat(var(--grid-columns), 1fr);
-}
.indexFeature:not(:last-child) {
padding-bottom: var(--space-l);
}
mark {
background-color: var(--contrast-color);
}
-nav {
- grid-column: 2 / span 12;
-}
.now {
display: grid;
grid-column: var(--span-grid);
@@ -252,10 +286,8 @@ ol {
padding-left: 0;
}
section {
+ container-type: inline-size;
grid-column: var(--span-grid);
- p {
- grid-column: var(--span-grid);
- }
}
::selection {
background: var(--contrast-color);
@@ -265,10 +297,6 @@ section {
grid-column: var(--span-grid);
margin: 0;
}
-ul {
- margin: 0;
- grid-column: var(--span-grid);
-}
a {
text-decoration-color: var(--contrast-color);
@@ -286,15 +314,54 @@ a {
width: 1px;
}
footer {
- padding: var(--space-xl) 0 var(--space-m) 0;
+ border-top: var(--border-header-footer);
+ background-color: var(--nav-footer-color);
+ color: var(--contrast-color);
+ font-family: var(--font-family-ui);
+ font-size: var(--step--1);
+ font-variation-settings: "wght" 500;
+ margin-left: calc(var(--grid-gutter) * -1);
+ margin-right: calc(var(--grid-gutter) * -1);
+ min-height: calc(var(--space-3xl) * 3);
+ padding: var(--space-xl) var(--grid-gutter) 0 var(--grid-gutter);
+ width: calc(100% + var(--grid-gutter) * 2);
+ & .footerContainer {
+ display: grid;
+ gap: var(--grid-gutter);
+ grid-template-columns: repeat(var(--grid-columns), 1fr);
+ margin: auto;
+ max-width: var(--grid-max-width);
+ & .webringsContainer {
+ display: flex;
+ flex-flow: row wrap;
+ gap: var(--space-2xs) var(--space-xs);
+ grid-column: 1 / 4;
+ }
+ & .linksContainer {
+ display: flex;
+ flex-flow: row wrap;
+ gap: var(--space-2xs) var(--space-xs);
+ grid-column: 4 / 12;
+ }
+ }
+ & a[href]:not(.icon-button) {
+ color: var(--contrast-color);
+ text-decoration: none;
+ &:visited {
+ color: var(--contrast-color);
+ }
+ &:hover {
+ color: var(--contrast-color);
+ }
+ }
& p {
- font-size: var(--step-0);
+ font-size: var(--step--1);
grid-column: var(--span-grid);
+ line-height: calc(var(--step--1) * 0.25 + var(--step--1));
margin-bottom: 0;
}
& .webring {
display: inline;
- padding-right: var(--space-xs);
}
}
@@ -302,48 +369,80 @@ h1,
h2,
h3 {
color: var(--text-color);
- grid-column: var(--span-grid);
margin: 0;
- width: 100%;
}
h1 {
+ color: var(--contrast-color);
font-family: var(--font-family-headline);
+ font-size: var(--step-5);
+ font-style: italic;
font-variation-settings:
"opsz" 100,
- "wght" 500,
- "SOFT" 10,
+ "wght" 400,
+ "SOFT" 20,
"WONK" 1;
- font-size: var(--step-4);
- font-style: normal;
- line-height: calc(var(--step-4) * 0.25 + var(--step-4));
+ line-height: calc(var(--step-5) * 0.25 + var(--step-5));
padding-bottom: var(--space-l);
text-wrap: balance;
}
h2 {
- font-size: var(--step-2);
- font-variation-settings:
- "opsz" 50,
- "wght" 350,
- "SOFT" 20,
- "WONK" 1;
- line-height: calc(var(--step-2) * 0.25 + var(--step-2));
- padding-bottom: var(--space-s);
- padding-top: var(--space-s);
+ 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 0.5lh;
+ text-transform: uppercase;
+
text-wrap: pretty;
}
h3 {
- font-size: var(--step-1);
- line-height: calc(var(--step-1) * 0.25 + var(--step-1));
+ 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;
+ text-wrap: pretty;
+ &::before {
+ color: var(--contrast-color);
+ content: "🢒";
+ margin-left: calc(1em * -1);
+ }
+}
+h4 {
+ font-family: var(--font-family-ui);
+ font-size: var(--step--2);
+ font-variation-settings: "wght" 600;
+ letter-spacing: var(--wide-letter-spacing);
+ line-height: calc(var(--step--2) * 0.5 + var(--step--2));
+ text-transform: uppercase;
text-wrap: pretty;
}
-.logo {
- filter: var(--logo-filter);
+ul:not(.taglist) {
+ list-style-type: "◦";
+ margin-left: -1.7em;
+ & ::marker {
+ color: var(--contrast-color);
+ }
+ & li {
+ line-height: calc(var(--step-1) * 0.5 + var(--step-1));
+ padding-left: 0.5em;
+ }
}
main {
display: grid;
- grid-column: 1 / 12;
- padding-top: var(--space-3xl);
+ flex: 1;
+ gap: var(--grid-gutter);
+ grid-template-columns: repeat(var(--grid-columns), 1fr);
+ margin: auto;
+ max-width: var(--grid-max-width);
+ margin-top: var(--space-5xl);
+ padding-bottom: var(--space-3xl);
+ width: 100%;
}
+
main > p > img,
main > p > a > img {
width: 100%;
@@ -361,21 +460,15 @@ li {
line-height: calc(var(--step-0) * 0.5 + var(--step-0));
text-wrap: pretty;
}
-
-th {
- font-variation-settings:
- "opsz" 25,
- "wght" 500,
- "SOFT" 40,
- "WONK" 0;
- padding-bottom: var(--space-2xs);
- text-align: left;
-}
figure {
- margin: 0;
+ margin: 0 calc(((100cqw - (var(--grid-gutter) * 11)) / 12) * -1); /* Expand beyond text grid */
margin-block: 1lh 1lh;
- width: 100%;
}
+
+figure > a > img {
+ cursor: zoom-in;
+}
+
figure > a > img,
figure > div > iframe {
border-radius: 1em;
@@ -406,7 +499,7 @@ button {
color: var(--background-color);
font-size: var(--step--2);
font-variation-settings: var(--font-variation-ui);
- letter-spacing: var(--ui-letter-spacing);
+ letter-spacing: var(--wide-letter-spacing);
margin: var(--space-xs) 0 0 0;
padding: 0 var(--space-xs);
text-transform: uppercase;
@@ -417,7 +510,6 @@ button > img {
max-width: 1em;
margin-right: 0.5em;
margin-bottom: -0.1rem;
- filter: var(--icon-filter);
}
a {
&:has(button) {
@@ -447,12 +539,58 @@ a[href]:active:not(.icon-button) {
margin-top: var(--space-m);
}
+/* Tables */
table {
- margin: 1em 0;
+ border: 2px solid var(--contrast-color);
+ border-collapse: separate;
+ border-left: 0;
+ border-radius: var(--space-xs);
+ border-spacing: 0px;
+ margin-block: 0 1lh;
+ width: 100%;
}
-table td,
-table th {
- padding-right: 1em;
+td {
+ border-top: 2px solid var(--contrast-color);
+}
+th,
+td {
+ font-style: italic;
+ padding: var(--space-2xs);
+ text-align: left;
+ vertical-align: top;
+ border-left: 2px solid var(--contrast-color);
+}
+thead {
+ border-collapse: separate;
+ border-color: inherit;
+ color: var(--contrast-color);
+ display: table-header-group;
+ font-family: var(--font-family-ui);
+ font-size: var(--step--1);
+ font-variation-settings: "wght" 800;
+ letter-spacing: var(--wide-letter-spacing);
+ text-transform: uppercase;
+ vertical-align: middle;
+ & tr th {
+ background-color: var(--contrast-color-tint);
+ }
+ & th {
+ font-style: normal;
+ }
+}
+tr {
+ display: table-row;
+ vertical-align: inherit;
+ border-color: inherit;
+}
+thead tr th:first-child {
+ border-radius: var(--space-xs) 0 0 0;
+}
+tbody:last-child tr:last-child td:first-child {
+ border-radius: 0 0 0 var(--space-xs);
+}
+thead tr th:last-child {
+ border-radius: 0 var(--space-xs) 0 0;
}
/* Footnotes */
@@ -483,13 +621,43 @@ hr {
}
/* Header */
-header .home-link {
- display: grid;
- grid-column: 1 / 1;
+header {
+ container-type: inline-size;
}
-.logo {
- aspect-ratio: 1 / 1;
- width: var(--space-l-xl);
+
+/* Post Metadata */
+article > .post-image,
+.hero > a > .post-image {
+ border-radius: 1em;
+ border-top-left-radius: 0;
+ cursor: zoom-in;
+ height: 100%;
+ margin: 0 calc(((100cqw - (var(--grid-gutter) * 11)) / 12) * -1); /* Expand beyond text grid */
+ margin-block: 1lh 1lh;
+ max-width: calc(((100cqw) / 12) * 14);
+ width: calc(((100cqw) / 12) * 14);
+}
+
+.post-synopsis {
+ font-size: var(--step-1);
+}
+
+.post-time-author,
+.post-taglist {
+ color: var(--color-metadata);
+ display: block;
+ 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: var(--line-height-metadata);
+ text-transform: var(--text-transform-metadata);
+ & a[href],
+ a[href]:hover,
+ a[href]:visited {
+ color: var(--contrast-color);
+ text-decoration: none;
+ }
}
/* Info Box */
@@ -505,78 +673,226 @@ header .home-link {
}
}
+/* Author / Profile Pic */
+.author {
+ align-items: flex-start;
+ display: flex;
+ background-color: var(--contrast-color-tint);
+ border-radius: var(--large-rounded-radius);
+ border-top-left-radius: 0;
+ margin-block: 0 1lh;
+ margin-left: 0;
+ margin-right: 0;
+ padding: var(--space-m) var(--space-l) var(--space-s) var(--space-l);
+ & a {
+ text-decoration: none;
+ & .authorName {
+ color: var(--contrast-color);
+ display: block;
+ font-family: var(--font-family-ui);
+ font-size: var(--step--1);
+ font-variation-settings: "wght" 600;
+ letter-spacing: var(--wide-letter-spacing);
+ text-transform: uppercase;
+ }
+ }
+ & .profilePic {
+ border-radius: var(--large-rounded-radius);
+ border-top-left-radius: 0;
+ height: var(--space-3xl);
+ margin-right: var(--space-s);
+ width: var(--space-3xl);
+ }
+ & p {
+ font-family: var(--font-family-ui);
+ font-size: var(--step--2);
+ font-variation-settings: "wght" 400;
+ line-height: calc(var(--step--2) * 0.25 + var(--step--2));
+ }
+}
+
/* Nav */
-.nav {
- padding: 0;
- margin: 0;
- list-style: none;
-}
-nav ul {
- align-items: end;
- display: flex;
- justify-content: flex-end;
- gap: var(--space-xs-s);
- flex-flow: row wrap;
-}
-.nav-icon {
- fill: var(--color-gray-90);
- height: var(--space-2xs);
- margin-right: 0.25rem;
- transition: var(--transition-normal);
- width: var(--space-2xs);
-}
-.nav-item {
- align-items: baseline;
- border-top: var(--border-nav);
- display: flex;
- font-size: var(--step--2);
- font-variation-settings: var(--font-variation-ui);
- height: var(--space-l-xl);
- margin-bottom: 0;
- padding-top: var(--space-m);
- text-transform: uppercase;
- transition: var(--transition-normal);
- letter-spacing: var(--ui-letter-spacing);
-}
-.nav-item a {
- color: var(--text-color);
- margin-top: calc(var(--space-xs-s) * -1); /* Compensate for padding */
- padding-top: var(--space-xs-s); /* Give
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 */
+nav {
+ background-color: var(--nav-footer-color);
+ border-bottom: var(--border-header-footer);
+ left: 0;
+ margin-left: calc(var(--grid-gutter) * -1);
+ margin-right: calc(var(--grid-gutter) * -1);
+ padding-inline: calc(var(--grid-gutter) * 2);
+ position: fixed;
+ top: 0;
+ width: calc(100% + var(--grid-gutter) * 2);
+ z-index: 10;
+ & .nav-elements-grid-container {
+ container-type: inline-size;
+ display: grid;
+ gap: var(--grid-gutter);
+ grid-template-columns: repeat(var(--grid-columns), 1fr);
+ margin: auto;
+ max-width: var(--grid-max-width);
+ & .nav-elements-container {
+ grid-column: 1 / span 12;
+ color: var(--contrast-color);
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ & .blog-name {
+ align-self: center;
+ color: var(--contrast-color);
+ font-family: var(--font-family);
+ font-size: var(--step-1);
+ font-variation-settings:
+ "opsz" 80,
+ "wght" 450,
+ "SOFT" 0,
+ "WONK" 1;
+ text-align: center;
+ text-decoration: none;
+ }
+ & .home-link {
+ & .logo {
+ aspect-ratio: 1 / 1;
+ fill: var(--contrast-color);
+ width: var(--space-m-l);
+ height: var(--space-m-l);
+ margin: var(--space-2xs) 0;
+ }
+ }
+ & ul {
+ display: flex;
+ gap: var(--space-xs-s);
+ flex-flow: row wrap;
+ justify-content: flex-end;
+ list-style: none;
+ margin: 0;
+ padding: 0;
+ & .nav-item {
+ align-items: baseline;
+ font-size: var(--step--2);
+ font-variation-settings: var(--font-variation-ui);
+ text-transform: uppercase;
+ letter-spacing: var(--wide-letter-spacing);
+ & a[href],
+ a[href]:visited,
+ a[href]:hover {
+ color: var(--contrast-color);
+ text-decoration: none;
+ }
+ & .nav-icon {
+ fill: var(--contrast-color);
+ height: var(--space-2xs);
+ margin-right: 0.25rem;
+ width: var(--space-2xs);
+ }
+ }
+ }
+ }
+ }
}
sup {
line-height: 0;
}
+/* Post list */
+.postlist {
+ & .postlist-item-container {
+ display: flex;
+ flex-flow: column nowrap;
+ gap: var(--space-s);
+ margin-top: var(--space-xl);
+ & .postlist-item {
+ align-items: flex-start;
+ display: flex;
+ flex-flow: row nowrap;
+ justify-content: flex-start;
+ width: 100%;
+ & .post-copy {
+ display: flex;
+ flex-flow: column wrap;
+ flex: 1;
+ padding-right: var(--space-xl);
+ & > p {
+ margin: var(--space-xs) 0;
+ }
+ & p {
+ }
+ & .post-metadata {
+ & .post-metadata-copy {
+ & p,
+ p a {
+ color: var(--color-metadata);
+ font-family: var(--font-family-metadata);
+ font-size: var(--font-size-metadata);
+ letter-spacing: var(--letter-spacing-metadata);
+ text-decoration: none;
+ text-transform: var(--text-transform-metadata);
+ }
+ }
+ }
+ }
+ & .postlist-link {
+ font-size: var(--step-5);
+ padding-right: 0.5em;
+ text-decoration: none;
+ & h3 {
+ 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);
+ line-height: calc(var(--step--1) * 0.5 + var(--step--1));
+ text-transform: uppercase;
+ &:before {
+ content: "";
+ margin-left: 0;
+ }
+ }
+ & .post-image-container {
+ border-radius: 0.25em;
+ border-top-left-radius: 0;
+ box-shadow: var(--box-shadow);
+ height: var(--space-5xl);
+ max-height: var(--space-5xl);
+ overflow: hidden;
+ width: var(--space-5xl);
+ & .post-image {
+ width: var(--space-5xl);
+ height: var(--space-5xl);
+ object-fit: cover;
+ object-position: 50% 50%;
+ }
+ }
+ }
+ }
+ }
+}
+.postlist-header {
+ margin-top: var(--space-2xl);
+}
+/* XML Feed Preview */
+h1.feed-preview {
+ grid-column: var(--span-grid);
+}
+.postlist-date {
+ color: var(--color-metadata);
+ font-family: var(--font-family-metadata);
+ font-size: var(--font-size-metadata);
+ letter-spacing: var(--letter-spacing-metadata);
+ text-decoration: none;
+ text-transform: var(--text-transform-metadata);
+}
+
+h3.postlist-link {
+ 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);
+ line-height: calc(var(--step--1) * 0.5 + var(--step--1));
+ text-transform: uppercase;
+}
+
/* Site Settings */
#siteSettings {
border: 1.5px solid var(--color-gray-20);
@@ -594,11 +910,11 @@ sup {
@starting-style {
opacity: 0;
}
- }
- &[open]::backdrop {
- opacity: 1;
- @starting-style {
- opacity: 0;
+ &::backdrop {
+ opacity: 1;
+ @starting-style {
+ opacity: 0;
+ }
}
}
} /* TODO: figure out why exit animation doesn't work */
@@ -613,7 +929,7 @@ sup {
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);
& label {
display: inline;
@@ -635,7 +951,6 @@ sup {
/* Direct Links / Markdown Headers */
a.header-anchor {
font-style: normal;
- margin-left: 0.1em;
text-decoration: none;
}
a[href].header-anchor,
@@ -655,19 +970,6 @@ h2 + .header-anchor {
}
/* Components */
-#buttonsAndStuffContainer {
- /* This lives in the footer*/
- display: flex;
- grid-column: var(--span-grid);
- width: 100%;
- & a,
- img,
- div {
- display: inline-block;
- height: var(--space-m-l);
- margin-right: var(--space-3xs);
- }
-}
.card {
align-items: flex-start;
background-color: var(--card-color);
@@ -681,6 +983,16 @@ h2 + .header-anchor {
width: 100%;
}
+ul.taglist {
+ & li {
+ & a[href],
+ a[href]:hover,
+ a[href]:visited {
+ color: var(--contrast-color);
+ }
+ }
+}
+
/* Utilities */
.grid-container {
max-width: var(--grid-max-width);
@@ -695,3 +1007,135 @@ h2 + .header-anchor {
.hidden {
display: none !important;
}
+
+/* Dark mode overrides */
+@media (prefers-color-scheme: dark) {
+ .isso-preview {
+ background: repeating-linear-gradient(
+ -45deg,
+ rgb(50, 50, 70),
+ rgb(50, 50, 70) 10px,
+ var(--background-color) 10px,
+ var(--background-color) 20px
+ ) !important;
+ }
+ .logo {
+ fill: var(--text-color);
+ }
+}
+
+/* Small Screen Overrides */
+@media (max-width: 900px) {
+ figure,
+ .hero > a > .post-image {
+ margin-left: auto;
+ margin-right: auto;
+ max-width: var(--grid-max-width);
+ width: 100%;
+ }
+}
+
+@media (max-width: 540px) {
+ .author {
+ display: flex;
+ flex-flow: column nowrap;
+ justify-content: center;
+ text-align: center;
+ & a {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ & img.profilePic {
+ aspect-ratio: 1/1;
+ margin-bottom: var(--space-s);
+ margin-right: 0;
+ }
+ }
+ }
+ .continue-discussion a {
+ display: flex;
+ justify-content: center;
+ width: 100%;
+ }
+ nav {
+ & > .nav-elements-grid-container {
+ & > .nav-elements-container {
+ & > .blog-name {
+ font-size: var(--step-0);
+ }
+ & > .home-link {
+ }
+ & > ul.nav {
+ flex-flow: column nowrap;
+ gap: 0;
+ & li {
+ line-height: calc(var(--step-0) * 0.25 + var(--step-0));
+ }
+ }
+ }
+ }
+ }
+ .postlist {
+ & .postlist-item-container {
+ margin-top: var(--space-s);
+ & .postlist-item {
+ flex-flow: column wrap;
+ & .post-copy {
+ & .post-metadata {
+ padding-bottom: 0;
+ }
+ }
+ & .postlist-link {
+ padding: 0;
+ & h3 {
+ padding-top: 0;
+ }
+ & p {
+ margin-top: var(--space-xs);
+ }
+ & .post-image-container {
+ margin-left: 0;
+ min-height: var(--space-10xl);
+ width: 100%;
+ & .post-image {
+ width: 100cqw;
+ height: var(--space-10xl);
+ }
+ }
+ }
+ }
+ }
+ }
+ .postlist-header {
+ margin-top: var(--space-l);
+ }
+}
+
+
+@container (width < 540px) {
+ .footerContainer {
+ & p {
+ margin-bottom: 0 !important;
+ }
+ }
+ .webringsContainer {
+ grid-column: 1 / span 12 !important;
+ grid-row: 2 / 2;
+ }
+ .linksContainer {
+ grid-column: 1 / span 12 !important;
+ grid-row: 3 / 3;
+ }
+}
+
+@container (width < 400px) {
+ blockquote {
+ padding: var(--space-s) var(--space-s);
+ & p {
+ margin-block: 0 !important;
+ margin-bottom: 0;
+ padding-left: 0;
+ padding-top: var(--space-xl);
+ }
+ }
+}
diff --git a/public/css/me.css b/public/css/me.css
index bccc220..f680a2f 100644
--- a/public/css/me.css
+++ b/public/css/me.css
@@ -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);
}
diff --git a/public/css/metadata.css b/public/css/metadata.css
deleted file mode 100644
index 16f2e53..0000000
--- a/public/css/metadata.css
+++ /dev/null
@@ -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;
-}
diff --git a/public/css/microblog.css b/public/css/microblog.css
index da81b66..9809784 100644
--- a/public/css/microblog.css
+++ b/public/css/microblog.css
@@ -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);
-}
diff --git a/public/css/navigator.css b/public/css/navigator.css
index bea63d1..0f174de 100644
--- a/public/css/navigator.css
+++ b/public/css/navigator.css
@@ -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);
}
}
}
diff --git a/public/css/post-list.css b/public/css/post-list.css
deleted file mode 100644
index 337c681..0000000
--- a/public/css/post-list.css
+++ /dev/null
@@ -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;
- }
-}
diff --git a/public/css/profile-pic.css b/public/css/profile-pic.css
deleted file mode 100644
index 26e06a1..0000000
--- a/public/css/profile-pic.css
+++ /dev/null
@@ -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);
-}
diff --git a/public/css/quiz.css b/public/css/quiz.css
index 69b6913..b5b604d 100644
--- a/public/css/quiz.css
+++ b/public/css/quiz.css
@@ -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);
}
}
diff --git a/public/css/search.css b/public/css/search.css
index 494a608..6bb8dfa 100644
--- a/public/css/search.css
+++ b/public/css/search.css
@@ -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;
diff --git a/public/css/tags.css b/public/css/tags.css
index a13598d..93bb6c1 100644
--- a/public/css/tags.css
+++ b/public/css/tags.css
@@ -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 {
diff --git a/public/css/toc.css b/public/css/toc.css
index 0d57c18..07fc7a6 100644
--- a/public/css/toc.css
+++ b/public/css/toc.css
@@ -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;
+ }
}
}
diff --git a/public/xsl/basic.xsl b/public/xsl/basic.xsl
index 1b95702..98c476e 100644
--- a/public/xsl/basic.xsl
+++ b/public/xsl/basic.xsl
@@ -11,14 +11,12 @@
-
- RSS Feed Preview
+ RSS Feed Preview
This is an RSS feed. Subscribe by copying the URL from the address bar into your newsreader. Don’t have a newsreader? Learn more and get started. It’s free. Below is a preview of what you’ll see in your newsreader when you subscribe. Done here? Go back to nathanupchurch.com
- Posts