diff --git a/src/@images/pontusx_logo.svg b/src/@images/pontusx_logo.svg new file mode 100644 index 000000000..873ccc556 --- /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 000000000..5cf1e50cd --- /dev/null +++ b/src/@images/pontusx_logo_horizontal.svg @@ -0,0 +1,47 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/@shared/atoms/Logo/index.module.css b/src/components/@shared/atoms/Logo/index.module.css index 166ac35fa..2f46f739e 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 4e9b76b5b..51b8d2792 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 6444856b8..5b574abec 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);