forked from paritytech/polkadot-testnet-faucet
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
## Goal The goal of this PR is to make the site look like the rest of the Developer Portal. To do this, the Style Guide was added so that the custom Tailwind styles and some of the Style Guide components can be used. I used the Figma docs as a guide for whitespace, font sizes, and media break changes. I tried to make it work at even very small widths, <400px. Closes #32
- Loading branch information
1 parent
46fa20a
commit 5aa6681
Showing
24 changed files
with
7,364 additions
and
987 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,131 +1,89 @@ | ||
| @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Unbounded:wght@700;800&display=swap"); | ||
| @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; | ||
| } | ||
|
|
||
| a { | ||
| font-weight: 500; | ||
| color: #646cff; | ||
| text-decoration: inherit; | ||
| } | ||
|
|
||
| a:hover { | ||
| color: #535bf2; | ||
| } | ||
|
|
||
| body { | ||
| margin: 0; | ||
| display: flex; | ||
| place-items: center; | ||
| min-width: 320px; | ||
| min-height: 100vh; | ||
| background-color: #fefaf3; | ||
| @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"); | ||
| } | ||
|
|
||
| @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; | ||
| } | ||
| @tailwind base; | ||
| @tailwind components; | ||
| @tailwind utilities; | ||
|
|
||
| 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 text-white !important; | ||
| } | ||
|
|
||
| button:hover { | ||
| background-color: #55b1ab !important; | ||
| opacity: 80% !important; | ||
| @apply opacity-75 !important; | ||
| } | ||
|
|
||
| @media (prefers-color-scheme: light) { | ||
| :root { | ||
| color: #213547; | ||
| background-color: #ffffff; | ||
| @apply text-black bg-white; | ||
| } | ||
| } | ||
| .freq-btn { | ||
| @apply w-full rounded-3xl font-bold border-0 text-normal md:text-md; | ||
| } | ||
|
|
||
| .btn-primary { | ||
| @apply text-black bg-teal; | ||
| } | ||
|
|
||
| .btn-disabled { | ||
| @apply text-white bg-gray3; | ||
| } | ||
|
|
||
| a:hover { | ||
| color: #747bff; | ||
| @layer components { | ||
| /* Typeography */ | ||
| .title-h2 { | ||
| @apply font-title text-[50px] leading-[1] tracking-wider md:text-[60px] lg:text-[64px]; | ||
| } | ||
|
|
||
| button { | ||
| background-color: #f9f9f9; | ||
| .title-h3 { | ||
| @apply font-title text-[40px] leading-[1] tracking-wider md:text-[40px] lg:text-[44px]; | ||
| } | ||
| } | ||
|
|
||
| .submit-btn { | ||
| @apply btn w-full mt-6 rounded-3xl text-white; | ||
| background-color: #55b1ab; | ||
| text-transform: none; | ||
| .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; | ||
| } | ||
| } | ||
|
|
||
| .faucet-card { | ||
| background-color: #fff; | ||
| } | ||
| @layer base { | ||
| .toast { | ||
| @apply max-w-full text-wrap opacity-60 !important; | ||
| } | ||
| 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; | ||
| } | ||
|
|
||
| .card-title { | ||
| @apply text-black text-4xl; | ||
| font-weight: 700; | ||
| } | ||
| body { | ||
| @apply m-0 min-w-f320 min-h-[100vh] flex items-center bg-white text-normal; | ||
| } | ||
|
|
||
| .card-subtitle { | ||
| @apply text-black opacity-70; | ||
| font-weight: 400; | ||
| font-size: 16px; | ||
| } | ||
| button { | ||
| @apply select-none; | ||
| } | ||
|
|
||
| .dropdown a { | ||
| color: black; | ||
| ::placeholder { | ||
| @apply text-gray2 !important; | ||
| } | ||
| } | ||
|
|
||
| @tailwind utilities; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,15 +1,47 @@ | ||
| <script lang="ts"> | ||
| import { PUBLIC_FORUM } from "$env/static/public"; | ||
| import { IconButton, } from "@frequency-chain/style-guide"; | ||
| import XLogo from "$lib/components/icons/XLogo.svelte"; | ||
| import DiscordLogo from "$lib/components/icons/DiscordLogo.svelte" | ||
| import FrequencyLogo from "$lib/components/icons/FrequencyLogo.svelte" | ||
| export let privacyHref: string = 'https://www.frequency.xyz/privacy'; | ||
| export let type: 'light' | 'dark' = 'light'; | ||
| let fgColorText = { | ||
| dark: 'text-white', | ||
| light: 'text-black', | ||
| }[type]; | ||
| let fgColorBg = { | ||
| dark: 'bg-white', | ||
| light: 'bg-black', | ||
| }[type]; | ||
| </script> | ||
|
|
||
| <footer class="footer items-center p-4 text-black px-1 md:px-6"> | ||
| <div class="items-center grid-flow-col"> | ||
| <p>2024 Frequency Network Foundation</p> | ||
| </div> | ||
| <div class="grid-flow-col gap-4 md:place-self-center md:justify-self-end"> | ||
| <b class="font-bold">Questions?</b> | ||
| <a class="text-black text-opacity-80 cursor-pointer" href={PUBLIC_FORUM} target="_blank"> | ||
| Discord Channel | ||
| </a> | ||
| </div> | ||
| </footer> | ||
| <div class="px-[10px] sm:px-[30px] md:px-[40px] lg:px-[80px] "> | ||
| <footer | ||
| class="sm md:md mx-auto my-0 flex max-w-screen-xl flex-col items-center gap-f16 border-t-[2px] border-current py-f48 md:gap-f48 {fgColorText}" | ||
| > | ||
| <div class="px-f24"> | ||
| <FrequencyLogo fill="#000000"/> | ||
| </div> | ||
| <aside class="flex flex-col items-center space-y-4 text-center leading-none md:flex-row md:space-x-4 md:space-y-0"> | ||
| <div> | ||
| © {new Date().getFullYear()} Frequency Network Foundation <span class="md:hidden">All Rights Reserved</span> | ||
| </div> | ||
| <div class="hidden w-[2px] self-stretch md:block {fgColorBg}"></div> | ||
| <div class="hidden md:block">All Rights Reserved</div> | ||
| <div class="hidden w-[2px] self-stretch md:block {fgColorBg}"></div> | ||
| <div> | ||
| <a href={privacyHref} class="underline transition duration-[0.3s] hover:text-teal">Privacy Policy</a> | ||
| </div> | ||
| </aside> | ||
| <div class="flex gap-f16" aria-label="Social Links"> | ||
| <IconButton {type} label="X/Twitter" href={'https://twitter.com/one_frequency'}> | ||
| <XLogo /> | ||
| </IconButton> | ||
| <IconButton {type} label="Discord" href="https://discord.com/invite/JchmHX5afV"> | ||
| <DiscordLogo /> | ||
| </IconButton> | ||
| </div> | ||
| </footer> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.