feat: add back to top button and view archived link

This commit is contained in:
Youwen Wu 2024-04-06 01:01:15 -07:00
parent 51d7318942
commit 8233c4c49b
Signed by: youwen5
GPG key ID: 865658ED1FE61EC3
4 changed files with 8 additions and 5 deletions

View file

@ -24,6 +24,6 @@
{#if showButton} {#if showButton}
<div class="fixed bottom-10 right-10 z-40" transition:fly={{ y: 50, duration: 150 }}> <div class="fixed bottom-10 right-10 z-40" transition:fly={{ y: 50, duration: 150 }}>
<Button size="icon" on:click={scrollToTop}><ChevronUp /></Button> <Button size="icon" class="scale-125 md:scale-150" on:click={scrollToTop}><ChevronUp /></Button>
</div> </div>
{/if} {/if}

View file

@ -10,7 +10,7 @@
<Card.Root> <Card.Root>
<Card.Header> <Card.Header>
<h3 class="text-4xl font-serif font-bold mb-4 leading-tight">{doc.title}</h3> <h3 class="text-3xl lg:text-4xl font-serif font-bold mb-4 leading-tight">{doc.title}</h3>
<p class="text-muted-foreground text-xl">{doc.blurb}</p> <p class="text-muted-foreground text-xl">{doc.blurb}</p>
<PostMetadata <PostMetadata
primaryTags={doc.primaryTags} primaryTags={doc.primaryTags}

View file

@ -29,7 +29,7 @@
</Typewriter> </Typewriter>
<br /> <br />
<Typewriter> <Typewriter>
<p>I'm building and designing software, for humans.</p> <p>Building and designing libre software, for everyone.</p>
</Typewriter> </Typewriter>
</div> </div>
<div class="flex flex-wrap gap-4 justify-center my-8"> <div class="flex flex-wrap gap-4 justify-center my-8">

View file

@ -11,6 +11,7 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import PostCard from '$lib/components/Blog/PostCard.svelte'; import PostCard from '$lib/components/Blog/PostCard.svelte';
import { faker } from '@faker-js/faker'; import { faker } from '@faker-js/faker';
import Button from '$lib/components/ui/button/button.svelte';
let loaded = false; let loaded = false;
@ -47,8 +48,10 @@
> >
my blog on computer science, math, games, art, and more. my blog on computer science, math, games, art, and more.
</p> </p>
<span class="flex flex-wrap items-center"> <span class="flex flex-wrap items-center mt-8 md:hidden">
<a href="#latest">all </a> <a href="#archive" class="flex items-center font-mono gap-2 hover:underline"
><ChevronRight />Archived Posts</a
>
</span> </span>
<div class="grid grid-cols-3 mt-20 gap-8"> <div class="grid grid-cols-3 mt-20 gap-8">