From 6a804df0a5a80ad763129e9a3fa6cb2a457d9e0f Mon Sep 17 00:00:00 2001 From: boherm Date: Thu, 21 Dec 2023 12:12:05 +0100 Subject: [PATCH] Adapt to the new branding --- assets/scss/config.scss | 1 + components/reusable/Header.vue | 14 +- components/reusable/Logo.vue | 455 ++++++--------------------------- components/reusable/Menu.vue | 7 +- layouts/default.vue | 6 +- 5 files changed, 92 insertions(+), 391 deletions(-) diff --git a/assets/scss/config.scss b/assets/scss/config.scss index 323e677..d0c736e 100644 --- a/assets/scss/config.scss +++ b/assets/scss/config.scss @@ -7,6 +7,7 @@ $white: #fff; $skipped: #442ac6; $skippedBg: #dad5f4; $lowgray: #b3c7cd; +$bg-header: #A4DBE8; // Dark mode $backgroundDark: #1c1c24; diff --git a/components/reusable/Header.vue b/components/reusable/Header.vue index 2abdb6f..8d23a50 100644 --- a/components/reusable/Header.vue +++ b/components/reusable/Header.vue @@ -73,7 +73,7 @@ position: fixed; top: 0; width: 100%; - background: $primary; + background: $bg-header; box-shadow: 0 0 10px 0 rgba(black, 0.2); z-index: 10; min-height: 50px; @@ -81,6 +81,14 @@ @at-root .dark & { background: $primaryDark; + + h1 { + color: white; + } + + .dates > p { + color: white; + } } &.isMobile { @@ -88,7 +96,7 @@ } h1 { - color: white; + color: #000; font-size: 20px; font-weight: bold; width: 100%; @@ -105,7 +113,7 @@ > p { font-size: 16px; line-height: 22px; - color: white; + color: #000; margin-bottom: 0; &:first-child { diff --git a/components/reusable/Logo.vue b/components/reusable/Logo.vue index b5c9c6a..c0bdd14 100644 --- a/components/reusable/Logo.vue +++ b/components/reusable/Logo.vue @@ -4,391 +4,76 @@ - - Group 2 - Created with Sketch. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Board Nightly - - - - + + + + + + + + + + @@ -399,6 +84,12 @@ margin: 10px 50px; margin-left: 20px; + svg { + @at-root .dark & { + fill: white; + } + } + img { height: 40px; } diff --git a/components/reusable/Menu.vue b/components/reusable/Menu.vue index 57fbc7e..c89d40d 100644 --- a/components/reusable/Menu.vue +++ b/components/reusable/Menu.vue @@ -7,7 +7,6 @@ @click="$emit('toggle')" > - {{ item.icon }} {{ item.name }} @@ -61,10 +60,14 @@ text-decoration: none; padding: 5px 10px; font-weight: bold; - color: $white; + color: $primary; font-size: 16px; line-height: 22px; + @at-root .dark & { + color: white; + } + > * { vertical-align: middle; line-height: 22px; diff --git a/layouts/default.vue b/layouts/default.vue index 1c55501..a6757b7 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -102,8 +102,7 @@ } html { - font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, - 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + font-family: Arial, sans-serif; font-size: 16px; word-spacing: 1px; -ms-text-size-adjust: 100%; @@ -113,8 +112,7 @@ box-sizing: border-box; .application { - font-family: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, - 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; + font-family: Arial, sans-serif; } }