From 38d8fb4377f7cac8e031b18d2610f6b6ef2436c1 Mon Sep 17 00:00:00 2001 From: Devyani Jain Date: Sat, 1 Aug 2026 12:45:58 -0700 Subject: [PATCH 01/12] Block search engine indexing (noindex meta + robots.txt) Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: fa4d7950-6a6a-44a9-81e7-0c6a5bf388dd --- index.html | 4 ++++ robots.txt | 2 ++ 2 files changed, 6 insertions(+) create mode 100644 robots.txt diff --git a/index.html b/index.html index e88981a..b6238e2 100644 --- a/index.html +++ b/index.html @@ -8,6 +8,10 @@ + + + + diff --git a/robots.txt b/robots.txt new file mode 100644 index 0000000..1f53798 --- /dev/null +++ b/robots.txt @@ -0,0 +1,2 @@ +User-agent: * +Disallow: / From 0a63c881838b73def9a145de5a5a05f6e4442eb4 Mon Sep 17 00:00:00 2001 From: Devyani Jain Date: Sat, 1 Aug 2026 13:03:48 -0700 Subject: [PATCH 02/12] Redesign: framed card layout with sticky identity column and pill accents Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: fa4d7950-6a6a-44a9-81e7-0c6a5bf388dd --- index.html | 135 +++++++++--------- style.css | 409 +++++++++++++++++++++++++++++------------------------ 2 files changed, 295 insertions(+), 249 deletions(-) diff --git a/index.html b/index.html index b6238e2..9ded366 100644 --- a/index.html +++ b/index.html @@ -32,43 +32,63 @@ -
-
-

Devyani Jain

-

- I'm Devyani Jain, a mission-driven product designer who is chasing after - the magic to connect people in physical and digital spaces. - Currently, at GitHub designing to get rid of - AI slop and multiply developer powers. -

+
+ +
- - Scroll - - -
+
+

Product Designer

+

+ I'm Devyani Jain, a mission-driven product designer chasing after the + magic to connect people in physical and digital spaces. + Currently, at GitHub — designing to get + rid of AI slop and multiply developer powers. +

+
-
-
-

Selected Work

+
+

Get in touch

+
+ + + devyanijain0@gmail.com + + + + LinkedIn + + +
+
+ -
-
-

Lucid Motors — Design System

-

- Product Designer - - 2024 -

+ +
+
+ + + Selected Work + +
+ +
+
+

Lucid Motors — Design System

+ Product Designer · 2024
-

+

Lucid Motors' Electric Integration ecosystem spans 25+ applications (OTA updates, Infotainment, ADAS) supported by six teams and 300+ engineers. The goal was to define a shared experience between @@ -82,16 +102,12 @@

Lucid Motors — Design System

-
-
-

Lenskart × DIVINE Collection

-

- Creative Design Intern - - 2023 -

+
+
+

Lenskart × DIVINE Collection

+ Creative Design Intern · 2023
-

+

Lenskart, Asia's largest eyewear retailer, partnered with DIVINE, an Indian rapper with over 5.2 million listeners, to bring a hip-hop eyewear collection to life. I joined the design team focused on concept @@ -100,16 +116,12 @@

Lenskart × DIVINE Collection

-
-
-

VisionTranslate

-

- Design Lead - - 2023 -

+
+
+

VisionTranslate

+ Design Lead · 2023
-

+

VisionTranslate is a mixed-reality (MR) app built native to Apple VisionOS that translates real-time sign-language, text, and speech. People who are hard-of-hearing face undesirable experiences when @@ -121,19 +133,16 @@

VisionTranslate

eventually giving life to our mission.

-
-
- + + + + + diff --git a/style.css b/style.css index 3cdc4dd..cbe60ac 100644 --- a/style.css +++ b/style.css @@ -1,39 +1,36 @@ /* ------------------------------------------------------------------ * * Devyani Jain — portfolio - * Original design. Minimal, typographic, in the spirit of clean - * single-page designer sites. + * Original design. Framed "card UI" layout with a sticky identity + * column and scrollable work, warm off-white palette, pill accents. + * Inspired in spirit by minimal typographic + framed-card portfolios; + * all code original. * ------------------------------------------------------------------ */ :root { - /* Color */ - --color-bg: #f7f6f3; - --color-text: #17161a; - --color-muted: #6b6a72; - --color-line: #e2e0da; - --color-accent: #17161a; + /* Color — warm, soft, light */ + --bg: #ece8e1; + --surface: #f7f5f1; + --surface-2: #fffdfa; + --text: #1b1a18; + --muted: #7a756c; + --line: #e4dfd6; + --accent: #e0553a; + --accent-soft: #f3d9d0; /* Type */ - --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", - Helvetica, Arial, sans-serif; - - /* Spacing scale */ - --space-1: 0.5rem; - --space-2: 1rem; - --space-3: 1.5rem; - --space-4: 2.5rem; - --space-5: 4rem; - --space-6: 6rem; - --space-7: 9rem; - - /* Layout */ - --wrap-max: 1080px; - --wrap-pad: clamp(1.25rem, 5vw, 4rem); - - /* Motion */ + --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, + Arial, sans-serif; + + /* Shape & motion */ + --radius-frame: 26px; + --radius-card: 20px; + --radius-pill: 999px; --ease: cubic-bezier(0.22, 1, 0.36, 1); -} -/* ----------------------------- Reset ------------------------------ */ + /* Spacing */ + --gap: 10px; + --pad: clamp(1.5rem, 3.2vw, 3rem); +} *, *::before, @@ -48,12 +45,13 @@ html { body { margin: 0; - background-color: var(--color-bg); - color: var(--color-text); - font-family: var(--font-sans); - font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); + padding: var(--gap); + min-height: 100vh; + background: var(--bg); + color: var(--text); + font-family: var(--font); + font-size: clamp(1rem, 0.96rem + 0.25vw, 1.0625rem); line-height: 1.6; - font-weight: 400; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; @@ -61,7 +59,6 @@ body { h1, h2, -h3, p { margin: 0; } @@ -71,227 +68,254 @@ a { text-decoration: none; } -.wrap { - width: 100%; - max-width: var(--wrap-max); - margin-inline: auto; - padding-inline: var(--wrap-pad); +/* ----------------------------- Frame ------------------------------ */ + +.frame { + display: grid; + grid-template-columns: minmax(360px, 460px) 1fr; + gap: var(--gap); + align-items: start; } -/* ------------------------------ Hero ------------------------------ */ +.panel { + background: var(--surface); + border-radius: var(--radius-frame); + padding: var(--pad); +} -.hero { - position: relative; - min-height: 100vh; - min-height: 100svh; +/* Left column sticks; right column scrolls with the page */ +.panel--intro { + position: sticky; + top: var(--gap); + height: calc(100vh - var(--gap) * 2); display: flex; flex-direction: column; - justify-content: center; - padding-block: var(--space-6) var(--space-7); + justify-content: space-between; + gap: 2rem; + overflow: hidden; } -.eyebrow { - font-size: 0.8125rem; +.panel--work { + display: flex; + flex-direction: column; + gap: var(--gap); + min-height: calc(100vh - var(--gap) * 2); + background: transparent; + padding: 0; +} + +/* ------------------------------ Pills ----------------------------- */ + +.pill { + display: inline-flex; + align-items: center; + gap: 0.45rem; + padding: 0.5rem 0.9rem; + border-radius: var(--radius-pill); + background: var(--surface-2); + border: 1px solid var(--line); + font-size: 0.875rem; font-weight: 500; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--color-muted); - margin-bottom: var(--space-4); + color: var(--text); + line-height: 1; + transition: background 0.25s var(--ease), color 0.25s var(--ease), + border-color 0.25s var(--ease), transform 0.25s var(--ease); } -.hero__title { - font-size: clamp(1.75rem, 1.1rem + 3.4vw, 3.75rem); - line-height: 1.14; - font-weight: 600; - letter-spacing: -0.03em; - max-width: 20ch; +.pill__dot { + width: 7px; + height: 7px; + border-radius: 50%; + background: var(--accent); + flex: none; } -.hero__muted { - color: var(--color-muted); +.pill__arrow { + transition: transform 0.25s var(--ease); } -/* --------------------------- Contact bar -------------------------- */ +/* ---------------------------- Brand / nav ------------------------- */ -.contact { +.panel__top { display: flex; - flex-wrap: wrap; align-items: center; - gap: var(--space-2); - margin-top: var(--space-5); - font-size: 1rem; + justify-content: space-between; + gap: 1rem; + flex-wrap: wrap; } -.contact__dot { - color: var(--color-muted); +.brand { + display: inline-flex; + align-items: center; + gap: 0.5rem; + font-weight: 600; + letter-spacing: -0.02em; } -.contact__link { - position: relative; - font-weight: 500; - color: var(--color-text); - transition: color 0.25s var(--ease); +.brand__mark { + color: var(--accent); + font-size: 1.1em; } -.contact__link::after { - content: ""; - position: absolute; - left: 0; - bottom: -2px; - width: 100%; - height: 1px; - background-color: currentColor; - transform: scaleX(0); - transform-origin: left; - transition: transform 0.3s var(--ease); +.nav { + display: flex; + gap: 0.4rem; + flex-wrap: wrap; } -.contact__link:hover, -.contact__link:focus-visible { - color: var(--color-accent); +.nav__item { + background: var(--surface-2); } -.contact__link:hover::after, -.contact__link:focus-visible::after { - transform: scaleX(1); +.nav__item:hover, +.nav__item:focus-visible { + background: var(--text); + color: var(--surface); + border-color: var(--text); } -/* --------------------------- Scroll hint -------------------------- */ +/* ----------------------------- Intro ------------------------------ */ -.scroll-hint { - position: absolute; - left: var(--wrap-pad); - bottom: var(--space-4); - display: inline-flex; - align-items: center; - gap: var(--space-1); - font-size: 0.8125rem; - letter-spacing: 0.06em; - text-transform: uppercase; - color: var(--color-muted); - transition: color 0.25s var(--ease); +.panel__body { + display: flex; + flex-direction: column; + gap: 1.5rem; } -.scroll-hint:hover, -.scroll-hint:focus-visible { - color: var(--color-text); +.eyebrow { + font-size: 0.8125rem; + font-weight: 500; + letter-spacing: 0.08em; + text-transform: uppercase; + color: var(--accent); } -.scroll-hint__arrow { - display: inline-block; - animation: bob 1.8s var(--ease) infinite; +.intro { + font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem); + line-height: 1.18; + font-weight: 600; + letter-spacing: -0.03em; } -@keyframes bob { - 0%, - 100% { - transform: translateY(0); - } - 50% { - transform: translateY(4px); - } +.intro__muted { + color: var(--muted); } -/* ------------------------------ Work ------------------------------ */ +/* --------------------------- Contact ------------------------------ */ -.work { - padding-block: var(--space-6); - border-top: 1px solid var(--color-line); +.panel__foot { + display: flex; + flex-direction: column; + gap: 0.9rem; } -.section-label { +.foot__label { font-size: 0.8125rem; font-weight: 500; - letter-spacing: 0.08em; + letter-spacing: 0.06em; text-transform: uppercase; - color: var(--color-muted); - margin-bottom: var(--space-5); + color: var(--muted); } -.project { - padding-block: var(--space-5); - border-top: 1px solid var(--color-line); +.pill-row { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; } -.project:first-of-type { - border-top: none; - padding-top: 0; +.pill--link:hover, +.pill--link:focus-visible { + background: var(--accent); + color: #fff; + border-color: var(--accent); + transform: translateY(-1px); } -.project__head { - display: flex; - flex-wrap: wrap; - align-items: baseline; - justify-content: space-between; - gap: var(--space-2); - margin-bottom: var(--space-3); +.pill--link:hover .pill__dot { + background: #fff; } -.project__title { - font-size: clamp(1.5rem, 1.05rem + 2vw, 2.5rem); - font-weight: 600; - letter-spacing: -0.025em; - line-height: 1.15; +.pill--link:hover .pill__arrow { + transform: translate(2px, -2px); } -.project__meta { - display: inline-flex; - align-items: center; - gap: var(--space-1); - font-size: 0.9375rem; - color: var(--color-muted); - white-space: nowrap; -} +/* ------------------------------ Work ------------------------------ */ -.project__dot { - opacity: 0.7; +.work__head { + padding: 0.25rem 0.25rem 0; } -.project__desc { - max-width: 68ch; - color: var(--color-muted); - font-size: clamp(1rem, 0.97rem + 0.2vw, 1.1875rem); +.pill--label { + background: var(--surface); } -/* ----------------------------- Footer ----------------------------- */ +.card { + background: var(--surface); + border-radius: var(--radius-card); + padding: var(--pad); + transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); +} -.footer { - padding-block: var(--space-5); - border-top: 1px solid var(--color-line); +.card:hover { + transform: translateY(-3px); + box-shadow: 0 18px 40px -24px rgba(27, 26, 24, 0.35); } -.footer__inner { +.card__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; - gap: var(--space-3); + gap: 0.75rem; + margin-bottom: 1.1rem; } -.footer__name { +.card__title { + font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2rem); font-weight: 600; - letter-spacing: -0.02em; + letter-spacing: -0.025em; + line-height: 1.15; +} + +.pill--meta { + background: var(--surface-2); + color: var(--muted); + white-space: nowrap; + font-weight: 500; } -.contact--footer { - margin-top: 0; +.card__desc { + color: var(--muted); + max-width: 62ch; + font-size: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem); } -.footer__top { +/* ---------------------------- Work foot --------------------------- */ + +.work__foot { + margin-top: auto; + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 1rem; + padding: 1.25rem var(--pad); + color: var(--muted); font-size: 0.9375rem; - color: var(--color-muted); +} + +.foot__top { transition: color 0.25s var(--ease); } -.footer__top:hover, -.footer__top:focus-visible { - color: var(--color-text); +.foot__top:hover, +.foot__top:focus-visible { + color: var(--text); } /* --------------------------- Fade-in ------------------------------ * - * Content is visible by default. When scroll-driven animations are - * supported, projects fade + rise into view as they enter the - * viewport. Fully progressive — never hides content permanently. + * Cards are visible by default. Where supported, they fade + rise as + * they scroll into view. Fully progressive; respects reduced motion. * ------------------------------------------------------------------ */ @media (prefers-reduced-motion: no-preference) { @@ -299,7 +323,7 @@ a { .fade-in { animation: fade-rise linear both; animation-timeline: view(); - animation-range: entry 0% cover 22%; + animation-range: entry 0% cover 20%; } } } @@ -307,7 +331,7 @@ a { @keyframes fade-rise { from { opacity: 0; - transform: translateY(28px); + transform: translateY(26px); } to { opacity: 1; @@ -317,20 +341,33 @@ a { /* --------------------------- Responsive --------------------------- */ -@media (max-width: 600px) { - .project__head { - flex-direction: column; - gap: var(--space-1); +@media (max-width: 900px) { + .frame { + grid-template-columns: 1fr; } - .footer__inner { - flex-direction: column; - align-items: flex-start; + .panel--intro { + position: static; + height: auto; + min-height: min(88vh, 640px); + } + + .panel--work { + min-height: 0; } } -@media (min-width: 900px) { - .hero__title { - max-width: 22ch; +@media (max-width: 520px) { + :root { + --pad: 1.4rem; + } + + .panel__top { + align-items: flex-start; + } + + .card__head { + flex-direction: column; + align-items: flex-start; } } From 3c9e2a1b7c2606595bf39b3e71a92d8b341df01d Mon Sep 17 00:00:00 2001 From: Devyani Jain Date: Sat, 29 Aug 2026 23:17:42 -0700 Subject: [PATCH 03/12] =?UTF-8?q?feat:=20Golden=20Github=20Seeds=20redesig?= =?UTF-8?q?n=20=E2=80=94=20full-viewport=20dot=20field=20+=20feedback=20pa?= =?UTF-8?q?nel?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Three-section layout: topContent 40vh / middleContent 20vh / bottomContent 40vh - Design tokens: Space Mono (headings) + Space Grotesk (body), dark palette (bg-primary #000, bg-secondary #1F1F1F, bg-tertiary #3D3D3D) - Dull dot fills: fg-yellow-dull, fg-blue-dull, fg-green-dull, fg-red-dull, fg-purple-dull - Submitted dots: radial gradient + glow, clickable; default dots: dull, pointer-events none - Color groups: yellow/teal (top) | green/red/purple (bottom) - Feedback panel: fixed right, slides in — Edit / View / Confirmation variants - Edit: actionBar (Feedback title + X), contentBar (form), footerBar (Submit) - View: actionBar (X), contentBar (read-only fields), footerBar (◀ ▶ arrows) - Confirmation: actionBar (Thank you! + X), contentBar (planted message), footerBar (Edit / Done) - Phosphor icons inline SVG: X, ArrowBendUpRight, ArrowCircleLeft, ArrowCircleRight - 'More' scroll hint on Edit contentBar; bottom-sheet layout on mobile Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> --- index.html | 577 ++++++++++++++++++++++++++++++++++++---------- style.css | 656 +++++++++++++++++++++++++++++------------------------ 2 files changed, 817 insertions(+), 416 deletions(-) diff --git a/index.html b/index.html index 9ded366..03197b2 100644 --- a/index.html +++ b/index.html @@ -4,145 +4,488 @@ - Devyani Jain — Product Designer - + Golden Github Seeds — Devyani Jain + - - - - - - - - - - - - - - - + - + -
- -
+ + + diff --git a/style.css b/style.css index cbe60ac..9b5b21c 100644 --- a/style.css +++ b/style.css @@ -1,373 +1,431 @@ -/* ------------------------------------------------------------------ * - * Devyani Jain — portfolio - * Original design. Framed "card UI" layout with a sticky identity - * column and scrollable work, warm off-white palette, pill accents. - * Inspired in spirit by minimal typographic + framed-card portfolios; - * all code original. - * ------------------------------------------------------------------ */ - +/* ==================================================================== + DESIGN TOKENS + ==================================================================== */ :root { - /* Color — warm, soft, light */ - --bg: #ece8e1; - --surface: #f7f5f1; - --surface-2: #fffdfa; - --text: #1b1a18; - --muted: #7a756c; - --line: #e4dfd6; - --accent: #e0553a; - --accent-soft: #f3d9d0; - - /* Type */ - --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, - Arial, sans-serif; - - /* Shape & motion */ - --radius-frame: 26px; - --radius-card: 20px; - --radius-pill: 999px; + /* Foreground */ + --fg-default: #FCFCFC; + --fg-default-muted: #D4D4D4; + + /* Foreground accent (dull) — used for default dot fills */ + --fg-red-dull: #620101; + --fg-yellow-dull: #413803; + --fg-blue-dull: #013B3C; /* teal/blue group */ + --fg-green-dull: #043710; + --fg-purple-dull: #31044B; + + /* Background */ + --bg-primary: #000000; + --bg-secondary: #1F1F1F; + --bg-tertiary: #3D3D3D; + + /* Typography */ + --font-heading: 'Space Mono', 'Courier New', monospace; + --font-body: 'Space Grotesk', system-ui, sans-serif; + + /* Font scale */ + --fs-h1: 28px; + --fs-h2: 24px; + --fs-h3: 20px; + --fs-p1: 18px; + --fs-p2: 16px; + --fs-p3: 14px; + --fs-caption: 12px; + + /* Spacing (padding tokens) */ + --padding-sm: 8px; + --padding-md: 16px; + --padding-lg: 24px; + + /* Radii */ + --radii-sm: 4px; + --radii-md: 12px; + + /* Dot */ + --dot-size: 28px; + + /* Panel */ + --panel-w: clamp(340px, 38vw, 520px); + + /* Animation */ --ease: cubic-bezier(0.22, 1, 0.36, 1); - - /* Spacing */ - --gap: 10px; - --pad: clamp(1.5rem, 3.2vw, 3rem); } -*, -*::before, -*::after { - box-sizing: border-box; -} +/* ==================================================================== + RESET + ==================================================================== */ +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { - scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { - margin: 0; - padding: var(--gap); - min-height: 100vh; - background: var(--bg); - color: var(--text); - font-family: var(--font); - font-size: clamp(1rem, 0.96rem + 0.25vw, 1.0625rem); - line-height: 1.6; - letter-spacing: -0.01em; - -webkit-font-smoothing: antialiased; + background: var(--bg-primary); + color: var(--fg-default); + font-family: var(--font-body); + font-size: var(--fs-p2); + line-height: 1.5; + min-height: 100vh; + overflow-x: hidden; + -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } -h1, -h2, -p { - margin: 0; -} - -a { - color: inherit; - text-decoration: none; +button { font-family: inherit; cursor: pointer; } + +/* ==================================================================== + TYPOGRAPHY UTILITY CLASSES + ==================================================================== */ +.h1 { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h1); line-height: 1.15; color: var(--fg-default); } +.h2 { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h2); line-height: 1.2; color: var(--fg-default); } +.h3 { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-h3); line-height: 1.25; color: var(--fg-default); } +.p1 { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-p1); color: var(--fg-default); } +.p2 { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-p2); color: var(--fg-default); } +.p3 { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-p3); color: var(--fg-default); } +.caption { font-family: var(--font-body); font-weight: 400; font-size: var(--fs-caption); color: var(--fg-default-muted); } + +/* ==================================================================== + HOME LAYOUT — three rows that together fill 100vh + ==================================================================== */ +.home { + display: flex; + flex-direction: column; + min-height: 100vh; } -/* ----------------------------- Frame ------------------------------ */ - -.frame { - display: grid; - grid-template-columns: minmax(360px, 460px) 1fr; - gap: var(--gap); - align-items: start; +/* ── Dot fields (40vh each) ── */ +.dot-field { + position: relative; + flex: none; + height: 40vh; + background: var(--bg-primary); + overflow: hidden; } -.panel { - background: var(--surface); - border-radius: var(--radius-frame); - padding: var(--pad); +/* ── Middle content (20vh) ── */ +.middle-content { + flex: none; + height: 20vh; + display: flex; + align-items: center; + background: transparent; + padding: 0 var(--padding-lg); + z-index: 1; } -/* Left column sticks; right column scrolls with the page */ -.panel--intro { - position: sticky; - top: var(--gap); - height: calc(100vh - var(--gap) * 2); - display: flex; +.middle-content__inner { + display: flex; flex-direction: column; - justify-content: space-between; - gap: 2rem; - overflow: hidden; + gap: var(--padding-md); + max-width: 500px; } -.panel--work { - display: flex; - flex-direction: column; - gap: var(--gap); - min-height: calc(100vh - var(--gap) * 2); - background: transparent; - padding: 0; +.middle-content__desc { + color: var(--fg-default-muted); + font-size: var(--fs-p1); + line-height: 1.55; } -/* ------------------------------ Pills ----------------------------- */ - -.pill { - display: inline-flex; +/* ==================================================================== + DOTS + ==================================================================== */ +.dot { + position: absolute; + width: var(--dot-size); + height: var(--dot-size); + border-radius: 50%; + border: none; + transform: translate(-50%, -50%); + transition: box-shadow 0.25s var(--ease); + /* position set via inline style (left/top %) */ +} + +/* Default (dull) fills — no interaction */ +.dot--yellow { background: var(--fg-yellow-dull); pointer-events: none; } +.dot--teal { background: var(--fg-blue-dull); pointer-events: none; } +.dot--green { background: var(--fg-green-dull); pointer-events: none; } +.dot--red { background: var(--fg-red-dull); pointer-events: none; } +.dot--purple { background: var(--fg-purple-dull); pointer-events: none; } + +/* Submitted — bright gradient + glow, interactive */ +.dot--submitted.dot--yellow { + background: radial-gradient(circle at 35% 35%, #D4A017, #7A5C00); + box-shadow: 0 0 14px 5px rgba(212,160,23,0.45); + pointer-events: auto; +} +.dot--submitted.dot--teal { + background: radial-gradient(circle at 35% 35%, #00CCCF, #005557); + box-shadow: 0 0 14px 5px rgba(0,204,207,0.45); + pointer-events: auto; +} +.dot--submitted.dot--green { + background: radial-gradient(circle at 35% 35%, #2DBD6A, #0A5C2A); + box-shadow: 0 0 14px 5px rgba(45,189,106,0.4); + pointer-events: auto; +} +.dot--submitted.dot--red { + background: radial-gradient(circle at 35% 35%, #FF4B4B, #8C0000); + box-shadow: 0 0 14px 5px rgba(255,75,75,0.45); + pointer-events: auto; +} +.dot--submitted.dot--purple { + background: radial-gradient(circle at 35% 35%, #B55FFF, #52007A); + box-shadow: 0 0 14px 5px rgba(181,95,255,0.45); + pointer-events: auto; +} + +.dot--submitted:hover, +.dot--submitted:focus-visible { + box-shadow: 0 0 22px 8px rgba(255,255,255,0.18); + outline: none; +} + +/* ==================================================================== + BUTTONS + ==================================================================== */ +.btn { + display: inline-flex; align-items: center; - gap: 0.45rem; - padding: 0.5rem 0.9rem; - border-radius: var(--radius-pill); - background: var(--surface-2); - border: 1px solid var(--line); - font-size: 0.875rem; - font-weight: 500; - color: var(--text); + gap: 8px; + padding: 9px 18px; + border-radius: var(--radii-sm); + font-family: var(--font-heading); + font-weight: 700; + font-size: var(--fs-p3); line-height: 1; - transition: background 0.25s var(--ease), color 0.25s var(--ease), - border-color 0.25s var(--ease), transform 0.25s var(--ease); + transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease); + border: 2px solid transparent; } -.pill__dot { - width: 7px; - height: 7px; - border-radius: 50%; - background: var(--accent); - flex: none; +.btn--primary { + background: var(--bg-tertiary); + color: var(--fg-default); + border-color: var(--bg-tertiary); } +.btn--primary:hover { background: #4d4d4d; border-color: #4d4d4d; } -.pill__arrow { - transition: transform 0.25s var(--ease); +.btn--secondary { + background: transparent; + color: var(--fg-default); + border-color: transparent; } +.btn--secondary:hover { color: var(--fg-default-muted); } -/* ---------------------------- Brand / nav ------------------------- */ - -.panel__top { - display: flex; - align-items: center; - justify-content: space-between; - gap: 1rem; - flex-wrap: wrap; +/* Outlined — used for "Log some words" CTA */ +.btn--outlined { + background: transparent; + color: var(--fg-default); + border-color: var(--bg-tertiary); } +.btn--outlined:hover { background: var(--bg-secondary); border-color: var(--fg-default-muted); } -.brand { - display: inline-flex; +/* Icon button */ +.icon-btn { + display: inline-flex; align-items: center; - gap: 0.5rem; - font-weight: 600; - letter-spacing: -0.02em; -} - -.brand__mark { - color: var(--accent); - font-size: 1.1em; -} - -.nav { - display: flex; - gap: 0.4rem; - flex-wrap: wrap; -} - -.nav__item { - background: var(--surface-2); -} - -.nav__item:hover, -.nav__item:focus-visible { - background: var(--text); - color: var(--surface); - border-color: var(--text); -} - -/* ----------------------------- Intro ------------------------------ */ - -.panel__body { - display: flex; + justify-content: center; + background: transparent; + border: none; + color: var(--fg-default); + padding: 4px; + border-radius: var(--radii-sm); + transition: color 0.2s, opacity 0.2s; +} +.icon-btn:hover { color: var(--fg-default-muted); } + +/* ==================================================================== + FEEDBACK PANEL + ==================================================================== */ +.feedback-panel { + position: fixed; + top: var(--padding-lg); + right: var(--padding-lg); + width: var(--panel-w); + max-height: calc(100vh - var(--padding-lg) * 2); + display: flex; + align-items: flex-start; + z-index: 200; + /* hidden off-screen by default */ + transform: translateX(calc(100% + var(--padding-lg))); + transition: transform 0.35s var(--ease); + pointer-events: none; +} + +.feedback-panel.is-open { + transform: translateX(0); + pointer-events: all; +} + +/* ==================================================================== + FEEDBACK BOX (shared shell) + ==================================================================== */ +.feedback-box { + width: 100%; + max-height: calc(100vh - var(--padding-lg) * 2); + background: var(--bg-secondary); + border: 4px solid var(--bg-tertiary); + border-radius: var(--radii-md); + display: flex; flex-direction: column; - gap: 1.5rem; -} - -.eyebrow { - font-size: 0.8125rem; - font-weight: 500; - letter-spacing: 0.08em; - text-transform: uppercase; - color: var(--accent); + overflow: hidden; } -.intro { - font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.35rem); - line-height: 1.18; - font-weight: 600; - letter-spacing: -0.03em; +/* ── Action Bar ── */ +.actionBar { + flex: none; + display: flex; + align-items: center; + justify-content: space-between; + padding: var(--padding-sm) var(--padding-md); } -.intro__muted { - color: var(--muted); +.actionBar--bordered { + border-bottom: 2px solid var(--bg-tertiary); } -/* --------------------------- Contact ------------------------------ */ +.actionBar--end { justify-content: flex-end; } -.panel__foot { - display: flex; +/* ── Content Bar ── */ +.contentBar { + flex: 1; + overflow-y: auto; + padding: var(--padding-md); + display: flex; flex-direction: column; - gap: 0.9rem; -} - -.foot__label { - font-size: 0.8125rem; - font-weight: 500; - letter-spacing: 0.06em; - text-transform: uppercase; - color: var(--muted); -} - -.pill-row { - display: flex; - flex-wrap: wrap; - gap: 0.5rem; -} - -.pill--link:hover, -.pill--link:focus-visible { - background: var(--accent); - color: #fff; - border-color: var(--accent); - transform: translateY(-1px); -} - -.pill--link:hover .pill__dot { - background: #fff; -} - -.pill--link:hover .pill__arrow { - transform: translate(2px, -2px); + gap: var(--padding-md); + scrollbar-width: thin; + scrollbar-color: var(--bg-tertiary) transparent; } -/* ------------------------------ Work ------------------------------ */ +.contentBar::-webkit-scrollbar { width: 4px; } +.contentBar::-webkit-scrollbar-track { background: transparent; } +.contentBar::-webkit-scrollbar-thumb { background: var(--bg-tertiary); border-radius: 2px; } -.work__head { - padding: 0.25rem 0.25rem 0; -} - -.pill--label { - background: var(--surface); -} - -.card { - background: var(--surface); - border-radius: var(--radius-card); - padding: var(--pad); - transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease); -} - -.card:hover { - transform: translateY(-3px); - box-shadow: 0 18px 40px -24px rgba(27, 26, 24, 0.35); -} - -.card__head { - display: flex; - flex-wrap: wrap; +/* ── Footer Bar ── */ +.footerBar { + flex: none; + display: flex; align-items: center; - justify-content: space-between; - gap: 0.75rem; - margin-bottom: 1.1rem; + padding: var(--padding-sm) var(--padding-md); +} + +.footerBar--end { justify-content: flex-end; } +.footerBar--between { justify-content: space-between; } +.footerBar--gap { gap: 4px; } + +/* ── Scroll hint ── */ +.scroll-hint { + text-align: right; + padding: 0 var(--padding-md) 4px; + cursor: pointer; + user-select: none; + color: var(--fg-default-muted); + letter-spacing: 0.04em; + flex: none; +} +.scroll-hint:hover { color: var(--fg-default); } + +/* ==================================================================== + FORM ELEMENTS (Edit variant) + ==================================================================== */ +.form-group { + display: flex; + flex-direction: column; + gap: 4px; } -.card__title { - font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2rem); - font-weight: 600; - letter-spacing: -0.025em; - line-height: 1.15; -} +.form-label { color: var(--fg-default); } +.form-hint { color: var(--fg-default-muted); font-size: var(--fs-caption); font-family: var(--font-body); } -.pill--meta { - background: var(--surface-2); - color: var(--muted); - white-space: nowrap; - font-weight: 500; +.form-input, +.form-select, +.form-textarea { + background: var(--bg-tertiary); + border: 1.5px solid var(--bg-tertiary); + border-radius: var(--radii-sm); + color: var(--fg-default); + font-family: var(--font-body); + font-size: var(--fs-p3); + padding: 7px 10px; + outline: none; + transition: border-color 0.2s; + /* short inputs match the image width */ + width: min(180px, 55%); } -.card__desc { - color: var(--muted); - max-width: 62ch; - font-size: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem); +.form-textarea { + width: 100%; + resize: vertical; + min-height: 100px; } -/* ---------------------------- Work foot --------------------------- */ +.form-input:focus, +.form-select:focus, +.form-textarea:focus { + border-color: var(--fg-default-muted); +} -.work__foot { - margin-top: auto; - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - gap: 1rem; - padding: 1.25rem var(--pad); - color: var(--muted); - font-size: 0.9375rem; +.form-select { + cursor: pointer; + -webkit-appearance: none; + appearance: none; } -.foot__top { - transition: color 0.25s var(--ease); +.form-private { + color: var(--fg-default-muted); + font-size: var(--fs-caption); + font-family: var(--font-body); + margin-top: var(--padding-sm); } -.foot__top:hover, -.foot__top:focus-visible { - color: var(--text); +/* ==================================================================== + VIEW VARIANT + ==================================================================== */ +.view-field { + display: flex; + flex-direction: column; + gap: 6px; } -/* --------------------------- Fade-in ------------------------------ * - * Cards are visible by default. Where supported, they fade + rise as - * they scroll into view. Fully progressive; respects reduced motion. - * ------------------------------------------------------------------ */ +.view-label { color: var(--fg-default); } +.view-value { color: var(--fg-default-muted); font-size: var(--fs-p1); line-height: 1.55; } -@media (prefers-reduced-motion: no-preference) { - @supports (animation-timeline: view()) { - .fade-in { - animation: fade-rise linear both; - animation-timeline: view(); - animation-range: entry 0% cover 20%; - } - } +/* ==================================================================== + CONFIRMATION VARIANT + ==================================================================== */ +.confirm-desc { + color: var(--fg-default-muted); + line-height: 1.6; } -@keyframes fade-rise { - from { - opacity: 0; - transform: translateY(26px); - } - to { - opacity: 1; - transform: translateY(0); +/* ==================================================================== + RESPONSIVE + ==================================================================== */ +@media (max-width: 860px) { + /* Stack panel to bottom sheet on narrow screens */ + .feedback-panel { + top: auto; + right: 0; + bottom: 0; + left: 0; + width: 100%; + max-height: 88vh; + padding: var(--padding-md); + transform: translateY(100%); + align-items: flex-end; } -} - -/* --------------------------- Responsive --------------------------- */ -@media (max-width: 900px) { - .frame { - grid-template-columns: 1fr; - } + .feedback-panel.is-open { transform: translateY(0); } - .panel--intro { - position: static; - height: auto; - min-height: min(88vh, 640px); - } + .middle-content { padding: 0 var(--padding-md); } - .panel--work { - min-height: 0; - } + .middle-content__inner { max-width: 100%; } } -@media (max-width: 520px) { - :root { - --pad: 1.4rem; - } +@media (max-width: 480px) { + :root { --dot-size: 22px; } - .panel__top { - align-items: flex-start; - } + .h1 { font-size: 22px; } - .card__head { - flex-direction: column; - align-items: flex-start; - } + .middle-content { height: auto; min-height: 20vh; padding: var(--padding-md); } } From 2c4b8592382b3122824f059036fc9a4077eef71b Mon Sep 17 00:00:00 2001 From: Devyani Jain Date: Sun, 30 Aug 2026 10:45:33 -0700 Subject: [PATCH 04/12] fix: only one feedback variant visible at a time - Added hidden to editVariant on page load so all three boxes start hidden - Switched panel from display:flex to display:block so boxes don't render side by side - Added .feedback-box[hidden] { display:none !important } as belt-and-suspenders - Panel fills full height between padding-lg top and bottom - Feedback box fills 100% panel height so edit form scrolls internally Co-authored-by: Copilot App <223556219+Copilot@users.noreply.github.com> Copilot-Session: 67835f2f-e65f-4a86-90ea-ae38169a7949 --- index.html | 2 +- style.css | 42 ++++++++++++++++++++++-------------------- 2 files changed, 23 insertions(+), 21 deletions(-) diff --git a/index.html b/index.html index 03197b2..eecf626 100644 --- a/index.html +++ b/index.html @@ -57,7 +57,7 @@

Golden Github Seeds