Added themes to home and rules pages
This commit is contained in:
Giac
@@ -1,108 +1,144 @@
|
||||
<script lang="ts">
|
||||
<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-container">
|
||||
<div class="home-content">
|
||||
<h1 class="title">On the Spectrum!</h1>
|
||||
<p class="subtitle">Well...are ya?</p>
|
||||
<div class="home-wrapper">
|
||||
<div class="home-container">
|
||||
<div class="home-window">
|
||||
<div class="home-title-bar">
|
||||
<span>On the Spectrum</span>
|
||||
</div>
|
||||
|
||||
<div class="home-content">
|
||||
<h1 class="title">Are you on the Spectrum?</h1>
|
||||
<p class="subtitle">A party game about preferences</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="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>
|
||||
<div class="theme-selector-container">
|
||||
<fieldset>
|
||||
<legend>Theme Selector</legend>
|
||||
<ThemeSelector bind:currentTheme />
|
||||
</fieldset>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.home-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
}
|
||||
.home-wrapper {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.home-content {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
.home-container {
|
||||
width: 100%;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 3.5rem;
|
||||
font-weight: bold;
|
||||
color: white;
|
||||
margin-bottom: 1rem;
|
||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
||||
line-height: 1.2;
|
||||
}
|
||||
.home-window {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
.home-content {
|
||||
padding: 40px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 1.5rem;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
margin-bottom: 3rem;
|
||||
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.title {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.subtitle {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 2.5rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
text-decoration: none;
|
||||
background: white;
|
||||
border: none;
|
||||
border-radius: 15px;
|
||||
padding: 30px 50px;
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 200px;
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.tab-button:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
}
|
||||
.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: 3rem;
|
||||
}
|
||||
.tab-icon {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.tab-button {
|
||||
padding: 20px 40px;
|
||||
font-size: 1.2rem;
|
||||
min-width: 150px;
|
||||
}
|
||||
.theme-selector-container {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
.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>
|
||||
Reference in New Issue
Block a user