From 14b7ab0fcdf508ed86d81ae637207a66f7b23925 Mon Sep 17 00:00:00 2001 From: Marc Bouvier Date: Mon, 18 Nov 2024 16:43:29 +0100 Subject: [PATCH] feat: better alignment of titles and centering --- src/lib/Footer.svelte | 80 ++++--- src/lib/Header.svelte | 139 ++++++++++-- src/routes/+page.svelte | 225 ++++++++++--------- static/style/4_regions.css | 23 +- static/style/6_components/card.css | 28 ++- static/style/6_components/hero.css | 7 +- static/style/6_components/menu.css | 91 -------- static/style/6_components/title-and-text.css | 27 +-- 8 files changed, 337 insertions(+), 283 deletions(-) diff --git a/src/lib/Footer.svelte b/src/lib/Footer.svelte index 8927fec..3cb407a 100644 --- a/src/lib/Footer.svelte +++ b/src/lib/Footer.svelte @@ -7,38 +7,40 @@ diff --git a/src/lib/Header.svelte b/src/lib/Header.svelte index 8a2d2ae..0d7691e 100644 --- a/src/lib/Header.svelte +++ b/src/lib/Header.svelte @@ -5,24 +5,123 @@
- - - +
+ + + +
+ + \ No newline at end of file diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index e425db3..5fa27ad 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -28,14 +28,17 @@
-
-
-

{m.mission_title()}

-
-

{m.mission_description()}

+
+
+
+

{m.mission_title()}

+
+

{m.mission_description()}

+
-
+
+
+
-
+
+

{m.philosophy_title()}

- {#each messagesArray('philosophy_paragraph', m) as paragraph} -

- {@html paragraph} -

- {/each} +
+ {#each messagesArray('philosophy_paragraph', m) as paragraph} +

+ {@html paragraph} +

+ {/each} +
+
-
+
+

{m.integrate_title()}

-

- {m.integrate_paragraph()} -

- - Continuum of expertise -
- Une continuité d'expertises -
-

- Une informatique respectueuse au niveau du logiciel et de l'infrastructure qui le supporte. - Vers une entreprise responsable. -

-

Nous nous appuyons sur les référentiels, lois et règlements qui encadrent votre transition :

-
-
REEN -
-
Loi visant à Réduire l'Empreinte Environnementale du Numérique
-
AGEC -
-
Loi Anti Gaspillage et Économie Circulaire
-
RGAA
-
- Référentiel Général d’Amélioration de l’Accessibilité. - Il facilite la mise en accessibilité des sites et services numériques. - Il est édité par la direction interministérielle du numérique (DINUM). -
-
RGPD
-
- Le Règlement Général sur la Protection des Données (RGPD) responsabilise les organismes publics et privés - qui - traitent leurs données. -
-
CSRD
-
- Reporting Directive (CSRD) fixe de nouvelles normes et obligations de reporting extra-financier. - Elle concerne les grandes entreprises et les PME cotées en bourse. -
-
-

-
- -
+
+

+ {m.integrate_paragraph()} +

+ + Continuum of expertise +
+ Une continuité d'expertises +
+

+ Une informatique respectueuse au niveau du logiciel et de l'infrastructure qui le supporte. + Vers une entreprise responsable. +

+

Nous nous appuyons sur les référentiels, lois et règlements qui encadrent votre transition :

+
+
REEN +
+
Loi visant à Réduire l'Empreinte Environnementale du Numérique
+
AGEC +
+
Loi Anti Gaspillage et Économie Circulaire
+
RGAA
+
+ Référentiel Général d’Amélioration de l’Accessibilité. + Il facilite la mise en accessibilité des sites et services numériques. + Il est édité par la direction interministérielle du numérique (DINUM). +
+
RGPD
+
+ Le Règlement Général sur la Protection des Données (RGPD) responsabilise les organismes publics et privés + qui + traitent leurs données. +
+
CSRD
+
+ Reporting Directive (CSRD) fixe de nouvelles normes et obligations de reporting extra-financier. + Elle concerne les grandes entreprises et les PME cotées en bourse. +
+
+

+
+ +
+
+
-
+
+

{m.strengths_title()}

-
- {#each messagesArray('strengths_paragraph', m) as strength} -
-

- {@html strength} -

-
- {/each} +
+
+ {#each messagesArray('strengths_paragraph', m) as strength} +
+

+ {@html strength} +

+
+ {/each} +
+
+
-
+
+

{m.know_us_title()}

-
    - {#each bios as person} - - {/each} -
+
+
    + {#each bios as person} + + {/each} +
+
+
-
+
+

{m.ecosystem_title()}

- -
    - {#each ecosystem_partners as ecosystem_partner} - - {/each} -
+
+
    + {#each ecosystem_partners as ecosystem_partner} + + {/each} +
+
+
diff --git a/static/style/4_regions.css b/static/style/4_regions.css index b9eac41..a0966b7 100644 --- a/static/style/4_regions.css +++ b/static/style/4_regions.css @@ -9,10 +9,6 @@ body { padding: 0; } -header { - padding: 0; - margin: 0; -} main { @@ -25,17 +21,26 @@ section { padding: 2rem .5rem; } +.wrapper{ + margin: 0 auto; + padding: 0; + max-width: 960px; +} + +.center-in-section { + display: flex; + justify-content: center; + flex-direction: column; + flex-wrap: wrap; + align-content: space-around; +} + @media only screen and (min-width: 576px) { body { padding: 0; } - header { - padding: 0; - margin: 0; - } - main { padding: 0; margin: 0; diff --git a/static/style/6_components/card.css b/static/style/6_components/card.css index 257a809..fa21169 100644 --- a/static/style/6_components/card.css +++ b/static/style/6_components/card.css @@ -8,32 +8,37 @@ margin-top: -4rem; } -.cards > .card { +.cards.wrapper { + max-width: 992px; +} + +.cards .card { margin: 0 1.5rem 2rem; padding: 2rem; - width: auto; + width: 100%; background-color: var(--LightOrange); display: flex; + flex-direction: column; flex-wrap: wrap; row-gap: .5rem; font-size: small; } -.cards > .card:last-child { +.cards .card:last-child { margin-bottom: 0; } -.card > header { +.card header { text-align: center; } -.card > ul { +.card ul { list-style-type: none; } -.card > .card__content { +.card .card__content { text-align: center; display: flex; flex-direction: row; @@ -44,8 +49,9 @@ .card__content p { margin-bottom: .5rem; + width: 100%; } -.card > button { +.card button { margin-top: 2rem; } @@ -56,17 +62,21 @@ margin-bottom: -2rem; } + .card { + padding: 0 6rem; + } + } @media only screen and (min-width: 768px) { - .cards > .card { + .cards .card { width: 16rem; } } @media only screen and (min-width: 992px) { - .cards > .card, .cards > .card:last-child { + .cards .card, .cards .card:last-child { width: 13rem; margin-bottom: 0; } diff --git a/static/style/6_components/hero.css b/static/style/6_components/hero.css index 466aa45..6cac069 100644 --- a/static/style/6_components/hero.css +++ b/static/style/6_components/hero.css @@ -7,7 +7,7 @@ padding-bottom: 4rem; } -.hero > .hero-content { +.hero .hero-content { border-left: var(--Orange) solid 6px; padding-left: 1rem; display: flex; @@ -17,8 +17,11 @@ justify-content: space-evenly; } +.hero .wrapper{ + max-width: 740px; +} + .hero-content > header > h1 { - max-width: 45ch; text-wrap: balance; color: var(--Orange); margin-bottom: 1.5rem; diff --git a/static/style/6_components/menu.css b/static/style/6_components/menu.css index fdf6434..e69de29 100644 --- a/static/style/6_components/menu.css +++ b/static/style/6_components/menu.css @@ -1,91 +0,0 @@ -/* Main navigation menu */ -/* Markup example : -nav.menu - a.brand-logo - img - div.items - a - a - a - */ - -.menu { - display: flex; - flex-wrap: wrap; - flex-direction: column; - margin-top: 0; - padding: 0 .5rem; - margin-bottom: .5rem; - justify-content: center; - align-items: center; -} - - -.menu > .brand-logo { - padding: 1rem; -} - -.brand-logo img { - object-fit: scale-down; -} - -.menu > .items { - margin-top: .5rem; - display: flex; - gap: .125rem; - align-items: baseline; - flex-direction: column; - justify-content: space-evenly; -} - -.menu > .items > a { - display: block; - width: 100%; - color: var(--DarkGreen); - font-weight: bold; - font-size: 1.125rem; - text-decoration: none; - text-transform: uppercase; - padding: .25rem; -} - -.menu > .items > a.about { - color: var(--DarkOrange); -} - -@media only screen and (min-width: 576px) { - - .menu { - flex-direction: row; - justify-content: space-evenly; - } - - .menu > .brand-logo { - padding-top: 0.25rem; - padding-bottom: 1.25rem; - margin-top: .75rem; - } - - .menu > .items { - gap: .25rem; - } - - .menu > .items > a { - width: auto; - } -} - -@media only screen and (min-width: 768px) { - - - .menu > .items { - gap: 1rem; - margin-top: 2rem; - align-items: center; - flex-direction: row; - } - - .menu > .items > a { - margin: 0; - } -} diff --git a/static/style/6_components/title-and-text.css b/static/style/6_components/title-and-text.css index 6bcb05e..78a018c 100644 --- a/static/style/6_components/title-and-text.css +++ b/static/style/6_components/title-and-text.css @@ -7,10 +7,6 @@ section */ .title-and-text { - display: flex; - flex-direction: column; - flex-wrap: wrap; - align-content: center; padding-top: 1rem; padding-bottom: 1rem; } @@ -26,51 +22,50 @@ section .title-and-text p { margin: 0 1.5rem; margin-bottom: 1rem; - } -.title-and-text.as-primary { +.as-primary { background-color: var(--DarkGreen) } -.title-and-text.as-primary > header { +.as-primary header { border-color: var(--Orange); } -.title-and-text.as-primary > header > * { +.as-primary header > * { color: var(--Orange); } -.title-and-text.as-primary > p { +.as-primary p { color: var(--White); } -.title-and-text.as-secondary { +.as-secondary { background-color: var(--White) } -.title-and-text.as-secondary > header { +.as-secondary header { border-color: var(--Black); color: var(--Black); } -.title-and-text.as-secondary > p { +.as-secondary p { color: var(--Black); } -.title-and-text.as-tertiary { +.as-tertiary { background-color: var(--Pink) } -.title-and-text.as-tertiary > header { +.as-tertiary header { border-color: var(--White); } -.title-and-text.as-tertiary > header > * { +.as-tertiary header > * { color: var(--DeepBlack); } -.title-and-text.as-tertiary > p { +.as-tertiary p { color: var(--Black); }