render an ASCII torus behind thicker glass, drop the light theme
- 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>
This commit is contained in:
SowinskiBraedenandClaude Opus 5 committed
1 parent
54c00bf16f
commit
7078cda6c5
10 files changed
+448
-415
No files matched your search
+12
-5
@@ -36,13 +36,16 @@
|
||||
|
||||
section {
|
||||
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;
|
||||
transition:
|
||||
border-color 0.24s var(--ease),
|
||||
box-shadow 0.24s var(--ease);
|
||||
}
|
||||
|
||||
section:hover {
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
.panel__bar {
|
||||
@@ -78,6 +81,11 @@ section {
|
||||
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 {
|
||||
@@ -169,7 +177,6 @@ dd.text {
|
||||
}
|
||||
|
||||
.honor-inline-link {
|
||||
display: inline-block;
|
||||
margin-top: 8px;
|
||||
font-size: 0.84rem;
|
||||
color: var(--secondary);
|
||||
|
||||
+79
-61
@@ -5,10 +5,28 @@
|
||||
|
||||
/* The page header sits on the background; only cards get a surface. */
|
||||
.projects-hero {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
margin-bottom: 40px;
|
||||
max-width: 760px;
|
||||
}
|
||||
|
||||
/* Soft scrim so the heading stays readable over the ASCII field, without
|
||||
putting the text in a box. */
|
||||
.projects-hero::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: -28px -10px -20px -10px;
|
||||
z-index: -1;
|
||||
pointer-events: none;
|
||||
background: radial-gradient(
|
||||
ellipse at 30% 50%,
|
||||
rgba(11, 12, 15, 0.92),
|
||||
rgba(11, 12, 15, 0.6) 45%,
|
||||
transparent 75%
|
||||
);
|
||||
}
|
||||
|
||||
.projects-hero h1,
|
||||
.entry-title {
|
||||
font-size: clamp(1.5rem, 3vw, 2.1rem);
|
||||
@@ -64,15 +82,6 @@
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.section-link {
|
||||
font-size: 13px;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.section-link:hover {
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.content-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
@@ -90,33 +99,36 @@
|
||||
/* ---------------------------------------------------------------- cards */
|
||||
|
||||
.content-card {
|
||||
padding: 20px;
|
||||
background: var(--surface);
|
||||
backdrop-filter: blur(16px) saturate(130%);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(130%);
|
||||
border: 1px solid var(--border);
|
||||
padding: 22px;
|
||||
border-radius: var(--radius);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
scroll-margin-top: 90px;
|
||||
transition:
|
||||
border-color 0.2s ease,
|
||||
box-shadow 0.2s ease,
|
||||
transform 0.2s ease;
|
||||
border-color 0.24s var(--ease),
|
||||
box-shadow 0.24s var(--ease),
|
||||
transform 0.24s var(--ease);
|
||||
}
|
||||
|
||||
.content-card:hover {
|
||||
border-color: var(--border-strong);
|
||||
box-shadow: var(--shadow);
|
||||
transform: translateY(-3px);
|
||||
box-shadow:
|
||||
0 26px 60px rgba(0, 0, 0, 0.46),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.09);
|
||||
}
|
||||
|
||||
.content-card.featured {
|
||||
border-color: rgba(235, 82, 52, 0.28);
|
||||
}
|
||||
|
||||
body.light .content-card.featured {
|
||||
border-color: rgba(200, 64, 31, 0.3);
|
||||
.content-card.featured:hover {
|
||||
border-color: rgba(235, 82, 52, 0.55);
|
||||
box-shadow:
|
||||
0 26px 60px rgba(0, 0, 0, 0.46),
|
||||
0 0 32px rgba(235, 82, 52, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.09);
|
||||
}
|
||||
|
||||
.card-meta {
|
||||
@@ -136,32 +148,6 @@ body.light .content-card.featured {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.card-status {
|
||||
margin-left: auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 7px;
|
||||
}
|
||||
|
||||
.card-status::before {
|
||||
content: "";
|
||||
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 0 10px;
|
||||
font-size: 1.1rem;
|
||||
@@ -191,6 +177,14 @@ body.light .content-card.featured {
|
||||
color: var(--muted);
|
||||
background: var(--bar);
|
||||
border: 1px solid var(--border);
|
||||
transition:
|
||||
color 0.2s var(--ease),
|
||||
border-color 0.2s var(--ease);
|
||||
}
|
||||
|
||||
.content-card:hover .tag {
|
||||
color: var(--primary);
|
||||
border-color: var(--border-strong);
|
||||
}
|
||||
|
||||
.card-links,
|
||||
@@ -207,21 +201,52 @@ body.light .content-card.featured {
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* Text links share one hover: colour plus an underline growing from the left. */
|
||||
.card-link,
|
||||
.entry-back,
|
||||
.inline-button {
|
||||
.inline-button,
|
||||
.section-link,
|
||||
.honor-inline-link {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
color: var(--muted);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.card-link::after,
|
||||
.entry-back::after,
|
||||
.inline-button::after,
|
||||
.section-link::after,
|
||||
.honor-inline-link::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: -2px;
|
||||
height: 1px;
|
||||
width: 100%;
|
||||
background: var(--secondary);
|
||||
transform: scaleX(0);
|
||||
transform-origin: left;
|
||||
transition: transform 0.24s var(--ease);
|
||||
}
|
||||
|
||||
.card-link:hover,
|
||||
.entry-back:hover,
|
||||
.inline-button:hover {
|
||||
.inline-button:hover,
|
||||
.section-link:hover,
|
||||
.honor-inline-link:hover {
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.card-link:hover::after,
|
||||
.entry-back:hover::after,
|
||||
.inline-button:hover::after,
|
||||
.section-link:hover::after,
|
||||
.honor-inline-link:hover::after {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
.card-link-primary,
|
||||
.inline-button-primary {
|
||||
color: var(--primary);
|
||||
@@ -239,19 +264,21 @@ body.light .content-card.featured {
|
||||
align-items: center;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 7px 18px;
|
||||
padding: 8px 20px;
|
||||
font-size: 13px;
|
||||
background: var(--bar);
|
||||
color: var(--muted);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
color 0.18s ease,
|
||||
border-color 0.18s ease;
|
||||
color 0.2s var(--ease),
|
||||
border-color 0.2s var(--ease),
|
||||
transform 0.2s var(--ease);
|
||||
}
|
||||
|
||||
.projects-toggle:hover {
|
||||
color: var(--bright);
|
||||
border-color: var(--border-strong);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
@@ -266,12 +293,7 @@ body.light .content-card.featured {
|
||||
}
|
||||
|
||||
.entry-shell {
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -368,17 +390,13 @@ body.light .content-card.featured {
|
||||
.entry-content pre {
|
||||
padding: 16px 18px;
|
||||
overflow-x: auto;
|
||||
background: rgba(0, 0, 0, 0.22);
|
||||
background: rgba(0, 0, 0, 0.26);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.84rem;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
body.light .entry-content pre {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.entry-content pre code {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
|
||||
+161
-122
@@ -2,46 +2,30 @@
|
||||
|
||||
:root {
|
||||
--theme: #0b0c0f;
|
||||
--surface: rgba(21, 23, 28, 0.58);
|
||||
--surface-raised: rgba(28, 31, 37, 0.62);
|
||||
--bar: rgba(255, 255, 255, 0.035);
|
||||
--primary: #cbcfd8;
|
||||
--bright: #f1f3f7;
|
||||
--surface: rgba(20, 22, 27, 0.34);
|
||||
--surface-raised: rgba(28, 31, 38, 0.46);
|
||||
--bar: rgba(255, 255, 255, 0.04);
|
||||
--primary: #ccd0d9;
|
||||
--bright: #f2f4f8;
|
||||
--secondary: #eb5234;
|
||||
--accent: #ff005a;
|
||||
--ok: #7fb069;
|
||||
--muted: #7b8290;
|
||||
--border: rgba(255, 255, 255, 0.09);
|
||||
--border-strong: rgba(255, 255, 255, 0.18);
|
||||
--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);
|
||||
--shadow: 0 20px 54px rgba(0, 0, 0, 0.4);
|
||||
--selection: rgba(235, 82, 52, 0.3);
|
||||
--ascii-base: #8e97a8;
|
||||
--ascii-base: #99a2b4;
|
||||
--ascii-accent: #eb5234;
|
||||
--radius: 6px;
|
||||
--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;
|
||||
}
|
||||
|
||||
body.light {
|
||||
--theme: #e9e9e4;
|
||||
--surface: rgba(255, 255, 255, 0.56);
|
||||
--surface-raised: rgba(255, 255, 255, 0.72);
|
||||
--bar: rgba(0, 0, 0, 0.035);
|
||||
--primary: #2a2d33;
|
||||
--bright: #101216;
|
||||
--secondary: #c8401f;
|
||||
--accent: #c20046;
|
||||
--ok: #4b7a3a;
|
||||
--muted: #6b6f78;
|
||||
--border: rgba(0, 0, 0, 0.1);
|
||||
--border-strong: rgba(0, 0, 0, 0.2);
|
||||
--glow: rgba(200, 64, 31, 0.14);
|
||||
--shadow: 0 18px 44px rgba(0, 0, 0, 0.1);
|
||||
--selection: rgba(200, 64, 31, 0.22);
|
||||
--ascii-base: #6f7682;
|
||||
--ascii-accent: #c8401f;
|
||||
/* Fine film grain that sits on every frosted surface. */
|
||||
--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -69,9 +53,6 @@ body {
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
transition:
|
||||
background-color 0.3s ease,
|
||||
color 0.3s ease;
|
||||
}
|
||||
|
||||
/* Soft light behind the ASCII field, so the page has depth without gloss. */
|
||||
@@ -97,15 +78,11 @@ body::before {
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
opacity: 0.22;
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
body.light #ascii-bg {
|
||||
opacity: 0.17;
|
||||
}
|
||||
|
||||
body.js-stop-transition * {
|
||||
transition: none !important;
|
||||
body[data-page="home"] #ascii-bg {
|
||||
opacity: 0.34;
|
||||
}
|
||||
|
||||
header,
|
||||
@@ -115,6 +92,33 @@ main,
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------- frosted surfaces */
|
||||
|
||||
.surface {
|
||||
position: relative;
|
||||
isolation: isolate;
|
||||
background: var(--surface);
|
||||
backdrop-filter: blur(26px) saturate(150%);
|
||||
-webkit-backdrop-filter: blur(26px) saturate(150%);
|
||||
border: 1px solid var(--border);
|
||||
box-shadow:
|
||||
var(--shadow),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.07);
|
||||
}
|
||||
|
||||
.surface::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: -1;
|
||||
border-radius: inherit;
|
||||
pointer-events: none;
|
||||
background-image: var(--grain);
|
||||
background-size: 180px 180px;
|
||||
opacity: 0.22;
|
||||
mix-blend-mode: soft-light;
|
||||
}
|
||||
|
||||
a,
|
||||
h1,
|
||||
h2,
|
||||
@@ -140,10 +144,11 @@ a {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
transition:
|
||||
color 0.18s ease,
|
||||
background-color 0.18s ease,
|
||||
border-color 0.18s ease,
|
||||
box-shadow 0.18s ease;
|
||||
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 {
|
||||
@@ -169,10 +174,9 @@ pre {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 1000;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var(--border);
|
||||
background: var(--surface);
|
||||
backdrop-filter: blur(16px) saturate(130%);
|
||||
-webkit-backdrop-filter: blur(16px) saturate(130%);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.nav {
|
||||
@@ -183,7 +187,7 @@ pre {
|
||||
gap: 12px;
|
||||
width: min(1120px, calc(100% - 32px));
|
||||
margin: 0 auto;
|
||||
min-height: 52px;
|
||||
min-height: 54px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
@@ -214,72 +218,66 @@ pre {
|
||||
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: 22px;
|
||||
gap: 24px;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
#menu a {
|
||||
display: block;
|
||||
position: relative;
|
||||
font-size: 13.5px;
|
||||
color: var(--muted);
|
||||
padding: 2px 0;
|
||||
border-bottom: 1px solid transparent;
|
||||
}
|
||||
|
||||
/* 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);
|
||||
border-bottom-color: var(--secondary);
|
||||
}
|
||||
|
||||
.logo-switches {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
button#theme-toggle {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
color: var(--muted);
|
||||
padding: 2px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
transition: color 0.18s ease;
|
||||
}
|
||||
|
||||
button#theme-toggle svg {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
button#theme-toggle:hover {
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
body.light #moon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
body:not(.light) #sun {
|
||||
display: none;
|
||||
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 {
|
||||
@@ -292,6 +290,9 @@ body:not(.light) #sun {
|
||||
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 {
|
||||
@@ -306,20 +307,16 @@ body:not(.light) #sun {
|
||||
inset: 0;
|
||||
z-index: 2147483647;
|
||||
isolation: isolate;
|
||||
background: rgba(11, 12, 15, 0.82);
|
||||
backdrop-filter: blur(18px) saturate(130%);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(130%);
|
||||
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.2s ease,
|
||||
visibility 0.2s ease;
|
||||
}
|
||||
|
||||
body.light .overlay {
|
||||
background: rgba(233, 233, 228, 0.86);
|
||||
opacity 0.22s var(--ease),
|
||||
visibility 0.22s var(--ease);
|
||||
}
|
||||
|
||||
.overlay--active {
|
||||
@@ -367,6 +364,7 @@ body.light .overlay {
|
||||
border: 0;
|
||||
background: transparent;
|
||||
padding: 0 8px;
|
||||
transition: color 0.2s var(--ease);
|
||||
}
|
||||
|
||||
.overlay .close:hover {
|
||||
@@ -403,22 +401,17 @@ body.menu-open .overlay * {
|
||||
/* ------------------------------------------------------- terminal window */
|
||||
|
||||
.main {
|
||||
width: min(1120px, calc(100% - 32px));
|
||||
width: min(880px, calc(100% - 32px));
|
||||
margin: 0 auto;
|
||||
padding: 0 0 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: calc(100vh - 52px);
|
||||
min-height: calc(100vh - 54px);
|
||||
}
|
||||
|
||||
.term {
|
||||
width: 100%;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--surface);
|
||||
backdrop-filter: blur(18px) saturate(140%);
|
||||
-webkit-backdrop-filter: blur(18px) saturate(140%);
|
||||
box-shadow: var(--shadow);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -452,14 +445,14 @@ body.menu-open .overlay * {
|
||||
.term__body {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: 34px;
|
||||
padding: 34px 32px;
|
||||
gap: 30px;
|
||||
padding: 32px 30px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.term__avatar {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
width: 148px;
|
||||
height: 148px;
|
||||
object-fit: cover;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid var(--border-strong);
|
||||
@@ -531,7 +524,7 @@ body.menu-open .overlay * {
|
||||
border-radius: var(--radius);
|
||||
background: var(--bar);
|
||||
color: var(--primary);
|
||||
padding: 7px 16px;
|
||||
padding: 8px 18px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -539,6 +532,7 @@ body.menu-open .overlay * {
|
||||
.button:hover {
|
||||
color: var(--bright);
|
||||
border-color: var(--border-strong);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.button-primary {
|
||||
@@ -551,7 +545,7 @@ body.menu-open .overlay * {
|
||||
.button-primary:hover {
|
||||
border-color: var(--secondary);
|
||||
background: rgba(235, 82, 52, 0.22);
|
||||
box-shadow: 0 8px 28px rgba(235, 82, 52, 0.22);
|
||||
box-shadow: 0 10px 30px rgba(235, 82, 52, 0.26);
|
||||
}
|
||||
|
||||
.caret {
|
||||
@@ -574,6 +568,8 @@ body.menu-open .overlay * {
|
||||
}
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------- contact */
|
||||
|
||||
.social-icons {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -581,21 +577,62 @@ body.menu-open .overlay * {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.social-icons a {
|
||||
color: var(--muted);
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.social-icons a svg {
|
||||
height: 16px;
|
||||
width: 16px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.social-icons a {
|
||||
color: var(--muted);
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.icon:hover {
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
/* The landing page gets labelled contact cards instead of bare icons. */
|
||||
.hero-social {
|
||||
gap: 12px;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 28px;
|
||||
}
|
||||
|
||||
.hero-social .social-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 16px;
|
||||
font-size: 13.5px;
|
||||
color: var(--primary);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
background: var(--bar);
|
||||
}
|
||||
|
||||
.hero-social .social-link svg {
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
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 {
|
||||
@@ -604,10 +641,6 @@ body.menu-open .overlay * {
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
padding: 14px 18px;
|
||||
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);
|
||||
font-size: 13px;
|
||||
}
|
||||
@@ -621,6 +654,10 @@ body.menu-open .overlay * {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.footer .social-icons a:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.loading-state {
|
||||
color: var(--muted);
|
||||
}
|
||||
@@ -640,7 +677,7 @@ body.menu-open .overlay * {
|
||||
.main {
|
||||
min-height: auto;
|
||||
margin-top: 28px;
|
||||
width: min(1120px, calc(100% - 20px));
|
||||
width: min(880px, calc(100% - 20px));
|
||||
}
|
||||
|
||||
.term__body {
|
||||
@@ -653,6 +690,10 @@ body.menu-open .overlay * {
|
||||
width: min(1120px, calc(100% - 20px));
|
||||
}
|
||||
|
||||
.hero-social .social-link {
|
||||
padding: 9px 14px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: block;
|
||||
}
|
||||
@@ -667,12 +708,10 @@ body.menu-open .overlay * {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
* {
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
transition: none !important;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
/* Typing sequence: outputs keep their space while hidden, so nothing shifts. */
|
||||
.is-typing-hidden {
|
||||
visibility: hidden;
|
||||
}
|
||||
Reference in new issue
Block a user