Add: Welcome screen

2025-11-13 23:05:26 +02:00
parent fea5a3d3f6
commit 45f1710917
4 changed files with 198 additions and 1 deletions
@@ -1,3 +1,99 @@
 <template>
+<div class="index-container">
+    <header>
+        <img src="@/assets/img/snow.svg" alt="">
+        <h1>Paska Joululeffa 2025</h1>
+    </header>
+    <main>
+        <img src="@/assets/img/reindeerpoop.webp" alt="">
+        <div class="warning">
+            <div>
+                <Icon name="mdi:warning" size="1.5rem"/>
+                <h2>Varoitus!</h2>
+                <Icon name="mdi:warning" size="1.5rem" />
+            </div>
+            <p>Täällä on vain tyhmää läppää. Herkkänahkaisille ei suositella.</p>
+        </div>
+        <NuxtLink class="btn btn-primary" to="/info">Sisään</NuxtLink>
+    </main>
+    <footer><sup>&copy;</sup> {{ new Date().getFullYear() }} Kessinen</footer>
+</div>
+</template>

-</template>
+<style scoped lang="scss">
+
+* {
+    font-family: DynaPuff, sans-serif;
+}
+
+.index-container {
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    width: 100%;
+    min-height: 100vh;
+    
+
+}
+
+header {
+    text-align: center;
+    display: grid;
+    grid-template-areas: "stack";
+    
+    > * {
+        grid-area: stack;
+        max-width: 100%;
+    }
+
+    img {
+        width: 100%;
+        object-fit: cover;
+    }
+    h1 {
+        padding: 1rem;
+        color: hsl(0 74% 5%);
+    }
+}
+
+main {
+    text-align: center;
+    padding: 1rem;
+    display: grid;
+    justify-content: center;
+    place-items: center;
+    
+    img {
+        max-width: 80%;
+    }
+
+    .warning {
+        .iconify {
+            color: hsl(44, 100%, 65%);
+        }
+    }
+
+    > div {
+        font-size: 0.9rem;
+        line-height: 2;
+        padding: 1rem;
+        max-width: 80%;
+        margin: auto;
+        background-color: hsl(212 74% 50% / 20%);
+        color: hsl(212 74% 90%);
+        border-radius: 1rem;
+        > div {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 1rem;
+        }
+    }
+}
+
+footer {
+    text-align: center;
+    padding: 1rem;
+    background-image: linear-gradient(to bottom, hsl(212, 74%, 50%), hsl(212, 90%, 35%));
+    font-size: 0.8rem;
+}
+</style>