From abea751e10619cb4b39217743cd46da2ac2b43ef Mon Sep 17 00:00:00 2001 From: afn <47723802+afnzmn@users.noreply.github.com> Date: Sun, 9 Oct 2022 23:09:21 -0400 Subject: [PATCH] feat: nicer homescreen ui --- src/app.css | 25 ++++----- src/app.html | 2 + src/lib/components/atoms/Button.svelte | 43 +++++++++------ .../components/atoms/DownloadChannel.svelte | 53 ------------------- .../components/atoms/DownloadSelector.svelte | 2 +- .../components/atoms/IndexHeroTitle.svelte | 19 +------ src/lib/components/atoms/Navigation.svelte | 15 +++--- src/lib/components/atoms/SocialButton.svelte | 2 +- .../molecules/ContributorHost.svelte | 9 ++++ .../molecules/DownloadChannelHost.svelte | 34 ------------ .../molecules/DownloadSelectorHost.svelte | 2 +- src/lib/components/molecules/NavHost.svelte | 19 ++++--- .../components/molecules/SocialHost.svelte | 2 +- .../organisms/IndexDescription.svelte | 9 ++-- src/routes/+page.svelte | 2 +- src/routes/download/+page.svelte | 2 - static/icons/docs.svg | 1 + static/icons/download.svg | 1 + static/icons/home.svg | 1 + static/logo.svg | 2 +- 20 files changed, 86 insertions(+), 159 deletions(-) delete mode 100644 src/lib/components/atoms/DownloadChannel.svelte delete mode 100644 src/lib/components/molecules/DownloadChannelHost.svelte create mode 100644 static/icons/docs.svg create mode 100644 static/icons/download.svg create mode 100644 static/icons/home.svg diff --git a/src/app.css b/src/app.css index 453eedb..3c37c8d 100644 --- a/src/app.css +++ b/src/app.css @@ -19,7 +19,7 @@ body{ margin: 0; padding: 0; line-height: 1.3; - background-color: #0f111a; + background-color: var(--bg-color); } html, body{ @@ -33,14 +33,14 @@ html, body{ :root { --white: #fff; - --red: #ff4151; - --red-glow: #ff838d40; - --grey-one: #1c1e29; - --grey-two: #2b2d3a; - --grey-three: #3e404f; + --red: #8bc3f4; + --bg-color: #181C1E; + --grey-one: #252B31; + --grey-two: #28313b; + --grey-three: #3c4759c3; --grey-four: #1B1E29; - --grey-five: #D0D0D0; - --grey-six: #a19e9e; + --grey-five: hsl(208, 30%, 75%); + --grey-six: #23282da7; --grey-seven: #535563; --bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94) } @@ -54,13 +54,14 @@ html, body{ h1{ color: var(--white); - font-weight: 800; + font-weight: 700; + line-height: 0.75em; } h2{ - color: var(--white); - font-weight: 300; - font-size: 1.75rem; + color: var(--grey-five); + font-weight: 400; + font-size: 1.4rem; } h3{ diff --git a/src/app.html b/src/app.html index 2f83674..56f0975 100644 --- a/src/app.html +++ b/src/app.html @@ -9,4 +9,6 @@
%sveltekit.body%
+ + diff --git a/src/lib/components/atoms/Button.svelte b/src/lib/components/atoms/Button.svelte index f7ed616..a3239e8 100644 --- a/src/lib/components/atoms/Button.svelte +++ b/src/lib/components/atoms/Button.svelte @@ -3,30 +3,32 @@ $: type = 'button-' + kind; export let href = '#'; export let fontsize = '1.2rem'; + export let icon = ""; + + function handleClick() { + location.href = href; + } - - - + diff --git a/src/lib/components/atoms/DownloadChannel.svelte b/src/lib/components/atoms/DownloadChannel.svelte deleted file mode 100644 index 0ea7848..0000000 --- a/src/lib/components/atoms/DownloadChannel.svelte +++ /dev/null @@ -1,53 +0,0 @@ - - - - - - - diff --git a/src/lib/components/atoms/DownloadSelector.svelte b/src/lib/components/atoms/DownloadSelector.svelte index 7e06f0c..a3ddafd 100644 --- a/src/lib/components/atoms/DownloadSelector.svelte +++ b/src/lib/components/atoms/DownloadSelector.svelte @@ -24,7 +24,7 @@ diff --git a/src/lib/components/atoms/Navigation.svelte b/src/lib/components/atoms/Navigation.svelte index ff0b65c..dba6b4e 100644 --- a/src/lib/components/atoms/Navigation.svelte +++ b/src/lib/components/atoms/Navigation.svelte @@ -13,34 +13,33 @@ diff --git a/src/lib/components/atoms/SocialButton.svelte b/src/lib/components/atoms/SocialButton.svelte index 0695454..ed44736 100644 --- a/src/lib/components/atoms/SocialButton.svelte +++ b/src/lib/components/atoms/SocialButton.svelte @@ -21,7 +21,7 @@ cursor: pointer; border-radius: 200px; transition: transform 0.4s var(--bezier-one); - background-color: var(--grey-four); + background-color: var(--grey-two); color: var(--white); user-select: none; } diff --git a/src/lib/components/molecules/ContributorHost.svelte b/src/lib/components/molecules/ContributorHost.svelte index ce4da9c..3b052d9 100644 --- a/src/lib/components/molecules/ContributorHost.svelte +++ b/src/lib/components/molecules/ContributorHost.svelte @@ -1,6 +1,15 @@
diff --git a/src/lib/components/molecules/DownloadChannelHost.svelte b/src/lib/components/molecules/DownloadChannelHost.svelte deleted file mode 100644 index acc82dd..0000000 --- a/src/lib/components/molecules/DownloadChannelHost.svelte +++ /dev/null @@ -1,34 +0,0 @@ - - -
- {#each items as item} - - {item} - - {/each} -
- - diff --git a/src/lib/components/molecules/DownloadSelectorHost.svelte b/src/lib/components/molecules/DownloadSelectorHost.svelte index 4faf6cd..b33df42 100644 --- a/src/lib/components/molecules/DownloadSelectorHost.svelte +++ b/src/lib/components/molecules/DownloadSelectorHost.svelte @@ -17,7 +17,7 @@ background-color: var(--grey-one); margin-top: 2rem; padding: 0.75rem 0.75rem; - border-radius: 25px; + border-radius: 16px; } .main { diff --git a/src/lib/components/molecules/NavHost.svelte b/src/lib/components/molecules/NavHost.svelte index 9d66264..f700d07 100644 --- a/src/lib/components/molecules/NavHost.svelte +++ b/src/lib/components/molecules/NavHost.svelte @@ -17,7 +17,7 @@ }); -
+