Add: Welcome screen
This commit is contained in:
Esa Kataja
@@ -0,0 +1,35 @@
|
||||
$drop-shadow: 3px 3px 0.5rem hsl(212 74% 20% / 50%);
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
background-image: linear-gradient(to bottom, hsl(12, 90%, 40%), hsl(0, 90%, 35%));
|
||||
color: hsl(0, 74%, 90%);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 1rem;
|
||||
text-decoration: none;
|
||||
border-radius: 1rem;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: $drop-shadow;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
color: hsl(212, 74%, 90%);
|
||||
// background-color: hsl(212, 74%, 50%);
|
||||
background-image: linear-gradient(to bottom, hsl(212, 74%, 55%), hsl(212, 74%, 45%));
|
||||
border: 1px solid hsl(212, 74%, 75%);
|
||||
&:hover {
|
||||
background-color: hsl(212, 74%, 40%);
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
@@ -0,0 +1,66 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="216.92949mm"
|
||||
height="87.615997mm"
|
||||
viewBox="0 0 819.891 331.14709"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
|
||||
sodipodi:docname="snow.svg"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="px"
|
||||
inkscape:zoom="5.1125541"
|
||||
inkscape:cx="403.02752"
|
||||
inkscape:cy="262.58891"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1368"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="layer1" />
|
||||
<defs
|
||||
id="defs1">
|
||||
<filter
|
||||
inkscape:collect="always"
|
||||
style="color-interpolation-filters:sRGB"
|
||||
id="filter5"
|
||||
x="-0.0034301891"
|
||||
y="-0.020573195"
|
||||
width="1.0068604"
|
||||
height="1.0411464">
|
||||
<feGaussianBlur
|
||||
inkscape:collect="always"
|
||||
stdDeviation="1.1718249"
|
||||
id="feGaussianBlur5" />
|
||||
</filter>
|
||||
</defs>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(-27.660449,-210.22809)">
|
||||
<path
|
||||
id="rect1"
|
||||
style="opacity:0.972438;fill:#f2f2f2;fill-opacity:1;stroke:none;stroke-width:3.78;stroke-dasharray:none"
|
||||
d="m 27.660645,210.22809 v 261.81837 a 100.13494,102.34787 0 0 0 40.45117,8.72265 100.13494,102.34787 0 0 0 80.177735,-41.03515 229.03793,229.03793 0 0 0 102.94335,24.4375 229.03793,229.03793 0 0 0 89.42383,-18.17774 178.18272,178.18272 0 0 0 147.63867,78.42188 178.18272,178.18272 0 0 0 149.94336,-81.92188 97.596779,97.596779 0 0 0 31.57032,5.24805 97.596779,97.596779 0 0 0 82.81054,-45.94531 178.18272,178.18272 0 0 0 65.0625,12.30273 178.18272,178.18272 0 0 0 29.86914,-2.52148 V 210.22809 Z" />
|
||||
<path
|
||||
id="path5"
|
||||
style="opacity:0.972438;mix-blend-mode:normal;fill:#c4d3dd;fill-opacity:1;stroke:none;stroke-width:3.78;stroke-dasharray:none;filter:url(#filter5)"
|
||||
d="m 752.61961,387.71442 a 97.596779,97.596779 0 0 1 -82.81054,45.94531 97.596779,97.596779 0 0 1 -31.57032,-5.24805 178.18272,178.18272 0 0 1 -149.94336,81.92188 178.18272,178.18272 0 0 1 -147.63867,-78.42188 229.03793,229.03793 0 0 1 -89.42383,18.17774 229.03793,229.03793 0 0 1 -102.94336,-24.4375 100.13494,102.34787 0 0 1 -80.17773,41.03515 100.13494,102.34787 0 0 1 -40.451172,-8.72265 v 14.08203 a 100.13494,102.34787 0 0 0 40.451172,8.72266 100.13494,102.34787 0 0 0 80.17773,-41.03516 229.03793,229.03793 0 0 0 102.94336,24.4375 229.03793,229.03793 0 0 0 89.42383,-18.17773 178.18272,178.18272 0 0 0 147.63867,78.42187 178.18272,178.18272 0 0 0 149.94336,-81.92187 97.596779,97.596779 0 0 0 31.57032,5.24804 97.596779,97.596779 0 0 0 82.81054,-45.94531 178.18272,178.18272 0 0 0 65.0625,12.30273 178.18272,178.18272 0 0 0 29.86914,-2.52148 v -14.08203 a 178.18272,178.18272 0 0 1 -29.86914,2.52148 178.18272,178.18272 0 0 1 -65.0625,-12.30273 z"
|
||||
transform="matrix(0.99318683,0,0,0.99318683,2.9814967,6.6224044)" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
+97
-1
@@ -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>©</sup> {{ new Date().getFullYear() }} Kessinen</footer>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
Reference in New Issue
Block a user