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
+148
-172
@@ -1,243 +1,219 @@
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(260px, 300px) repeat(3, 1fr);
|
||||
grid-template-areas:
|
||||
"pro about about about"
|
||||
"pro other other other"
|
||||
"footer footer footer footer";
|
||||
grid-template-rows: auto 1fr auto;
|
||||
gap: 18px;
|
||||
padding-top: 22px;
|
||||
min-height: calc(100vh - 120px);
|
||||
align-items: stretch;
|
||||
display: grid;
|
||||
grid-template-columns: minmax(260px, 310px) repeat(3, 1fr);
|
||||
grid-template-areas:
|
||||
"pro about about about"
|
||||
"pro other other other"
|
||||
"footer footer footer footer";
|
||||
grid-template-rows: auto 1fr auto;
|
||||
gap: 20px;
|
||||
padding-top: 40px;
|
||||
min-height: calc(100vh - 140px);
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.left-content {
|
||||
grid-area: pro;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
grid-area: pro;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.about {
|
||||
grid-area: about;
|
||||
grid-area: about;
|
||||
}
|
||||
|
||||
.honors {
|
||||
grid-area: other;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
grid-area: other;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.footer {
|
||||
grid-area: footer;
|
||||
grid-area: footer;
|
||||
}
|
||||
|
||||
/* ----------------------------------------------------------- TUI panels */
|
||||
|
||||
section {
|
||||
padding: 0;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 24px;
|
||||
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;
|
||||
}
|
||||
|
||||
.panel__bar {
|
||||
margin: 0;
|
||||
padding: 6px 12px;
|
||||
background: var(--bar);
|
||||
border-bottom: 1px solid var(--border);
|
||||
font-size: 0.92rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
color: var(--bright);
|
||||
}
|
||||
|
||||
.panel__bar::before {
|
||||
content: "▸ ";
|
||||
color: var(--secondary);
|
||||
margin: 0 0 16px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 700;
|
||||
color: var(--bright);
|
||||
}
|
||||
|
||||
.panel__body {
|
||||
padding: 16px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#skills {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#profile .panel__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
#profile img.profile {
|
||||
width: 100%;
|
||||
max-width: 180px;
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover;
|
||||
border: 1px solid var(--border-strong);
|
||||
border-radius: 0;
|
||||
filter: grayscale(0.3) contrast(1.03);
|
||||
}
|
||||
|
||||
.profile-sub {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
margin: 0 0 4px;
|
||||
font-size: 1.15rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.profile-role,
|
||||
.profile-focus {
|
||||
margin: 0;
|
||||
font-size: 0.82rem;
|
||||
color: var(--primary);
|
||||
padding-left: 14px;
|
||||
text-indent: -14px;
|
||||
}
|
||||
|
||||
.profile-focus {
|
||||
margin-top: 6px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.profile-role::before,
|
||||
.profile-focus::before {
|
||||
content: "#\00a0";
|
||||
color: var(--border-strong);
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------- contents */
|
||||
|
||||
.skills-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
|
||||
.skills-list li {
|
||||
margin-bottom: 4px;
|
||||
color: var(--primary);
|
||||
padding-left: 14px;
|
||||
text-indent: -14px;
|
||||
}
|
||||
|
||||
.skills-list li::before {
|
||||
content: "-\00a0";
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.text {
|
||||
font-weight: 400;
|
||||
margin: 0 0 14px;
|
||||
font-size: 0.9rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.about .panel__body,
|
||||
.honors .panel__body {
|
||||
max-width: 92ch;
|
||||
max-width: 86ch;
|
||||
}
|
||||
|
||||
#skills {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#profile .panel__body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
#profile img.profile {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--border-strong);
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.profile-sub {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
margin: 0 0 8px;
|
||||
font-size: 1.2rem;
|
||||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.profile-role,
|
||||
.profile-focus {
|
||||
margin: 0;
|
||||
font-size: 0.84rem;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.profile-focus {
|
||||
margin-top: 8px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* ---------------------------------------------------------------- content */
|
||||
|
||||
.skills-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-size: 0.86rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.skills-list li {
|
||||
color: var(--primary);
|
||||
padding-left: 16px;
|
||||
text-indent: -16px;
|
||||
}
|
||||
|
||||
.skills-list li::before {
|
||||
content: "—\00a0";
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.text {
|
||||
font-weight: 400;
|
||||
margin: 0 0 16px;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.about .text:last-child {
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.about .text,
|
||||
.honors .text {
|
||||
color: var(--primary);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.honors dl {
|
||||
margin: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
dt {
|
||||
margin-top: 16px;
|
||||
margin-top: 22px;
|
||||
}
|
||||
|
||||
dt:first-of-type {
|
||||
margin-top: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
dt.text {
|
||||
margin-bottom: 4px;
|
||||
color: var(--bright);
|
||||
}
|
||||
|
||||
dt.text b::before {
|
||||
content: "▸ ";
|
||||
color: var(--secondary);
|
||||
font-weight: 400;
|
||||
margin-bottom: 6px;
|
||||
color: var(--bright);
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: 14px;
|
||||
color: var(--muted);
|
||||
border-left: 1px solid var(--border);
|
||||
padding-left: 12px;
|
||||
margin-left: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
dd.text {
|
||||
color: var(--muted);
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.honor-inline-link {
|
||||
display: inline-block;
|
||||
margin-top: 6px;
|
||||
font-size: 0.82rem;
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.honor-inline-link::before {
|
||||
content: "> ";
|
||||
display: inline-block;
|
||||
margin-top: 8px;
|
||||
font-size: 0.84rem;
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.honor-subitem {
|
||||
margin-top: 10px;
|
||||
padding-left: 12px;
|
||||
border-left: 1px solid var(--border);
|
||||
margin-top: 12px;
|
||||
padding-left: 14px;
|
||||
border-left: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.honor-subitem__label {
|
||||
display: inline-block;
|
||||
font-size: 0.68rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--secondary);
|
||||
display: inline-block;
|
||||
font-size: 0.7rem;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.honor-subitem__text {
|
||||
margin: 2px 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.85rem;
|
||||
margin: 4px 0 0;
|
||||
color: var(--muted);
|
||||
font-size: 0.86rem;
|
||||
}
|
||||
|
||||
abbr {
|
||||
text-decoration: underline dotted var(--border-strong);
|
||||
cursor: help;
|
||||
text-decoration: underline dotted var(--border-strong);
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 920px) {
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: auto;
|
||||
gap: 14px;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: auto;
|
||||
gap: 16px;
|
||||
padding-top: 28px;
|
||||
}
|
||||
|
||||
#profile img.profile {
|
||||
max-width: 140px;
|
||||
}
|
||||
section {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
#profile img.profile {
|
||||
max-width: 160px;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user