host/paulnicoue
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add form section

Browse source
This commit is contained in:
Paul Nicoué 2023-01-20 18:08:51 +01:00
parent c6705914e0
commit 2a4cf52465
33 changed files with 1031 additions and 311 deletions
Download patch file Download diff file Expand all files Collapse all files

107
app.vue
View file

@ -1,7 +1,6 @@
<template>
<div class="app">
<AppHeader class="app__header" />
<NuxtPage class="app__main" />
<AppFooter class="app__footer" />
</div>
@ -26,101 +25,6 @@
<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
// --------------------------------------------------
@ -130,15 +34,12 @@
min-height: 100svh;
display: grid;
grid:
'app-header' auto
'app-main' 1fr
'app-footer' auto
/ 1fr;
place-items: center;
&__header {
grid-area: app-header;
}
/ 100%;
place-content: start center;
place-items: center center;
row-gap: 4rem;
&__main {
grid-area: app-main;