LukeParke/website
1
0
Fork 0
mirror of https://github.com/LukeHagar/website.git synced 2025-12-06 12:57:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Jesse Winton
2025-02-12 22:37:15 -05:00
parent aa6227a465
commit af35a93d59
5 changed files with 88 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/routes/(init)/init/(components)/day.svelte
View File

@@ -56,7 +56,7 @@
</script>
{#if hasReleased}
<div class="scroll-mt-10 space-y-4 pb-20" id="day-{index}">
<div class="scroll-mt-10 space-y-4 pb-8" id="day-{index}">
<Window>
<div slot="title" class="text-micro flex items-center gap-1 text-white">
Day {index} <span class="text-accent">/</span>

62
src/routes/(init)/init/(components)/event-carousel.svelte
View File

@@ -1,9 +1,6 @@
<script lang="ts">
import EmblaCarousel, {
type EmblaCarouselType,
type EmblaOptionsType,
type EmblaPluginType
} from 'embla-carousel';
import embla from 'embla-carousel-svelte';
import type { EmblaCarouselType, EmblaOptionsType, EmblaPluginType } from 'embla-carousel';
let emblaApi: EmblaCarouselType;
@@ -18,6 +15,14 @@
let plugins: EmblaPluginType[] = [];
const onPrev = () => {
emblaApi.scrollPrev();
};
const onNext = () => {
emblaApi.scrollNext();
};
const togglePrevNextBtnsState = () => {
if (emblaApi.canScrollPrev()) hasPrev = true;
else hasPrev = false;
@@ -25,4 +30,51 @@
if (emblaApi.canScrollNext()) hasNext = true;
else hasNext = false;
};
const onEmblaInit = (event: CustomEvent<EmblaCarouselType>) => {
emblaApi = event.detail;
emblaApi
.on('init', togglePrevNextBtnsState)
.on('select', togglePrevNextBtnsState)
.on('reInit', togglePrevNextBtnsState);
};
</script>
<div class="border-offset relative min-h-[45vh] border-y-2 border-dashed bg-black/14 py-24">
<div class="container flex w-full items-center justify-between">
<h2 class="font-aeonik-pro text-primary text-label">Upcoming Events</h2>
<nav class="flex gap-1">
<button
class="bg-smooth size-8 cursor-pointer rounded-xl transition active:scale-95"
on:click={onPrev}
disabled={!hasPrev}
>
<span class="web-icon-arrow-left" aria-hidden="true"></span>
</button>
<button
class="bg-smooth size-8 cursor-pointer rounded-xl transition active:scale-95"
on:click={onNext}
disabled={!hasNext}
>
<span class="web-icon-arrow-right" aria-hidden="true"></span>
</button>
</nav>
</div>
<div class="embla overflow-hidden pl-36">
<div
class="embla__viewport pt-8"
use:embla={{ options, plugins }}
on:emblaInit={onEmblaInit}
>
<div class="embla__container flex gap-4">
{#each Array.from({ length: 8 }) as _}
<div
class="embla__slide h-[180px] min-w-0 [flex:0_0_33%] rounded-lg bg-white shadow-lg"
/>
{/each}
</div>
</div>
</div>
</div>

2
src/routes/(init)/init/(components)/pre-release-card.svelte
View File

@@ -16,7 +16,7 @@
const { days, hours, minutes, seconds } = createCountdown(release);
</script>
<div class="relative h-fit pb-20">
<div class="relative h-fit pb-8">
<Window class="aspect-[4/1]">
<div slot="title" class="text-micro flex items-center gap-1 text-white">
Day {index} <span class="text-accent">/</span>

57
src/routes/(init)/init/(components)/window.svelte
View File

@@ -15,8 +15,7 @@
>
<div class="flex items-center justify-between pt-1 px-1.5 pb-2">
{#if $$slots.link}
<span
class="font-aeonik-fono tracking-loose text-micro text-primary flex-1 pl-2 uppercase"
<span class="font-aeonik-fono tracking-loose text-micro text-primary pl-2 uppercase"
><slot name="link" /></span
>
{:else}
@@ -26,7 +25,6 @@
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="flex-1"
>
<path
fill-rule="evenodd"
@@ -38,37 +36,34 @@
{/if}
<span
class="font-aeonik-fono tracking-loose text-micro text-primary mx-auto block flex-1 text-center uppercase"
class="font-aeonik-fono tracking-loose text-micro text-primary mx-auto block text-center uppercase"
><slot name="title" /></span
>
<div class="flex-1">
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
class="mr-0 ml-auto"
>
<rect
x="5.5498"
y="4.64645"
width="14"
height="1"
transform="rotate(45 5.5498 4.64645)"
fill="#E4E4E7"
/>
<rect
x="4.5498"
y="14.6465"
width="14"
height="1"
transform="rotate(-45 4.5498 14.6465)"
fill="#E4E4E7"
/>
</svg>
</div>
<svg
width="20"
height="20"
viewBox="0 0 20 20"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="5.5498"
y="4.64645"
width="14"
height="1"
transform="rotate(45 5.5498 4.64645)"
fill="#E4E4E7"
/>
<rect
x="4.5498"
y="14.6465"
width="14"
height="1"
transform="rotate(-45 4.5498 14.6465)"
fill="#E4E4E7"
/>
</svg>
</div>
<slot />

4
src/routes/(init)/init/+page.svelte
View File

@@ -1,5 +1,5 @@
<script lang="ts" context="module">
const base = new Date('2025-02-24T13:00:00.000Z');
const base = new Date('2025-02-12T13:00:00.000Z');
export const isStarted = new Date() >= base;
export const initDates = `${format(base, 'MMM d')} - ${format(addDays(base, 4), 'd')}`;
@@ -19,6 +19,7 @@
import Day, { type DayProps } from './(components)/day.svelte';
import Hero from './(components)/hero.svelte';
import Giveaway from './(components)/giveaway.svelte';
import EventCarousel from './(components)/event-carousel.svelte';
const title = 'Init - Appwrite';
const description = 'The start of something new.';
@@ -180,5 +181,6 @@
{/each}
</div>
<EventCarousel />
<Giveaway />
{/if}