From a2f06ac993392c74658a3435e0d2f665e940dbae Mon Sep 17 00:00:00 2001 From: Colin FRIZOT Date: Thu, 18 Jan 2024 13:25:33 +0100 Subject: [PATCH] Enhance CSS (#5) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Ajoute plusieurs styles : - Ajout de variables CSS - Nouveau Header - Responsive - Dark mode / Light mode avec transition Agrandit également la taille des fichiers CSS. Co-authored-by: cofrizot Co-authored-by: clfreville2 Reviewed-on: https://codefirst.iut.uca.fr/git/sandkasten/sandkasten-web/pulls/5 Reviewed-by: Clément FRÉVILLE Co-authored-by: Colin FRIZOT Co-committed-by: Colin FRIZOT --- angular.json | 4 +- src/app/app.component.html | 22 +- src/app/app.component.scss | 26 +- src/app/app.component.ts | 2 +- .../components/header/header.component.html | 195 +++++--- .../components/header/header.component.scss | 441 ++++++++++++++---- src/app/components/header/header.component.ts | 60 ++- .../landing-page/landing-page.component.html | 18 +- .../landing-page/landing-page.component.scss | 94 ++-- .../landing-page/landing-page.component.ts | 16 +- src/app/services/translation.service.ts | 4 - src/assets/i18n/en.json | 2 - src/assets/i18n/fr.json | 4 +- src/styles.scss | 10 +- 14 files changed, 646 insertions(+), 252 deletions(-) diff --git a/angular.json b/angular.json index 145f9de..5ba91f6 100644 --- a/angular.json +++ b/angular.json @@ -39,8 +39,8 @@ }, { "type": "anyComponentStyle", - "maximumWarning": "2kb", - "maximumError": "4kb" + "maximumWarning": "8kb", + "maximumError": "64kb" } ], "outputHashing": "all" diff --git a/src/app/app.component.html b/src/app/app.component.html index 20ba0c2..1f214b8 100644 --- a/src/app/app.component.html +++ b/src/app/app.component.html @@ -1,18 +1,16 @@ -
- - -
- -
+
+
+ +
-
- -
+
+ +
-
- -
+
+ +
diff --git a/src/app/app.component.scss b/src/app/app.component.scss index a8f8a53..30e95f9 100644 --- a/src/app/app.component.scss +++ b/src/app/app.component.scss @@ -1,15 +1,33 @@ +@import '../styles'; + +body { + overflow: hidden; + transition: background-color .3s ease-in-out, color .3s ease-in-out; +} + + body.light-theme { background-color: #ffffff; color: #000000; - /* Autres styles pour le thème clair */ } body.dark-theme { background-color: #333333; color: #ffffff; - /* Autres styles pour le thème sombre */ } -main { - flex: 1; +.app { + min-height: 100dvh; + display: flex; + flex-direction: column; + + footer { + display: flex; + flex: 1; + align-items: flex-end; + + app-footer { + width: 100%; + } + } } diff --git a/src/app/app.component.ts b/src/app/app.component.ts index 3f94dc8..b3bc364 100644 --- a/src/app/app.component.ts +++ b/src/app/app.component.ts @@ -9,7 +9,7 @@ import { ThemeService } from './services/theme.service'; export class AppComponent implements OnInit { themeClass = 'light-theme'; - constructor(private themeService: ThemeService) {} + constructor(public themeService: ThemeService) {} ngOnInit() { this.themeService.isDarkTheme.subscribe((isDark) => { diff --git a/src/app/components/header/header.component.html b/src/app/components/header/header.component.html index 7f03bbb..bb52965 100644 --- a/src/app/components/header/header.component.html +++ b/src/app/components/header/header.component.html @@ -1,61 +1,138 @@ -