From 27dbca54f359e69c6f5b13a92fae935ead9cfcfe Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Paul=20Nicou=C3=A9?= Date: Mon, 13 Feb 2023 17:23:36 +0100 Subject: [PATCH] Add services section --- app.vue | 1 - assets/styles/main.scss | 48 ++++++++++-- components/AppError.vue | 3 +- components/ContactForm.vue | 2 +- components/ContactHeader.vue | 6 +- components/ContactSection.vue | 3 +- components/HeroArrowDown.vue | 6 +- components/HeroSection.vue | 5 +- components/ServicesSection.vue | 132 +++++++++++++++++++++++++++++++++ pages/index.vue | 16 ++-- 10 files changed, 189 insertions(+), 33 deletions(-) create mode 100644 components/ServicesSection.vue diff --git a/app.vue b/app.vue index 7f4916e..e15719a 100644 --- a/app.vue +++ b/app.vue @@ -40,7 +40,6 @@ / 100%; place-content: start center; place-items: center center; - row-gap: 4rem; &__main { grid-area: app-main; diff --git a/assets/styles/main.scss b/assets/styles/main.scss index b34ec33..22af9af 100644 --- a/assets/styles/main.scss +++ b/assets/styles/main.scss @@ -18,7 +18,7 @@ --black-font-weight: 900; --h1-font-size: 2rem; --h2-font-size: 2rem; - --h3-font-size: 1.8rem; + --h3-font-size: 1.4rem; --button-font-size: 1.4rem; --text-font-size: 1.2rem; --caption-font-size: 1.1rem; @@ -35,9 +35,10 @@ // Dimensions - --regular-content-max-width: Min(100%, 80rem); - --small-content-max-width: Min(100%, 60rem); + --section-max-width: Min(100%, 80rem); + --content-max-width: Min(100%, 60rem); --regular-icon-size: 2rem; + --regular-icon-wrapper-size: calc(var(--regular-icon-size) + 1rem); --small-icon-size: calc(var(--text-font-size) * var(--line-height)); --button-gap: 0.5rem; @@ -45,18 +46,18 @@ // Colors --eerie-black: #212121; - --sonic-silver: #7a7a7a; - --silver: #C2C2C2; + --gray: #7A7A7A; + --white-smoke: #F5F5F5; --emerald: #72C080; --granny-smith-apple: #A3F3B0; --middle-green: #428F53; --rajah: #F9B262; --primary-color: var(--eerie-black); - --primary-color-light: var(--sonic-silver); + --primary-color-light: var(--gray); --primary-color-dark: black; --secondary-color: white; - --secondary-color-dark: var(--silver); + --secondary-color-dark: var(--white-smoke); --accent-color: var(--emerald); --accent-color-light: var(--granny-smith-apple); --accent-color-dark: var(--middle-green); @@ -106,8 +107,9 @@ h2 { } h3 { - font-family: var(--text-font-family); + font-family: var(--title-font-family); font-size: var(--h3-font-size); + font-weight: var(--medium-font-weight); } p { @@ -145,6 +147,14 @@ a { } } +// -------------------------------------------------- +// LIST STYLE +// -------------------------------------------------- + +ul { + list-style: disc outside; +} + // -------------------------------------------------- // BUTTON STYLE // -------------------------------------------------- @@ -276,6 +286,28 @@ form { } } +// -------------------------------------------------- +// SECTION STYLE +// -------------------------------------------------- + +section { + max-width: var(--section-max-width); + padding: 4rem 2rem; + + @media screen and (min-width: $tablet-media-query) { + padding: 4rem; + } + + @media screen and (min-width: $desktop-media-query) { + padding: 6rem; + } +} + +@mixin hero-section { + max-width: unset; + width: 100%; +} + // -------------------------------------------------- // SMOOTH SCROLLING // -------------------------------------------------- diff --git a/components/AppError.vue b/components/AppError.vue index 1b9666e..dce585a 100644 --- a/components/AppError.vue +++ b/components/AppError.vue @@ -61,11 +61,10 @@ main { width: 100%; - padding: 0 2rem; } .error { - width: 100%; + @include hero-section; display: grid; grid: 'title' minmax(var(--h1-font-height), auto) diff --git a/components/ContactForm.vue b/components/ContactForm.vue index 5752f55..4b33355 100644 --- a/components/ContactForm.vue +++ b/components/ContactForm.vue @@ -104,7 +104,7 @@ // -------------------------------------------------- .contact-form { - max-width: var(--small-content-max-width); + max-width: var(--content-max-width); display: grid; grid: 'name name' auto diff --git a/components/ContactHeader.vue b/components/ContactHeader.vue index a9971af..7dd9401 100644 --- a/components/ContactHeader.vue +++ b/components/ContactHeader.vue @@ -1,6 +1,6 @@ @@ -44,7 +44,7 @@ // -------------------------------------------------- .contact-header { - max-width: var(--small-content-max-width); + max-width: var(--content-max-width); display: grid; place-content: start; place-items: start; diff --git a/components/ContactSection.vue b/components/ContactSection.vue index 805187b..3a4fbbb 100644 --- a/components/ContactSection.vue +++ b/components/ContactSection.vue @@ -1,6 +1,6 @@