Merge pull request #5 from PickleNik/svelte

i got svelted

src/lib/components/atoms/Button.svelte

@@ -22,17 +22,17 @@
 	.button-secondary {
 		font-weight: 600;
 		color: var(--white);
-		border: 3px solid var(--red);
+		border: 3px solid var(--grey-three);
 		border-radius: 200px;
 		padding: 12px 40px;
 		cursor: pointer;
 		background-color: transparent;
-		margin-top: 45px;
 		transition: transform 0.4s var(--bezier-one), box-shadow 0.4s var(--bezier-one);
 		user-select: none;
 	}
 
 	.button-primary {
+		border: 3px solid var(--red);
 		background-color: var(--red);
 		box-shadow: 0px 0px 32px 1px var(--red-glow);
 	}
@@ -44,4 +44,8 @@
 	button:hover {
 		transform: translate(0%, -5%);
 	}
+	button:active {
+		transition-duration: 0.1s;
+		transform: translate(0);
+	}
 </style>

src/lib/components/atoms/ContributorButton.svelte

@@ -1,8 +1,8 @@
-<script>
+<script lang="ts">
-	export const username = "afnzmn"
+	export let username: String;
-	export const href = `https://github.com/${username}`
+	let href = `https://github.com/${username}`
-	export const src = `https://github.com/${username}.png`
+	let src = `https://github.com/${username}.png`
-	export const alt = `${username}'s contributor profile picture`
+	let alt = `${username}'s contributor profile picture`
 </script>
 
 <a {href}>
@@ -22,6 +22,7 @@
 	button {
 		color: var(--white);
 		border-radius: 200px;
+		overflow: hidden;
         border: 0;
 		/* padding: 5px 5px; */
         width:86px;
@@ -30,20 +31,17 @@
         max-width: 86px;
 		cursor: pointer;
 		background-color: var(--grey-four);
-		font-size: 1.5rem;
 		transition: transform 0.4s var(--bezier-one);
+		margin-bottom: 1rem;
 		user-select: none;
 	}
 
-	button:hover {
+	a:hover > button {
-		transform: translate(0%, -5%);
+		transform: translateY(-5%);
 	}
 
 	img {
-		/* margin: 0;
+		height: 100%;
-		padding: 0; */
+		width: 100%;
-		border-radius: 50%;
-        max-height: 86px;
-        max-width: 86px;
 	}
 </style>

src/lib/components/atoms/HeroImage.svelte

@@ -1,16 +1,37 @@
 <script>
 </script>
 
-<img class="hero-img" src="/manager.png" alt="Screenshot of ReVanced Manager" />
+<div class="hero-img"><img height="100%" src="/manager.png" alt="Screenshot of ReVanced Manager" /></div>
 
 <style>
 	.hero-img {
-		height: 40rem;
+		overflow: hidden;
+		height: 80vh;
+		max-height: 80rem;
 		z-index: -1;
 		width: auto;
 		float: right;
-		border-radius: 20px;
+		border-radius: 1.5rem;
-		transform: rotate(3.7deg) translateY(2%) translateX(-15%);
+		transform: rotate(3.7deg);
+		box-shadow: 0 1rem 3rem 0 #0f111a;
 		user-select: none;
 	}
+	@media (max-width: 1919px) {
+		.hero-img {
+			position: fixed;
+			height: 90vh;
+			top: 90px;
+			right: 7.5%;
+			transform: rotate(3.7deg) translateY(10%);
+		}
+	}
+	.hero-img::after{
+		box-shadow: inset 2rem 2rem 5rem -3rem var(--grey-two), inset -2rem -2rem 5rem -3rem var(--grey-one);
+		content: "";
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+	}
 </style>

src/lib/components/atoms/IndexHeroTitle.svelte

@@ -12,5 +12,21 @@
 		font-weight: 800;
 		font-size: 6rem;
 		letter-spacing: -0.04em;
+		line-height: 0.75em;
+	}
+	@media screen and (max-width: 1919px) {
+		h1 {
+			font-size: 5rem;
+		}
+	}
+	@media screen and (max-width: 1052px) {
+		h1 {
+			font-size: 4.5rem;
+		}
+	}
+	@media screen and (max-width: 768px) {
+		h1 {
+			font-size: 3rem;
+		}
 	}
 </style>

src/lib/components/atoms/SocialButton.svelte

@@ -4,35 +4,39 @@
 	export let href = '#';
 </script>
 
-<button>
+<div>
+	<button>
 		<a {href}>
-        <img {src} {alt}>
+			<img {src} {alt} />
 		</a>
-</button>
+	</button>
+</div>
 
 <style>
 	button {
-		color: var(--white);
-		border-radius: 200px;
 		border: 0;
+		width: 60px;
+		height: 60px;
 		padding: 14px;
-        width:60px;
-        height:60px;
 		cursor: pointer;
+		border-radius: 200px;
+		transition: transform 0.4s var(--bezier-one);
 		background-color: var(--grey-four);
-		font-size: 1.5rem;
+		color: var(--white);
-		transition: transform 0.4s var(--bezier-one), filter 0.4s var(--bezier-one);
 		user-select: none;
-        margin-right:0.5rem;
+	}
-		margin-left: 0.5rem;
+
+	div {
+		display: inline-block;
 	}
 
 	img {
-        width:30px;
+		transition: filter 0.4s var(--bezier-one);
+		width: 30px;
 	}
 
-	button:hover {
+	div:hover > button {
-		transform: translate(0%, -5%);
+		transform: translateY(-5%);
 	}
 
 	button:hover img {

src/lib/components/atoms/Wave.svelte

@@ -9,10 +9,11 @@
 
 <style>
   svg {
-    position: absolute;
+    position: fixed;
     z-index: -2;
-    bottom:0;
+    bottom: 0;
-    transform: translateY(20%);
+    height: 35vh;
+    width: 100%;
   }
 
   .wave {

src/lib/components/molecules/ContributorHost.svelte

@@ -1,43 +1,20 @@
-<script>
+<script lang="ts">
     import ContributorButton from "../atoms/ContributorButton.svelte";
+    export let peoples: Array<String>;
 </script>
 
 <div class="social-host">
-    <ContributorButton></ContributorButton>
+    {#each peoples as person}
-    <ContributorButton></ContributorButton>
+        <ContributorButton username={person}></ContributorButton>
-    <ContributorButton></ContributorButton>
+    {/each}
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>    
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
-    <ContributorButton></ContributorButton>
 </div>
 
 <style>
-
     .social-host {
+        gap: 2rem;
         width: 100;
-        gap:2rem;
-		align-items: center;
         display: grid;
+		align-items: center;
         grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
     }
 </style>

src/lib/components/molecules/NavHost.svelte

@@ -1,9 +1,23 @@
-<script>
+<script lang="ts">
 	import Navigation from '../atoms/Navigation.svelte';
+	import { onMount } from 'svelte';
 	import { page } from '$app/stores';
+	let menuBtn: HTMLElement;
+	let menuOpen = false;
+	onMount(() => {
+		menuBtn.addEventListener('click', () => {
+			if (!menuOpen) {
+				menuBtn.classList.add('open');
+				menuOpen = true;
+			} else {
+				menuBtn.classList.remove('open');
+				menuOpen = false;
+			}
+		});
+	});
 </script>
 
-<div>
+<div class="wrapper">
 	<nav>
 		<a href="/">
 			<div class="logo">
@@ -20,23 +34,22 @@
 			<Navigation href="/docs">Docs</Navigation>
 			<Navigation href="/credits">Credits</Navigation>
 		</ul>
+		<div class="menu-btn" class:open={menuOpen} bind:this={menuBtn}>
+			<div class="menu-btn__burger" />
+		</div>
 	</nav>
 </div>
 
 <style>
 	nav {
-		width: 100%;
 		top: 0;
 		display: flex;
-		padding-top: 0.75rem;
-		padding-right: 3rem;
-		padding-left: 6rem;
-		justify-content: space-between;
 		align-items: center;
+		justify-content: space-between;
 		min-height: 90px;
+		width: 100%;
 	}
 
-
 	.logo {
 		display: inline-block;
 	}
@@ -58,22 +71,75 @@
 		color: var(--red);
 	}
 
-
 	@media screen and (max-width: 1052px) {
-
 		h1 {
 			display: none;
 		}
-
-		nav {
-			padding-left: 7%;
-			padding-right: 1%;
-		}
 	}
 
 	@media screen and (max-width: 768px) {
 		nav {
-			background-color: purple;
+			/* background-color: purple; */
 		}
+		ul {
+			display: none;
+		}
+	}
+
+	/* Hamburger mmm yum */
+	@media screen and (min-width: 768px) {
+		.menu-btn {
+			display: none !important;
+		}
+	}
+	.menu-btn {
+		user-select: none;
+		position: relative;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 80px;
+		height: 60px;
+		cursor: pointer;
+		transition: all 0.5s ease-in-out;
+		background: var(--grey-one);
+		border-radius: 3rem;
+	}
+	.menu-btn__burger {
+		width: 30px;
+		height: 3px;
+		background: #fff;
+		border-radius: 5px;
+		box-shadow: 0 2px 5px rgba(255, 101, 47, 0.2);
+		transition: all 0.5s ease-in-out;
+	}
+	.menu-btn__burger::before,
+	.menu-btn__burger::after {
+		content: '';
+		position: absolute;
+		width: 30px;
+		height: 3px;
+		background: #fff;
+		border-radius: 5px;
+		box-shadow: 0 2px 5px rgba(255, 101, 47, 0.2);
+		transition: all 0.5s ease-in-out;
+	}
+	.menu-btn__burger::before {
+		transform: translateY(-8px);
+	}
+	.menu-btn__burger::after {
+		transform: translateY(8px);
+	}
+	/* ANIMATION */
+	.menu-btn.open .menu-btn__burger {
+		transform: translateX(-50px);
+		background: transparent;
+		box-shadow: none;
+	}
+	.menu-btn.open .menu-btn__burger::before {
+		transform: rotate(45deg) translate(35px, -35px);
+	}
+	.menu-btn.open .menu-btn__burger::after {
+		transform: rotate(-45deg) translate(35px, 35px);
 	}
 </style>

src/lib/components/molecules/SocialHost.svelte

@@ -1,28 +1,34 @@
 <script>
-    import SocialButton from "../atoms/SocialButton.svelte";
+	import SocialButton from '../atoms/SocialButton.svelte';
 </script>
 
 <div class="social-host">
-    <SocialButton src="socials/github.svg" alt="GitHub" href="https://revanced.app/github"></SocialButton>
+	<SocialButton src="socials/github.svg" alt="GitHub" href="https://revanced.app/github" />
-    <SocialButton src="socials/discord.svg" alt="Discord" href="http://revanced.app/discord"></SocialButton>
+	<SocialButton src="socials/discord.svg" alt="Discord" href="http://revanced.app/discord" />
-    <SocialButton src="socials/reddit.svg" alt="Reddit" href="https://revanced.app/reddit"></SocialButton>
+	<SocialButton src="socials/reddit.svg" alt="Reddit" href="https://revanced.app/reddit" />
-    <SocialButton src="socials/telegram.svg" alt="Telegram" href="https://revanced.app/telegram"></SocialButton>
+	<SocialButton src="socials/telegram.svg" alt="Telegram" href="https://revanced.app/telegram" />
 </div>
 
 <style>
 	.social-host {
-        justify-content: space-between;
+		width: min(87%, 100rem);
-        position: absolute;
+        /* same as margin-inline: auto on .wrapper */
+        padding: 0 max(6.5%, calc(50vw - 50rem));
 		align-items: center;
-        bottom: 3rem;
-        left: 5.5rem;
 		user-select: none;
+		position: absolute;
+		display: flex;
+		bottom: 3rem;
+        gap: 1.5rem;
+		left: 0;
 	}
 
-    @media screen and (max-width: 1052px) {
+	@media screen and (max-width: 768px) {
 		.social-host {
-            left: 6%;
+			left: 0;
+			width: 100%;
+            display: flex;
+			justify-content: center;
 		}
-
 	}
 </style>

src/lib/components/organisms/IndexDescription.svelte

@@ -1,13 +1,12 @@
 <script>
 	import Button from '$lib/components/atoms/Button.svelte';
 	import IndexHeroTitle from '../atoms/IndexHeroTitle.svelte';
-
 </script>
 
 <section class="hero">
 	<div class="hero-text">
 		<!-- <img class="hero-img" src="/manager.png" alt="Screenshot of ReVanced Manager" /> -->
-        <IndexHeroTitle></IndexHeroTitle>
+		<IndexHeroTitle />
 		<h2>
 			An extensible framework for<br />
 			building application mods.
@@ -21,20 +20,39 @@
 </section>
 
 <style>
+	h2 {
+		margin-top: 1.75rem;
+		margin-bottom: 2rem;
+	}
+	.hero {
+		padding-bottom: 10rem;
+	}
+	@media (max-width: 768px) {
+		.hero {
+			padding-top: 10rem;
+			padding-bottom: 0;
+			text-align: center;
+		}
+		h2 {
+			font-size: 1.5rem;
+		}
+		.hero-buttons {
+			flex-direction: column;
+			gap: 0;
+		}
+	}
 	.hero-text { 
 		align-items: center;
 	}
 
 	.hero-buttons {
+		gap: 1rem;
 		display: flex;
-		gap:1rem;
 		user-select: none;
-		transform: translateX(-3px);
 	}
 
 	.hero-text h1 {
 		font-size: 6.5rem;
 		letter-spacing: -0.04em;
 	}
-
 </style>

src/routes/__layout.svelte

@@ -40,8 +40,11 @@ import Wave from '$lib/components/atoms/Wave.svelte';
 	}
 
 	:global(html) {
+		margin: 0;
+		padding: 0;
 		font-size: 100%;
 		box-sizing: border-box;
+		overflow-y: scroll;
 	}
 
 	:global(body) {
@@ -54,11 +57,10 @@ import Wave from '$lib/components/atoms/Wave.svelte';
 	:global(.wrapper) {
 		margin-inline: auto;
 		width: min(87%, 100rem);
-		margin-top: 1.5%
 	}
 
 	:root {
-		--white: #ffe1e1;
+		--white: #fff;
 		--red: #ff4151;		
 		--red-glow: #ff838d40;
 		--grey-one: #1c1e29;
@@ -108,7 +110,6 @@ import Wave from '$lib/components/atoms/Wave.svelte';
     }
 
 	/*-----scrollbar-----*/
-
 	:global(::-webkit-scrollbar) {
 		width: 20px;
 		background-color: transparent;

src/routes/credits.svelte

@@ -1,7 +1,13 @@
 <script>
     import ContributorHost from '$lib/components/molecules/ContributorHost.svelte';
-    </script>
+    let peoples = [
+        "Ushie",
+        "afnzmn",
+        "baiorett",
+        "PickleNik",
+    ]
+</script>
 
 <div class="wrapper">
-    <ContributorHost></ContributorHost>
+    <ContributorHost {peoples}></ContributorHost>
 </div>

src/routes/index.svelte

@@ -5,11 +5,34 @@
 </script>
 
 <div class="wrapper">
-
+	<div class="wrappezoid">
-	<HeroImage></HeroImage>
 		<IndexDescription />
+		<div id="heroimg"><HeroImage /></div>
+	</div>
 	<SocialHost />
-
 </div>
 
-
+<style>
+	.wrappezoid {
+		height: calc(100vh - 90px);
+		display: flex;
+		flex-direction: row;
+		justify-content: space-around;
+		align-items: center;
+	}
+	@media (max-width: 1919px) {
+		.wrappezoid {
+			justify-content: space-between;
+		}
+	}
+	@media (max-width: 1052px) {
+		#heroimg {
+			display: none;
+		}
+	}
+	@media (max-width: 768px) {
+		.wrappezoid {
+			flex-direction: column;
+		}
+	}
+</style>