SowinskiBraedenandClaude Opus 5
8595290318
Replace the glassy hero treatment with a terminal and TUI vocabulary while keeping the layout minimal: - Switch the type stack to JetBrains Mono and flatten every surface: hairline borders, square corners, no blur or glow, and a faint graph-paper grid in place of the radial gradients. - Rebuild the home hero as a terminal window whose output is typed in on load; the old mouse-parallax glow script becomes that typing sequence, and it no-ops under prefers-reduced-motion. - Give the projects, about, and entry panels title bars, and render cards with a metadata strip, status dot, ISO date, and prompt-style links. - Hide the inline nav behind the hamburger on narrow screens; the old rule was outranked by the #menu id selector and never applied. - Add an SVG favicon, which also clears the only 404 on the site. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
244 lines
3.9 KiB
CSS
Executable File
244 lines
3.9 KiB
CSS
Executable File
.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;
|
|
}
|
|
|
|
.left-content {
|
|
grid-area: pro;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 18px;
|
|
}
|
|
|
|
.about {
|
|
grid-area: about;
|
|
}
|
|
|
|
.honors {
|
|
grid-area: other;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.footer {
|
|
grid-area: footer;
|
|
}
|
|
|
|
/* ----------------------------------------------------------- TUI panels */
|
|
|
|
section {
|
|
padding: 0;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
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);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.about .panel__body,
|
|
.honors .panel__body {
|
|
max-width: 92ch;
|
|
}
|
|
|
|
.about .text:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.about .text,
|
|
.honors .text {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.honors dl {
|
|
margin: 0;
|
|
}
|
|
|
|
dt {
|
|
margin-top: 16px;
|
|
}
|
|
|
|
dt:first-of-type {
|
|
margin-top: 0;
|
|
}
|
|
|
|
dt.text {
|
|
margin-bottom: 4px;
|
|
color: var(--bright);
|
|
}
|
|
|
|
dt.text b::before {
|
|
content: "▸ ";
|
|
color: var(--secondary);
|
|
font-weight: 400;
|
|
}
|
|
|
|
dd {
|
|
margin-left: 14px;
|
|
color: var(--muted);
|
|
border-left: 1px solid var(--border);
|
|
padding-left: 12px;
|
|
}
|
|
|
|
dd.text {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.honor-inline-link {
|
|
display: inline-block;
|
|
margin-top: 6px;
|
|
font-size: 0.82rem;
|
|
color: var(--secondary);
|
|
}
|
|
|
|
.honor-inline-link::before {
|
|
content: "> ";
|
|
}
|
|
|
|
.honor-subitem {
|
|
margin-top: 10px;
|
|
padding-left: 12px;
|
|
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);
|
|
}
|
|
|
|
.honor-subitem__text {
|
|
margin: 2px 0 0;
|
|
color: var(--muted);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
abbr {
|
|
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;
|
|
}
|
|
|
|
#profile img.profile {
|
|
max-width: 140px;
|
|
}
|
|
}
|