From 0e4dcd623123f8ff0ee66e2378f52010ab0325c6 Mon Sep 17 00:00:00 2001 From: shannonwells Date: Tue, 19 Nov 2024 15:04:50 -0800 Subject: [PATCH 1/4] first pass --- client/package.json | 5 +- client/src/app.css | 146 +- client/src/lib/components/Card.svelte | 17 +- client/src/lib/components/Footer.svelte | 51 +- client/src/lib/components/NavBar.svelte | 4 +- .../lib/components/icons/DiscordLogo.svelte | 17 + .../icons/FrequencyLogo.svelte} | 11 +- client/src/lib/components/icons/XLogo.svelte | 6 + .../screens/FrequentlyAskedQuestions.svelte | 38 +- .../Newake-Font-Regular.eot | Bin 0 -> 98446 bytes .../Newake-Font-Regular.otf | Bin 0 -> 302156 bytes .../Newake-Font-Regular.svg | 5973 +++++++++++++++++ .../Newake-Font-Regular.ttf | Bin 0 -> 98240 bytes .../Newake-Font-Regular.woff | Bin 0 -> 34640 bytes .../Newake-Font-Regular.woff2 | Bin 0 -> 25064 bytes .../NewakeFont-Regular-License-Readme.txt | 20 + client/tailwind.config.cjs | 17 +- client/yarn.lock | 542 +- 18 files changed, 6693 insertions(+), 154 deletions(-) create mode 100644 client/src/lib/components/icons/DiscordLogo.svelte rename client/src/lib/{assets/logo.svg => components/icons/FrequencyLogo.svelte} (92%) create mode 100644 client/src/lib/components/icons/XLogo.svelte create mode 100644 client/src/style/indieground-newakefont-web/Newake-Font-Regular.eot create mode 100644 client/src/style/indieground-newakefont-web/Newake-Font-Regular.otf create mode 100644 client/src/style/indieground-newakefont-web/Newake-Font-Regular.svg create mode 100644 client/src/style/indieground-newakefont-web/Newake-Font-Regular.ttf create mode 100644 client/src/style/indieground-newakefont-web/Newake-Font-Regular.woff create mode 100644 client/src/style/indieground-newakefont-web/Newake-Font-Regular.woff2 create mode 100644 client/src/style/indieground-newakefont-web/NewakeFont-Regular-License-Readme.txt diff --git a/client/package.json b/client/package.json index 91ae0edf..994bf669 100644 --- a/client/package.json +++ b/client/package.json @@ -34,5 +34,8 @@ "typescript": "^5.1.3", "vite": "5.4.6" }, - "type": "module" + "type": "module", + "dependencies": { + "@frequency-chain/style-guide": "^0.1.22" + } } diff --git a/client/src/app.css b/client/src/app.css index c17abdea..2b51c054 100644 --- a/client/src/app.css +++ b/client/src/app.css @@ -1,22 +1,15 @@ -@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Unbounded:wght@700;800&display=swap"); +@font-face { + font-family: 'Newake'; + src: url('./style/indieground-newakefont-web/Newake-Font-Regular.eot'); + src: + url('./style/indieground-newakefont-web/Newake-Font-Regular.woff') format('woff'), + url('./style/indieground-newakefont-web/Newake-Font-Regular.otf') format('opentype'), + url('./style/indieground-newakefont-web/Newake-Font-Regular.svg#filename') format('svg'); +} + @tailwind base; @tailwind components; - -:root { - font-family: Poppins, Helvetica, Arial, sans-serif; - font-size: 16px; - line-height: 24px; - font-weight: 400; - - color-scheme: light dark; - - font-synthesis: none; - text-rendering: optimizeLegibility; - -webkit-font-smoothing: antialiased; - -moz-osx-font-smoothing: grayscale; - -webkit-text-size-adjust: 100%; - scroll-behavior: smooth; -} +@tailwind utilities; a { font-weight: 500; @@ -28,59 +21,21 @@ a:hover { color: #535bf2; } -body { - margin: 0; - display: flex; - place-items: center; - min-width: 320px; - min-height: 100vh; - background-color: #fefaf3; -} - -@media (min-width: 768px) { - .background { - /* background-image: url("$lib/assets/circle.svg"), url("$lib/assets/circle.svg"), url("$lib/assets/circle.svg"); */ - background-repeat: no-repeat; - position: absolute; - background-position-y: 10%, 73%, 50%; - background-position-x: - 25%, - -13%, - 115%; - background-size: 20%, 20%, 30%; - bottom: 0px; - right: 0px; - width: 100%; - height: 100%; - pointer-events: none; - } -} - -h1 { - font-size: 3.2em; - line-height: 1.1; -} - .card { - padding: 2em; + @apply p-[2em] bg-cream; } button { - border-radius: 50%; + @apply bg-teal text-black font-bold cursor-pointer; border: 1px solid transparent !important; padding: 0.6em 1.2em; - font-size: 1em; - font-weight: bold; - font-family: inherit; - background-color: #55b1ab; - cursor: pointer; transition: border-color 0.25s; - color: #fff; + } button:disabled { - background-color: #c8cdd0; - color: #fff !important; + @apply bg-gray3; + color: white !important; } button:hover { @@ -90,8 +45,7 @@ button:hover { @media (prefers-color-scheme: light) { :root { - color: #213547; - background-color: #ffffff; + @apply text-black bg-white; } a:hover { @@ -104,28 +58,48 @@ button:hover { } .submit-btn { - @apply btn w-full mt-6 rounded-3xl text-white; - background-color: #55b1ab; - text-transform: none; -} - -.faucet-card { - background-color: #fff; -} - -.card-title { - @apply text-black text-4xl; - font-weight: 700; + @apply btn w-full mt-6 rounded-3xl text-black font-bold bg-teal; + /*text-transform: none;*/ +} + +@layer components { + /* Typeography */ + .title-h2 { + @apply font-title text-[50px] leading-[1] tracking-wider md:text-[60px] lg:text-[64px]; + } + + .title-h3 { + @apply font-title text-[40px] leading-[1] tracking-wider md:text-[40px] lg:text-[44px]; + } + + .title-h5 { + @apply font-title text-[18px] leading-[1] tracking-wider sm:text-[20px] md:text-[22px] lg:text-[26px]; + } + .body { + @apply text-normal md:text-md; + } +} + +@layer base { + html { + color-scheme: light dark; + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + -webkit-text-size-adjust: 100%; + scroll-behavior: smooth; + } + + body { + @apply m-0 min-w-f320 min-h-[100vh] flex items-center bg-white text-normal; + } + + button { + @apply select-none; + } + + ::placeholder { + @apply text-gray2 !important; + } } - -.card-subtitle { - @apply text-black opacity-70; - font-weight: 400; - font-size: 16px; -} - -.dropdown a { - color: black; -} - -@tailwind utilities; diff --git a/client/src/lib/components/Card.svelte b/client/src/lib/components/Card.svelte index 06dab4fa..5671f1a4 100644 --- a/client/src/lib/components/Card.svelte +++ b/client/src/lib/components/Card.svelte @@ -3,9 +3,9 @@ import { testnet } from "$lib/utils/stores"; -
+
-

{$testnet.networkName} Faucet

+

{$testnet.networkName} Faucet

Get {$testnet.currency} tokens for {$testnet.networkName} testnet.

@@ -24,16 +24,3 @@
{/if} - - diff --git a/client/src/lib/components/Footer.svelte b/client/src/lib/components/Footer.svelte index b55b3824..37e597f3 100644 --- a/client/src/lib/components/Footer.svelte +++ b/client/src/lib/components/Footer.svelte @@ -1,15 +1,44 @@ -