diff --git a/bun.lock b/bun.lock index ac27269..ffa8094 100644 --- a/bun.lock +++ b/bun.lock @@ -82,21 +82,21 @@ }, "packages/effect-view": { "name": "effect-view", - "version": "0.1.3", + "version": "0.1.5", "dependencies": { "@standard-schema/spec": "^1.1.0", - "effect-lens": "2.0.1-rc.109", + "effect-lens": "2.0.2-rc.115", }, "devDependencies": { - "@effect/platform-browser": "4.0.0-rc.109", + "@effect/platform-browser": "4.0.0-rc.115", "@testing-library/react": "^16.3.0", - "effect": "4.0.0-rc.109", + "effect": "4.0.0-rc.115", "jsdom": "^26.1.0", "vitest": "^3.2.4", }, "peerDependencies": { "@types/react": "^19.2.0", - "effect": "4.0.0-rc.109", + "effect": "4.0.0-rc.115", "react": "^19.2.0", }, }, @@ -104,9 +104,9 @@ "name": "@effect-view/example", "version": "0.0.0", "dependencies": { - "@effect/platform-browser": "4.0.0-rc.109", + "@effect/platform-browser": "4.0.0-rc.115", "@radix-ui/themes": "^3.3.0", - "effect": "4.0.0-rc.109", + "effect": "4.0.0-rc.115", "effect-view": "workspace:*", "react-icons": "^5.6.0", }, @@ -126,7 +126,7 @@ }, "packages/vite-plugin": { "name": "@effect-view/vite-plugin", - "version": "0.0.1", + "version": "0.0.2", "dependencies": { "typescript": "^6.0.3", }, @@ -3030,8 +3030,6 @@ "yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="], - "yaml": ["yaml@2.9.0", "", { "bin": { "yaml": "bin.mjs" } }, "sha512-2AvhNX3mb8zd6Zy7INTtSpl1F15HW6Wnqj0srWlkKLcpYl/gMIMJiyuGq2KeI2YFxUPjdlB+3Lc10seMLtL4cA=="], - "yocto-queue": ["yocto-queue@1.2.2", "", {}, "sha512-4LCcse/U2MHZ63HAJVE+v71o7yOdIe4cZ70Wpf8D/IyjDKYQLV5GD46B+hSTjJsvV5PztjvHoU580EftxjDZFQ=="], "zod": ["zod@4.4.3", "", {}, "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ=="], @@ -3062,9 +3060,9 @@ "@docusaurus/utils/jiti": ["jiti@1.21.7", "", { "bin": { "jiti": "bin/jiti.js" } }, "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A=="], - "@effect-view/example/@effect/platform-browser": ["@effect/platform-browser@4.0.0-rc.109", "", { "peerDependencies": { "effect": "^4.0.0-rc.109" } }, "sha512-63/hM2dCh0HQb7sRkAhAoZjO4swjRD2vT/eUrs8nXA0LzJMz52ChPsxdnL1D0yg+ZeXtMHQM0MFJxITJXjv+EA=="], + "@effect-view/example/@effect/platform-browser": ["@effect/platform-browser@4.0.0-rc.115", "", { "peerDependencies": { "effect": "^4.0.0-rc.115" } }, "sha512-RwpnxRYSBHBL1HYYlRwIrwz0+1hwmn5RvgqkKI0Tb+ChOIR9UCMpXsAhnwQcGP+mBidrC7dlloL42poGHZW4yw=="], - "@effect-view/example/effect": ["effect@4.0.0-rc.109", "", { "dependencies": { "@standard-schema/spec": "^1.1.0", "fast-check": "^4.9.0", "msgpackr": "^2.0.4" } }, "sha512-6ubcOCtfdbmFO5+vgcT2HsTw5s+n3aMUj4eAIbVpUxP7+VYCwXxxcBHgiWgizOrGO1eGmuOBFek3mM0dFcwaWA=="], + "@effect-view/example/effect": ["effect@4.0.0-rc.115", "", {}, "sha512-ogYulZ5ffeOzrJqQrG0XOkDO5lKn2s9KNHhoxJy/6wKUkF0i12dlVXWA9TgsgQ+zV/JzizyG0+XMPepZEQX6vw=="], "@effect-view/vite-plugin/typescript": ["typescript@6.0.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw=="], @@ -3132,11 +3130,11 @@ "dot-prop/is-obj": ["is-obj@2.0.0", "", {}, "sha512-drqDG3cbczxxEJRoOXcOjtdp1J/lyp1mNn0xaznRs8+muBhgQcrnbspox5X5fOw0HnMnbfDzvnEMEtqDEJEo8w=="], - "effect-view/@effect/platform-browser": ["@effect/platform-browser@4.0.0-rc.109", "", { "peerDependencies": { "effect": "^4.0.0-rc.109" } }, "sha512-63/hM2dCh0HQb7sRkAhAoZjO4swjRD2vT/eUrs8nXA0LzJMz52ChPsxdnL1D0yg+ZeXtMHQM0MFJxITJXjv+EA=="], + "effect-view/@effect/platform-browser": ["@effect/platform-browser@4.0.0-rc.115", "", { "peerDependencies": { "effect": "^4.0.0-rc.115" } }, "sha512-RwpnxRYSBHBL1HYYlRwIrwz0+1hwmn5RvgqkKI0Tb+ChOIR9UCMpXsAhnwQcGP+mBidrC7dlloL42poGHZW4yw=="], - "effect-view/effect": ["effect@4.0.0-rc.109", "", { "dependencies": { "@standard-schema/spec": "^1.1.0", "fast-check": "^4.9.0", "msgpackr": "^2.0.4" } }, "sha512-6ubcOCtfdbmFO5+vgcT2HsTw5s+n3aMUj4eAIbVpUxP7+VYCwXxxcBHgiWgizOrGO1eGmuOBFek3mM0dFcwaWA=="], + "effect-view/effect": ["effect@4.0.0-rc.115", "", {}, "sha512-ogYulZ5ffeOzrJqQrG0XOkDO5lKn2s9KNHhoxJy/6wKUkF0i12dlVXWA9TgsgQ+zV/JzizyG0+XMPepZEQX6vw=="], - "effect-view/effect-lens": ["effect-lens@2.0.1-rc.109", "", { "peerDependencies": { "effect": "4.0.0-rc.109" } }, "sha512-rMluFV/QGvLyXWoLu7YGaEUus/E40LeUXB0bAnzR3yvF1euch0g/gVISYuGlu+mvUahzBEH//+QNi45/0IwfTQ=="], + "effect-view/effect-lens": ["effect-lens@2.0.2-rc.115", "", { "peerDependencies": { "effect": "4.0.0-rc.115" } }, "sha512-7Vmtcce7HvAuIiSkQN1mdlFLXohY2B858CS8toEXzx0fCCsRBoCi/jCM0J/D00Q0j9OLP7QBMGv15hjVkppbkg=="], "esrecurse/estraverse": ["estraverse@5.3.0", "", {}, "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA=="], @@ -3404,10 +3402,6 @@ "@docusaurus/core/chokidar/readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="], - "@effect-view/example/effect/fast-check": ["fast-check@4.9.0", "", { "dependencies": { "pure-rand": "^8.0.0" } }, "sha512-7ms6T7SybUev/PQITciI0yLM2pOSFy5zpG8Ty7tQofcVaQUvrMXp6CBwqF6fThLCLOrfBtuHAtwq6Yu4XPCllg=="], - - "@effect-view/example/effect/msgpackr": ["msgpackr@2.0.4", "", { "optionalDependencies": { "msgpackr-extract": "^3.0.4" } }, "sha512-o1C5KRmuRt+apqMr1HuGSqWStZoRBUpEsCsl15uM9VdAF1qHLtvMOU2En747EnTyEl6c4pzPewRMFF31s1CNbA=="], - "@jsonjoy.com/fs-snapshot/@jsonjoy.com/json-pack/@jsonjoy.com/base64": ["@jsonjoy.com/base64@17.67.0", "", { "peerDependencies": { "tslib": "2" } }, "sha512-5SEsJGsm15aP8TQGkDfJvz9axgPwAEm98S5DxOuYe8e1EbfajcDmgeXXzccEjh+mLnjqEKrkBdjHWS5vFNwDdw=="], "@jsonjoy.com/fs-snapshot/@jsonjoy.com/json-pack/@jsonjoy.com/codegen": ["@jsonjoy.com/codegen@17.67.0", "", { "peerDependencies": { "tslib": "2" } }, "sha512-idnkUplROpdBOV0HMcwhsCUS5TRUi9poagdGs70A6S4ux9+/aPuKbh8+UYRTLYQHtXvAdNfQWXDqZEx5k4Dj2Q=="], @@ -3436,10 +3430,6 @@ "css-select/domutils/dom-serializer": ["dom-serializer@1.4.1", "", { "dependencies": { "domelementtype": "^2.0.1", "domhandler": "^4.2.0", "entities": "^2.0.0" } }, "sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag=="], - "effect-view/effect/fast-check": ["fast-check@4.9.0", "", { "dependencies": { "pure-rand": "^8.0.0" } }, "sha512-7ms6T7SybUev/PQITciI0yLM2pOSFy5zpG8Ty7tQofcVaQUvrMXp6CBwqF6fThLCLOrfBtuHAtwq6Yu4XPCllg=="], - - "effect-view/effect/msgpackr": ["msgpackr@2.0.4", "", { "optionalDependencies": { "msgpackr-extract": "^3.0.4" } }, "sha512-o1C5KRmuRt+apqMr1HuGSqWStZoRBUpEsCsl15uM9VdAF1qHLtvMOU2En747EnTyEl6c4pzPewRMFF31s1CNbA=="], - "express/debug/ms": ["ms@2.0.0", "", {}, "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A=="], "file-loader/schema-utils/ajv": ["ajv@6.15.0", "", { "dependencies": { "fast-deep-equal": "^3.1.1", "fast-json-stable-stringify": "^2.0.0", "json-schema-traverse": "^0.4.1", "uri-js": "^4.2.2" } }, "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw=="], @@ -3498,12 +3488,8 @@ "@docusaurus/core/chokidar/readdirp/picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="], - "@effect-view/example/effect/fast-check/pure-rand": ["pure-rand@8.4.2", "", {}, "sha512-vvuOGgcuPJAirlHvuQw1TrOiw7ptaIXXmIbNuiNOY6lNGJJH49PQ1Kj4nd783nPdQhQdicgOjVI2yI/9BD6/Ng=="], - "css-select/domutils/dom-serializer/entities": ["entities@2.2.0", "", {}, "sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A=="], - "effect-view/effect/fast-check/pure-rand": ["pure-rand@8.4.2", "", {}, "sha512-vvuOGgcuPJAirlHvuQw1TrOiw7ptaIXXmIbNuiNOY6lNGJJH49PQ1Kj4nd783nPdQhQdicgOjVI2yI/9BD6/Ng=="], - "file-loader/schema-utils/ajv/json-schema-traverse": ["json-schema-traverse@0.4.1", "", {}, "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="], "null-loader/schema-utils/ajv/json-schema-traverse": ["json-schema-traverse@0.4.1", "", {}, "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="], diff --git a/packages/docs/docusaurus.config.ts b/packages/docs/docusaurus.config.ts index 90ee9f8..73bce93 100644 --- a/packages/docs/docusaurus.config.ts +++ b/packages/docs/docusaurus.config.ts @@ -2,6 +2,9 @@ import type * as Preset from "@docusaurus/preset-classic" import type { Config } from "@docusaurus/types" import { themes as prismThemes } from "prism-react-renderer" +import githubDark from "./src/prism/github-dark" +import remarkLineNumbers from "./src/remark/line-numbers" + // This runs in Node.js - Don't use client-side code here (browser APIs, JSX...) const config: Config = { @@ -43,6 +46,7 @@ const config: Config = { sidebarPath: "./sidebars.ts", editUrl: "https://github.com/Thiladev/effect-view/tree/main/packages/docs/", + remarkPlugins: [remarkLineNumbers], lastVersion: "current", versions: { current: { @@ -65,6 +69,7 @@ const config: Config = { themeConfig: { // Replace with your project's social card colorMode: { + defaultMode: "dark", respectPrefersColorScheme: true, }, navbar: { @@ -139,7 +144,7 @@ const config: Config = { }, prism: { theme: prismThemes.github, - darkTheme: prismThemes.dracula, + darkTheme: githubDark, }, } satisfies Preset.ThemeConfig, } diff --git a/packages/docs/src/css/custom.css b/packages/docs/src/css/custom.css index aa3946b..f35ae65 100644 --- a/packages/docs/src/css/custom.css +++ b/packages/docs/src/css/custom.css @@ -1,37 +1,208 @@ +@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,400;0,14..32,500;0,14..32,600;0,14..32,700;0,14..32,800;1,14..32,400&family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap"); + :root { - --ifm-color-primary: #0b6f74; - --ifm-color-primary-dark: #096469; - --ifm-color-primary-darker: #085e63; - --ifm-color-primary-darkest: #074d51; - --ifm-color-primary-light: #0d7a7f; - --ifm-color-primary-lighter: #0e8085; - --ifm-color-primary-lightest: #109096; - --ifm-background-color: #fffaf1; - --ifm-code-font-size: 95%; + --ifm-color-primary: #059669; + --ifm-color-primary-dark: #04835d; + --ifm-color-primary-darker: #047857; + --ifm-color-primary-darkest: #036348; + --ifm-color-primary-light: #0aa876; + --ifm-color-primary-lighter: #10b981; + --ifm-color-primary-lightest: #34d399; + + --ifm-background-color: #ffffff; + --ifm-background-surface-color: #ffffff; + --ifm-navbar-background-color: #ffffff; + --ifm-footer-background-color: #09090b; + + --ifm-code-font-size: 90%; --ifm-font-family-base: - "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif; - --docusaurus-highlighted-code-line-bg: rgba(11, 111, 116, 0.1); + "Inter", "Segoe UI", "Helvetica Neue", sans-serif; + --ifm-font-family-monospace: + "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", Menlo, + monospace; + --ifm-heading-font-weight: 700; + --ifm-heading-letter-spacing: -0.02em; + + --ifm-menu-color-background-active: rgba(5, 150, 105, 0.08); + --ifm-menu-color-background-hover: rgba(5, 150, 105, 0.06); + + --docusaurus-highlighted-code-line-bg: rgba(5, 150, 105, 0.1); + + --ev-zinc-50: #fafafa; + --ev-zinc-100: #f4f4f5; + --ev-zinc-200: #e4e4e7; + --ev-zinc-300: #d4d4d8; + --ev-zinc-400: #a1a1aa; + --ev-zinc-500: #71717a; + --ev-zinc-600: #52525b; + --ev-zinc-700: #3f3f46; + --ev-zinc-800: #27272a; + --ev-zinc-900: #18181b; + --ev-zinc-950: #09090b; } -.button--primary { - --ifm-button-background-color: #0b6f74; - --ifm-button-border-color: #0b6f74; +html { + font-feature-settings: "cv02", "cv03", "cv04", "cv11"; } -.button--secondary { - --ifm-button-background-color: #f4a636; - --ifm-button-border-color: #f4a636; - --ifm-button-color: #1f2526; +code, +pre, +kbd, +samp { + font-family: var(--ifm-font-family-monospace); +} + +.navbar { + border-bottom: 1px solid var(--ev-zinc-200); + box-shadow: none; +} + +.navbar__item { + font-family: var(--ifm-font-family-monospace); + font-size: 0.85rem; + font-weight: 500; + letter-spacing: 0.02em; + text-transform: uppercase; +} + +.navbar__brand { + font-weight: 800; + letter-spacing: -0.02em; } [data-theme="dark"] { - --ifm-color-primary: #7ad6d4; - --ifm-color-primary-dark: #5cccca; - --ifm-color-primary-darker: #4cc6c4; - --ifm-color-primary-darkest: #34aaa8; - --ifm-color-primary-light: #98e0de; - --ifm-color-primary-lighter: #a8e6e4; - --ifm-color-primary-lightest: #d5f4f3; - --ifm-background-color: #111c1f; - --docusaurus-highlighted-code-line-bg: rgba(122, 214, 212, 0.18); + --ifm-color-primary: #34d399; + --ifm-color-primary-dark: #1fcc8c; + --ifm-color-primary-darker: #10b981; + --ifm-color-primary-darkest: #0a9c6d; + --ifm-color-primary-light: #52dbab; + --ifm-color-primary-lighter: #6ee7b7; + --ifm-color-primary-lightest: #a7f3d0; + + --ifm-background-color: #09090b; + --ifm-background-surface-color: #0c0c0f; + --ifm-navbar-background-color: #09090bee; + --ifm-toc-border-color: var(--ev-zinc-800); + --ifm-table-border-color: var(--ev-zinc-800); + + --ifm-menu-color-background-active: rgba(52, 211, 153, 0.1); + --ifm-menu-color-background-hover: rgba(52, 211, 153, 0.06); + + --docusaurus-highlighted-code-line-bg: rgba(52, 211, 153, 0.16); +} + +[data-theme="dark"] .navbar { + border-bottom: 1px solid var(--ev-zinc-800); + backdrop-filter: blur(10px); +} + +[data-theme="dark"] .footer { + --ifm-footer-color: var(--ev-zinc-400); + --ifm-footer-link-color: var(--ev-zinc-300); + --ifm-footer-title-color: var(--ev-zinc-100); + border-top: 1px solid var(--ev-zinc-900); +} + +.footer { + font-family: var(--ifm-font-family-monospace); +} + +.footer__title { + font-size: 0.78rem; + letter-spacing: 0.06em; + text-transform: uppercase; +} + +.footer__link-item { + font-size: 0.85rem; +} + +.button--primary { + --ifm-button-background-color: var(--ifm-color-primary); + --ifm-button-border-color: var(--ifm-color-primary); +} + +.menu__link--active, +.table-of-contents__link--active { + font-weight: 600; +} + +[data-theme="dark"] .DocSearch-Button { + background: var(--ev-zinc-900); + border: 1px solid var(--ev-zinc-800); +} + +/* ---------- Code blocks ---------- */ +/* One quiet, low-contrast surface - matches effect.website: a subtle step + off the page background, not a loud bordered card. */ + +.theme-code-block { + --ifm-pre-padding: 1.25rem; + background: var(--ev-zinc-50); + border: 1px solid var(--ev-zinc-200); + border-radius: 0.5rem; + box-shadow: 1.5px 1.5px 3px rgba(0, 0, 0, 0.12); +} + +[data-theme="dark"] .theme-code-block { + background: var(--ev-zinc-900); + border-color: var(--ev-zinc-800); +} + +/* The Prism theme sets its own (much louder) background inline - drop it + so the whole frame reads as one surface instead of a title/body seam. */ +.theme-code-block pre.thin-scrollbar { + background: transparent !important; +} + +/* Title renders only when a `title="..."` fence meta is present */ +.theme-code-block:has(> div + div) > div:first-child { + background: transparent; + color: var(--ev-zinc-500); + font-family: var(--ifm-font-family-monospace); + font-size: 0.78rem; + font-weight: 500; + padding: 0.9rem 1.4rem 0; +} + +.theme-code-block pre.thin-scrollbar { + font-size: 0.85rem; + line-height: 1.7; +} + +[class*="buttonGroup_"] button { + background: transparent; + border: none; + border-radius: 0.35rem; + color: var(--ev-zinc-500); +} + +[class*="buttonGroup_"] button:hover { + background: var(--ev-zinc-100); + color: var(--ev-zinc-800); +} + +[data-theme="dark"] [class*="buttonGroup_"] button:hover { + background: var(--ev-zinc-900); + color: var(--ev-zinc-100); +} + +[class*="codeLineNumber_"] { + border: none; + color: var(--ev-zinc-400); + padding-inline: 1.25rem 1rem !important; + text-align: right !important; +} + +[data-theme="dark"] [class*="codeLineNumber_"] { + color: var(--ev-zinc-600); +} + +[class*="codeLineContent_"] { + border-inline-start: 1px solid rgba(113, 113, 122, 0.2); + padding-inline-start: 1.25rem; +} + +[class*="codeLineNumber_"]::before { + opacity: 1 !important; } diff --git a/packages/docs/src/pages/index.module.css b/packages/docs/src/pages/index.module.css index aee6612..d63ca0a 100644 --- a/packages/docs/src/pages/index.module.css +++ b/packages/docs/src/pages/index.module.css @@ -1,223 +1,265 @@ .page { - --home-ink: #102f31; - --home-muted: #506a6c; - --home-teal: #08777b; - --home-teal-bright: #16a3a1; - --home-amber: #e99526; - --home-paper: #fffdf8; - --home-card: rgba(255, 255, 255, 0.76); - --home-line: rgba(16, 47, 49, 0.12); - min-height: calc(100vh - var(--ifm-navbar-height)); + --home-ink: #09090b; + --home-muted: #52525b; + --home-emerald: #059669; + --home-emerald-bright: #10b981; + --home-paper: #ffffff; + --home-card: #ffffff; + --home-line: #e4e4e7; + --home-card-hover-line: rgba(5, 150, 105, 0.4); + --home-terminal-bg: #09090b; + --home-terminal-line: #27272a; + background: var(--home-paper); + color: var(--home-ink); overflow: hidden; position: relative; - background: - radial-gradient(circle at 8% 5%, rgba(14, 145, 148, 0.2), transparent 28rem), - radial-gradient(circle at 92% 14%, rgba(240, 159, 48, 0.2), transparent 27rem), - linear-gradient(145deg, #f7f2e7 0%, #edf8f6 48%, #fff8ed 100%); - color: var(--home-ink); +} + +:global([data-theme="dark"]) .page { + --home-ink: #f4f4f5; + --home-muted: #a1a1aa; + --home-emerald: #34d399; + --home-emerald-bright: #6ee7b7; + --home-paper: #09090b; + --home-card: #0c0c0f; + --home-line: #27272a; + --home-card-hover-line: rgba(52, 211, 153, 0.45); + --home-terminal-bg: #101012; + --home-terminal-line: #27272a; +} + +/* ---------- Hero ---------- */ + +.hero { + overflow: hidden; + padding: 5.5rem 0 4rem; + position: relative; } .gridBackdrop { background-image: - linear-gradient(rgba(16, 47, 49, 0.045) 1px, transparent 1px), - linear-gradient(90deg, rgba(16, 47, 49, 0.045) 1px, transparent 1px); - background-size: 48px 48px; + linear-gradient(var(--home-line) 1px, transparent 1px), + linear-gradient(90deg, var(--home-line) 1px, transparent 1px); + background-size: 56px 56px; inset: 0; - mask-image: linear-gradient(to bottom, black, transparent 62%); + mask-image: radial-gradient(ellipse 65% 55% at 50% 0%, black, transparent); + opacity: 0.6; pointer-events: none; position: absolute; } -.hero { +.heroGlow { + background: radial-gradient( + ellipse 60% 55% at 50% -10%, + rgba(16, 185, 129, 0.22), + transparent 70% + ); + height: 32rem; + inset: 0 0 auto 0; + pointer-events: none; + position: absolute; +} + +.heroGrid { align-items: center; display: grid; - gap: clamp(3rem, 6vw, 6rem); - grid-template-columns: minmax(0, 0.88fr) minmax(560px, 1.12fr); - min-height: min(820px, calc(100vh - var(--ifm-navbar-height))); - padding-bottom: 6rem; - padding-top: 6rem; + gap: clamp(2.5rem, 5vw, 5rem); + grid-template-columns: minmax(0, 0.92fr) minmax(500px, 1.08fr); position: relative; z-index: 1; } .heroCopy { - max-width: 650px; + max-width: 600px; } -.eyebrow, -.sectionKicker { +.eyebrow { align-items: center; - color: var(--home-teal); - display: flex; - font-size: 0.76rem; - font-weight: 850; - gap: 0.65rem; - letter-spacing: 0.18em; - margin: 0 0 1.35rem; + border: 1px solid var(--home-line); + border-radius: 999px; + color: var(--home-muted); + display: inline-flex; + font-family: var(--ifm-font-family-monospace); + font-size: 0.78rem; + font-weight: 500; + gap: 0.55rem; + letter-spacing: 0.05em; + margin: 0 0 1.75rem; + padding: 0.45rem 1rem; + text-decoration: none !important; text-transform: uppercase; + transition: border-color 160ms ease, color 160ms ease; } -.pulse { - background: var(--home-teal-bright); - border-radius: 50%; - box-shadow: 0 0 0 5px rgba(22, 163, 161, 0.14); - height: 0.55rem; - width: 0.55rem; +.eyebrow:hover { + border-color: var(--home-card-hover-line); + color: var(--home-ink); +} + +.eyebrowArrow { + color: var(--home-emerald); + transition: transform 160ms ease; +} + +.eyebrow:hover .eyebrowArrow { + transform: translateX(2px); } .hero h1 { color: var(--home-ink); - font-size: clamp(3.4rem, 6.4vw, 6.4rem); - font-weight: 780; - letter-spacing: -0.075em; - line-height: 0.92; + font-size: clamp(2.6rem, 4.6vw, 3.9rem); + font-weight: 800; + letter-spacing: -0.03em; + line-height: 1.06; margin: 0; - overflow-wrap: normal; - word-break: normal; -} - -.hero h1 .unbreakable { - white-space: nowrap; -} - -.hero h1 .heroAccent { - background: linear-gradient(105deg, var(--home-teal) 5%, #1a9793 48%, var(--home-amber)); - background-clip: text; - color: transparent; - display: inline; - -webkit-background-clip: text; } .lede { color: var(--home-muted); - font-size: clamp(1.08rem, 1.55vw, 1.32rem); - line-height: 1.65; + font-size: clamp(1.02rem, 1.4vw, 1.15rem); + line-height: 1.6; + margin: 1.5rem 0 0; + max-width: 520px; +} + +.installBox { + align-items: center; + background: var(--home-terminal-bg); + border: 1px solid var(--home-terminal-line); + border-radius: 0.5rem; + display: flex; + font-family: var(--ifm-font-family-monospace); + font-size: 0.88rem; + gap: 0.7rem; margin: 2rem 0 0; - max-width: 630px; + max-width: 420px; + padding: 0.75rem 1.1rem; +} + +.installPrompt { + color: var(--home-emerald-bright); + font-weight: 700; +} + +.installBox code { + background: transparent; + border: 0; + color: #e4e4e7; + padding: 0; } .actions { display: flex; flex-wrap: wrap; - gap: 0.8rem; - margin-top: 2.3rem; + gap: 0.75rem; + margin-top: 1.75rem; } .primaryAction, .secondaryAction, .ctaAction { align-items: center; - border-radius: 999px; + border-radius: 0.5rem; display: inline-flex; - font-weight: 750; - gap: 0.8rem; + font-size: 0.92rem; + font-weight: 600; + gap: 0.6rem; justify-content: center; - padding: 0.88rem 1.35rem; + padding: 0.72rem 1.25rem; text-decoration: none !important; - transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease; + transition: + transform 160ms ease, + box-shadow 160ms ease, + background 160ms ease, + border-color 160ms ease; } .primaryAction { - background: var(--home-ink); - box-shadow: 0 12px 28px rgba(16, 47, 49, 0.2); - color: #f6fffd; + background: var(--home-emerald); + color: #fff; } .primaryAction:hover { - box-shadow: 0 16px 36px rgba(16, 47, 49, 0.28); - color: #fff; - transform: translateY(-2px); + background: var(--home-emerald-bright); + color: #06251c; + transform: translateY(-1px); } .secondaryAction { - background: rgba(255, 255, 255, 0.58); + background: transparent; border: 1px solid var(--home-line); color: var(--home-ink); } .secondaryAction:hover { - background: rgba(255, 255, 255, 0.9); - color: var(--home-teal); - transform: translateY(-2px); -} - -.install { - align-items: center; - color: var(--home-muted); - display: flex; - font-size: 0.84rem; - gap: 0.7rem; - margin-top: 1.4rem; -} - -.install span { - color: var(--home-amber); - font-family: var(--ifm-font-family-monospace); - font-weight: 800; -} - -.install code { - background: transparent; - border: 0; - color: inherit; - padding: 0; + border-color: var(--home-card-hover-line); + color: var(--home-emerald); + transform: translateY(-1px); } .hotReload { align-items: center; - color: var(--home-teal); + color: var(--home-muted); display: inline-flex; - font-size: 0.82rem; - font-weight: 750; + font-family: var(--ifm-font-family-monospace); + font-size: 0.8rem; gap: 0.5rem; - margin-top: 0.75rem; + margin-top: 1.25rem; text-decoration: none !important; } .hotReload span { - color: var(--home-amber); - font-size: 1rem; + color: var(--home-emerald); } .hotReload:hover { - color: var(--home-teal-bright); + color: var(--home-ink); } +/* ---------- Code showcase ---------- */ + .codeStage { min-width: 0; - perspective: 1200px; + perspective: 1400px; position: relative; } .codeGlow { - background: linear-gradient(115deg, rgba(11, 133, 136, 0.48), rgba(238, 156, 40, 0.38)); - filter: blur(55px); - inset: 8% 5%; - opacity: 0.55; + background: radial-gradient( + ellipse 70% 70% at 60% 30%, + rgba(16, 185, 129, 0.28), + transparent 70% + ); + filter: blur(50px); + inset: 6% 4%; + opacity: 0.75; position: absolute; } .codeWindow { - background: #101b1e; - border: 1px solid rgba(166, 225, 220, 0.2); - border-radius: 1.25rem; - box-shadow: - 0 34px 90px rgba(18, 49, 52, 0.3), - 0 2px 0 rgba(255, 255, 255, 0.06) inset; + background: var(--home-terminal-bg); + border: 1px solid var(--home-terminal-line); + border-radius: 0.75rem; + box-shadow: 0 34px 90px rgba(0, 0, 0, 0.35); overflow: hidden; position: relative; - transform: rotateY(-2deg) rotateX(1deg); + transform: rotateY(-4deg) rotateX(2deg); + transition: transform 400ms ease; +} + +.codeStage:hover .codeWindow { + transform: rotateY(-1deg) rotateX(0.5deg); } .windowBar { align-items: center; - border-bottom: 1px solid rgba(255, 255, 255, 0.08); - color: #b6c9c9; + border-bottom: 1px solid var(--home-terminal-line); + color: #a1a1aa; display: grid; font-family: var(--ifm-font-family-monospace); - font-size: 0.73rem; + font-size: 0.72rem; grid-template-columns: 1fr auto 1fr; - padding: 0.78rem 1rem; + padding: 0.75rem 1rem; } .windowDots { @@ -226,80 +268,37 @@ } .windowDots span { - background: #4f6d6e; + background: #3f3f46; border-radius: 50%; height: 0.55rem; width: 0.55rem; } -.windowDots span:first-child { - background: #ef8d5b; -} - -.windowDots span:nth-child(2) { - background: #e9bc50; -} - -.windowDots span:last-child { - background: #65bd92; -} - .windowStatus { - color: #74d2cd; + color: var(--home-emerald-bright); justify-self: end; } .codeWindow :global(.theme-code-block) { + border: 0; border-radius: 0; box-shadow: none; margin: 0; } -.codeWindow :global(.theme-code-block pre) { - background: #101b1e !important; - color: #d7e5e4 !important; - font-size: 0.78rem; - line-height: 1.62; +.codeWindow :global(.theme-code-block pre.thin-scrollbar) { + background: var(--home-terminal-bg) !important; + font-size: 0.8rem !important; + line-height: 1.62 !important; max-height: none; - padding: 1.45rem 1.6rem !important; -} - -.codeWindow :global(.token-line), -.codeWindow :global(.token.plain), -.codeWindow :global(.token.imports), -.codeWindow :global(.token.maybe-class-name), -.codeWindow :global(.token.punctuation), -.codeWindow :global(.token.operator), -.codeWindow :global(.token.plain-text), -.codeWindow :global(.token.property-access) { - color: #d7e5e4 !important; -} - -.codeWindow :global(.token.keyword) { - color: #c792ea !important; -} - -.codeWindow :global(.token.string) { - color: #c3e88d !important; -} - -.codeWindow :global(.token.function), -.codeWindow :global(.token.method) { - color: #82aaff !important; -} - -.codeWindow :global(.token.tag) { - color: #f07178 !important; -} - -.codeWindow :global(.token.builtin) { - color: #ffcb6b !important; + padding: 1.4rem 1.6rem !important; } .codeLegend { - border-top: 1px solid rgba(255, 255, 255, 0.08); - color: #a9bcbc; + border-top: 1px solid var(--home-terminal-line); + color: #a1a1aa; display: grid; + font-family: var(--ifm-font-family-monospace); font-size: 0.7rem; grid-template-columns: repeat(3, 1fr); } @@ -310,18 +309,18 @@ } .codeLegend span + span { - border-left: 1px solid rgba(255, 255, 255, 0.08); + border-left: 1px solid var(--home-terminal-line); } .codeLegend b { - color: #e8a94b; - font-family: var(--ifm-font-family-monospace); - margin-right: 0.25rem; + color: var(--home-emerald-bright); + margin-right: 0.3rem; } +/* ---------- Features ---------- */ + .featuresSection { - padding-bottom: 7rem; - padding-top: 4rem; + padding-bottom: 6rem; position: relative; z-index: 1; } @@ -330,27 +329,35 @@ display: grid; gap: 0 3rem; grid-template-columns: minmax(0, 1.25fr) minmax(280px, 0.75fr); - margin-bottom: 2.8rem; + margin-bottom: 2.5rem; } -.sectionHeading .sectionKicker { +.sectionKicker { + color: var(--home-emerald); + font-family: var(--ifm-font-family-monospace); + font-size: 0.78rem; + font-weight: 600; grid-column: 1 / -1; + letter-spacing: 0.04em; + margin: 0 0 1rem; + text-transform: uppercase; } .sectionHeading h2, .cta h2 { color: var(--home-ink); - font-size: clamp(2.25rem, 4vw, 4rem); - letter-spacing: -0.055em; - line-height: 1; + font-size: clamp(1.9rem, 3.2vw, 2.6rem); + font-weight: 700; + letter-spacing: -0.02em; + line-height: 1.1; margin: 0; } .sectionHeading > p:last-child { align-self: end; color: var(--home-muted); - font-size: 1.03rem; - line-height: 1.65; + font-size: 1rem; + line-height: 1.6; margin: 0; } @@ -363,41 +370,22 @@ .featureCard { background: var(--home-card); border: 1px solid var(--home-line); - border-radius: 1.35rem; + border-radius: 0.75rem; color: inherit; display: flex; flex-direction: column; - min-height: 310px; - overflow: hidden; - padding: 1.45rem; - position: relative; + min-height: 300px; + padding: 1.4rem; text-decoration: none !important; - transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; -} - -.featureCard::before { - background: linear-gradient(90deg, var(--home-teal-bright), var(--home-amber)); - content: ""; - height: 3px; - left: 1.45rem; - opacity: 0; - position: absolute; - right: 1.45rem; - top: 0; - transform: scaleX(0.5); - transition: opacity 180ms ease, transform 180ms ease; + transition: + border-color 160ms ease, + transform 160ms ease; } .featureCard:hover { - border-color: rgba(8, 119, 123, 0.35); - box-shadow: 0 24px 60px rgba(28, 65, 66, 0.12); + border-color: var(--home-card-hover-line); color: inherit; - transform: translateY(-5px); -} - -.featureCard:hover::before { - opacity: 1; - transform: scaleX(1); + transform: translateY(-3px); } .cardTopline { @@ -408,36 +396,36 @@ .featureIcon { align-items: center; - background: rgba(8, 119, 123, 0.1); - border: 1px solid rgba(8, 119, 123, 0.12); - border-radius: 0.8rem; - color: var(--home-teal); + background: rgba(5, 150, 105, 0.1); + border-radius: 0.4rem; + color: var(--home-emerald); display: flex; font-family: var(--ifm-font-family-monospace); - font-size: 1rem; - font-weight: 850; - height: 2.7rem; + font-size: 0.95rem; + font-weight: 700; + height: 2.4rem; justify-content: center; - width: 2.7rem; + width: 2.4rem; } .cardIndex { - color: rgba(16, 47, 49, 0.32); + color: var(--home-muted); font-family: var(--ifm-font-family-monospace); font-size: 0.72rem; } .featureCard h3 { color: var(--home-ink); - font-size: 1.25rem; - letter-spacing: -0.025em; - margin: 2rem 0 0.7rem; + font-size: 1.15rem; + font-weight: 650; + letter-spacing: -0.01em; + margin: 1.8rem 0 0.6rem; } .featureCard > p { color: var(--home-muted); - font-size: 0.94rem; - line-height: 1.65; + font-size: 0.9rem; + line-height: 1.6; margin: 0; } @@ -446,150 +434,120 @@ display: flex; justify-content: space-between; margin-top: auto; - padding-top: 1.5rem; + padding-top: 1.4rem; } .cardFooter code { - background: rgba(8, 119, 123, 0.08); + background: rgba(5, 150, 105, 0.1); border: 0; - color: var(--home-teal); - font-size: 0.7rem; - padding: 0.35rem 0.5rem; + color: var(--home-emerald); + font-size: 0.68rem; + padding: 0.32rem 0.5rem; } .cardFooter > span { - color: var(--home-amber); - font-size: 1.1rem; - transition: transform 180ms ease; + color: var(--home-emerald); + font-size: 1rem; + transition: transform 160ms ease; } .featureCard:hover .cardFooter > span { - transform: translate(3px, -3px); + transform: translate(2px, -2px); } +/* ---------- CTA ---------- */ + .ctaWrap { - padding-bottom: 7rem; + padding-bottom: 6.5rem; position: relative; z-index: 1; } .cta { align-items: center; - background: - radial-gradient(circle at 90% 20%, rgba(233, 149, 38, 0.22), transparent 20rem), - linear-gradient(125deg, #12383a, #10292c); - border: 1px solid rgba(255, 255, 255, 0.1); - border-radius: 1.75rem; - box-shadow: 0 28px 80px rgba(16, 47, 49, 0.2); + background: var(--home-terminal-bg); + border-radius: 1rem; display: flex; - gap: 3rem; + gap: 2.5rem; justify-content: space-between; overflow: hidden; - padding: clamp(2rem, 5vw, 4rem); + padding: clamp(2rem, 4.5vw, 3.5rem); + position: relative; +} + +.ctaGridBackdrop { + background-image: + linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), + linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); + background-size: 40px 40px; + inset: 0; + mask-image: radial-gradient(ellipse 70% 100% at 100% 0%, black, transparent); + pointer-events: none; + position: absolute; +} + +.ctaCopy { + position: relative; } .cta .sectionKicker { - color: #79d5d1; + color: var(--home-emerald-bright); } .cta h2 { - color: #f7fffd; + color: #fafafa; } .cta p:last-child { - color: #b9cccc; - line-height: 1.65; - margin: 1rem 0 0; - max-width: 650px; + color: #a1a1aa; + line-height: 1.6; + margin: 0.85rem 0 0; + max-width: 620px; } .ctaAction { - background: #f0a13b; - color: #162d2e; + background: var(--home-emerald); + color: #fff; flex: 0 0 auto; + position: relative; } .ctaAction:hover { - box-shadow: 0 14px 35px rgba(0, 0, 0, 0.24); - color: #102526; - transform: translateY(-2px); -} - -:global([data-theme="dark"]) .page { - --home-ink: #e9f7f5; - --home-muted: #a9bfbd; - --home-teal: #79d5d1; - --home-teal-bright: #5bc8c5; - --home-amber: #f1ad4e; - --home-card: rgba(20, 42, 45, 0.76); - --home-line: rgba(174, 221, 218, 0.14); - background: - radial-gradient(circle at 8% 5%, rgba(33, 154, 154, 0.17), transparent 28rem), - radial-gradient(circle at 92% 14%, rgba(209, 130, 31, 0.13), transparent 27rem), - linear-gradient(145deg, #0f1b1e 0%, #102426 48%, #161e1e 100%); -} - -:global([data-theme="dark"]) .gridBackdrop { - background-image: - linear-gradient(rgba(174, 221, 218, 0.04) 1px, transparent 1px), - linear-gradient(90deg, rgba(174, 221, 218, 0.04) 1px, transparent 1px); -} - -:global([data-theme="dark"]) .secondaryAction { - background: rgba(19, 43, 46, 0.75); -} - -:global([data-theme="dark"]) .secondaryAction:hover { - background: rgba(27, 57, 60, 0.95); -} - -:global([data-theme="dark"]) .primaryAction { - background: #dff8f5; - color: #123638; -} - -:global([data-theme="dark"]) .primaryAction:hover { - color: #0b282a; -} - -:global([data-theme="dark"]) .cardIndex { - color: rgba(220, 242, 239, 0.35); + background: var(--home-emerald-bright); + color: #06251c; + transform: translateY(-1px); } @media screen and (max-width: 1180px) { - .hero { + .heroGrid { gap: 3rem; - grid-template-columns: minmax(0, 0.85fr) minmax(500px, 1.15fr); + grid-template-columns: minmax(0, 0.9fr) minmax(460px, 1.1fr); } .hero h1 { - font-size: clamp(3.2rem, 6vw, 5rem); + font-size: clamp(2.4rem, 4.4vw, 3.2rem); } } @media screen and (max-width: 996px) { - .hero { + .heroGrid { grid-template-columns: minmax(0, 1fr); - padding-bottom: 4rem; - padding-top: 4.5rem; } .heroCopy, .codeStage, - .codeWindow, - .codeWindow :global(.theme-code-block) { + .codeWindow { min-width: 0; width: 100%; } .heroCopy { - max-width: 760px; + max-width: 640px; } .codeStage { margin: 0 auto; - max-width: 760px; - width: 100%; + max-width: 640px; } .codeWindow { @@ -599,51 +557,43 @@ .featureGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } -} - -@media screen and (max-width: 700px) { - .hero { - box-sizing: border-box; - margin-left: 0; - margin-right: 0; - max-width: 100vw; - padding-left: 1.15rem; - padding-right: 1.15rem; - width: 100vw; - } - - .heroCopy, - .codeStage { - max-width: calc(100vw - 2.3rem); - } - - .hero h1 { - font-size: clamp(3rem, 15vw, 4.3rem); - } .sectionHeading { grid-template-columns: 1fr; } .sectionHeading > p:last-child { - margin-top: 1.25rem; + margin-top: 1rem; + } +} + +@media screen and (max-width: 700px) { + .hero { + padding: 3.5rem 0 2.5rem; + } + + .heroCopy, + .codeStage { + max-width: 100%; + } + + .actions { + flex-direction: column; + } + + .primaryAction, + .secondaryAction { + width: 100%; } .featureGrid { grid-template-columns: 1fr; } - .featureCard { - min-height: 275px; - } - - .codeLegend { - grid-template-columns: 1fr; - } - - .codeLegend span + span { - border-left: 0; - border-top: 1px solid rgba(255, 255, 255, 0.08); + .codeWindow :global(.theme-code-block pre) { + font-size: 0.72rem; + overflow-x: auto; + padding: 1.1rem !important; } .windowStatus { @@ -654,25 +604,29 @@ grid-template-columns: 1fr auto; } - .codeWindow :global(.theme-code-block pre) { - font-size: 0.69rem; - overflow-x: auto; - padding: 1.1rem !important; - } - .cta { align-items: flex-start; flex-direction: column; } + + .codeLegend { + grid-template-columns: 1fr; + } + + .codeLegend span + span { + border-left: 0; + border-top: 1px solid var(--home-terminal-line); + } } @media (prefers-reduced-motion: reduce) { .featureCard, - .featureCard::before, - .cardFooter > span, .primaryAction, .secondaryAction, - .ctaAction { + .ctaAction, + .eyebrow, + .eyebrowArrow, + .codeWindow { transition: none; } } diff --git a/packages/docs/src/pages/index.tsx b/packages/docs/src/pages/index.tsx index 8afa80c..964df52 100644 --- a/packages/docs/src/pages/index.tsx +++ b/packages/docs/src/pages/index.tsx @@ -91,67 +91,88 @@ export default function Home(): ReactNode { description="Write React function components as typed Effect programs" >
-