-
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.
feat: foundations for beautiful pages
- Loading branch information
Showing
20 changed files
with
133 additions
and
10 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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,16 @@ | ||
@tailwind base; | ||
@tailwind components; | ||
@tailwind utilities; | ||
@layer base { | ||
@font-face { | ||
font-family: 'Roboto'; | ||
font-style: normal; | ||
font-weight: 400; | ||
font-display: swap; | ||
src: url(/fonts/Roboto-Bold.ttf) format('truetype'); | ||
} | ||
html { | ||
font-family: 'Roboto', sans-serif; | ||
font-size: 16px; | ||
} | ||
} |
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 |
---|---|---|
@@ -0,0 +1,34 @@ | ||
<script> | ||
import { crossfade } from 'svelte/transition'; | ||
import { cubicInOut } from 'svelte/easing'; | ||
import { fade } from 'svelte/transition'; | ||
import Title from '../title.svelte'; | ||
const [send, receive] = crossfade({ | ||
duration: 3000, | ||
easing: cubicInOut | ||
}); | ||
export let state = 0; | ||
</script> | ||
|
||
{#if state === 0} | ||
<div | ||
out:fade={{ delay: 3000 }} | ||
class="absolute flex h-screen w-screen items-center justify-center bg-[#07090f]" | ||
> | ||
<div in:receive={{ key: 'title' }} out:send={{ key: 'title' }} class="text-9xl"> | ||
<Title /> | ||
</div> | ||
</div> | ||
{:else} | ||
<nav class="flex w-screen justify-between p-8"> | ||
<div in:receive={{ key: 'title' }} out:send={{ key: 'title' }} class="text-4xl"> | ||
<Title /> | ||
</div> | ||
|
||
<div in:fade={{ delay: 3000 }} class="flex space-x-4"> | ||
<slot /> | ||
</div> | ||
<div /> | ||
</nav> | ||
{/if} |
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 |
---|---|---|
@@ -0,0 +1,41 @@ | ||
<script> | ||
export let href = ''; | ||
export let activated = false; | ||
</script> | ||
|
||
<a {href} class="h-full text-2xl text-white" class:active={activated}> | ||
<slot /> | ||
</a> | ||
|
||
<style> | ||
a { | ||
transition: all 0.3s; | ||
} | ||
a::after { | ||
transition: all 0.3s; | ||
content: ''; | ||
display: block; | ||
width: 100%; | ||
height: 2px; | ||
background-color: black; | ||
} | ||
a:hover::after { | ||
transition: all 0.3s; | ||
content: ''; | ||
display: block; | ||
width: 100%; | ||
height: 2px; | ||
background-color: white; | ||
} | ||
.active::after { | ||
transition: all 0.3s; | ||
content: ''; | ||
display: block; | ||
width: 100%; | ||
height: 2px; | ||
background-color: white; | ||
} | ||
</style> |
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 |
---|---|---|
@@ -0,0 +1,5 @@ | ||
<script> | ||
import '../app.css'; | ||
</script> | ||
|
||
<h1 class="hero glitch layers text-center text-white" data-text="4T$">4T$</h1> |
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,5 +1,4 @@ | ||
.hero { | ||
font-size: clamp(40px, 10vw, 100px); | ||
line-height: 1; | ||
color: #fff; | ||
z-index: 2; | ||
|
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,12 +1,48 @@ | ||
<script> | ||
import { fade } from 'svelte/transition'; | ||
import '../app.css'; | ||
import '$lib/glitch.css'; | ||
import { onMount } from 'svelte'; | ||
import NavLink from '../components/main/navLink.svelte'; | ||
import AnimatedNav from '../components/main/animatedNav.svelte'; | ||
import { page } from '$app/stores'; | ||
import { onNavigate } from '$app/navigation'; | ||
// Animation : start at center, end up in the navbar | ||
let titlePosition = 0; | ||
let transitioning = false; | ||
onMount(() => { | ||
setTimeout(() => { | ||
titlePosition++; | ||
}, 1000); | ||
}); | ||
onNavigate(() => { | ||
transitioning = true; | ||
setTimeout(() => { | ||
transitioning = false; | ||
}, 300); | ||
}); | ||
</script> | ||
|
||
<slot /> | ||
<!-- Animation : start at center, end up in the navbar --> | ||
|
||
<AnimatedNav state={titlePosition}> | ||
<!-- Add buttons for navigation --> | ||
<NavLink href="/" activated={$page.url.pathname === '/'}>Home</NavLink> | ||
<NavLink href="/page" activated={$page.url.pathname === '/page'}>Page</NavLink> | ||
</AnimatedNav> | ||
|
||
{#if !transitioning} | ||
<div transition:fade={{ duration: 200 }}> | ||
<slot /> | ||
</div> | ||
{/if} | ||
|
||
<style lang="postcss"> | ||
:global(html) { | ||
background-color: theme(colors.gray.900); | ||
background-color: #07090f; | ||
overflow-x: hidden; | ||
} | ||
</style> |
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,7 +1 @@ | ||
<script> | ||
import '$lib/glitch.css'; | ||
</script> | ||
|
||
<div class="w-screen"> | ||
<h1 class="text-center text-white hero glitch layers" data-text="4T$">4T$</h1> | ||
</div> | ||
<div class="text-white">this is home</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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
<div class="text-white">this is page</div> |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.