diff --git a/examples/demo/package.json b/examples/demo/package.json index 16ed1bb..7f692f2 100644 --- a/examples/demo/package.json +++ b/examples/demo/package.json @@ -11,7 +11,6 @@ "lint": "tsc && eslint '**/*.{js,jsx,ts}' && prettier --check '**/*.{js,jsx,ts,yml,json}' --ignore-path ../../.gitignore" }, "dependencies": { - "@acab/reset.css": "^0.5.3", "@oddjs/odd": "^0.37.1", "@oddjs/passkeys": "workspace:^", "@oddjs/preact": "workspace:^", diff --git a/examples/demo/public/fonts/ApfelGrotezk-Fett.woff b/examples/demo/public/fonts/ApfelGrotezk-Fett.woff new file mode 100644 index 0000000..18d3606 Binary files /dev/null and b/examples/demo/public/fonts/ApfelGrotezk-Fett.woff differ diff --git a/examples/demo/public/fonts/ApfelGrotezk-Fett.woff2 b/examples/demo/public/fonts/ApfelGrotezk-Fett.woff2 new file mode 100644 index 0000000..3dbc53c Binary files /dev/null and b/examples/demo/public/fonts/ApfelGrotezk-Fett.woff2 differ diff --git a/examples/demo/public/fonts/Literata-VariableFont_opsz,wght.ttf b/examples/demo/public/fonts/Literata-VariableFont_opsz,wght.ttf new file mode 100644 index 0000000..527a458 Binary files /dev/null and b/examples/demo/public/fonts/Literata-VariableFont_opsz,wght.ttf differ diff --git a/examples/demo/public/logo-borderless.svg b/examples/demo/public/logo-borderless.svg index 5561923..cde5204 100644 --- a/examples/demo/public/logo-borderless.svg +++ b/examples/demo/public/logo-borderless.svg @@ -1,7 +1,13 @@ - - - - - - + + + + + + + + + + + + diff --git a/examples/demo/public/logo.svg b/examples/demo/public/logo.svg index 983e678..cde5204 100644 --- a/examples/demo/public/logo.svg +++ b/examples/demo/public/logo.svg @@ -1,7 +1,13 @@ - - - - - + + + + + + + + + + + diff --git a/examples/demo/public/wave-background-dark.webp b/examples/demo/public/wave-background-dark.webp new file mode 100644 index 0000000..02989bb Binary files /dev/null and b/examples/demo/public/wave-background-dark.webp differ diff --git a/examples/demo/public/wave-background-light.webp b/examples/demo/public/wave-background-light.webp new file mode 100644 index 0000000..f3bece0 Binary files /dev/null and b/examples/demo/public/wave-background-light.webp differ diff --git a/examples/demo/public/wave-foreground-light.webp b/examples/demo/public/wave-foreground-light.webp new file mode 100644 index 0000000..0ccd994 Binary files /dev/null and b/examples/demo/public/wave-foreground-light.webp differ diff --git a/examples/demo/src/app.jsx b/examples/demo/src/app.jsx index 00b88ac..6b5fe62 100644 --- a/examples/demo/src/app.jsx +++ b/examples/demo/src/app.jsx @@ -7,6 +7,7 @@ import Login from './login.jsx' import Register from './register.jsx' import ReloadPrompt from './prompt.jsx' import Test from './test.jsx' +import { ReactComponent as OddLogo } from './assets/odd-logo.svg' /** @type {import('@oddjs/odd').Configuration} */ const config = { @@ -34,6 +35,15 @@ export function App() { +
+
+ Wave background + Wave foreground +
+ + Powered by + +
diff --git a/examples/demo/src/assets/brand.svg b/examples/demo/src/assets/brand.svg index 8f0282b..7fd8213 100644 --- a/examples/demo/src/assets/brand.svg +++ b/examples/demo/src/assets/brand.svg @@ -1 +1,26 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/examples/demo/src/assets/odd-logo.svg b/examples/demo/src/assets/odd-logo.svg new file mode 100644 index 0000000..da83919 --- /dev/null +++ b/examples/demo/src/assets/odd-logo.svg @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/examples/demo/src/login.jsx b/examples/demo/src/login.jsx index 56aefd3..e9987aa 100644 --- a/examples/demo/src/login.jsx +++ b/examples/demo/src/login.jsx @@ -80,7 +80,19 @@ export default function Login(props) { return ( <>
- +
+ +

Did you know it will be possible to encrypt data with a passkey? When your browser supports it.

+

Help us achieve full browser compatibility. Track the   + + current status of browser support + .

+

Let’s see what this browser is capable of.

+
- {errorMsg &&

{errorMsg}

} + {errorMsg &&

{errorMsg}

} +

- {' '} Don't have an account? Register

-
-

- Navigate to{' '} - - chrome://flags/#enable-experimental-web-platform-features - {' '} - and enable it. Check our support{' '} - - issue - {' '} - for more info. -

+
+

Using a Chromium browser?

+

Navigate to{' '} + + chrome://flags/#enable-experimental-web-platform-features + {' '} + and enable it.

+
+
diff --git a/examples/demo/src/register.jsx b/examples/demo/src/register.jsx index 9a16bae..b07d443 100644 --- a/examples/demo/src/register.jsx +++ b/examples/demo/src/register.jsx @@ -82,42 +82,43 @@ export default function Register(props) { {' '} Already have an account? Login

-
-

- Navigate to{' '} - - chrome://flags/#enable-experimental-web-platform-features - {' '} - and enable it. Check our support{' '} + +

+

Using a Chromium browser?

+

Navigate to{' '} + + chrome://flags/#enable-experimental-web-platform-features + {' '} + and enable it.

+
+ +
+

Want to use passkeys for encryption?

+

Help us achieve full browser compatibility. Track the   - issue - {' '} - for more info. + current status of browser support + .

- +
diff --git a/examples/demo/src/styles/index.css b/examples/demo/src/styles/index.css index 7d5d476..9b96d76 100644 --- a/examples/demo/src/styles/index.css +++ b/examples/demo/src/styles/index.css @@ -1,28 +1,28 @@ -@import '@acab/reset.css'; @import 'water.css'; @import 'utils.css'; +@import 'typography.css'; /* #313245 #F16583 */ :root { - --background-body: hsl(237, 17%, 23%); - --background: hsl(237, 17%, 15%); + --background-body: hsl(235, 18%, 90%); + --background: hsl(235, 17%, 23%); --background-alt: hsl(237, 17%, 15%); --selection: #1c76c5; - --text-main: hsl(233, 18%, 90%); - --text-bright: hsl(233, 18%, 100%); - --text-muted: hsl(233, 18%, 60%); - --links: hsl(347, 83%, 67%); + --text-main: hsl(235, 17%, 23%); + --text-bright: hsl(235, 17%, 23%); + --text-muted: hsl(234, 17%, 54%); + --links: hsla(250, 93%, 63%, 1); --focus: hsl(347, 83%, 77%); --border: hsl(233, 18%, 60%); --code: #ffbe85; --animation-duration: 0.1s; - --button-base: hsl(237, 17%, 10%); - --button-hover: hsl(237, 17%, 7%); + --button-base: hsla(250, 93%, 63%, 1); + --button-hover: hsla(250, 93%, 63%, .9); --scrollbar-thumb: var(--button-hover); --scrollbar-thumb-hover: rgb(0, 0, 0); --form-placeholder: #a9a9a9; - --form-text: #fff; + --form-text: hsl(235, 18%, 90%); --variable: #d941e2; --highlight: #efdb43; } @@ -41,14 +41,15 @@ } .App { + padding: 1rem; + height: 100%; display: flex; - max-width: 800px; - margin: 20px auto; - padding: 0 10px; word-wrap: break-word; - padding-top: 54px; flex-direction: column; - margin-bottom: 80px; + align-items: center; + justify-content: center; + padding-bottom: 8rem; + box-sizing: border-box; } .ReloadPrompt-container { @@ -165,3 +166,36 @@ .BottomBar-icon.active { color: var(--links); } + +.powered-by-odd { + position: fixed; + bottom: 0; + left: 0; + right: 0; +} + +.powered-by-bg { + position: absolute; + bottom: 0; +} + +.powered-by-fg { + position: absolute; + bottom: 0; +} + +.powered-by-wave { + position: relative; +} + +.powered-by-msg { + font-family: 'ApfelGrotezk'; + background: #484A65; + display: flex; + padding: 1rem; + color: #AAADC4; + justify-content: center; + align-items: center; + gap: 0.25rem; +} + diff --git a/examples/demo/src/styles/typography.css b/examples/demo/src/styles/typography.css new file mode 100644 index 0000000..10ef621 --- /dev/null +++ b/examples/demo/src/styles/typography.css @@ -0,0 +1,22 @@ +@font-face { + font-family: 'ApfelGrotezk'; + src: url('/fonts/ApfelGrotezk-Fett.woff2') format('woff2'), + url('/fonts/ApfelGrotezk-Fett.woff') format('woff'); + font-weight: 400 700; + font-style: normal; + } + + @font-face { + font-family: 'Literata'; + src: url('/fonts/Literata-VariableFont_opsz,wght.ttf') format('truetype'); + font-weight: 100 600; + font-style: normal; + } + + body, html { + font-family: 'Literata'; + } + + h1, h2, h3, h4, h5, h6, button { + font-family: 'ApfelGrotezk'; + } \ No newline at end of file diff --git a/examples/demo/src/styles/utils.css b/examples/demo/src/styles/utils.css index 192611c..a7b74ef 100644 --- a/examples/demo/src/styles/utils.css +++ b/examples/demo/src/styles/utils.css @@ -52,38 +52,30 @@ } } -a.button { - transition: background-color 0.1s linear, border-color 0.1s linear, - color 0.1s linear, box-shadow 0.1s linear, transform 0.1s ease; - color: var(--form-text); - background-color: var(--button-base); - font-family: inherit; - font-size: inherit; - margin-right: 6px; - margin-bottom: 6px; - padding: 10px; - border: none; - border-radius: 6px; - outline: none; - padding-right: 30px; - padding-left: 30px; - display: inline-block; - vertical-align: bottom; - text-align: center; - text-decoration: none; +button { + height: 3rem; + border-radius: 2px; + margin-right: 0; } -a.button:hover { - background-color: var(--button-hover); + +input { + height: 2rem; + border-radius: 2px; + margin-right: 0; } -a.button:focus { - box-shadow: 0 0 0 2px var(--focus); + +.warning { + border-radius: 2px; + background: #DFC334; + padding: 1rem; } -a.button:active { - transform: translateY(2px); + +.warning > :first-child { + margin-top: 0.5rem; } -a.button:disabled { - cursor: not-allowed; - opacity: 0.5; + +.error { + color: #A6163A; } .pulse { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c520442..86c46a8 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,5 +1,9 @@ lockfileVersion: '6.0' +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false + importers: .: @@ -31,9 +35,6 @@ importers: examples/demo: dependencies: - '@acab/reset.css': - specifier: ^0.5.3 - version: 0.5.3 '@oddjs/odd': specifier: ^0.37.1 version: 0.37.1 @@ -134,7 +135,7 @@ importers: version: 4.3.8 vite-plugin-svgr: specifier: ^3.2.0 - version: 3.2.0(rollup@2.79.1)(vite@4.3.8) + version: 3.2.0(vite@4.3.8) packages/odd-passkeys: dependencies: @@ -2395,7 +2396,6 @@ packages: estree-walker: 2.0.2 picomatch: 2.3.1 rollup: 3.21.8 - dev: false /@surma/rollup-plugin-off-main-thread@2.2.3: resolution: {integrity: sha512-lR8q/9W7hZpMWweNiAKU7NQerBnzQQLvi8qnTDU/fxItPhtZVMbPV3lbCwjhIlNBe9Bbr5V+KHshvWmVSG9cxQ==} @@ -6496,7 +6496,6 @@ packages: hasBin: true optionalDependencies: fsevents: 2.3.2 - dev: false /rollup@3.22.0: resolution: {integrity: sha512-imsigcWor5Y/dC0rz2q0bBt9PabcL3TORry2hAa6O6BuMvY71bqHyfReAz5qyAqiQATD1m70qdntqBfBQjVWpQ==} @@ -7303,6 +7302,20 @@ packages: - supports-color dev: true + /vite-plugin-svgr@3.2.0(vite@4.3.8): + resolution: {integrity: sha512-Uvq6niTvhqJU6ga78qLKBFJSDvxWhOnyfQSoKpDPMAGxJPo5S3+9hyjExE5YDj6Lpa4uaLkGc1cBgxXov+LjSw==} + peerDependencies: + vite: ^2.6.0 || 3 || 4 + dependencies: + '@rollup/pluginutils': 5.0.2(rollup@3.21.8) + '@svgr/core': 7.0.0 + '@svgr/plugin-jsx': 7.0.0 + vite: 4.3.8 + transitivePeerDependencies: + - rollup + - supports-color + dev: true + /vite@4.3.8: resolution: {integrity: sha512-uYB8PwN7hbMrf4j1xzGDk/lqjsZvCDbt/JC5dyfxc19Pg8kRm14LinK/uq+HSLNswZEoKmweGdtpbnxRtrAXiQ==} engines: {node: ^14.18.0 || >=16.0.0}