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

Add services section

Browse source
This commit is contained in:
Paul Nicoué 2023-02-13 17:23:36 +01:00
parent fd3f7c1838
commit 27dbca54f3
10 changed files with 189 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

48
assets/styles/main.scss
View file

@ -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
// --------------------------------------------------