From de11222e4cecfdfd4d45f3ec1220ebc1bcb9c8c1 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 27 Jan 2022 15:58:14 +0100 Subject: chore: update logo Adjust previous colors to fit the new website and add a dark version to better fit with the dark theme. --- src/assets/images/armand-philippot-logo.svg | 183 +++----------------------- src/components/Branding/Branding.tsx | 2 +- src/components/Branding/Logo/Logo.module.scss | 23 ++++ src/components/Branding/Logo/Logo.tsx | 32 +++++ src/styles/abstracts/_variables.scss | 7 +- src/styles/base/_colors.scss | 8 +- 6 files changed, 80 insertions(+), 175 deletions(-) create mode 100644 src/components/Branding/Logo/Logo.module.scss create mode 100644 src/components/Branding/Logo/Logo.tsx (limited to 'src') diff --git a/src/assets/images/armand-philippot-logo.svg b/src/assets/images/armand-philippot-logo.svg index 17a245e..225c6e1 100644 --- a/src/assets/images/armand-philippot-logo.svg +++ b/src/assets/images/armand-philippot-logo.svg @@ -1,170 +1,17 @@ - - - - - - - - - - - - - - image/svg+xml - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + diff --git a/src/components/Branding/Branding.tsx b/src/components/Branding/Branding.tsx index 5e2cf6a..01948e9 100644 --- a/src/components/Branding/Branding.tsx +++ b/src/components/Branding/Branding.tsx @@ -3,11 +3,11 @@ import Link from 'next/link'; import { ReactElement } from 'react'; import { t } from '@lingui/macro'; import photo from '@assets/images/armand-philippot.jpg'; -import Logo from '@assets/images/armand-philippot-logo.svg'; import { config } from '@config/website'; import styles from './Branding.module.scss'; import Head from 'next/head'; import { Person, WithContext } from 'schema-dts'; +import Logo from './Logo/Logo'; type BrandingReturn = ({ isHome }: { isHome: boolean }) => ReactElement; diff --git a/src/components/Branding/Logo/Logo.module.scss b/src/components/Branding/Logo/Logo.module.scss new file mode 100644 index 0000000..3d62bf9 --- /dev/null +++ b/src/components/Branding/Logo/Logo.module.scss @@ -0,0 +1,23 @@ +.wrapper { + position: relative; +} + +.bg-left { + fill: var(--color-primary-light); +} + +.bg-right { + fill: var(--color-primary-dark); +} + +.letter { + fill: var(--color-fg-inverted); + stroke: var(--color-primary-darker); + stroke-width: 5; +} + +.letter-shadow { + fill: var(--color-shadow-darker); + stroke: var(--color-shadow-darker); + stroke-width: 5; +} diff --git a/src/components/Branding/Logo/Logo.tsx b/src/components/Branding/Logo/Logo.tsx new file mode 100644 index 0000000..0623042 --- /dev/null +++ b/src/components/Branding/Logo/Logo.tsx @@ -0,0 +1,32 @@ +import styles from './Logo.module.scss'; + +const Logo = () => { + return ( + + + + + + + + + ); +}; + +export default Logo; diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss index 4e8e33a..79824dd 100644 --- a/src/styles/abstracts/_variables.scss +++ b/src/styles/abstracts/_variables.scss @@ -158,9 +158,10 @@ $light-theme_grey: hsl(206, 15%, 80%); $light-theme_grey-bright: hsl(206, 20%, 86%); $light-theme_grey-brighter: hsl(206, 15%, 90%); $light-theme_grey-dark: hsla(206, 30%, 30%); -$light-theme_grey-dark-o70: hsla(206, 10%, 25%, 0.7); -$light-theme_grey-dark-o40: hsla(206, 10%, 25%, 0.4); -$light-theme_grey-dark-o20: hsla(206, 10%, 25%, 0.2); +$light-theme_grey-darker: hsla(206, 10%, 25%); +$light-theme_grey-darker-o70: hsla(206, 10%, 25%, 0.7); +$light-theme_grey-darker-o40: hsla(206, 10%, 25%, 0.4); +$light-theme_grey-darker-o20: hsla(206, 10%, 25%, 0.2); $light-theme_white: hsl(206, 15%, 97%); $light-theme_white-dark: hsl(206, 20%, 93%); $light-theme_white-o90: hsl(206, 15%, 97%, 0.9); diff --git a/src/styles/base/_colors.scss b/src/styles/base/_colors.scss index 1f90968..5d945bb 100644 --- a/src/styles/base/_colors.scss +++ b/src/styles/base/_colors.scss @@ -19,9 +19,10 @@ --color-border: #{var.$light-theme_grey}; --color-border-dark: #{var.$light-theme_grey-dark}; --color-border-light: #{var.$light-theme_grey-bright}; - --color-shadow: #{var.$light-theme_grey-dark-o40}; - --color-shadow-dark: #{var.$light-theme_grey-dark-o70}; - --color-shadow-light: #{var.$light-theme_grey-dark-o20}; + --color-shadow: #{var.$light-theme_grey-darker-o40}; + --color-shadow-dark: #{var.$light-theme_grey-darker-o70}; + --color-shadow-darker: #{var.$light-theme_grey-darker}; + --color-shadow-light: #{var.$light-theme_grey-darker-o20}; --color-token-red: #{var.$light-theme_red}; --color-token-green: #{var.$light-theme_green}; --color-token-purple: #{var.$light-theme_purple}; @@ -54,6 +55,7 @@ --color-border-light: #{var.$dark-theme_black-brighter}; --color-shadow: #{var.$dark-theme_grey-dark-o40}; --color-shadow-dark: #{var.$dark-theme_grey-dark-o70}; + --color-shadow-darker: #{var.$dark-theme_grey-dark}; --color-shadow-light: #{var.$dark-theme_grey-dark-o20}; --color-token-red: #{var.$dark-theme_red}; --color-token-green: #{var.$dark-theme_green}; -- cgit v1.2.3