pull the terminal styling back and add an ASCII backdrop
The first pass applied terminal decoration to everything, which read as costume rather than design. Strip it back to a few deliberate cues and let an animated backdrop carry the character instead: - Drop the prefix glyphs from links, tags, nav items, badges and headings, and restore plain section names in place of snake_case. - Keep one prompt in the hero, the ~/ on the wordmark, ISO dates and status dots; everything else is ordinary type. - Restore depth: acrylic surfaces over soft radial light, 6px radii, and an accent glow on the primary action and status dots. - Draw a dithered ASCII field behind the page. A fixed per-cell dither value decides which cells are lit so coverage stays even, while slow interfering waves move brightness through it. It idles when the tab is hidden and stays still under prefers-reduced-motion. - Remove the nested panel boxes on the projects page and size the entry page to its article column. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
SowinskiBraedenandClaude Opus 5 committed
1 parent
8595290318
commit
54c00bf16f
10 files changed
+693
-698
No files matched your search
+136
-235
@@ -1,108 +1,82 @@
|
||||
.projects-page,
|
||||
.entry-page {
|
||||
padding-top: 22px;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------- TUI panels */
|
||||
|
||||
.projects-hero,
|
||||
.entry-shell,
|
||||
.content-section {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
padding-top: 40px;
|
||||
}
|
||||
|
||||
/* The page header sits on the background; only cards get a surface. */
|
||||
.projects-hero {
|
||||
margin-bottom: 20px;
|
||||
padding: 20px;
|
||||
margin-bottom: 40px;
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
.projects-hero h1,
|
||||
.entry-title {
|
||||
font-size: clamp(1.3rem, 2.6vw, 1.75rem);
|
||||
line-height: 1.25;
|
||||
margin: 8px 0 10px;
|
||||
max-width: 860px;
|
||||
font-size: clamp(1.5rem, 3vw, 2.1rem);
|
||||
line-height: 1.2;
|
||||
margin: 0 0 14px;
|
||||
}
|
||||
|
||||
.projects-intro,
|
||||
.entry-summary {
|
||||
margin: 0;
|
||||
max-width: 760px;
|
||||
max-width: 720px;
|
||||
color: var(--muted);
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.16em;
|
||||
margin: 0 0 10px;
|
||||
font-size: 12px;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--secondary);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.eyebrow::before {
|
||||
content: "// ";
|
||||
color: var(--border-strong);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
margin-bottom: 20px;
|
||||
padding: 0;
|
||||
margin-bottom: 44px;
|
||||
}
|
||||
|
||||
/* Panel title bar, like a window chrome strip in a TUI. */
|
||||
.section-heading {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
margin: 0;
|
||||
padding: 6px 12px;
|
||||
background: var(--bar);
|
||||
align-items: baseline;
|
||||
gap: 14px;
|
||||
margin: 0 0 18px;
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.section-heading h2 {
|
||||
margin: 0;
|
||||
font-size: 0.95rem;
|
||||
font-size: 1.05rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.section-heading h2::before {
|
||||
content: "▸ ";
|
||||
color: var(--secondary);
|
||||
.section-heading__right {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.section-heading .eyebrow {
|
||||
display: none;
|
||||
.section-count {
|
||||
font-size: 12px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.section-link {
|
||||
font-size: 12px;
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
border: 1px solid var(--border);
|
||||
padding: 1px 8px;
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.section-link::before {
|
||||
content: "> ";
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.section-link:hover {
|
||||
color: var(--bright);
|
||||
border-color: var(--secondary);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 14px;
|
||||
padding: 16px;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.updates-grid {
|
||||
@@ -113,92 +87,91 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------ TUI cards */
|
||||
/* ---------------------------------------------------------------- cards */
|
||||
|
||||
.content-card {
|
||||
padding: 0;
|
||||
background: var(--surface-alt);
|
||||
padding: 20px;
|
||||
background: var(--surface);
|
||||
backdrop-filter: blur(16px) saturate(130%);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(130%);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
scroll-margin-top: 80px;
|
||||
scroll-margin-top: 90px;
|
||||
transition:
|
||||
border-color 0.12s linear,
|
||||
background-color 0.12s linear;
|
||||
border-color 0.2s ease,
|
||||
box-shadow 0.2s ease,
|
||||
transform 0.2s ease;
|
||||
}
|
||||
|
||||
.content-card:hover {
|
||||
border-color: var(--border-strong);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.content-card.featured {
|
||||
border-color: rgba(235, 82, 52, 0.42);
|
||||
border-color: rgba(235, 82, 52, 0.28);
|
||||
}
|
||||
|
||||
body.light .content-card.featured {
|
||||
border-color: rgba(200, 64, 31, 0.42);
|
||||
border-color: rgba(200, 64, 31, 0.3);
|
||||
}
|
||||
|
||||
.card-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
margin: 0;
|
||||
padding: 4px 12px;
|
||||
background: var(--bar);
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 11px;
|
||||
gap: 12px;
|
||||
margin: 0 0 14px;
|
||||
font-size: 11.5px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.card-kicker {
|
||||
color: var(--secondary);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.card-date {
|
||||
color: var(--muted);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.card-status {
|
||||
margin-left: auto;
|
||||
color: var(--muted);
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.card-status::before {
|
||||
content: "";
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: var(--muted);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.card-status[data-state="active"]::before {
|
||||
background: var(--ok);
|
||||
box-shadow: 0 0 8px rgba(127, 176, 105, 0.6);
|
||||
}
|
||||
|
||||
.card-status[data-state="attention"]::before {
|
||||
background: var(--secondary);
|
||||
box-shadow: 0 0 8px rgba(235, 82, 52, 0.5);
|
||||
}
|
||||
|
||||
.content-card h3 {
|
||||
margin: 0;
|
||||
padding: 12px 12px 0;
|
||||
font-size: 1.05rem;
|
||||
margin: 0 0 10px;
|
||||
font-size: 1.1rem;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.card-summary {
|
||||
color: var(--muted);
|
||||
margin: 0;
|
||||
padding: 8px 12px 12px;
|
||||
font-size: 0.85rem;
|
||||
margin: 0 0 16px;
|
||||
font-size: 0.86rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@@ -209,40 +182,29 @@ body.light .content-card.featured {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.tag-list {
|
||||
padding: 0 12px 12px;
|
||||
}
|
||||
|
||||
.tag,
|
||||
.entry-tag {
|
||||
display: inline-flex;
|
||||
text-transform: lowercase;
|
||||
padding: 0 6px;
|
||||
padding: 2px 8px;
|
||||
border-radius: var(--radius);
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
background: transparent;
|
||||
background: var(--bar);
|
||||
border: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.tag::before,
|
||||
.entry-tag::before {
|
||||
content: "#";
|
||||
color: var(--border-strong);
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.card-links,
|
||||
.entry-links {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
gap: 18px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-links {
|
||||
margin-top: auto;
|
||||
padding: 10px 12px;
|
||||
margin-top: 18px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
.card-link,
|
||||
@@ -250,48 +212,25 @@ body.light .content-card.featured {
|
||||
.inline-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border: 1px solid var(--border);
|
||||
background: transparent;
|
||||
color: var(--primary);
|
||||
padding: 2px 9px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.card-link::before,
|
||||
.entry-back::before,
|
||||
.inline-button::before {
|
||||
content: ">\00a0";
|
||||
color: var(--secondary);
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.card-link:hover,
|
||||
.entry-back:hover,
|
||||
.inline-button:hover {
|
||||
color: var(--bright);
|
||||
border-color: var(--secondary);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.card-link-primary,
|
||||
.inline-button-primary {
|
||||
border-color: var(--border-strong);
|
||||
color: var(--bright);
|
||||
}
|
||||
|
||||
.card-link-primary:hover,
|
||||
.inline-button-primary:hover {
|
||||
background: var(--secondary);
|
||||
color: #0c0d10;
|
||||
}
|
||||
|
||||
.card-link-primary:hover::before,
|
||||
.inline-button-primary:hover::before {
|
||||
color: #0c0d10;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.projects-toggle-shell {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 0 16px 16px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.projects-toggle {
|
||||
@@ -299,110 +238,87 @@ body.light .content-card.featured {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
border: 1px solid var(--border);
|
||||
padding: 4px 14px;
|
||||
font-size: 12px;
|
||||
background: var(--surface-alt);
|
||||
border-radius: var(--radius);
|
||||
padding: 7px 18px;
|
||||
font-size: 13px;
|
||||
background: var(--bar);
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
color 0.12s linear,
|
||||
border-color 0.12s linear;
|
||||
}
|
||||
|
||||
.projects-toggle::before {
|
||||
content: "+\00a0";
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.projects-toggle[aria-expanded="true"]::before {
|
||||
content: "-\00a0";
|
||||
color 0.18s ease,
|
||||
border-color 0.18s ease;
|
||||
}
|
||||
|
||||
.projects-toggle:hover {
|
||||
color: var(--bright);
|
||||
border-color: var(--secondary);
|
||||
}
|
||||
|
||||
.updates-grid .content-card {
|
||||
background: var(--surface-alt);
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
margin-bottom: 22px;
|
||||
margin-bottom: 28px;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------ entry page */
|
||||
/* ----------------------------------------------------------- entry page */
|
||||
|
||||
/* The article column sets the page width, so the card hugs its text. */
|
||||
.entry-page.page-shell {
|
||||
width: min(880px, calc(100% - 32px));
|
||||
}
|
||||
|
||||
.entry-shell {
|
||||
padding: 20px 22px 26px;
|
||||
background: var(--surface);
|
||||
backdrop-filter: blur(18px) saturate(135%);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(135%);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow);
|
||||
padding: 32px 34px 38px;
|
||||
}
|
||||
|
||||
.entry-header {
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.entry-back {
|
||||
margin-bottom: 18px;
|
||||
margin-bottom: 26px;
|
||||
}
|
||||
|
||||
.entry-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
margin-bottom: 14px;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.entry-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 1px 8px;
|
||||
border: 1px solid var(--border);
|
||||
gap: 14px;
|
||||
margin-bottom: 14px;
|
||||
font-size: 11.5px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.entry-pill-primary {
|
||||
color: var(--secondary);
|
||||
border-color: rgba(235, 82, 52, 0.4);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.entry-pill-secondary {
|
||||
color: var(--muted);
|
||||
letter-spacing: 0.1em;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.entry-links {
|
||||
margin-top: 16px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.entry-content {
|
||||
margin-top: 24px;
|
||||
padding-top: 20px;
|
||||
margin-top: 30px;
|
||||
padding-top: 26px;
|
||||
border-top: 1px solid var(--border);
|
||||
font-size: 0.92rem;
|
||||
max-width: 88ch;
|
||||
}
|
||||
|
||||
.entry-content h1,
|
||||
.entry-content h2,
|
||||
.entry-content h3,
|
||||
.entry-content h4 {
|
||||
margin-top: 26px;
|
||||
margin-bottom: 8px;
|
||||
margin-top: 32px;
|
||||
margin-bottom: 10px;
|
||||
line-height: 1.3;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.entry-content h2::before,
|
||||
.entry-content h3::before {
|
||||
content: "## ";
|
||||
color: var(--secondary);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.entry-content h3::before {
|
||||
content: "### ";
|
||||
font-size: 1.02rem;
|
||||
}
|
||||
|
||||
.entry-content p,
|
||||
@@ -415,24 +331,17 @@ body.light .content-card.featured {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
.entry-content ul {
|
||||
list-style: none;
|
||||
padding-left: 4px;
|
||||
.entry-content li {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.entry-content ul li {
|
||||
padding-left: 14px;
|
||||
text-indent: -14px;
|
||||
}
|
||||
|
||||
.entry-content ul li::before {
|
||||
content: "-\00a0";
|
||||
.entry-content li::marker {
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.entry-content a {
|
||||
color: var(--secondary);
|
||||
border-bottom: 1px solid rgba(235, 82, 52, 0.35);
|
||||
border-bottom: 1px solid rgba(235, 82, 52, 0.3);
|
||||
}
|
||||
|
||||
.entry-content a:hover {
|
||||
@@ -440,28 +349,34 @@ body.light .content-card.featured {
|
||||
}
|
||||
|
||||
.entry-content blockquote {
|
||||
margin: 16px 0;
|
||||
padding: 10px 14px;
|
||||
margin: 18px 0;
|
||||
padding: 12px 16px;
|
||||
border-left: 2px solid var(--secondary);
|
||||
background: var(--surface-alt);
|
||||
background: var(--bar);
|
||||
border-radius: 0 var(--radius) var(--radius) 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.entry-content code {
|
||||
background: var(--bar);
|
||||
border: 1px solid var(--border);
|
||||
padding: 0 4px;
|
||||
border-radius: 3px;
|
||||
padding: 1px 5px;
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
|
||||
.entry-content pre {
|
||||
padding: 14px;
|
||||
padding: 16px 18px;
|
||||
overflow-x: auto;
|
||||
background: var(--bar);
|
||||
background: rgba(0, 0, 0, 0.22);
|
||||
border: 1px solid var(--border);
|
||||
border-left: 2px solid var(--secondary);
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.84rem;
|
||||
line-height: 1.5;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
body.light .entry-content pre {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.entry-content pre code {
|
||||
@@ -472,18 +387,25 @@ body.light .content-card.featured {
|
||||
|
||||
.entry-empty {
|
||||
text-align: center;
|
||||
padding: 36px 18px;
|
||||
padding: 40px 18px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 860px) {
|
||||
.projects-hero,
|
||||
.entry-shell {
|
||||
padding: 18px;
|
||||
.projects-page,
|
||||
.entry-page {
|
||||
padding-top: 28px;
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
padding: 12px;
|
||||
gap: 12px;
|
||||
.entry-page.page-shell {
|
||||
width: min(880px, calc(100% - 20px));
|
||||
}
|
||||
|
||||
.entry-shell {
|
||||
padding: 22px 20px 26px;
|
||||
}
|
||||
|
||||
.content-section {
|
||||
margin-bottom: 34px;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
@@ -492,24 +414,3 @@ body.light .content-card.featured {
|
||||
gap: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
.section-heading__right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.section-count {
|
||||
font-size: 11px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.section-count::before {
|
||||
content: "[ ";
|
||||
color: var(--border-strong);
|
||||
}
|
||||
|
||||
.section-count::after {
|
||||
content: " ]";
|
||||
color: var(--border-strong);
|
||||
}
|
||||
Reference in new issue
Block a user