SowinskiBraedenandClaude Opus 5
91b7960dc4
The torus backdrop and film-grain glass were too much, so this goes back to the quieter dithered field and the lighter frosted surfaces, keeping the light-theme and status-chip removals from the previous commit. The hero now lays out as a three-part grid: the photo pinned to the top left, the contact buttons directly under it, and the text column beside them, so the left column carries weight instead of leaving ragged space. The contact buttons lose their labels and become 48px icon squares that line up exactly with the width of the photo. On narrow screens the photo drops out and the contact row moves below the text. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
714 lines
13 KiB
CSS
Executable File
714 lines
13 KiB
CSS
Executable File
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap");
|
|
|
|
:root {
|
|
--theme: #0b0c0f;
|
|
--surface: rgba(21, 23, 28, 0.58);
|
|
--surface-raised: rgba(28, 31, 37, 0.62);
|
|
--bar: rgba(255, 255, 255, 0.04);
|
|
--primary: #ccd0d9;
|
|
--bright: #f2f4f8;
|
|
--secondary: #eb5234;
|
|
--accent: #ff005a;
|
|
--muted: #7d8492;
|
|
--border: rgba(255, 255, 255, 0.1);
|
|
--border-strong: rgba(255, 255, 255, 0.2);
|
|
--glow: rgba(235, 82, 52, 0.16);
|
|
--shadow: 0 18px 50px rgba(0, 0, 0, 0.34);
|
|
--selection: rgba(235, 82, 52, 0.3);
|
|
--ascii-base: #99a2b4;
|
|
--ascii-accent: #eb5234;
|
|
--ascii-dim: #5f6675;
|
|
--radius: 7px;
|
|
--ease: cubic-bezier(0.2, 0.7, 0.3, 1);
|
|
--mono:
|
|
"JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo,
|
|
Consolas, "Liberation Mono", monospace;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html {
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
::selection {
|
|
background: var(--selection);
|
|
color: var(--bright);
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: var(--mono);
|
|
font-size: 15px;
|
|
line-height: 1.65;
|
|
font-variant-ligatures: none;
|
|
color: var(--primary);
|
|
background-color: var(--theme);
|
|
word-break: break-word;
|
|
min-height: 100vh;
|
|
position: relative;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Soft light behind the ASCII field, so the page has depth without gloss. */
|
|
body::before {
|
|
content: "";
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
background:
|
|
radial-gradient(circle at 18% 12%, var(--glow), transparent 42%),
|
|
radial-gradient(circle at 82% 8%, rgba(255, 0, 90, 0.07), transparent 38%),
|
|
radial-gradient(
|
|
circle at 50% 95%,
|
|
rgba(255, 255, 255, 0.035),
|
|
transparent 46%
|
|
);
|
|
filter: blur(28px);
|
|
}
|
|
|
|
#ascii-bg {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 0;
|
|
pointer-events: none;
|
|
opacity: 0.22;
|
|
}
|
|
|
|
header,
|
|
main,
|
|
.page-shell {
|
|
position: relative;
|
|
z-index: 1;
|
|
}
|
|
|
|
/* ------------------------------------------------------- frosted surfaces */
|
|
|
|
.surface {
|
|
position: relative;
|
|
background: var(--surface);
|
|
backdrop-filter: blur(18px) saturate(135%);
|
|
-webkit-backdrop-filter: blur(18px) saturate(135%);
|
|
border: 1px solid var(--border);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
a,
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4,
|
|
p,
|
|
li,
|
|
dd,
|
|
dt {
|
|
color: var(--primary);
|
|
}
|
|
|
|
h1,
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
font-weight: 700;
|
|
letter-spacing: -0.015em;
|
|
color: var(--bright);
|
|
}
|
|
|
|
a {
|
|
color: var(--primary);
|
|
text-decoration: none;
|
|
transition:
|
|
color 0.2s var(--ease),
|
|
background-color 0.2s var(--ease),
|
|
border-color 0.2s var(--ease),
|
|
box-shadow 0.2s var(--ease),
|
|
transform 0.2s var(--ease);
|
|
}
|
|
|
|
a:hover {
|
|
cursor: pointer;
|
|
color: var(--secondary);
|
|
}
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
code,
|
|
kbd,
|
|
samp,
|
|
pre {
|
|
font-family: var(--mono);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- header */
|
|
|
|
.header {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1000;
|
|
border: 0;
|
|
border-bottom: 1px solid var(--border);
|
|
box-shadow: none;
|
|
}
|
|
|
|
.nav {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
width: min(1120px, calc(100% - 32px));
|
|
margin: 0 auto;
|
|
min-height: 54px;
|
|
}
|
|
|
|
.logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.logo a {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: var(--bright);
|
|
}
|
|
|
|
.logo a::before {
|
|
content: "~/";
|
|
color: var(--secondary);
|
|
font-weight: 400;
|
|
}
|
|
|
|
.logo a img {
|
|
display: block;
|
|
pointer-events: none;
|
|
border-radius: 3px !important;
|
|
width: 22px;
|
|
height: 22px;
|
|
border: 1px solid var(--border);
|
|
transition: border-color 0.2s var(--ease);
|
|
}
|
|
|
|
.logo a:hover {
|
|
color: var(--secondary);
|
|
}
|
|
|
|
.logo a:hover img {
|
|
border-color: rgba(235, 82, 52, 0.5);
|
|
}
|
|
|
|
#menu {
|
|
display: flex;
|
|
align-items: center;
|
|
list-style: none;
|
|
gap: 24px;
|
|
white-space: nowrap;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
#menu a {
|
|
display: block;
|
|
position: relative;
|
|
font-size: 13.5px;
|
|
color: var(--muted);
|
|
padding: 2px 0;
|
|
}
|
|
|
|
/* Underline grows out from the left on hover. */
|
|
#menu a::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
bottom: 0;
|
|
height: 1px;
|
|
width: 100%;
|
|
background: var(--secondary);
|
|
transform: scaleX(0);
|
|
transform-origin: left;
|
|
transition: transform 0.24s var(--ease);
|
|
}
|
|
|
|
#menu a:hover {
|
|
color: var(--primary);
|
|
}
|
|
|
|
#menu a:hover::after {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
body[data-page="home"] #home-link a,
|
|
body[data-page="about"] #about-link a,
|
|
body[data-page="projects"] #projects-link a {
|
|
color: var(--bright);
|
|
}
|
|
|
|
body[data-page="home"] #home-link a::after,
|
|
body[data-page="about"] #about-link a::after,
|
|
body[data-page="projects"] #projects-link a::after {
|
|
transform: scaleX(1);
|
|
}
|
|
|
|
.menu.cta {
|
|
display: none;
|
|
margin: 0;
|
|
padding: 4px 10px;
|
|
font-size: 13px;
|
|
cursor: pointer;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
color: var(--muted);
|
|
background: var(--bar);
|
|
transition:
|
|
color 0.2s var(--ease),
|
|
border-color 0.2s var(--ease);
|
|
}
|
|
|
|
.menu.cta:hover {
|
|
color: var(--secondary);
|
|
border-color: var(--border-strong);
|
|
}
|
|
|
|
/* --------------------------------------------------------------- overlay */
|
|
|
|
.overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 2147483647;
|
|
isolation: isolate;
|
|
background: rgba(11, 12, 15, 0.84);
|
|
backdrop-filter: blur(20px) saturate(140%);
|
|
-webkit-backdrop-filter: blur(20px) saturate(140%);
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
pointer-events: none;
|
|
transition:
|
|
opacity 0.22s var(--ease),
|
|
visibility 0.22s var(--ease);
|
|
}
|
|
|
|
.overlay--active {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.overlay__content {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: flex;
|
|
min-height: 100%;
|
|
width: 100%;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.overlay a {
|
|
color: var(--primary);
|
|
padding: 12px 20px;
|
|
font-size: 1.4rem;
|
|
display: block;
|
|
text-align: center;
|
|
width: min(300px, 80%);
|
|
}
|
|
|
|
.overlay a:hover,
|
|
.overlay a:focus {
|
|
color: var(--secondary);
|
|
}
|
|
|
|
.overlay .close {
|
|
position: absolute;
|
|
z-index: 3;
|
|
top: 14px;
|
|
right: 18px;
|
|
font-size: 28px;
|
|
line-height: 1;
|
|
font-family: var(--mono);
|
|
color: var(--muted);
|
|
cursor: pointer;
|
|
border: 0;
|
|
background: transparent;
|
|
padding: 0 8px;
|
|
transition: color 0.2s var(--ease);
|
|
}
|
|
|
|
.overlay .close:hover {
|
|
color: var(--secondary);
|
|
}
|
|
|
|
body.menu-open {
|
|
overflow: hidden;
|
|
}
|
|
|
|
body.menu-open main,
|
|
body.menu-open .page-shell,
|
|
body.menu-open .container,
|
|
body.menu-open .projects-page,
|
|
body.menu-open .entry-page,
|
|
body.menu-open .footer {
|
|
pointer-events: none;
|
|
}
|
|
|
|
body.menu-open .header,
|
|
body.menu-open .overlay,
|
|
body.menu-open .overlay * {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
/* ------------------------------------------------------------ page shell */
|
|
|
|
.page-shell {
|
|
width: min(1120px, calc(100% - 32px));
|
|
margin: 0 auto;
|
|
padding-bottom: 36px;
|
|
}
|
|
|
|
/* ------------------------------------------------------- terminal window */
|
|
|
|
.main {
|
|
width: min(880px, calc(100% - 32px));
|
|
margin: 0 auto;
|
|
padding: 0 0 36px;
|
|
display: flex;
|
|
align-items: center;
|
|
min-height: calc(100vh - 54px);
|
|
}
|
|
|
|
.term {
|
|
width: 100%;
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.term__bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 7px;
|
|
padding: 9px 14px;
|
|
background: var(--bar);
|
|
border-bottom: 1px solid var(--border);
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.term__dot {
|
|
width: 7px;
|
|
height: 7px;
|
|
border-radius: 50%;
|
|
background: var(--border-strong);
|
|
flex: none;
|
|
}
|
|
|
|
.term__dot:first-child {
|
|
background: rgba(235, 82, 52, 0.75);
|
|
}
|
|
|
|
.term__title {
|
|
margin-left: 8px;
|
|
}
|
|
|
|
/* Photo and contact row stack in a left column, both pinned to the top,
|
|
with the text column beside them. */
|
|
.term__body {
|
|
display: grid;
|
|
grid-template-columns: 164px 1fr;
|
|
grid-template-areas:
|
|
"photo stream"
|
|
"contact stream";
|
|
grid-template-rows: auto auto;
|
|
align-content: start;
|
|
column-gap: 30px;
|
|
row-gap: 16px;
|
|
padding: 32px 30px 34px;
|
|
}
|
|
|
|
.term__avatar {
|
|
grid-area: photo;
|
|
width: 164px;
|
|
height: 164px;
|
|
object-fit: cover;
|
|
border-radius: var(--radius);
|
|
border: 1px solid var(--border-strong);
|
|
box-shadow:
|
|
var(--shadow),
|
|
0 0 0 6px rgba(235, 82, 52, 0.05);
|
|
}
|
|
|
|
.term__stream {
|
|
grid-area: stream;
|
|
min-width: 0;
|
|
}
|
|
|
|
.cmd {
|
|
margin: 0 0 16px;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.cmd::before {
|
|
content: "$ ";
|
|
color: var(--secondary);
|
|
}
|
|
|
|
.name {
|
|
font-size: clamp(1.7rem, 3.6vw, 2.4rem);
|
|
font-weight: 700;
|
|
margin: 0;
|
|
line-height: 1.15;
|
|
color: var(--bright);
|
|
}
|
|
|
|
.des {
|
|
margin: 10px 0 0;
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
.hero-description-secondary {
|
|
color: var(--muted);
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.hero-badges {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.badge {
|
|
border: 1px solid var(--border);
|
|
background: var(--bar);
|
|
color: var(--muted);
|
|
border-radius: var(--radius);
|
|
padding: 3px 10px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.hero-actions {
|
|
display: flex;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
margin-top: 22px;
|
|
}
|
|
|
|
.button {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
background: var(--bar);
|
|
color: var(--primary);
|
|
padding: 8px 18px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.button:hover {
|
|
color: var(--bright);
|
|
border-color: var(--border-strong);
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.button-primary {
|
|
border-color: rgba(235, 82, 52, 0.5);
|
|
color: var(--bright);
|
|
background: rgba(235, 82, 52, 0.14);
|
|
box-shadow: 0 6px 22px rgba(235, 82, 52, 0.14);
|
|
}
|
|
|
|
.button-primary:hover {
|
|
border-color: var(--secondary);
|
|
background: rgba(235, 82, 52, 0.22);
|
|
box-shadow: 0 10px 30px rgba(235, 82, 52, 0.26);
|
|
}
|
|
|
|
.caret {
|
|
display: inline-block;
|
|
width: 0.55em;
|
|
height: 1em;
|
|
vertical-align: -0.15em;
|
|
background: var(--secondary);
|
|
animation: caret-blink 1.1s steps(1, end) infinite;
|
|
}
|
|
|
|
@keyframes caret-blink {
|
|
0%,
|
|
49% {
|
|
opacity: 1;
|
|
}
|
|
50%,
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/* ------------------------------------------------------------- contact */
|
|
|
|
.social-icons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 16px;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.social-icons a {
|
|
color: var(--muted);
|
|
display: inline-flex;
|
|
}
|
|
|
|
.social-icons a svg {
|
|
height: 16px;
|
|
width: 16px;
|
|
display: block;
|
|
}
|
|
|
|
.icon:hover {
|
|
color: var(--secondary);
|
|
}
|
|
|
|
/* The landing page gets large icon buttons for contact. */
|
|
.hero-social {
|
|
grid-area: contact;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
margin-top: 0;
|
|
width: 164px;
|
|
}
|
|
|
|
.hero-social .social-link {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 48px;
|
|
height: 48px;
|
|
color: var(--primary);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius);
|
|
background: var(--bar);
|
|
}
|
|
|
|
.hero-social .social-link svg {
|
|
height: 20px;
|
|
width: 20px;
|
|
color: var(--muted);
|
|
transition:
|
|
color 0.2s var(--ease),
|
|
transform 0.2s var(--ease);
|
|
}
|
|
|
|
.hero-social .social-link:hover {
|
|
color: var(--bright);
|
|
border-color: rgba(235, 82, 52, 0.45);
|
|
background: rgba(235, 82, 52, 0.08);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 26px rgba(235, 82, 52, 0.16);
|
|
}
|
|
|
|
.hero-social .social-link:hover svg {
|
|
color: var(--secondary);
|
|
transform: scale(1.08);
|
|
}
|
|
|
|
/* ---------------------------------------------------------------- footer */
|
|
|
|
.footer {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 16px;
|
|
padding: 14px 18px;
|
|
border-radius: var(--radius);
|
|
font-size: 13px;
|
|
}
|
|
|
|
.footer p {
|
|
margin: 0;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.footer .social-icons {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.footer .social-icons a:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
.loading-state {
|
|
color: var(--muted);
|
|
}
|
|
|
|
/* ------------------------------------------------------------ responsive */
|
|
|
|
@media only screen and (max-width: 860px) {
|
|
#menu,
|
|
.term__avatar {
|
|
display: none;
|
|
}
|
|
|
|
.menu.cta {
|
|
display: block;
|
|
}
|
|
|
|
.main {
|
|
min-height: auto;
|
|
margin-top: 28px;
|
|
width: min(880px, calc(100% - 20px));
|
|
}
|
|
|
|
.term__body {
|
|
grid-template-columns: 1fr;
|
|
grid-template-areas:
|
|
"stream"
|
|
"contact";
|
|
row-gap: 24px;
|
|
padding: 26px 20px 28px;
|
|
}
|
|
|
|
.hero-social {
|
|
width: auto;
|
|
}
|
|
|
|
.page-shell {
|
|
width: min(1120px, calc(100% - 20px));
|
|
}
|
|
|
|
.hero-social .social-link {
|
|
width: 44px;
|
|
height: 44px;
|
|
}
|
|
|
|
.footer {
|
|
display: block;
|
|
}
|
|
|
|
.footer .social-icons {
|
|
margin-top: 12px;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.caret {
|
|
animation: none;
|
|
}
|
|
|
|
*,
|
|
*::after,
|
|
*::before {
|
|
transition: none !important;
|
|
transform: none !important;
|
|
}
|
|
}
|