152 lines
3.6 KiB
Vue
152 lines
3.6 KiB
Vue
<template>
|
|
|
|
<div class="app">
|
|
<AppHeader class="app__header" />
|
|
<NuxtPage class="app__main" />
|
|
<AppFooter class="app__footer" />
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup>
|
|
|
|
// --------------------------------------------------
|
|
// DATA
|
|
// --------------------------------------------------
|
|
|
|
const pageTitleChunk = useRoute().meta.pageTitleChunk;
|
|
|
|
// --------------------------------------------------
|
|
// HEAD
|
|
// --------------------------------------------------
|
|
|
|
useAppHead(pageTitleChunk);
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
|
|
// --------------------------------------------------
|
|
// FONTS AND COLORS
|
|
// --------------------------------------------------
|
|
|
|
body {
|
|
font-family: var(--text-font-family);
|
|
font-size: var(--text-font-size);
|
|
font-weight: var(--regular-font-weight);
|
|
line-height: var(--line-height);
|
|
color: var(--secondary-color);
|
|
background-color: var(--primary-color);
|
|
}
|
|
|
|
h1 {
|
|
font-family: var(--title-font-family);
|
|
font-size: var(--h1-font-size);
|
|
font-weight: var(--medium-font-weight);
|
|
}
|
|
|
|
h2 {
|
|
font-family: var(--title-font-family);
|
|
font-size: var(--h2-font-size);
|
|
margin: 0 0 4rem 0;
|
|
}
|
|
|
|
h3 {
|
|
font-family: var(--text-font-family);
|
|
font-size: var(--h3-font-size);
|
|
margin: 2rem 0 1rem 0;
|
|
}
|
|
|
|
strong {
|
|
font-weight: var(--bold-font-weight);
|
|
}
|
|
|
|
em {
|
|
font-style: italic;
|
|
}
|
|
|
|
// --------------------------------------------------
|
|
// LINK STYLE
|
|
// --------------------------------------------------
|
|
|
|
a {
|
|
color: var(--secondary-color);
|
|
text-decoration: underline var(--accent-color);
|
|
border-radius: 2px;
|
|
transition: color 200ms ease-in-out;
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
color: var(--accent-color);
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 1px dashed var(--accent-color);
|
|
outline-offset: 2px;
|
|
animation: expand-outline 200ms ease-in-out;
|
|
}
|
|
}
|
|
|
|
// --------------------------------------------------
|
|
// BUTTON STYLE
|
|
// --------------------------------------------------
|
|
|
|
button {
|
|
padding: 1rem 1.5rem;
|
|
color: var(--primary-color);
|
|
background-image: var(--button-gradient);
|
|
background-size: 100%;
|
|
background-position: right center;
|
|
border: none;
|
|
border-radius: 40px;
|
|
cursor: pointer;
|
|
font-family: var(--text-font-family);
|
|
font-size: var(--text-font-size);
|
|
font-weight: var(--semi-bold-font-weight);
|
|
line-height: var(--line-height);
|
|
text-align: center;
|
|
transition: background-size 200ms ease-in-out;
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&:active {
|
|
background-size: 300%;
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: 1px dashed var(--accent-color);
|
|
outline-offset: 4px;
|
|
animation: expand-outline 200ms ease-in-out;
|
|
}
|
|
}
|
|
|
|
// --------------------------------------------------
|
|
// LAYOUT
|
|
// --------------------------------------------------
|
|
|
|
.app {
|
|
min-height: 100vh;
|
|
min-height: 100svh;
|
|
display: grid;
|
|
grid:
|
|
'app-header' auto
|
|
'app-main' 1fr
|
|
'app-footer' auto
|
|
/ 1fr;
|
|
place-items: center;
|
|
|
|
&__header {
|
|
grid-area: app-header;
|
|
}
|
|
|
|
&__main {
|
|
grid-area: app-main;
|
|
}
|
|
|
|
&__footer {
|
|
grid-area: app-footer;
|
|
}
|
|
}
|
|
|
|
</style>
|