From 6efdb6d77789f9434317cbd756d6d4747fd52a63 Mon Sep 17 00:00:00 2001 From: cofrizot Date: Wed, 31 Jan 2024 16:04:38 +0100 Subject: [PATCH] Add the responsive to the home page --- .../components/footer/footer.component.html | 95 +-- .../components/footer/footer.component.scss | 88 +-- .../components/header/header.component.scss | 574 +++++++------- .../landing-page/landing-page.component.html | 699 +++++++++++------- .../landing-page/landing-page.component.scss | 214 +++++- src/assets/i18n/fr.json | 2 +- src/styles.scss | 2 +- 7 files changed, 933 insertions(+), 741 deletions(-) diff --git a/src/app/components/footer/footer.component.html b/src/app/components/footer/footer.component.html index 579b62e..c8b304d 100644 --- a/src/app/components/footer/footer.component.html +++ b/src/app/components/footer/footer.component.html @@ -5,92 +5,11 @@
- -
- -
Sandkasten
-
{{ 'FooterPage.Rights' | translate }}
-
- - -
-
- {{ 'FooterPage.About' | translate }} -
- - {{ 'FooterPage.Story' | translate }} - {{ 'FooterPage.Contact' | translate }} -
-
- -
- {{ 'FooterPage.Legal' | translate }} -
- {{ 'FooterPage.Terms' | translate }} - {{ 'FooterPage.Privacy' | translate }} -
-
-
- - -
- - - - - - - - - - - -
+ Copyright © 2024 Sandcasten. All rights reserved. + + Mentions légales - Politique de confidentialité - + Conditions générales d'utilisation +
diff --git a/src/app/components/footer/footer.component.scss b/src/app/components/footer/footer.component.scss index 303783c..5213b63 100644 --- a/src/app/components/footer/footer.component.scss +++ b/src/app/components/footer/footer.component.scss @@ -1,84 +1,24 @@ +@import '../../../styles'; + .footer { - background-color: #494b92; - padding: 0.5rem 1rem; display: flex; - flex-direction: row; - justify-content: space-between; -} - -/* Logo and copyrights*/ -.rights { - display: grid; - grid: 'logo title' auto 'copyright copyright' / auto 1fr; + flex-direction: column; + align-items: center; gap: 0.5rem; - color: #ffffff; + padding: 0 4rem 4rem; + text-align: center; - .sandkasten-logo { - grid-area: logo; - width: 4rem; - height: auto; - aspect-ratio: 1; + &--rights { + font-size: 0.875rem; + color: $color-gray; } - .title { - grid-area: title; - display: flex; - align-items: flex-end; - - font-family: 'Podkova', sans-serif; - font-size: 1.25rem; - font-weight: 600; - text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); - } - - .copyright { - grid-area: copyright; - font-size: 1rem; - } -} - -/*Navigation*/ -.navigation { - display: flex; - flex-direction: row; - gap: 3rem; - color: #818181; - - .about, - .legals { - display: flex; - flex-direction: column; - gap: 0.5rem; + &__links { + font-size: 0.75rem; + color: $color-gray; - .title { - color: #ffffff; - text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25); + a { + cursor: pointer; } - - .links { - display: flex; - flex-direction: column; - gap: 0.25rem; - - > a { - color: #818181; - text-decoration: none; - transition: color 0.3s ease; - } - - :hover { - color: #ffffff; - } - } - } -} - -.socials { - .image { - grid-area: logo; - width: 3rem; - height: auto; - aspect-ratio: 1; - padding-right: 10px; } } diff --git a/src/app/components/header/header.component.scss b/src/app/components/header/header.component.scss index c49e2aa..e405958 100644 --- a/src/app/components/header/header.component.scss +++ b/src/app/components/header/header.component.scss @@ -39,6 +39,7 @@ $color-stars: #fcfcfc; transform: rotateZ($deg); background-color: $color-cloud-inner; } + //endregion $theme-transition: all 0.3s ease-in-out; @@ -59,341 +60,352 @@ $theme-transition: all 0.3s ease-in-out; &__logo { &--container { - display: flex; - flex-direction: row; - gap: 2rem; - } - - &--sandkasten { - width: 4rem; - height: auto; - aspect-ratio: 1; - } - } - } - - .right_part, - .mobile_menu { - // Dark mode button - .wrapper { - text-align: center; - - .toggle { - position: relative; - display: inline-block; - width: 100px; - padding: 4px; - border-radius: 40px; - } - - &:before, - &:after { - content: ''; - display: table; - } - - &:after { - clear: both; - } - - .toggle-bg { - position: absolute; - top: -4px; - left: -4px; - width: 100%; - height: 100%; - background-color: $color-parent-inner; - border-radius: 40px; - border: 4px solid $color-parent-outer; - transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94); - } - - .toggle-input { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - border: 1px solid red; - border-radius: 40px; - z-index: 2; - opacity: 0; - - &:checked ~ .toggle-switch { - margin-left: 0; - border-color: $color-moon-outer; - background-color: $color-moon-inner; + &--container { + display: flex; + flex-direction: row; + gap: 2rem; } - &:checked ~ .toggle-bg { - background-color: #484848; - border-color: #202020; - } - - &:checked ~ .toggle-switch .toggle-switch-figure { - margin-left: 40px; - opacity: 0; - transform: scale(0.1); - } - - &:checked ~ .toggle-switch .toggle-switch-figureAlt { - transform: scale(1); + &--sandkasten { + &--sandkasten { + width: 4rem; + height: auto; + aspect-ratio: 1; + } } } - .toggle-switch { - position: relative; - width: 30px; - height: 30px; - margin-left: 60px; - background-color: #f5eb42; - border: 4px solid $color-sun; - border-radius: 50%; - transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94); - - .toggle-switch-figure { - position: absolute; - bottom: -14px; - left: -50px; - display: block; - width: 80px; - height: 30px; - border: 8px solid $color-cloud-outer; - border-radius: 20px; - background-color: #fff; - transform: scale(0.4); - transition: all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94); - &:after { - @include cloudBubble(-65px, -42px, 15px, 15px, 70deg); - } - &:before { - @include cloudBubble(-25px, -10px, 30px, 30px, 30deg); + .right_part, + .mobile_menu { + // Dark mode button + .wrapper { + text-align: center; + display: flex; + align-items: center; + + .toggle { + position: relative; + display: inline-block; + width: 100px; + padding: 4px; + border-radius: 40px; + scale: 0.75; } - } - .toggle-switch-figureAlt { - @include crater(5px, 2px, 2px); + &:before, + &:after { + content: ''; + display: table; + } - box-shadow: - 42px -7px 0 -3px $color-stars, - 75px -10px 0 -3px $color-stars, - 54px 4px 0 -4px $color-stars, - 83px 7px 0 -2px $color-stars, - 63px 18px 0 -4px $color-stars, - 44px 23px 0 -2px $color-stars, - 78px 21px 0 -3px $color-stars; + &:after { + clear: both; + } - transition: all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94); - transform: scale(0); + .toggle-bg { + position: absolute; + top: -4px; + left: -4px; + width: 100%; + height: 100%; + background-color: $color-parent-inner; + border-radius: 40px; + border: 4px solid $color-parent-outer; + transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94); + } - &:before { - @include crater(-6px, 12px, 7px); + .toggle-input { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + border: 1px solid red; + border-radius: 40px; + z-index: 2; + opacity: 0; + + &:checked ~ .toggle-switch { + margin-left: 0; + border-color: $color-moon-outer; + background-color: $color-moon-inner; + } + + &:checked ~ .toggle-bg { + background-color: #484848; + border-color: #202020; + } + + &:checked ~ .toggle-switch .toggle-switch-figure { + margin-left: 40px; + opacity: 0; + transform: scale(0.1); + } + + &:checked ~ .toggle-switch .toggle-switch-figureAlt { + transform: scale(1); + } } - &:after { - @include crater(10px, 6px, 2px); + .toggle-switch { + position: relative; + width: 30px; + height: 30px; + margin-left: 60px; + background-color: #f5eb42; + border: 4px solid $color-sun; + border-radius: 50%; + transition: all 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94); + + .toggle-switch-figure { + position: absolute; + bottom: -14px; + left: -50px; + display: block; + width: 80px; + height: 30px; + border: 8px solid $color-cloud-outer; + border-radius: 20px; + background-color: #fff; + transform: scale(0.4); + transition: all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94); + + &:after { + @include cloudBubble(-65px, -42px, 15px, 15px, 70deg); + } + + &:before { + @include cloudBubble(-25px, -10px, 30px, 30px, 30deg); + } + } + + .toggle-switch-figureAlt { + @include crater(5px, 2px, 2px); + + box-shadow: + 42px -7px 0 -3px $color-stars, + 75px -10px 0 -3px $color-stars, + 54px 4px 0 -4px $color-stars, + 83px 7px 0 -2px $color-stars, + 63px 18px 0 -4px $color-stars, + 44px 23px 0 -2px $color-stars, + 78px 21px 0 -3px $color-stars; + + transition: all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94); + transform: scale(0); + + &:before { + @include crater(-6px, 12px, 7px); + } + + &:after { + @include crater(10px, 6px, 2px); + } + } } } } - } - } - .right_part { - display: flex; - flex-direction: row; - align-items: center; - gap: 2rem; + .right_part { + display: flex; + flex-direction: row; + align-items: center; + gap: 2rem; - &--menu { - display: flex; - flex-direction: row; - flex-wrap: wrap; - gap: 1rem; + &--menu { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 1rem; - a { - color: $color-black; - text-decoration: none; - white-space: nowrap; + a { + color: $color-black; + text-decoration: none; + white-space: nowrap; - transition: $theme-transition; - } - } + transition: $theme-transition; + } + } - &--menu_mobile { - cursor: pointer; - display: none; - z-index: 100; - } + &--menu_mobile { + cursor: pointer; + display: none; + z-index: 100; + } - &--bottom { - display: flex; - flex-direction: row; - gap: 2rem; - align-items: center; - } + &--bottom { + display: flex; + flex-direction: row; + gap: 2rem; + align-items: center; + } - &--toggles { - display: flex; - flex-direction: row; - gap: 2rem; - align-items: center; - } + &--toggles { + display: flex; + flex-direction: row; + gap: 2rem; + align-items: center; + } - &__lang { - height: fit-content; - } + &__lang { + height: fit-content; + } - &__connexion { - display: flex; - flex-direction: row; - gap: 1rem; + &__connexion { + display: flex; + flex-direction: row; + gap: 1rem; - &--login { - cursor: pointer; - display: flex; - align-items: center; - gap: 0.5rem; + &--login { + cursor: pointer; + display: flex; + align-items: center; + gap: 0.5rem; - color: $color-purple; - white-space: nowrap; - } + color: $color-purple; + white-space: nowrap; + } - &--register { - cursor: pointer; - border: 1px solid $color-black; - border-radius: 10px; - padding: 0.75rem 2rem; - white-space: nowrap; + &--register { + cursor: pointer; + border: 1px solid $color-black; + border-radius: 10px; + padding: 0.75rem 2rem; + white-space: nowrap; - transition: border 0.3s ease-in-out; + transition: border 0.3s ease-in-out; + } + } } - } - } - .mobile_menu { - position: absolute; - top: 0; - right: 0; - width: 50%; - height: 100vh; - background: $color-white; - transform: translateX(100%); - z-index: 99; - - transition: - transform 0.3s ease-in-out, - box-shadow 0.3s ease-in-out, - background 0.3s ease-in-out; - - &.opened { - transform: translateX(0); - box-shadow: $color-black 0 0 5px 0; - } + .mobile_menu { + position: absolute; + top: 0; + right: 0; + width: 50%; + height: 100vh; + background: $color-white; + transform: translateX(100%); + z-index: 99; + + transition: + transform 0.3s ease-in-out, + box-shadow 0.3s ease-in-out, + background 0.3s ease-in-out; + + &.opened { + transform: translateX(0); + box-shadow: $color-black 0 0 5px 0; + } - &--wrapper { - //padding-top: 6rem; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: 3rem; + &--wrapper { + //padding-top: 6rem; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + gap: 3rem; - height: 100%; - } + height: 100%; + } - &--toggles { - display: flex; - flex-direction: column; - align-items: center; - gap: 2rem; - } + &--toggles { + display: flex; + flex-direction: column; + align-items: center; + gap: 2rem; + } - &--menu { - display: flex; - flex-direction: column; - align-items: center; - gap: 1rem; + &--menu { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; - a { - color: $color-black; - text-decoration: none; - white-space: nowrap; + a { + color: $color-black; + text-decoration: none; + white-space: nowrap; - transition: $theme-transition; + transition: $theme-transition; + } + } + + &__connexion { + display: flex; + flex-direction: column; + align-items: center; + gap: 1rem; + } } } - &__connexion { - display: flex; - flex-direction: column; - align-items: center; - gap: 1rem; - } - } -} + .dark-theme { + .right_part { + &--menu { + a { + color: $color-white; + } + } -.dark-theme { - .right_part { - &--menu { - a { - color: $color-white; - } - } - &__connexion { - &--register { - border-color: $color-white; + &__connexion { + &--register { + border-color: $color-white; + } + } } - } - } - .mobile_menu { - background: $color-light-black; + .mobile_menu { + background: $color-light-black; - &.opened { - box-shadow: $color-white 0 0 5px 0; - } + &.opened { + box-shadow: $color-white 0 0 5px 0; + } - &--menu { - a { - color: $color-white; - } - } - &__connexion { - &--register { - border-color: $color-white; + &--menu { + a { + color: $color-white; + } + } + + &__connexion { + &--register { + border-color: $color-white; + } + } } } - } -} -@media (max-width: 1024px) { - .header { - .right_part { - flex-direction: column-reverse; + @media (max-width: 1024px) { + .header { + .right_part { + flex-direction: column-reverse; - &--menu_mobile { - display: flex; - } + &--menu_mobile { + display: flex; + } - &--menu { - display: none; - } + &--menu { + display: none; + } - &__connexion { - display: none; - } + &__connexion { + display: none; + } - &--toggles { - display: none; + &--toggles { + display: none; + } + } } } - } -} -@media (max-width: 767px) { - .header { - .mobile_menu { - width: 75%; + @media (max-width: 767px) { + .header { + .mobile_menu { + width: 75%; + } + } } } } diff --git a/src/app/components/landing-page/landing-page.component.html b/src/app/components/landing-page/landing-page.component.html index 4685efb..c1f1f91 100644 --- a/src/app/components/landing-page/landing-page.component.html +++ b/src/app/components/landing-page/landing-page.component.html @@ -1,86 +1,120 @@
-
- -
-
-

{{ 'LandingPage.Welcome' | translate }}

- {{ 'LandingPage.Description' | translate }} -
-
- editor icon - - Editeur de code -
-
- editor icon - - Dépôt Git -
-
-
-
- landing page -
-
- +
+ +
+
+

+ {{ 'LandingPage.Welcome' | translate }} +

+ {{ + 'LandingPage.Description' | translate + }} +
+ + +
+
+
+ landing page +
+
+ - -
-
-

Everything you need to start a website

- Astro comes batteries included. It takes the - best parts of state-of-the-art tools and adds its own innovations. -
-
- -
-
- - data-source-solid - - - - - - - - - -
-
Sécurisé
-
Pour garantir la solidité de notre outil - nous exécutons votre code sur un environnement fermé et limitant les requêtes trop coûteuse. Ce - procédé nous protège ainsi des tentatives de mauvaise utilisation du système. -
-
- -
-
- - - - - - -
-
Import / Export
-
Vous pouvez importez des fichiers et - l'éditeur va reconnaître le langage à partir de son extension. Vous pouvez aussi exporter le - code que vous avez fait en seulement un clic. -
-
- -
-
- - - +
+

+ Everything you need to start a website +

+ Astro comes batteries included. It takes the best parts of + state-of-the-art tools and adds its own innovations. +
+
+ +
+
+ + data-source-solid + + + + + + + + + +
+
Sécurisé
+
+ Pour garantir la solidité de notre outil nous exécutons votre code + sur un environnement fermé et limitant les requêtes trop coûteuse. + Ce procédé nous protège ainsi des tentatives de mauvaise utilisation + du système. +
+
+ +
+
+ + + + + + +
+
+ Import / Export +
+
+ Vous pouvez importez des fichiers et l'éditeur va reconnaître le + langage à partir de son extension. Vous pouvez aussi exporter le + code que vous avez fait en seulement un clic. +
+
+ +
+
+ + + - - -
-
Options
-
Vous disposez de nombreuses options vous - permettant de personnalisé et d'optimiser votre utilisation de Sandkasten. Ces options sont - directement disponible depuis l'éditeur. -
-
- -
-
- - language-solid - - - Options
+
+ Vous disposez de nombreuses options vous permettant de personnalisé + et d'optimiser votre utilisation de Sandkasten. Ces options sont + directement disponible depuis l'éditeur. +
+
+ +
+
+ + language-solid + + - - - -
-
Multi-language
-
De nombreux langages de codes sont - reconnus dans Sandkasten. Lorsque vous taper du code ou en importer un fichier l'éditeur - reconnaît automatiquement le langage. Vous pouvez aussi directement le sélectionner dans - l'éditeur. -
-
- -
-
- - - - - - -
-
Lorem ipsum
-
Lorem ipsum dolor sit amet, consectetur - adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad - minim veniam, -
-
- -
-
- - - - - - -
-
Lorem ipsum
-
Lorem ipsum dolor sit amet, consectetur - adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad - minim veniam, -
-
-
-
- + h-6V8h3V6h2v2h3.3l0.1,1c0.1,2.1-0.7,4.2-2.2,5.7C27.1,14.9,27.7,15,28.3,15z" + class="clr-i-solid clr-i-solid-path-2"> + + +
+
+ Multi-language +
+
+ De nombreux langages de codes sont reconnus dans Sandkasten. Lorsque + vous taper du code ou en importer un fichier l'éditeur reconnaît + automatiquement le langage. Vous pouvez aussi directement le + sélectionner dans l'éditeur. +
+
+ +
+
+ + + + + + +
+
Lorem ipsum
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, +
+
+ +
+
+ + + + + + +
+
Lorem ipsum
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, +
+
+
+
+ - -
- Languages disponibles dès maintenant -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + +
+ Languages disponibles dès maintenant +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ -
-
- + +
+
+

+ Empowering the world with Astro. +

+
+ We're a multi-cultural team from around the world! We come from + diverse backgrounds, bringing different personalities, experiences and + skills to the job. This is what makes our team so special. +
+
+
+ +
+
+ Bastien +
+
+
Bastien
+
+ Développeur +
+
+
+ +
+
+ Bastien +
+
+
Clément
+
+ Développeur +
+
+
+ +
+
+ Bastien +
+
+
Colin
+
+ Développeur +
+
+
+ +
+
+ Bastien +
+
+
Hugo
+
+ Développeur +
+
+
+ +
+
+ Bastien +
+
+
Matis
+
+ Développeur +
+
+
+
+
+ - -
-
-

Empowering the world with Astro.

-
We're a multi-cultural team from around the world! We come - from diverse backgrounds, bringing different personalities, experiences and skills to the job. This - is what makes our team so special. -
-
-
- -
-
- Bastien -
-
-
Bastien
-
Développeur
-
-
- -
-
- Bastien -
-
-
Clément
-
Développeur
-
-
- -
-
- Bastien -
-
-
Colin
-
Développeur
-
-
- -
-
- Bastien -
-
-
Hugo
-
Développeur
-
-
- -
-
- Bastien -
-
-
Matis
-
Développeur
-
-
-
-
- + +
+ Rejoinez-nous sur nos réseaux +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+ - -
-

Get started with Astro

-
Lorem ipsum dolor sit amet, consectetur adipiscing - elit, sed do eiusmod tempor incididunt ut labore et dolore -
-
Get Started
-
- -
-
\ No newline at end of file + +
+

Get started with Astro

+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod + tempor incididunt ut labore et dolore +
+ +
+ + + diff --git a/src/app/components/landing-page/landing-page.component.scss b/src/app/components/landing-page/landing-page.component.scss index fbae131..639ada9 100644 --- a/src/app/components/landing-page/landing-page.component.scss +++ b/src/app/components/landing-page/landing-page.component.scss @@ -8,19 +8,21 @@ gap: 2rem; color: $color-black; - transition: color .3s ease-in-out; + transition: color 0.3s ease-in-out; .wrapper { max-width: 80rem; display: flex; flex-direction: column; - gap: 6rem; + gap: 4rem; } //region Hero &__hero { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); + padding-bottom: 2rem; + gap: 2rem; } &__hero_left { @@ -43,17 +45,19 @@ &__buttons { display: flex; flex-direction: row; - gap: .75rem; + gap: 0.75rem; &--editor, &--git { border-radius: 4px; - padding: .625rem 1.25rem; + padding: 0.625rem 1.25rem; + border: none; + cursor: pointer; display: flex; flex-direction: row; align-items: center; - gap: .5rem; + gap: 0.5rem; &--image { width: 1rem; @@ -103,7 +107,7 @@ &__list { display: grid; grid: 'icon title' 'icon description' / auto 1fr; - gap: .5rem 1rem; + gap: 0.5rem 1rem; &--icon { grid-area: icon; @@ -119,7 +123,7 @@ width: 1rem; height: auto; aspect-ratio: 1; - padding: .5rem; + padding: 0.5rem; path { fill: white; @@ -201,7 +205,7 @@ &__titles { display: flex; flex-direction: column; - gap: .75rem; + gap: 0.75rem; } &--title { @@ -229,7 +233,7 @@ position: relative; width: 100%; height: auto; - aspect-ratio: .8; + aspect-ratio: 0.8; object-fit: contain; img { @@ -249,7 +253,7 @@ } &--role { - font-size: .875rem; + font-size: 0.875rem; } } } @@ -257,6 +261,36 @@ //endregion + //region Socials + &__socials { + display: flex; + flex-direction: column; + gap: 2rem; + + &--title { + text-align: center; + font-size: 1rem; + font-weight: 700; + } + + &__list { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + gap: 4rem; + + svg { + cursor: pointer; + width: 3rem; + height: auto; + aspect-ratio: 1; + } + } + } + + //endregion + //region Get Started &__get_started { background-color: $color-black; @@ -271,57 +305,186 @@ gap: 1rem; &--title { + //white-space: nowrap; color: $color-white; font-size: 3.75rem; font-weight: 400; + text-align: center; margin: 0; } &--description { - color: #94A4B8; + color: #94a4b8; font-size: 1.25rem; text-align: center; } &--button { - margin-top: .25rem; + border: none; + margin-top: 0.25rem; cursor: pointer; background: $color-white; - padding: .75rem 1.5rem; + padding: 0.75rem 1.5rem; border-radius: 10px; } } //endregion - @media(max-width: 1024px) { + @media (max-width: 80rem) { + //region Hero + &__hero_left { + &--title { + font-size: 3rem; + } + + &--description { + font-size: 0.875rem; + } + } + + //endregion + + //region Informations + &__informations_top { + &--title { + font-size: 2rem; + } + } + + //endregion + + //region Get Started + &__get_started { + margin-inline: 3rem; + + &--title { + font-size: 2.5rem; + } + } + + //endregion + } + + @media (max-width: 1024px) { padding: 4rem; flex-direction: column; gap: 1rem; + //region Informations + &__informations { + &--lists { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + } + + //endregion + + //region About + &__about { + margin-inline: 3rem; + } + + //endregion + + //region Get Started + &__get_started { + padding: 3rem; + } + + //endregion + &--title { font-size: 4rem; } } - &--title { - font-size: 4rem; - } -} + @media (max-width: 767px) { + padding: 2rem; + + //region Hero + &__hero { + display: flex; + flex-direction: column; + gap: 4rem; + } + + &__hero_left { + &--title { + font-size: 2.5rem; + } + } + + &__hero_right { + min-height: 25dvh; + } + + //endregion + + //region Informations + &__informations { + &--lists { + grid-template-columns: minmax(0, 1fr); + } + } + + //endregion + + //region Technologies + &__technologies { + &__list { + gap: 2rem; + } + } -@media(max-width: 767px) { - padding: 2rem; + //endregion + + //region About + &__about { + margin-inline: 0; + + &__members { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + } + + //endregion + + //region Socials + &__socials { + &__list { + gap: 2rem; + } + } + + //endregion + + //region Get Started + &__get_started { + padding: 2rem; + margin-inline: 0; + + &--title { + font-size: 2rem; + } + + &--description { + font-size: 1rem; + } + } + + //endregion + + &--title { + font-size: 2.5rem; + } + } &--title { font-size: 2.5rem; } } -&--title { - font-size: 2.5rem; -} -} - &.dark-theme { color: $color-white; } @@ -329,4 +492,3 @@ &.dark-theme { color: $color-white; } -} \ No newline at end of file diff --git a/src/assets/i18n/fr.json b/src/assets/i18n/fr.json index 51afe1d..53dc6ef 100644 --- a/src/assets/i18n/fr.json +++ b/src/assets/i18n/fr.json @@ -116,4 +116,4 @@ }, "Date": "Ce document a été mis à jour pour la dernière fois le 10 janvier 2024." } -} \ No newline at end of file +} diff --git a/src/styles.scss b/src/styles.scss index 53e3d43..cc52f59 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -3,7 +3,7 @@ $color-purple: #605ffc; $color-white: #ffffff; $color-black: #000000; $color-light-black: #333333; -$color-gray: #64748B; +$color-gray: #64748b; //endregion * {