SowinskiBraedenandClaude Opus 5
7078cda6c5
- Replace the flat dither backdrop with a lit, rotating torus drawn the way donut.c does it: a z-buffer per cell and a luminance ramp from a dot to a solid block, sized against the shorter viewport axis. The dither field stays underneath as dust. It leads on the landing page and fades back where there is reading to do, and a scrim keeps the projects heading legible over it. - Thicken the glass: one .surface treatment with a heavier blur, more transparency and an SVG film grain, shared by the header, hero, cards, panels and footer. - Give the landing page labelled contact cards for LinkedIn, Gitea and email in place of three bare icons. - Drop the status chips from project cards and entry headers. - Remove the light theme, its toggle and theme.js outright. - Add restrained motion: underlines growing from the left on links and nav items, a lift on cards, buttons and contact cards, and tags brightening with their card. All of it is off under prefers-reduced-motion. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
227 lines
3.3 KiB
CSS
Executable File
227 lines
3.3 KiB
CSS
Executable File
.container {
|
|
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: 20px;
|
|
}
|
|
|
|
.about {
|
|
grid-area: about;
|
|
}
|
|
|
|
.honors {
|
|
grid-area: other;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
|
|
.footer {
|
|
grid-area: footer;
|
|
}
|
|
|
|
section {
|
|
padding: 24px;
|
|
border-radius: var(--radius);
|
|
display: flex;
|
|
flex-direction: column;
|
|
transition:
|
|
border-color 0.24s var(--ease),
|
|
box-shadow 0.24s var(--ease);
|
|
}
|
|
|
|
section:hover {
|
|
border-color: var(--border-strong);
|
|
}
|
|
|
|
.panel__bar {
|
|
margin: 0 0 16px;
|
|
font-size: 0.95rem;
|
|
font-weight: 700;
|
|
color: var(--bright);
|
|
}
|
|
|
|
.panel__body {
|
|
flex: 1;
|
|
}
|
|
|
|
.about .panel__body,
|
|
.honors .panel__body {
|
|
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);
|
|
transition: transform 0.4s var(--ease);
|
|
}
|
|
|
|
#profile:hover img.profile {
|
|
transform: scale(1.015);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.about .text,
|
|
.honors .text {
|
|
color: var(--primary);
|
|
}
|
|
|
|
.honors dl {
|
|
margin: 0;
|
|
}
|
|
|
|
dt {
|
|
margin-top: 22px;
|
|
}
|
|
|
|
dt:first-of-type {
|
|
margin-top: 0;
|
|
}
|
|
|
|
dt.text {
|
|
margin-bottom: 6px;
|
|
color: var(--bright);
|
|
}
|
|
|
|
dd {
|
|
margin-left: 0;
|
|
color: var(--muted);
|
|
}
|
|
|
|
dd.text {
|
|
color: var(--muted);
|
|
}
|
|
|
|
.honor-inline-link {
|
|
margin-top: 8px;
|
|
font-size: 0.84rem;
|
|
color: var(--secondary);
|
|
}
|
|
|
|
.honor-subitem {
|
|
margin-top: 12px;
|
|
padding-left: 14px;
|
|
border-left: 1px solid var(--border);
|
|
}
|
|
|
|
.honor-subitem__label {
|
|
display: inline-block;
|
|
font-size: 0.7rem;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--secondary);
|
|
}
|
|
|
|
.honor-subitem__text {
|
|
margin: 4px 0 0;
|
|
color: var(--muted);
|
|
font-size: 0.86rem;
|
|
}
|
|
|
|
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: 16px;
|
|
padding-top: 28px;
|
|
}
|
|
|
|
section {
|
|
padding: 20px;
|
|
}
|
|
|
|
#profile img.profile {
|
|
max-width: 160px;
|
|
}
|
|
}
|