144 lines
2.6 KiB
Svelte
144 lines
2.6 KiB
Svelte
<script>
|
|
import { getContext } from 'svelte';
|
|
import ThemeSelector from '$lib/components/ThemeSelector.svelte';
|
|
|
|
const themeStore = getContext('theme');
|
|
let currentTheme = $themeStore;
|
|
|
|
$: themeStore.set(currentTheme);
|
|
</script>
|
|
|
|
<div class="home-wrapper">
|
|
<div class="home-container">
|
|
<div class="home-window">
|
|
<div class="home-title-bar">
|
|
<span>A Sludge & Friends game</span>
|
|
</div>
|
|
|
|
<div class="home-content">
|
|
<h1 class="title">On the Spectrum!</h1>
|
|
<p class="subtitle">Well.. are ya?</p>
|
|
|
|
<div class="tabs">
|
|
<a href="/play" class="tab-button">
|
|
<span class="tab-icon">🎮</span>
|
|
<span>Play</span>
|
|
</a>
|
|
<a href="/rules" class="tab-button">
|
|
<span class="tab-icon">📖</span>
|
|
<span>Rules</span>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="theme-selector-container">
|
|
<fieldset>
|
|
<legend>Theme Selector</legend>
|
|
<ThemeSelector bind:currentTheme />
|
|
</fieldset>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.home-wrapper {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
}
|
|
|
|
.home-container {
|
|
width: 100%;
|
|
max-width: 700px;
|
|
}
|
|
|
|
.home-window {
|
|
width: 100%;
|
|
}
|
|
|
|
.home-content {
|
|
padding: 40px;
|
|
text-align: center;
|
|
}
|
|
|
|
.title {
|
|
font-size: 3rem;
|
|
font-weight: bold;
|
|
margin-bottom: 1rem;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.3rem;
|
|
margin-bottom: 2.5rem;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
.tabs {
|
|
display: flex;
|
|
gap: 20px;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 2.5rem;
|
|
}
|
|
|
|
.tab-button {
|
|
border: none;
|
|
border-radius: 10px;
|
|
padding: 25px 40px;
|
|
font-size: 1.3rem;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 10px;
|
|
min-width: 180px;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tab-icon {
|
|
font-size: 2.5rem;
|
|
}
|
|
|
|
.theme-selector-container {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.theme-selector-container fieldset {
|
|
padding: 20px;
|
|
}
|
|
|
|
.theme-selector-container legend {
|
|
font-weight: bold;
|
|
padding: 0 10px;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.title {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.tab-button {
|
|
padding: 20px 30px;
|
|
font-size: 1.1rem;
|
|
min-width: 150px;
|
|
}
|
|
|
|
.tab-icon {
|
|
font-size: 2rem;
|
|
}
|
|
|
|
.home-content {
|
|
padding: 30px 20px;
|
|
}
|
|
}
|
|
</style> |