137 lines
2.1 KiB
Vue
137 lines
2.1 KiB
Vue
<script setup="setup">
|
|
|
|
const { $i18n } = useNuxtApp()
|
|
|
|
const nastavitveStore = useNastavitveStore()
|
|
|
|
const { izbraniJezik } = storeToRefs(nastavitveStore)
|
|
|
|
// Nastavi locale ko se jezik spremeni
|
|
watch(izbraniJezik, jezik => {
|
|
$i18n.setLocale(jezik)
|
|
})
|
|
|
|
// V store nastavi prvotno stanje
|
|
nastavitveStore.izberiJezik($i18n.locale.value)
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<section class="yufu">
|
|
<Glava />
|
|
<div class="vsebina">
|
|
<NuxtPage />
|
|
</div>
|
|
<footer>
|
|
<Noga />
|
|
</footer>
|
|
</section>
|
|
</template>
|
|
|
|
<style>
|
|
|
|
:root {
|
|
--siva: #D9D9D9;
|
|
--bela: #fff;
|
|
--crna: #000;
|
|
--rdeca: #f00;
|
|
--roza: #ED008C;
|
|
}
|
|
|
|
body {
|
|
font-family: Inter;
|
|
margin: 0;
|
|
background: var(--siva);
|
|
}
|
|
|
|
a {
|
|
color: var(--crna);
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
font-size: 5rem;
|
|
margin: .2rem 0 1rem 0;
|
|
}
|
|
|
|
h2 {
|
|
text-transform: uppercase;
|
|
margin-top: 0;
|
|
}
|
|
|
|
.vsebina {
|
|
position: relative;
|
|
z-index: 50;
|
|
padding: 0 32px;
|
|
}
|
|
|
|
a.gumb {
|
|
text-decoration: underline;
|
|
font-size: 3rem;
|
|
position: relative;
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: center;
|
|
}
|
|
|
|
.stran {
|
|
position: relative;
|
|
background: var(--bela);
|
|
margin: 2rem;
|
|
border-radius: 3rem;
|
|
padding: 2rem;
|
|
}
|
|
|
|
form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
input[type=submit] { margin-top: 1rem; }
|
|
|
|
details > summary {
|
|
list-style: none;
|
|
}
|
|
|
|
.gumb {
|
|
font-family: Trailers;
|
|
font-size: 3rem;
|
|
cursor: pointer;
|
|
border: none;
|
|
background: none;
|
|
text-decoration: underline;
|
|
width: fit-content;
|
|
z-index: 100;
|
|
}
|
|
|
|
footer {
|
|
position: relative;
|
|
z-index: 100;
|
|
}
|
|
|
|
|
|
@media screen and (max-width: 420px) {
|
|
.vsebina {
|
|
padding-right: 0;
|
|
padding-left: 0;
|
|
}
|
|
.stran {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.okvir {
|
|
position: relative;
|
|
background: var(--bela);
|
|
margin: 2rem;
|
|
border-radius: 24px;
|
|
padding: 2rem;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
box-sizing: border-box;
|
|
max-width: 1216px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
</style>
|