diff --git a/frontend/package.json b/frontend/package.json index a37dd89..ee83c28 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -32,7 +32,10 @@ "@bulatdashiev/svelte-slider": "^1.0.3", "@poppanator/sveltekit-svg": "^2.0.2", "@sveltejs/adapter-node": "^1.1.0", + "autoprefixer": "^10.4.13", "open-props": "^1.5.3", + "postcss": "^8.4.21", + "postcss-jit-props": "^1.0.9", "sass": "^1.57.1" } } diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml index 347eb5c..71f7a40 100644 --- a/frontend/pnpm-lock.yaml +++ b/frontend/pnpm-lock.yaml @@ -8,10 +8,13 @@ specifiers: '@sveltejs/kit': ^1.0.0 '@typescript-eslint/eslint-plugin': ^5.45.0 '@typescript-eslint/parser': ^5.45.0 + autoprefixer: ^10.4.13 eslint: ^8.28.0 eslint-config-prettier: ^8.5.0 eslint-plugin-svelte3: ^4.0.0 open-props: ^1.5.3 + postcss: ^8.4.21 + postcss-jit-props: ^1.0.9 prettier: ^2.8.0 prettier-plugin-svelte: ^2.8.1 sass: ^1.57.1 @@ -25,7 +28,10 @@ dependencies: '@bulatdashiev/svelte-slider': 1.0.3 '@poppanator/sveltekit-svg': 2.0.2_svelte@3.55.0+vite@4.0.4 '@sveltejs/adapter-node': 1.1.0_@sveltejs+kit@1.0.7 + autoprefixer: 10.4.13_postcss@8.4.21 open-props: 1.5.3 + postcss: 8.4.21 + postcss-jit-props: 1.0.9_postcss@8.4.21 sass: 1.57.1 devDependencies: @@ -39,7 +45,7 @@ devDependencies: prettier: 2.8.1 prettier-plugin-svelte: 2.9.0_ajxj753sv7dbwexjherrch25ta svelte: 3.55.0 - svelte-check: 2.10.3_sass@1.57.1+svelte@3.55.0 + svelte-check: 2.10.3_yhetuckw724ua6smzvjvp7z3um tslib: 2.4.1 typescript: 4.9.4 vite: 4.0.4_sass@1.57.1 @@ -661,6 +667,22 @@ packages: engines: {node: '>=8'} dev: true + /autoprefixer/10.4.13_postcss@8.4.21: + resolution: {integrity: sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==} + engines: {node: ^10 || ^12 || >=14} + hasBin: true + peerDependencies: + postcss: ^8.1.0 + dependencies: + browserslist: 4.21.4 + caniuse-lite: 1.0.30001442 + fraction.js: 4.2.0 + normalize-range: 0.1.2 + picocolors: 1.0.0 + postcss: 8.4.21 + postcss-value-parser: 4.2.0 + dev: false + /balanced-match/1.0.2: resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} @@ -691,6 +713,17 @@ packages: dependencies: fill-range: 7.0.1 + /browserslist/4.21.4: + resolution: {integrity: sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==} + engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7} + hasBin: true + dependencies: + caniuse-lite: 1.0.30001442 + electron-to-chromium: 1.4.284 + node-releases: 2.0.8 + update-browserslist-db: 1.0.10_browserslist@4.21.4 + dev: false + /buffer-crc32/0.2.13: resolution: {integrity: sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==} dev: true @@ -711,6 +744,10 @@ packages: engines: {node: '>=6'} dev: true + /caniuse-lite/1.0.30001442: + resolution: {integrity: sha512-239m03Pqy0hwxYPYR5JwOIxRJfLTWtle9FV8zosfV5pHg+/51uD4nxcUlM8+mWWGfwKtt8lJNHnD3cWw9VZ6ow==} + dev: false + /chalk/4.1.2: resolution: {integrity: sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==} engines: {node: '>=10'} @@ -868,6 +905,10 @@ packages: domhandler: 4.3.1 dev: false + /electron-to-chromium/1.4.284: + resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==} + dev: false + /entities/2.2.0: resolution: {integrity: sha512-p92if5Nz619I0w+akJrLZH0MX0Pb5DX39XOwQTtXSdQQOaYH03S1uIQp4mhOZtAXrxq4ViO67YTiLBo2638o9A==} dev: false @@ -905,6 +946,11 @@ packages: '@esbuild/win32-ia32': 0.16.14 '@esbuild/win32-x64': 0.16.14 + /escalade/3.1.1: + resolution: {integrity: sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==} + engines: {node: '>=6'} + dev: false + /escape-string-regexp/4.0.0: resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==} engines: {node: '>=10'} @@ -1120,6 +1166,10 @@ packages: resolution: {integrity: sha512-5nqDSxl8nn5BSNxyR3n4I6eDmbolI6WT+QqR547RwxQapgjQBmtktdP+HTBb/a/zLsbzERTONyUB5pefh5TtjQ==} dev: true + /fraction.js/4.2.0: + resolution: {integrity: sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==} + dev: false + /fs.realpath/1.0.0: resolution: {integrity: sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==} @@ -1433,10 +1483,19 @@ packages: resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==} dev: true + /node-releases/2.0.8: + resolution: {integrity: sha512-dFSmB8fFHEH/s81Xi+Y/15DQY6VHW81nXRj86EMSL3lmuTmK1e+aT4wrFCkTbm+gSwkw4KpX+rT/pMM2c1mF+A==} + dev: false + /normalize-path/3.0.0: resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} engines: {node: '>=0.10.0'} + /normalize-range/0.1.2: + resolution: {integrity: sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==} + engines: {node: '>=0.10.0'} + dev: false + /nth-check/2.1.1: resolution: {integrity: sha512-lqjrjmaOoAnWfMmBPL+XNnynZh2+swxiX3WUE0s4yEHI6m+AwrK2UZOimIRl3X/4QctVqS8AiZjFqyOGrMXb/w==} dependencies: @@ -1515,8 +1574,22 @@ packages: resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} engines: {node: '>=8.6'} - /postcss/8.4.20: - resolution: {integrity: sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==} + /postcss-jit-props/1.0.9_postcss@8.4.21: + resolution: {integrity: sha512-sMAo7eVF480LnEGG7G0uS+4L0wRZoXiLthxJePUqo4gHrzu17hU5obAdiscjp/aZag9TqokU6dpI1zHyDGxslA==} + engines: {node: '>=10.0.0'} + peerDependencies: + postcss: ^8.2.8 + dependencies: + postcss: 8.4.21 + tiny-glob: 0.2.9 + dev: false + + /postcss-value-parser/4.2.0: + resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} + dev: false + + /postcss/8.4.21: + resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==} engines: {node: ^10 || ^12 || >=14} dependencies: nanoid: 3.3.4 @@ -1732,7 +1805,7 @@ packages: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} engines: {node: '>= 0.4'} - /svelte-check/2.10.3_sass@1.57.1+svelte@3.55.0: + /svelte-check/2.10.3_yhetuckw724ua6smzvjvp7z3um: resolution: {integrity: sha512-Nt1aWHTOKFReBpmJ1vPug0aGysqPwJh2seM1OvICfM2oeyaA62mOiy5EvkXhltGfhCcIQcq2LoE0l1CwcWPjlw==} hasBin: true peerDependencies: @@ -1745,7 +1818,7 @@ packages: picocolors: 1.0.0 sade: 1.8.1 svelte: 3.55.0 - svelte-preprocess: 4.10.7_cfliyikhlimajcn5n7qvd3jsli + svelte-preprocess: 4.10.7_d234st6gzj3vy6xs53hyho7taa typescript: 4.9.4 transitivePeerDependencies: - '@babel/core' @@ -1768,7 +1841,7 @@ packages: dependencies: svelte: 3.55.0 - /svelte-preprocess/4.10.7_cfliyikhlimajcn5n7qvd3jsli: + /svelte-preprocess/4.10.7_d234st6gzj3vy6xs53hyho7taa: resolution: {integrity: sha512-sNPBnqYD6FnmdBrUmBCaqS00RyCsCpj2BG58A1JBswNF7b0OKviwxqVrOL/CKyJrLSClrSeqQv5BXNg2RUbPOw==} engines: {node: '>= 9.11.2'} requiresBuild: true @@ -1813,6 +1886,7 @@ packages: '@types/sass': 1.43.1 detect-indent: 6.1.0 magic-string: 0.25.9 + postcss: 8.4.21 sass: 1.57.1 sorcery: 0.10.0 strip-indent: 3.0.0 @@ -1900,6 +1974,17 @@ packages: dependencies: busboy: 1.6.0 + /update-browserslist-db/1.0.10_browserslist@4.21.4: + resolution: {integrity: sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==} + hasBin: true + peerDependencies: + browserslist: '>= 4.21.0' + dependencies: + browserslist: 4.21.4 + escalade: 3.1.1 + picocolors: 1.0.0 + dev: false + /uri-js/4.4.1: resolution: {integrity: sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==} dependencies: @@ -1932,7 +2017,7 @@ packages: optional: true dependencies: esbuild: 0.16.14 - postcss: 8.4.20 + postcss: 8.4.21 resolve: 1.22.1 rollup: 3.9.1 sass: 1.57.1 diff --git a/frontend/src/lib/components/Button.svelte b/frontend/src/lib/components/Button.svelte index db8622b..93845e1 100644 --- a/frontend/src/lib/components/Button.svelte +++ b/frontend/src/lib/components/Button.svelte @@ -13,8 +13,9 @@ display: flex; align-items: center; justify-content: space-between; - font-size: 1rem; - color: var(--color-background); + font-size: 1.25rem; + font-weight: bold; + color: rgba(var(--color-background-raw), 0.8); outline: none; border: none; text-transform: uppercase; @@ -23,6 +24,8 @@ background-color: var(--color-primary); transition: all 0.2s var(--easing-default); + text-shadow: none !important; + &:hover  { background-color: rgba(var(--color-primary-raw), 0.5); color: var(--color-light); diff --git a/frontend/src/lib/components/Container.svelte b/frontend/src/lib/components/Container.svelte new file mode 100644 index 0000000..701e20b --- /dev/null +++ b/frontend/src/lib/components/Container.svelte @@ -0,0 +1,17 @@ +
+ + diff --git a/frontend/src/lib/components/Footer.svelte b/frontend/src/lib/components/Footer.svelte new file mode 100644 index 0000000..6e77ef8 --- /dev/null +++ b/frontend/src/lib/components/Footer.svelte @@ -0,0 +1,50 @@ +
+ © ComplAI - {new Date().getFullYear()} +
+ Privacy Policy + Uses +
+
+ + diff --git a/frontend/src/lib/components/Header.svelte b/frontend/src/lib/components/Header.svelte index fff3db3..e389c20 100644 --- a/frontend/src/lib/components/Header.svelte +++ b/frontend/src/lib/components/Header.svelte @@ -3,6 +3,8 @@ import IconSun from '$lib/icons/sun.svg'; import IconHash from '$lib/icons/hash.svg'; import Button from './Button.svelte'; + import HeaderIcon from '$lib/icons/logo-header.svg'; + import Tag from './Tag.svelte'; const onToggleDarkMode = () => { const isDarkMode = document.body.classList.contains('dark-mode'); @@ -19,11 +21,15 @@
- -
@@ -31,7 +37,9 @@ @import '$lib/style/app.scss'; header { + z-index: 2; width: 100%; + position: fixed; display: flex; justify-content: center; align-items: center; @@ -41,8 +49,12 @@ border-bottom: 1px solid rgba(var(--color-foreground-raw), 0.1); } + .left { + justify-self: flex-start; + } + .right { - align-items: flex-end; + justify-self: flex-end; } .inner-head { @@ -51,7 +63,7 @@ justify-content: space-between; justify-items: center; align-items: center; - padding: 1.5rem var(--default-pd) 1rem; + padding: 1rem 0; width: 100%; max-width: $max-page-width; @@ -83,7 +95,6 @@ align-items: center; font-weight: normal; - padding: 0 $space-base * 4; text-transform: uppercase; color: var(--color-foreground); cursor: pointer; @@ -133,12 +144,7 @@ a.logo { :global(svg) { - fill: currentColor; - stroke: transparent; transition: fill 0.2 var(--easing-default); - &:hover { - fill: var(--color-primary); - } height: 2.8rem; @media (min-width: $breakpoint-medium) { diff --git a/frontend/src/lib/components/Liquid.svelte b/frontend/src/lib/components/Liquid.svelte index c66db51..f40bf4b 100644 --- a/frontend/src/lib/components/Liquid.svelte +++ b/frontend/src/lib/components/Liquid.svelte @@ -30,6 +30,7 @@ Codepen: https://codepen.io/supah/ \ No newline at end of file diff --git a/frontend/src/lib/style/app.scss b/frontend/src/lib/style/app.scss index 9cfb5b7..840b656 100644 --- a/frontend/src/lib/style/app.scss +++ b/frontend/src/lib/style/app.scss @@ -5,4 +5,4 @@ $breakpoint-large: 1600px; $breakpoint-huge: 2200px; $space-base: 0.25rem; -$max-page-width: 1200px; +$max-page-width: 980px; diff --git a/frontend/src/lib/style/global.scss b/frontend/src/lib/style/global.scss index f7a5797..6ff1801 100644 --- a/frontend/src/lib/style/global.scss +++ b/frontend/src/lib/style/global.scss @@ -1,5 +1,20 @@ -@import 'https://unpkg.com/open-props'; @import 'app.scss'; +/* the props */ + +/* optional imports that use the props */ +@import 'open-props/normalize'; +@import 'open-props/buttons'; + +/* just light or dark themes */ + +/* individual imports */ +@import 'open-props/easings'; +@import 'open-props/aspects'; +@import 'open-props/borders'; +@import 'open-props/animations'; +@import 'open-props/sizes'; +@import 'open-props/gradients'; +/* see PropPacks for the full list */ html, body { @@ -80,6 +95,12 @@ li { a { text-decoration: none; + + &.styled { + text-decoration: underline; + text-underline-offset: var(--size-1); + text-decoration-color: var(--color-primary); + } } body { @@ -139,6 +160,8 @@ body { @media screen and (min-width: $breakpoint-medium) { --default-pd: 1.5rem; } + + background-color: var(--color-background); } body { @@ -156,6 +179,29 @@ h4 { margin-bottom: var(--size-3); } +h1 { + font-size: 3.5rem; +} + +h2 { + font-size: 2.5rem; +} + +h3 { + font-size: 1.75rem; +} + +p { + font-size: 1.6rem; + line-height: 2.6rem; + font-weight: 400; + letter-spacing: 0.1rem; + + b { + color: var(--color-primary); + } +} + input { display: block; width: 100%; @@ -176,9 +222,3 @@ input { border-bottom-width: var(--size-1); } } - -.container { - display: flex; - flex-direction: column; - gap: var(--size-7); -} diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte index 7106833..b5bf497 100644 --- a/frontend/src/routes/+layout.svelte +++ b/frontend/src/routes/+layout.svelte @@ -1,9 +1,11 @@ @@ -22,6 +24,7 @@ {/key} +