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

Edit section style

Browse source
This commit is contained in:
Paul Nicoué 2023-02-15 12:26:30 +01:00
parent 12da502e99
commit a0d337708e
6 changed files with 13 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

2
app.vue
View file

@ -39,7 +39,7 @@
'app-footer' auto 'app-footer' auto
/ 100%; / 100%;
place-content: start center; place-content: start center;
place-items: center center; place-items: center;
&__main { &__main {
grid-area: app-main; grid-area: app-main;

16
assets/styles/main.scss
View file

@ -35,8 +35,9 @@
// Dimensions // Dimensions
--section-max-width: Min(100%, 80rem); --large-content-width: Min(100%, 120rem);
--content-max-width: Min(100%, 60rem); --medium-content-width: Min(100%, 80rem);
--small-content-width: Min(100%, 40rem);
--regular-icon-size: 2rem; --regular-icon-size: 2rem;
--regular-icon-wrapper-size: calc(var(--regular-icon-size) + 1rem); --regular-icon-wrapper-size: calc(var(--regular-icon-size) + 1rem);
--small-icon-size: calc(var(--text-font-size) * var(--line-height)); --small-icon-size: calc(var(--text-font-size) * var(--line-height));
@ -290,21 +291,20 @@ form {
// -------------------------------------------------- // --------------------------------------------------
section { section {
max-width: var(--section-max-width); width: var(--medium-content-width);
padding: 4rem 2rem; padding: 4rem 2rem;
@media screen and (min-width: $tablet-media-query) { @media screen and (min-width: $tablet-media-query) {
padding: 4rem; padding: 4rem;
} }
@media screen and (min-width: $desktop-media-query) { @media screen and (min-width: $desktop-media-query) {
padding: 6rem; padding: 6rem;
} }
} }
@mixin hero-section { @mixin large-section {
max-width: unset; width: var(--large-content-width);
width: 100%;
} }
// -------------------------------------------------- // --------------------------------------------------

4
components/AppError.vue
View file

@ -61,10 +61,12 @@
main { main {
width: 100%; width: 100%;
display: flex;
justify-content: center;
} }
.error { .error {
@include hero-section; @include large-section;
display: grid; display: grid;
grid: grid:
'title' minmax(var(--h1-font-height), auto) 'title' minmax(var(--h1-font-height), auto)

1
components/ContactForm.vue
View file

@ -104,7 +104,6 @@
// -------------------------------------------------- // --------------------------------------------------
.contact-form { .contact-form {
max-width: var(--content-max-width);
display: grid; display: grid;
grid: grid:
'name name' auto 'name name' auto

1
components/ContactHeader.vue
View file

@ -41,7 +41,6 @@
// -------------------------------------------------- // --------------------------------------------------
.contact-header { .contact-header {
max-width: var(--content-max-width);
display: grid; display: grid;
place-content: start; place-content: start;
place-items: start; place-items: start;

2
components/HeroSection.vue
View file

@ -54,7 +54,7 @@
// -------------------------------------------------- // --------------------------------------------------
.hero { .hero {
@include hero-section; @include large-section;
height: 100vh; height: 100vh;
height: 100svh; height: 100svh;
display: grid; display: grid;