soconnor/personal-website
1
0
Fork 0
Code Issues Actions Packages Projects Releases Wiki Activity

Cool light palette and hero theme

Browse Source
This commit is contained in:
soconnor
2026-09-22 16:58:23 -04:00
parent 844819731d
commit 7758d1dbbc
1 changed files with 72 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/globals.css
+72 -59
View File
@@ -1108,13 +1108,13 @@ button {
/* A compact personal workspace, across every section. */ /* A compact personal workspace, across every section. */
:root { :root {
--background: 42 30% 96%; --background: 204 44% 97%;
--card: 45 35% 99%; --card: 205 45% 99%;
--border: 35 15% 82%; --border: 202 24% 86%;
--studio-rule: #ddd8cd; --studio-rule: #d6e1e7;
} }
.site-header { .site-header {
background: #f8f6f0f5; background: #f6f9fcf5;
} }
.nav-inner { .nav-inner {
height: 76px; height: 76px;
@@ -1212,7 +1212,7 @@ button {
} }
.corner-card { .corner-card {
display: block; display: block;
background: #fffdf7; background: #fbfdff;
border: 1px solid var(--studio-rule); border: 1px solid var(--studio-rule);
padding: 9px 9px 15px; padding: 9px 9px 15px;
border-radius: 4px; border-radius: 4px;
@@ -1285,7 +1285,7 @@ button {
width: 100%; width: 100%;
min-width: 0; min-width: 0;
border: 1px solid var(--studio-rule); border: 1px solid var(--studio-rule);
background: #fffdf8; background: #fbfdff;
padding: 10px 12px; padding: 10px 12px;
border-radius: 6px; border-radius: 6px;
margin-top: 8px; margin-top: 8px;
@@ -1351,7 +1351,7 @@ button {
border: 1px solid var(--studio-rule); border: 1px solid var(--studio-rule);
border-radius: 8px; border-radius: 8px;
overflow: hidden; overflow: hidden;
background: #fffdf8; background: #fbfdff;
} }
.travel-strip { .travel-strip {
display: flex; display: flex;
@@ -1432,7 +1432,7 @@ button {
overflow-y: auto; overflow-y: auto;
padding: 25px 18px; padding: 25px 18px;
border-right: 1px solid var(--studio-rule); border-right: 1px solid var(--studio-rule);
background: #f1eee5; background: #edf4f8;
} }
.rail-group { .rail-group {
margin-top: 19px; margin-top: 19px;
@@ -1458,7 +1458,7 @@ button {
opacity: 0; opacity: 0;
} }
.rail-group a:hover { .rail-group a:hover {
background: #e6e4d9; background: #e4edf3;
} }
.rail-group a:hover span { .rail-group a:hover span {
opacity: 1; opacity: 1;
@@ -1587,7 +1587,7 @@ button {
padding: 8px 13px; padding: 8px 13px;
border: 1px solid var(--studio-rule); border: 1px solid var(--studio-rule);
border-radius: 5px; border-radius: 5px;
background: #fffdf8; background: #fbfdff;
color: var(--studio-blue); color: var(--studio-blue);
} }
@@ -1597,7 +1597,7 @@ button {
align-items: center; align-items: center;
gap: 20px; gap: 20px;
border: 1px solid var(--studio-rule); border: 1px solid var(--studio-rule);
background: #fffdf8; background: #fbfdff;
padding: 16px 24px; padding: 16px 24px;
border-radius: 8px; border-radius: 8px;
} }
@@ -1637,7 +1637,7 @@ button {
border: 1px solid var(--studio-rule); border: 1px solid var(--studio-rule);
border-radius: 9px; border-radius: 9px;
overflow: hidden; overflow: hidden;
background: #fffdf8; background: #fbfdff;
} }
.mark-choice[aria-pressed="true"] { .mark-choice[aria-pressed="true"] {
border-color: var(--studio-blue); border-color: var(--studio-blue);
@@ -1648,7 +1648,7 @@ button {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
background: #eeeee6; background: #edf3f7;
padding: 20px; padding: 20px;
} }
.mark-large svg { .mark-large svg {
@@ -1745,7 +1745,7 @@ button {
flex: 1; flex: 1;
min-width: 180px; min-width: 180px;
padding: 12px 15px; padding: 12px 15px;
background: var(--studio-paper, #fffdf8); background: var(--studio-paper, #fbfdff);
border: 1px solid var(--studio-rule); border: 1px solid var(--studio-rule);
border-radius: 6px; border-radius: 6px;
} }
@@ -1765,7 +1765,7 @@ button {
.coffee-map-panel { .coffee-map-panel {
min-width: 0; min-width: 0;
position: relative; position: relative;
background: #e8e9df; background: #e7eff4;
} }
.coffee-map { .coffee-map {
height: 520px; height: 520px;
@@ -1778,7 +1778,7 @@ button {
left: 60px; left: 60px;
right: 25px; right: 25px;
padding: 15px; padding: 15px;
background: #fffdf8; background: #fbfdff;
} }
.coffee-pin { .coffee-pin {
background: var(--studio-blue); background: var(--studio-blue);
@@ -1798,7 +1798,7 @@ button {
.coffee-shop-list { .coffee-shop-list {
max-height: 520px; max-height: 520px;
overflow: auto; overflow: auto;
background: #fffdf8; background: #fbfdff;
padding: 18px 12px; padding: 18px 12px;
} }
.coffee-shop-list > .studio-label { .coffee-shop-list > .studio-label {
@@ -1816,7 +1816,7 @@ button {
} }
.coffee-shop:hover, .coffee-shop:hover,
.coffee-shop[aria-pressed="true"] { .coffee-shop[aria-pressed="true"] {
background: #eeeee6; background: #edf3f7;
} }
.coffee-shop > span:nth-child(2) { .coffee-shop > span:nth-child(2) {
flex: 1; flex: 1;
@@ -1837,7 +1837,7 @@ button {
font-size: 12px; font-size: 12px;
} }
.coffee-detail { .coffee-detail {
background: #fffdf8; background: #fbfdff;
padding: 22px; padding: 22px;
border-top: 1px solid var(--studio-rule); border-top: 1px solid var(--studio-rule);
} }
@@ -2101,7 +2101,7 @@ button {
padding: 12px; padding: 12px;
border: 1px solid var(--studio-rule); border: 1px solid var(--studio-rule);
border-radius: 8px 8px 0 0; border-radius: 8px 8px 0 0;
background: #f0efe8; background: #edf3f7;
} }
.control-group { .control-group {
display: flex; display: flex;
@@ -2115,7 +2115,7 @@ button {
padding: 6px 10px; padding: 6px 10px;
border: 1px solid var(--studio-rule); border: 1px solid var(--studio-rule);
border-radius: 4px; border-radius: 4px;
background: #fffdf8; background: #fbfdff;
} }
.control-group button:disabled { .control-group button:disabled {
opacity: 0.35; opacity: 0.35;
@@ -2132,7 +2132,7 @@ button {
min-height: 420px; min-height: 420px;
overflow: auto; overflow: auto;
padding: 16px; padding: 16px;
background: #e9e8e1; background: #e7eff4;
border: 1px solid var(--studio-rule); border: 1px solid var(--studio-rule);
border-top: 0; border-top: 0;
} }
@@ -2202,7 +2202,7 @@ button {
/* A centered site with one consistent, compact navigation. */ /* A centered site with one consistent, compact navigation. */
.site-header { .site-header {
background: #f8f6f0f5; background: #f6f9fcf5;
backdrop-filter: blur(18px); backdrop-filter: blur(18px);
border-bottom: 1px solid var(--studio-rule); border-bottom: 1px solid var(--studio-rule);
} }
@@ -2338,7 +2338,7 @@ button {
width: 190px; width: 190px;
padding: 6px; padding: 6px;
border: 1px solid var(--studio-rule); border: 1px solid var(--studio-rule);
background: #fffdf8; background: #fbfdff;
border-radius: 8px; border-radius: 8px;
box-shadow: 0 10px 25px #24231f12; box-shadow: 0 10px 25px #24231f12;
} }
@@ -2349,7 +2349,7 @@ button {
} }
.header-dropdown a:hover, .header-dropdown a:hover,
.header-dropdown a[aria-current="page"] { .header-dropdown a[aria-current="page"] {
background: #eeeee6; background: #edf3f7;
color: var(--studio-blue); color: var(--studio-blue);
} }
.primary-links .header-resume { .primary-links .header-resume {
@@ -2397,25 +2397,25 @@ button {
} }
} }
/* Hadlock palette, with soft paper surfaces and lake-blue contour lines. */ /* Hadlock palette, with cool blue-white surfaces and lake-blue contour lines. */
:root { :root {
--font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif; --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
--background: 40 31% 94%; --background: 204 44% 97%;
--foreground: 205 34% 16%; --foreground: 205 34% 16%;
--card: 48 100% 99%; --card: 205 45% 99%;
--card-foreground: 205 34% 16%; --card-foreground: 205 34% 16%;
--primary: 196 100% 31%; --primary: 196 100% 31%;
--ring: 196 100% 31%; --ring: 196 100% 31%;
--muted-foreground: 207 10% 40%; --muted-foreground: 207 10% 40%;
--studio-blue: #0076a0; --studio-blue: #0076a0;
--studio-muted: #616a6e; --studio-muted: #616a6e;
--studio-rule: #d9d3c6; --studio-rule: #d6e1e7;
--studio-ink: #173441; --studio-ink: #173441;
} }
body { body {
background: background:
radial-gradient(ellipse at 95% 5%, #dce8e7 0, transparent 38rem), radial-gradient(ellipse at 95% 5%, #e4f2f7 0, transparent 38rem),
radial-gradient(ellipse at 0 65%, #e9e4d5 0, transparent 40rem), #f4f1ea; radial-gradient(ellipse at 0 65%, #edf4f8 0, transparent 40rem), #f6f9fc;
font-family: var(--font-sans); font-family: var(--font-sans);
} }
::selection { ::selection {
@@ -2423,8 +2423,8 @@ body {
color: #163542; color: #163542;
} }
.site-header { .site-header {
background: #f4f1eaed; background: #f6f9fcf0;
border-color: #d9d3c680; border-color: #d6e1e780;
} }
.wordmark-name { .wordmark-name {
font-weight: 600; font-weight: 600;
@@ -2434,7 +2434,7 @@ body {
font-size: 14px; font-size: 14px;
} }
.header-dropdown { .header-dropdown {
background: #fffefa; background: #fbfdff;
box-shadow: 0 14px 40px #17344116; box-shadow: 0 14px 40px #17344116;
} }
.header-dropdown a:hover, .header-dropdown a:hover,
@@ -2458,10 +2458,10 @@ body {
margin-bottom: 44px; margin-bottom: 44px;
border: 1px solid #245565; border: 1px solid #245565;
border-radius: 22px; border-radius: 22px;
color: #fff8e9; color: #173441;
background: background:
radial-gradient(ellipse at 100% 110%, #0076a073, transparent 65%), radial-gradient(ellipse at 100% 110%, #8dc4d1aa, transparent 65%),
linear-gradient(115deg, #102e3c, #1c4b5b); linear-gradient(115deg, #e9f3f1, #cce5e9);
box-shadow: box-shadow:
0 14px 40px #1734410c, 0 14px 40px #1734410c,
inset 0 1px 0 #ffffff10; inset 0 1px 0 #ffffff10;
@@ -2481,7 +2481,7 @@ body {
vector-effect: non-scaling-stroke; vector-effect: non-scaling-stroke;
} }
.studio-intro .intro-topline { .studio-intro .intro-topline {
color: #c0d4d7; color: #496f7b;
font-size: 11px; font-size: 11px;
letter-spacing: 0.08em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
@@ -2492,43 +2492,43 @@ body {
margin-top: 25px; margin-top: 25px;
} }
.studio-intro h1 { .studio-intro h1 {
color: #fff8e9; color: #143744;
font-size: clamp(54px, 6vw, 84px); font-size: clamp(54px, 6vw, 84px);
font-weight: 400; font-weight: 400;
letter-spacing: -0.04em; letter-spacing: -0.04em;
margin-bottom: 22px; margin-bottom: 22px;
} }
.studio-intro h1 span { .studio-intro h1 span {
color: #91c2ce; color: #0076a0;
} }
.studio-intro .intro-statement { .studio-intro .intro-statement {
color: #fff8e9; color: #173b49;
font-size: 23px; font-size: 23px;
line-height: 1.45; line-height: 1.45;
letter-spacing: -0.025em; letter-spacing: -0.025em;
} }
.studio-intro .intro-statement a { .studio-intro .intro-statement a {
color: #b3dfe7; color: #006c90;
text-decoration-color: #8bbacb65; text-decoration-color: #0076a080;
} }
.studio-intro .intro-detail { .studio-intro .intro-detail {
color: #c0d1d6; color: #42606a;
font-size: 15px; font-size: 15px;
line-height: 1.8; line-height: 1.8;
max-width: 590px; max-width: 590px;
} }
.studio-intro .intro-links { .studio-intro .intro-links {
color: #fff8e9; color: #173b49;
margin-top: 25px; margin-top: 25px;
} }
.studio-intro .intro-links a { .studio-intro .intro-links a {
font-size: 13px; font-size: 13px;
} }
.studio-intro .intro-links a:first-child { .studio-intro .intro-links a:first-child {
border: 1px solid #b9d4d45c; border: 1px solid #47879b75;
border-radius: 5px; border-radius: 5px;
padding: 9px 13px; padding: 9px 13px;
background: #ffffff09; background: #ffffff66;
} }
.studio-intro .intro-portrait { .studio-intro .intro-portrait {
transform: none; transform: none;
@@ -2559,9 +2559,9 @@ body {
font-size: 11px; font-size: 11px;
} }
.studio-grid > article { .studio-grid > article {
background: #fffefa; background: #fbfdff;
padding: 12px 12px 20px; padding: 12px 12px 20px;
border: 1px solid #d9d3c6; border: 1px solid #d6e1e7;
border-radius: 16px; border-radius: 16px;
box-shadow: 0 4px 12px #17344104; box-shadow: 0 4px 12px #17344104;
} }
@@ -2595,8 +2595,8 @@ body {
padding-top: 20px; padding-top: 20px;
} }
.corner-card { .corner-card {
background: #fffefa; background: #fbfdff;
border: 1px solid #d9d3c6; border: 1px solid #d6e1e7;
box-shadow: 0 5px 16px #17344106; box-shadow: 0 5px 16px #17344106;
border-radius: 10px; border-radius: 10px;
} }
@@ -2730,13 +2730,14 @@ body {
width: 100vw; width: 100vw;
z-index: -2; z-index: -2;
background: background:
radial-gradient(ellipse at 100% 110%, #0076a073, transparent 65%), radial-gradient(ellipse at 100% 110%, #8dc4d1aa, transparent 65%),
linear-gradient(115deg, #102e3c, #1c4b5b); linear-gradient(115deg, #e9f3f1, #cce5e9);
} }
.studio-intro > .contour-lines { .studio-intro > .contour-lines {
left: calc((100% - 100vw) / 2); left: calc((100% - 100vw) / 2);
width: 100vw; width: 100vw;
} }
.studio-intro > .contour-lines path { stroke: #468ca0; }
@media (max-width: 700px) { @media (max-width: 700px) {
.studio-home .studio-intro { .studio-home .studio-intro {
padding: 30px 0 36px; padding: 30px 0 36px;
@@ -2995,7 +2996,7 @@ body {
position: fixed; position: fixed;
inset: 64px 0 0; inset: 64px 0 0;
z-index: 40; z-index: 40;
background: linear-gradient(180deg, #f4f1ea10, #f4f1ea8c 70%); background: linear-gradient(180deg, #f6f9fc10, #f6f9fc8c 70%);
-webkit-backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px); backdrop-filter: blur(14px);
-webkit-mask-image: linear-gradient(180deg, transparent, #000 42%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 42%);
@@ -3106,7 +3107,7 @@ body {
padding: 28px 30px; padding: 28px 30px;
border: 1px solid var(--studio-rule); border: 1px solid var(--studio-rule);
border-radius: 14px; border-radius: 14px;
background: #fffefa; background: #fbfdff;
} }
.media-story-top { color: #54717c; } .media-story-top { color: #54717c; }
.media-story-top svg { flex-shrink: 0; } .media-story-top svg { flex-shrink: 0; }
@@ -3144,7 +3145,7 @@ body {
padding: 30px; padding: 30px;
border: 1px solid var(--studio-rule); border: 1px solid var(--studio-rule);
border-radius: 14px; border-radius: 14px;
background: #fffefa; background: #fbfdff;
} }
.writing-page .writing-entry:first-child { .writing-page .writing-entry:first-child {
position: relative; position: relative;
@@ -3211,7 +3212,7 @@ body {
padding: 13px; padding: 13px;
border: 1px solid var(--studio-rule); border: 1px solid var(--studio-rule);
border-radius: 12px; border-radius: 12px;
background: #fffefa; background: #fbfdff;
} }
.portfolio-page .project-tools label { position: relative; min-width: 260px; } .portfolio-page .project-tools label { position: relative; min-width: 260px; }
.portfolio-page .project-tools label > svg { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); color: #67808a; } .portfolio-page .project-tools label > svg { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); color: #67808a; }
@@ -3226,7 +3227,7 @@ body {
.portfolio-page .archive-card--featured { .portfolio-page .archive-card--featured {
padding: 12px; padding: 12px;
border-radius: 16px; border-radius: 16px;
background: #fffefa; background: #fbfdff;
box-shadow: 0 6px 18px #17344108; box-shadow: 0 6px 18px #17344108;
} }
.archive-card--featured .archive-image { border-radius: 9px; aspect-ratio: 1.62; } .archive-card--featured .archive-image { border-radius: 9px; aspect-ratio: 1.62; }
@@ -3338,6 +3339,18 @@ body {
.header-dropdown a:hover, .header-dropdown a[aria-current="page"] { background: #294451; color: var(--studio-blue); } .header-dropdown a:hover, .header-dropdown a[aria-current="page"] { background: #294451; color: var(--studio-blue); }
.mobile-menu-backdrop { background: linear-gradient(180deg, #10263010, #102630b8 70%); } .mobile-menu-backdrop { background: linear-gradient(180deg, #10263010, #102630b8 70%); }
.studio-home .studio-intro { color: #fff8e9; }
.studio-home .studio-intro::before {
background: radial-gradient(ellipse at 100% 110%, #0076a073, transparent 65%), linear-gradient(115deg, #102e3c, #1c4b5b);
}
.studio-intro > .contour-lines path { stroke: #92b8bc; }
.studio-intro .intro-topline { color: #c0d4d7; }
.studio-intro h1, .studio-intro .intro-statement, .studio-intro .intro-links { color: #fff8e9; }
.studio-intro h1 span { color: #91c2ce; }
.studio-intro .intro-statement a { color: #b3dfe7; text-decoration-color: #8bbacb65; }
.studio-intro .intro-detail { color: #c0d1d6; }
.studio-intro .intro-links a:first-child { border-color: #b9d4d45c; background: #ffffff09; }
.studio-grid > article, .studio-hadlock, .media-story, .studio-grid > article, .studio-hadlock, .media-story,
.writing-page .writing-entry:not(:first-child), .writing-page .writing-entry:not(:first-child),
.portfolio-page .project-tools, .portfolio-page .archive-card--featured, .portfolio-page .project-tools, .portfolio-page .archive-card--featured,