From 0ab1cbb59b157b191786ae79551b7bd3dfef0756 Mon Sep 17 00:00:00 2001 From: Owais Jamil Date: Wed, 17 Jun 2026 21:02:39 -0500 Subject: [PATCH] feat: add global and component styles --- .gitignore | 2 + src/styles/base.css | 30 ++++++++++++ src/styles/components/resolver.css | 43 ++++++++++++++++++ src/styles/components/shell.css | 73 ++++++++++++++++++++++++++++++ src/styles/reset.css | 33 ++++++++++++++ src/styles/style.css | 6 +++ src/styles/tokens.css | 47 +++++++++++++++++++ src/styles/utilities.css | 11 +++++ 8 files changed, 245 insertions(+) create mode 100644 src/styles/base.css create mode 100644 src/styles/components/resolver.css create mode 100644 src/styles/components/shell.css create mode 100644 src/styles/reset.css create mode 100644 src/styles/style.css create mode 100644 src/styles/tokens.css create mode 100644 src/styles/utilities.css diff --git a/.gitignore b/.gitignore index 448d8b2..3733224 100644 --- a/.gitignore +++ b/.gitignore @@ -10,3 +10,5 @@ coverage/ *.lcov node_modules/ +.pnpm-store/ +.wrangler diff --git a/src/styles/base.css b/src/styles/base.css new file mode 100644 index 0000000..2596dd8 --- /dev/null +++ b/src/styles/base.css @@ -0,0 +1,30 @@ +body { + color: var(--text); + background: + linear-gradient(180deg, var(--accent-bg), transparent 22rem), + var(--surface-subtle); + font-family: var(--font-body); + font-size: var(--size-base); + line-height: var(--line-base); +} + +h1, +h2, +h3 { + font-family: var(--font-heading); + line-height: var(--line-xl); +} + +a { + color: var(--accent); +} + +button, +input { + border-radius: var(--radius-sm); +} + +:focus-visible { + outline: 3px solid var(--focus-ring); + outline-offset: 2px; +} diff --git a/src/styles/components/resolver.css b/src/styles/components/resolver.css new file mode 100644 index 0000000..5c32b60 --- /dev/null +++ b/src/styles/components/resolver.css @@ -0,0 +1,43 @@ +.resolver-form { + display: grid; + gap: var(--space-2); +} + +.resolver-form label { + color: var(--muted); + font-size: var(--size-sm); + font-weight: 600; +} + +.resolver-form__row { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + gap: var(--space-3); +} + +.resolver-form input { + inline-size: 100%; + min-inline-size: 0; + padding: 0.85rem 1rem; + color: var(--text); + background: var(--surface); + border: 1px solid var(--border); +} + +.resolver-form button { + padding: 0.85rem 1.2rem; + color: white; + background: var(--accent); + border: 1px solid var(--accent); + cursor: pointer; +} + +.resolver-form button:hover { + filter: brightness(0.95); +} + +@media (max-width: 36rem) { + .resolver-form__row { + grid-template-columns: 1fr; + } +} diff --git a/src/styles/components/shell.css b/src/styles/components/shell.css new file mode 100644 index 0000000..cf8f02a --- /dev/null +++ b/src/styles/components/shell.css @@ -0,0 +1,73 @@ +.page-shell { + display: grid; + gap: var(--space-7); + inline-size: min(100% - 2rem, 62rem); + margin-inline: auto; + padding-block: var(--space-7); +} + +.hero { + display: grid; + gap: var(--space-4); +} + +.hero__eyebrow { + color: var(--accent); + font-size: var(--size-sm); + font-weight: 600; + text-transform: uppercase; +} + +.hero h1 { + font-size: var(--size-hero); +} + +.hero__lede { + max-inline-size: 36rem; + color: var(--muted); + font-size: var(--size-lg); + line-height: var(--line-lg); +} + +.resolver-panel { + display: grid; + gap: var(--space-5); + padding: var(--space-6); + background: var(--surface-raised); + border: 1px solid var(--border); + border-radius: var(--radius-md); + box-shadow: var(--shadow-panel); +} + +.resolver-panel__copy { + display: grid; + gap: var(--space-2); +} + +.resolver-panel__copy h2 { + font-size: var(--size-xl); +} + +.resolver-panel__copy p { + color: var(--muted); +} + +.curl-example { + display: grid; + gap: var(--space-2); + padding: var(--space-4); + overflow-x: auto; + background: var(--surface-subtle); + border: 1px solid var(--border); + border-radius: var(--radius-sm); +} + +.curl-example span { + color: var(--muted); + font-size: var(--size-sm); + font-weight: 600; +} + +.curl-example code { + white-space: nowrap; +} diff --git a/src/styles/reset.css b/src/styles/reset.css new file mode 100644 index 0000000..94422a0 --- /dev/null +++ b/src/styles/reset.css @@ -0,0 +1,33 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} + +* { + margin: 0; +} + +html { + min-block-size: 100%; + line-height: 1.5; + -webkit-text-size-adjust: 100%; +} + +body { + min-block-size: 100%; +} + +img, +picture, +svg { + display: block; + max-inline-size: 100%; +} + +button, +input, +textarea, +select { + font: inherit; +} diff --git a/src/styles/style.css b/src/styles/style.css new file mode 100644 index 0000000..503ca36 --- /dev/null +++ b/src/styles/style.css @@ -0,0 +1,6 @@ +@import "./reset.css"; +@import "./tokens.css"; +@import "./base.css"; +@import "./utilities.css"; +@import "./components/shell.css"; +@import "./components/resolver.css"; diff --git a/src/styles/tokens.css b/src/styles/tokens.css new file mode 100644 index 0000000..3449efc --- /dev/null +++ b/src/styles/tokens.css @@ -0,0 +1,47 @@ +:root { + --color-gray-1: #f6f6f6; + --color-gray-2: #e2e2e2; + --color-gray-3: #c4c4c4; + --color-gray-4: #8b8b8b; + --color-gray-5: #585858; + --color-gray-6: #2c2c2c; + --color-blue-1: #edf4ff; + --color-blue-2: #cfe2ff; + --color-blue-3: #9ec5ff; + --color-blue-4: #4c8dff; + --color-blue-5: #1f63d9; + + --surface: #ffffff; + --surface-subtle: var(--color-gray-1); + --surface-raised: #ffffff; + --text: var(--color-gray-6); + --muted: var(--color-gray-5); + --border: var(--color-gray-2); + --accent: var(--color-blue-5); + --accent-bg: var(--color-blue-1); + --focus-ring: var(--color-blue-4); + + --font-heading: "Instrument Sans", system-ui, sans-serif; + --font-body: "Lexend", system-ui, sans-serif; + --size-sm: 0.875rem; + --line-sm: 1.35; + --size-base: 1rem; + --line-base: 1.6; + --size-lg: 1.125rem; + --line-lg: 1.55; + --size-xl: 1.5rem; + --line-xl: 1.25; + --size-hero: 3rem; + --line-hero: 1; + + --space-1: 0.25rem; + --space-2: 0.5rem; + --space-3: 0.75rem; + --space-4: 1rem; + --space-5: 1.5rem; + --space-6: 2rem; + --space-7: 3rem; + --radius-sm: 0.375rem; + --radius-md: 0.5rem; + --shadow-panel: 0 1rem 2.5rem rgb(44 44 44 / 0.08); +} diff --git a/src/styles/utilities.css b/src/styles/utilities.css new file mode 100644 index 0000000..20b9cdf --- /dev/null +++ b/src/styles/utilities.css @@ -0,0 +1,11 @@ +.sr-only { + position: absolute; + inline-size: 1px; + block-size: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} -- 2.51.2