jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add light/dark mode support with CSS variables

Browse source
This commit is contained in:
Jennie Robinson Faber 2025-10-06 19:54:20 +01:00
parent 970b185151
commit fb02688166
25 changed files with 1293 additions and 1177 deletions
Download patch file Download diff file Expand all files Collapse all files

20
app/pages/index.vue
View file

@ -5,14 +5,14 @@
<div class="relative">
<!-- Large artistic title -->
<h1
class="text-6xl md:text-8xl font-bold text-stone-100 ethereal-text leading-tight mb-8"
class="text-6xl md:text-8xl font-bold text-ghost-100 ethereal-text leading-tight mb-8"
>
Become a Ghostie
</h1>
<!-- Floating subtitle -->
<div class="mb-16">
<p class="text-stone-100 text-lg max-w-md">
<p class="text-ghost-100 text-lg max-w-md">
A community for creatives and game devs<br />
exploring cooperative models
</p>
@ -33,7 +33,7 @@
<div>
<NuxtLink
to="/join"
class="inline-block px-8 py-3 border border-ghost-600 text-stone-200 hover:bg-ghost-800 hover:border-whisper-500 hover:ethereal-text transition-all duration-500"
class="inline-block px-8 py-3 border border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500 hover:ethereal-text transition-all duration-500"
>
Join Us Today →
</NuxtLink>
@ -55,13 +55,13 @@
>
<!-- Content -->
<div class="flex-1 max-w-lg">
<h3 class="text-xl text-stone-100 mb-3">{{ circle.label }}</h3>
<p class="text-stone-200 text-sm leading-relaxed mb-4">
<h3 class="text-xl text-ghost-100 mb-3">{{ circle.label }}</h3>
<p class="text-ghost-200 text-sm leading-relaxed mb-4">
{{ circle.description }}
</p>
<!-- Features as inline text -->
<div class="text-sm text-stone-400">
<div class="text-sm text-ghost-400">
<span v-for="(feature, i) in circle.features" :key="feature">
{{ feature
}}<span v-if="i < circle.features.length - 1"> • </span>
@ -77,7 +77,7 @@
<!-- Why Join? - Diagonal Layout -->
<section class="mb-32 relative">
<div class="transform -rotate-1">
<h2 class="text-3xl font-light text-stone-200 mb-12">Why Join?</h2>
<h2 class="text-3xl font-light text-ghost-200 mb-12">Why Join?</h2>
</div>
<div class="ml-12 relative">
@ -86,11 +86,11 @@
/>
<div class="max-w-2xl">
<p class="text-stone-300 leading-loose text-lg mb-8">
<p class="text-ghost-300 leading-loose text-lg mb-8">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p class="text-stone-400 leading-relaxed ml-8">
<p class="text-ghost-400 leading-relaxed ml-8">
Sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua.<br />
Ut enim ad minim veniam, quis nostrud exercitation.
@ -98,7 +98,7 @@
</div>
<div
class="absolute -bottom-8 right-0 text-6xl text-stone-800 opacity-20 font-bold"
class="absolute -bottom-8 right-0 text-6xl text-ghost-800 opacity-20 font-bold"
>
?
</div>