chore: update logo

Adjust previous colors to fit the new website and add a dark version
to better fit with the dark theme.

6 files changed, 80 insertions, 175 deletions

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 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   width="92.604164mm"
-   height="92.604164mm"
-   viewBox="0 0 92.604164 92.604164"
-   version="1.1"
-   id="svg8"
-   inkscape:version="1.0.2 (e86c870879, 2021-01-15)"
-   sodipodi:docname="armand-philippot-logo.svg">
-  <defs
-     id="defs2">
-    <rect
-       x="50.243404"
-       y="24.854818"
-       width="80.992653"
-       height="65.698357"
-       id="rect1471-2" />
-    <rect
-       x="50.243404"
-       y="24.854818"
-       width="80.992653"
-       height="65.698357"
-       id="rect1666" />
-    <rect
-       x="50.243404"
-       y="24.854818"
-       width="80.992653"
-       height="65.698357"
-       id="rect1471-2-3" />
-    <rect
-       x="50.243404"
-       y="24.854818"
-       width="80.992653"
-       height="65.698357"
-       id="rect869" />
-    <rect
-       x="50.243404"
-       y="24.854818"
-       width="80.992653"
-       height="65.698357"
-       id="rect1471-2-3-6" />
-    <rect
-       x="50.243404"
-       y="24.854818"
-       width="80.992653"
-       height="65.698357"
-       id="rect928" />
-  </defs>
-  <sodipodi:namedview
-     id="base"
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1.0"
-     inkscape:pageopacity="0.0"
-     inkscape:pageshadow="2"
-     inkscape:zoom="1.979899"
-     inkscape:cx="62.374309"
-     inkscape:cy="220.65882"
-     inkscape:document-units="mm"
-     inkscape:current-layer="layer6"
-     inkscape:document-rotation="0"
-     showgrid="false"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0"
-     inkscape:window-width="1920"
-     inkscape:window-height="1019"
-     inkscape:window-x="0"
-     inkscape:window-y="33"
-     inkscape:window-maximized="1" />
-  <metadata
-     id="metadata5">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <g
-     inkscape:groupmode="layer"
-     id="layer6"
-     inkscape:label="BG"
-     style="display:inline"
-     transform="translate(-38.78392,-94.321098)">
-    <rect
-       style="fill:#386394;fill-opacity:1;stroke-width:0.767807"
-       id="rect1078"
-       width="92.604164"
-       height="92.604164"
-       x="38.78392"
-       y="94.321098" />
-  </g>
-  <g
-     inkscape:label="PrimaryColor"
-     inkscape:groupmode="layer"
-     id="layer1"
-     style="display:inline"
-     transform="translate(-38.78392,-94.321098)">
-    <path
-       id="rect1424-4-2"
-       style="fill:#194776;fill-opacity:1;stroke:none;stroke-width:2.28419;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="M 131.38808,95.225357 39.688622,186.92526 h 91.699458 z"
-       sodipodi:nodetypes="cccc" />
-  </g>
-  <g
-     inkscape:groupmode="layer"
-     id="layer3"
-     inkscape:label="PrimaryColor-Dark"
-     style="display:inline"
-     transform="translate(-38.78392,-94.321098)">
-    <path
-       id="rect1424-0"
-       style="display:inline;fill:#113d69;fill-opacity:1;stroke:none;stroke-width:2.2842;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
-       d="m 38.78392,94.321098 h 92.60403 L 38.78392,186.92514 Z"
-       sodipodi:nodetypes="cccc" />
-  </g>
-  <g
-     inkscape:groupmode="layer"
-     id="layer7"
-     inkscape:label="Shadow"
-     transform="translate(-38.78392,-94.321098)">
-    <g
-       aria-label="AP"
-       transform="matrix(1.0764391,0,0,1.0764391,-5.5904334,83.891018)"
-       id="text1469-5-2"
-       style="font-style:normal;font-weight:normal;font-size:50.8px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect1471-2-3);display:inline;fill:#1a2f47;fill-opacity:1;stroke:none">
-      <path
-         d="m 51.514141,69.801562 12.547599,-32.7152 h 10.1092 l 12.5476,32.7152 h -9.9568 l -2.7432,-6.9596 h -9.8552 l -2.6924,6.9596 z m 13.919199,-13.8176 h 7.3152 l -3.6576,-9.6012 z"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:50.8px;font-family:Kanit;-inkscape-font-specification:'Kanit Bold';fill:#1a2f47;fill-opacity:1"
-         id="path957-9" />
-      <path
-         d="m 90.274445,69.801562 v -32.7152 h 16.865595 q 4.0132,0 6.604,1.6256 2.6416,1.5748 3.9116,4.318 1.27,2.7432 1.27,6.096 0,3.4544 -1.4732,6.1468 -1.4732,2.6924 -4.1656,4.2164 -2.6924,1.524 -6.35,1.524 h -7.111995 v 8.7884 z m 9.5504,-16.1036 h 4.927605 q 2.23519,0 3.30199,-1.27 1.1176,-1.27 1.1176,-3.302 0,-2.1844 -1.016,-3.4544 -1.016,-1.27 -3.14959,-1.27 h -5.181605 z"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:50.8px;font-family:Kanit;-inkscape-font-specification:'Kanit Bold';fill:#1a2f47;fill-opacity:1"
-         id="path959-1" />
-    </g>
-  </g>
-  <g
-     inkscape:groupmode="layer"
-     id="layer2"
-     inkscape:label="AP"
-     style="display:inline"
-     transform="translate(-38.78392,-94.321098)">
-    <g
-       aria-label="AP"
-       transform="matrix(1.0764391,0,0,1.0764391,-7.7056069,82.297001)"
-       id="text1469-5"
-       style="font-style:normal;font-weight:normal;font-size:50.8px;line-height:1.25;font-family:sans-serif;letter-spacing:0px;word-spacing:0px;white-space:pre;shape-inside:url(#rect1471-2-3);fill:#f3f7fc;fill-opacity:1;stroke:none">
-      <path
-         d="m 51.514141,69.801562 12.547599,-32.7152 h 10.1092 l 12.5476,32.7152 h -9.9568 l -2.7432,-6.9596 h -9.8552 l -2.6924,6.9596 z m 13.919199,-13.8176 h 7.3152 l -3.6576,-9.6012 z"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:50.8px;font-family:Kanit;-inkscape-font-specification:'Kanit Bold';fill:#f3f7fc;fill-opacity:1"
-         id="path957" />
-      <path
-         d="m 90.274445,69.801562 v -32.7152 h 16.865595 q 4.0132,0 6.604,1.6256 2.6416,1.5748 3.9116,4.318 1.27,2.7432 1.27,6.096 0,3.4544 -1.4732,6.1468 -1.4732,2.6924 -4.1656,4.2164 -2.6924,1.524 -6.35,1.524 h -7.111995 v 8.7884 z m 9.5504,-16.1036 h 4.927605 q 2.23519,0 3.30199,-1.27 1.1176,-1.27 1.1176,-3.302 0,-2.1844 -1.016,-3.4544 -1.016,-1.27 -3.14959,-1.27 h -5.181605 z"
-         style="font-style:normal;font-variant:normal;font-weight:bold;font-stretch:normal;font-size:50.8px;font-family:Kanit;-inkscape-font-specification:'Kanit Bold';fill:#f3f7fc;fill-opacity:1"
-         id="path959" />
-    </g>
-  </g>
+<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+   <style>
+      @media (prefers-color-scheme: dark) {
+        .bg-left { fill: #88c1dd }
+        .bg-right { fill: #7ab1cd }
+        .letter { fill: #151d23; stroke: #8fa3ae; }
+        .letter-shadow { fill: #33414d; stroke: #33414d; }
+      }
+</style>
+   <path class="bg-left" fill="#1565a2" d="M 0,0 H 506 L 0,506 Z" />
+   <path class="bg-right" fill="#114f7e" d="M 512,512 H 6 L 512,6 Z" />
+   <path class="letter-shadow" d="m 66.049088,353.26557 h 57.233082 l 15.4763,-40.00476 h 56.64908 l 15.76831,40.00476 h 57.2331 L 196.28357,165.21398 h -58.10911 z m 80.009522,-79.42552 21.02441,-55.18904 21.02439,55.18904 z" fill="#394146" stroke="#394146" stroke-width="5" />
+   <path class="letter" d="m 59.569539,346.78602 h 57.233081 l 15.4763,-40.00476 H 188.928 l 15.76831,40.00476 h 57.2331 L 189.80402,158.73443 h -58.10911 z m 80.009521,-79.42552 21.02441,-55.18904 21.02439,55.18904 z" fill="#f6f8f8" stroke="#143752" stroke-width="5" />
+   <path class="letter-shadow" d="m 288.84935,353.26557 h 54.89704 v -50.51696 h 40.88078 c 42.04881,0 68.91332,-28.61654 68.91332,-68.32931 0,-38.5447 -21.60841,-69.20532 -67.74528,-69.20532 h -96.94586 z m 54.89704,-92.56578 v -53.437 h 29.78458 c 16.35231,0 23.94446,10.51221 23.94446,27.15651 0,15.47629 -8.46817,26.28049 -25.40449,26.28049 z" fill="#394146" stroke="#394146" stroke-width="5" />
+   <path class="letter" d="m 282.3698,346.78602 h 54.89704 v -50.51696 h 40.88078 c 42.04881,0 68.91332,-28.61654 68.91332,-68.3293 0,-38.54471 -21.60841,-69.20533 -67.74528,-69.20533 H 282.3698 Z m 54.89704,-92.56578 v -53.437 h 29.78458 c 16.35231,0 23.94446,10.51221 23.94446,27.15652 0,15.47628 -8.46817,26.28048 -25.40449,26.28048 z" fill="#f6f8f8" stroke="#143752" stroke-width="5" />
 </svg>
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 (
+    <svg
+      viewBox="0 0 512 512"
+      xmlns="http://www.w3.org/2000/svg"
+      className={styles.wrapper}
+    >
+      <path className={styles['bg-left']} d="M 0,0 H 506 L 0,506 Z" />
+      <path className={styles['bg-right']} d="M 512,512 H 6 L 512,6 Z" />
+      <path
+        className={styles['letter-shadow']}
+        d="m 66.049088,353.26557 h 57.233082 l 15.4763,-40.00476 h 56.64908 l 15.76831,40.00476 h 57.2331 L 196.28357,165.21398 h -58.10911 z m 80.009522,-79.42552 21.02441,-55.18904 21.02439,55.18904 z"
+      />
+      <path
+        className={styles['letter']}
+        d="m 59.569539,346.78602 h 57.233081 l 15.4763,-40.00476 H 188.928 l 15.76831,40.00476 h 57.2331 L 189.80402,158.73443 h -58.10911 z m 80.009521,-79.42552 21.02441,-55.18904 21.02439,55.18904 z"
+      />
+      <path
+        className={styles['letter-shadow']}
+        d="m 288.84935,353.26557 h 54.89704 v -50.51696 h 40.88078 c 42.04881,0 68.91332,-28.61654 68.91332,-68.32931 0,-38.5447 -21.60841,-69.20532 -67.74528,-69.20532 h -96.94586 z m 54.89704,-92.56578 v -53.437 h 29.78458 c 16.35231,0 23.94446,10.51221 23.94446,27.15651 0,15.47629 -8.46817,26.28049 -25.40449,26.28049 z"
+      />
+      <path
+        className={styles['letter']}
+        d="m 282.3698,346.78602 h 54.89704 v -50.51696 h 40.88078 c 42.04881,0 68.91332,-28.61654 68.91332,-68.3293 0,-38.54471 -21.60841,-69.20533 -67.74528,-69.20533 H 282.3698 Z m 54.89704,-92.56578 v -53.437 h 29.78458 c 16.35231,0 23.94446,10.51221 23.94446,27.15652 0,15.47628 -8.46817,26.28048 -25.40449,26.28048 z"
+      />
+    </svg>
+  );
+};
+
+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};