diff --git a/src/app.css b/src/app.css index 81fc896..e9302a6 100644 --- a/src/app.css +++ b/src/app.css @@ -19,7 +19,6 @@ html { body { margin: 0; padding: 0; - line-height: 1.4; background-color: var(--bg-color); } @@ -38,20 +37,19 @@ body { --white: #fff; --accent-color: #9fd5ff; --accent-color-two: hsl(207, 65%, 90%); - --bg-color: hsl(240, 5%, 11%); + --bg-color: hsl(240, 2%, 11%); --grey-one: #252b31; --grey-two: #28313b; --grey-three: #373e4d; --grey-four: #182244; --grey-five: hsl(208, 30%, 75%); - --grey-six: hsla(223, 14%, 15%, 0.655); + --grey-six: hsla(220, 12%, 15%, 0.655); --grey-seven: #535563; --bezier-one: cubic-bezier(0.25, 0.46, 0.45, 0.94); } ::selection { background: var(--grey-six); - color: var(--white); } /*-----headings-----*/ @@ -59,14 +57,16 @@ body { h1 { color: var(--white); font-weight: 700; - font-size: 1.5rem; + color: var(--white); + font-weight: 700; + letter-spacing: -0.04em; } h2 { color: var(--grey-five); font-weight: 400; - font-size: 1.4rem; + font-size: 1.2rem; } h3 { diff --git a/src/lib/components/atoms/Button.svelte b/src/lib/components/atoms/Button.svelte index 3b805b1..5a30766 100644 --- a/src/lib/components/atoms/Button.svelte +++ b/src/lib/components/atoms/Button.svelte @@ -4,9 +4,10 @@ export let href = '#'; export let maxWidth = false; export let icon = ''; + export let target = ''; - +
{icon} @@ -21,13 +22,13 @@ div, .button-secondary { - font-size: 1.1rem; - height: 60px; + min-width: max-content; + font-size: 1rem; color: var(--white); font-weight: 600; border: none; - border-radius: 16px; - padding: 16px 40px; + border-radius: 12px; + padding: 1rem 1.75rem; display: block; cursor: pointer; background-color: var(--grey-two); @@ -42,10 +43,11 @@ } div:hover { - transform: translateY(-4%); - filter: brightness(90%); + filter: brightness(85%); } + + div, .button-secondary { display: flex; diff --git a/src/lib/components/atoms/HeroImage.svelte b/src/lib/components/atoms/HeroImage.svelte index 7ff5c08..2047ae9 100644 --- a/src/lib/components/atoms/HeroImage.svelte +++ b/src/lib/components/atoms/HeroImage.svelte @@ -2,12 +2,14 @@
- Screenshot of ReVanced Manager + Screenshot of ReVanced Manager
diff --git a/src/lib/components/atoms/TerminalWindow.svelte b/src/lib/components/atoms/TerminalWindow.svelte new file mode 100644 index 0000000..daaca16 --- /dev/null +++ b/src/lib/components/atoms/TerminalWindow.svelte @@ -0,0 +1,29 @@ +
+hhh +
+ + \ No newline at end of file diff --git a/src/lib/components/atoms/Wave.svelte b/src/lib/components/atoms/Wave.svelte index 992f551..ba919bc 100644 --- a/src/lib/components/atoms/Wave.svelte +++ b/src/lib/components/atoms/Wave.svelte @@ -9,7 +9,7 @@ diff --git a/src/lib/components/molecules/NavHost.svelte b/src/lib/components/molecules/NavHost.svelte index f5a571c..90530d3 100644 --- a/src/lib/components/molecules/NavHost.svelte +++ b/src/lib/components/molecules/NavHost.svelte @@ -29,7 +29,7 @@
    Home Download - target.startsWith("/docs")} href="/docs">Docs + Patches
@@ -116,26 +116,24 @@ width: 80px; height: 60px; cursor: pointer; - transition: all 0.5s ease-in-out; - background: var(--grey-one); - border-radius: 3rem; + transition: all 0.5s var(--bezier-one); } .menu-btn__burger { - width: 30px; - height: 3px; - background: #fff; - border-radius: 5px; - transition: all 0.5s ease-in-out; + width: 25px; + height: 2px; + border-radius: 50px; + background: var(--grey-five); + transition: all 0.5s var(--bezier-one); } .menu-btn__burger::before, .menu-btn__burger::after { content: ''; position: absolute; - width: 30px; - height: 3px; - background: #fff; - border-radius: 5px; - transition: all 0.5s ease-in-out; + width: 25px; + height: 2px; + border-radius: 50px; + background: var(--grey-five); + transition: all 0.5s var(--bezier-one); } .menu-btn__burger::before { transform: translateY(-8px); @@ -145,14 +143,14 @@ } /* ANIMATION */ .menu-btn.open .menu-btn__burger { - transform: translateX(-50px); + transform: translateX(-20px); background: transparent; box-shadow: none; } .menu-btn.open .menu-btn__burger::before { - transform: rotate(45deg) translate(35px, -35px); + transform: rotate(45deg) translate(15px, -15px); } .menu-btn.open .menu-btn__burger::after { - transform: rotate(-45deg) translate(35px, 35px); + transform: rotate(-45deg) translate(15px, 15px); } diff --git a/src/lib/components/molecules/PatchCell.svelte b/src/lib/components/molecules/PatchCell.svelte index dd67c4f..c2872aa 100644 --- a/src/lib/components/molecules/PatchCell.svelte +++ b/src/lib/components/molecules/PatchCell.svelte @@ -4,7 +4,7 @@ import type { CompatiblePackage, Patch } from 'src/data/types'; export let patch: Patch; - export let current: boolean; + export let current; const hasPatchOptions = !!patch.options.length; let expanded: boolean = false; @@ -38,15 +38,13 @@
{#each patch.compatiblePackages as pkg, i} - {#if current === false} - -

📦 {pkg.name}

- - {/if} + +

📦 {pkg.name}

+ {/each} {#if patch.compatiblePackages[0].versions.length} @@ -83,6 +81,7 @@ margin-right: 0.5rem; font-size: 1.25rem; color: var(--accent-color-two); + letter-spacing: normal; } h2 { @@ -103,9 +102,7 @@ display: flex; flex-wrap: wrap; gap: 0.25rem; - margin-bottom: 0.5rem; - margin-left: -0.2rem; - margin-top: 0.5rem; + margin: 0.3rem 0rem; width: 100%; } @@ -125,7 +122,7 @@ .patch-container { transition: all 2s var(--bezier-one); background-color: var(--grey-six); - padding: 1.5rem; + padding: 1.25rem; border-radius: 8px; } @@ -161,6 +158,7 @@ padding: 1rem; } + /* thanks piknik */ .option + .option { border-top: 1px solid var(--grey-three); } diff --git a/src/lib/components/molecules/TreeMenu.svelte b/src/lib/components/molecules/TreeMenu.svelte index bd3e98e..f4ce08b 100644 --- a/src/lib/components/molecules/TreeMenu.svelte +++ b/src/lib/components/molecules/TreeMenu.svelte @@ -38,7 +38,4 @@ word-break: break-all; } - /* .package-list:has(.loading) { - padding-top: 7.5rem; - } */ diff --git a/src/lib/components/organisms/Home.svelte b/src/lib/components/organisms/Home.svelte index c3ac5ce..1961b23 100644 --- a/src/lib/components/organisms/Home.svelte +++ b/src/lib/components/organisms/Home.svelte @@ -5,28 +5,28 @@

- ReVanced + Your favourite
apps, advanced.

- An extensible framework for building
application mods. + ReVanced is an extensible framework for building
Android application mods.

- - + +
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 5265084..7d21e51 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -3,6 +3,7 @@ import Home from '$lib/components/organisms/Home.svelte'; import SocialHost from '$lib/components/molecules/SocialHost.svelte'; import Wave from '$lib/components/atoms/Wave.svelte'; + import TerminalWindow from '$lib/components/atoms/TerminalWindow.svelte'; @@ -16,6 +17,7 @@
+
diff --git a/src/routes/contributors/+page.svelte b/src/routes/contributors/+page.svelte index 959b715..13b3398 100644 --- a/src/routes/contributors/+page.svelte +++ b/src/routes/contributors/+page.svelte @@ -49,6 +49,7 @@ h2 { font-size: 1rem; color: var(--grey-four); + text-align: center; } .text-container { @@ -77,4 +78,10 @@ a:hover::after { transform: translateX(5px); } + + @media screen and (max-width: 768px) { + h1 { + font-size: 2rem; + } + } diff --git a/src/routes/download/+page.svelte b/src/routes/download/+page.svelte index f8d8b79..aee515d 100644 --- a/src/routes/download/+page.svelte +++ b/src/routes/download/+page.svelte @@ -3,30 +3,29 @@ import Button from '$lib/components/atoms/Button.svelte'; import Footer from '$lib/components/molecules/Footer.svelte'; - $: manager = $tools["revanced/revanced-manager"]; + $: manager = $tools['revanced/revanced-manager'];
-

ReVanced Manager

+

ReVanced Manager

Patch your favourite apps, on-device.
- - Manager Screenshot + + Manager Screenshot