Updated all the components to have relative (rem) dimensions
Updated a few of the theme files to have the correct layout. If you wanna go thru and update the rest to match win95 and cyberpunk Updated the theme stuff to apply site wide. gotta update the home page and the rules to be same style
This commit is contained in:
@@ -1,111 +1,108 @@
|
||||
<script lang="ts">
|
||||
import { goto } from '$app/navigation';
|
||||
|
||||
function navigate(page: string) {
|
||||
goto(`/${page}`);
|
||||
}
|
||||
</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="tabs">
|
||||
<button class="tab-button" on:click={() => navigate('play')}>
|
||||
<span class="tab-icon">🎮</span>
|
||||
<span>Play</span>
|
||||
</button>
|
||||
<button class="tab-button" on:click={() => navigate('rules')}>
|
||||
<span class="tab-icon">📖</span>
|
||||
<span>Rules</span>
|
||||
</button>
|
||||
</div>
|
||||
</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>
|
||||
</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-container {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.home-content {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
.home-content {
|
||||
text-align: center;
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.title {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
.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);
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
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;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.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: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-icon {
|
||||
font-size: 3rem;
|
||||
}
|
||||
.tab-icon {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.tab-button {
|
||||
padding: 20px 40px;
|
||||
font-size: 1.2rem;
|
||||
min-width: 150px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
.tab-button {
|
||||
padding: 20px 40px;
|
||||
font-size: 1.2rem;
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.tab-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
.tab-icon {
|
||||
font-size: 2rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user