From 44de76f8865c70253608d046ba17a30c040565c0 Mon Sep 17 00:00:00 2001 From: Moritz Kirstein Date: Thu, 22 Feb 2024 22:20:12 +0100 Subject: [PATCH 1/2] feat: add pontus-x logo variants --- src/@images/pontusx_logo.svg | 15 ++++++++ src/@images/pontusx_logo_horizontal.svg | 47 +++++++++++++++++++++++++ 2 files changed, 62 insertions(+) create mode 100644 src/@images/pontusx_logo.svg create mode 100644 src/@images/pontusx_logo_horizontal.svg diff --git a/src/@images/pontusx_logo.svg b/src/@images/pontusx_logo.svg new file mode 100644 index 00000000..873ccc55 --- /dev/null +++ b/src/@images/pontusx_logo.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/src/@images/pontusx_logo_horizontal.svg b/src/@images/pontusx_logo_horizontal.svg new file mode 100644 index 00000000..5cf1e50c --- /dev/null +++ b/src/@images/pontusx_logo_horizontal.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + From 807ca1b394e2aada723bb21f5614cc8ab7deed98 Mon Sep 17 00:00:00 2001 From: Moritz Kirstein Date: Thu, 22 Feb 2024 22:20:59 +0100 Subject: [PATCH 2/2] feat: use 2 pontus-x logo variants for different screen sizes --- .../@shared/atoms/Logo/index.module.css | 16 ++++++++-------- src/components/@shared/atoms/Logo/index.tsx | 10 ++++++++-- src/stylesGlobal/_variables.css | 4 ++-- 3 files changed, 18 insertions(+), 12 deletions(-) diff --git a/src/components/@shared/atoms/Logo/index.module.css b/src/components/@shared/atoms/Logo/index.module.css index 166ac35f..2f46f739 100644 --- a/src/components/@shared/atoms/Logo/index.module.css +++ b/src/components/@shared/atoms/Logo/index.module.css @@ -1,20 +1,20 @@ .logo { + display: none; +} +.logoSmall { + display: block; width: var(--menu-logo-size-width-sm); height: var(--menu-logo-size-height-sm); margin: 0; } -.logo path { - fill: var(--menu-logo-color); -} - -a > .logo:hover path { - fill: var(--menu-logo-color-hover); -} - @media screen and (min-width: 55rem) { .logo { + display: block; width: var(--menu-logo-size-width-lg); height: var(--menu-logo-size-height-lg); } + .logoSmall { + display: none; + } } diff --git a/src/components/@shared/atoms/Logo/index.tsx b/src/components/@shared/atoms/Logo/index.tsx index 4e9b76b5..51b8d279 100644 --- a/src/components/@shared/atoms/Logo/index.tsx +++ b/src/components/@shared/atoms/Logo/index.tsx @@ -1,7 +1,13 @@ import { ReactElement } from 'react' -import LogoAsset from '@images/gaia-x-logo.svg' +import LogoAsset from '@images/pontusx_logo_horizontal.svg' +import LogoAssetSmall from '@images/pontusx_logo.svg' import styles from './index.module.css' export default function Logo(): ReactElement { - return + return ( +
+ + +
+ ) } diff --git a/src/stylesGlobal/_variables.css b/src/stylesGlobal/_variables.css index 6444856b..5b574abe 100644 --- a/src/stylesGlobal/_variables.css +++ b/src/stylesGlobal/_variables.css @@ -27,9 +27,9 @@ /* Menubar */ --menu-logo-color: var(--brand-gaia-x-blue); --menu-logo-color-hover: var(--brand-gaia-x-blue); - --menu-logo-size-width-sm: 7.5rem; + --menu-logo-size-width-sm: 3.5rem; --menu-logo-size-height-sm: 3.5rem; - --menu-logo-size-width-lg: 7.5rem; + --menu-logo-size-width-lg: 15rem; --menu-logo-size-height-lg: 3.5rem; --menu-font-color: var(--color-primary); --menu-font-color-active: var(--font-color-heading);