chore: add projects to main nav

I redesign a little the main nav on small screens so it can takes two
columns when the screen height is low. I change the 2xs breakpoint to
500px instead of 400px.

9 files changed, 212 insertions, 12 deletions

diff --git a/src/assets/images/icon-projects.svg b/src/assets/images/icon-projects.svg
new file mode 100644
index 0000000..77fbcb7
--- /dev/null
+++ b/src/assets/images/icon-projects.svg
@@ -0,0 +1,89 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="100"
+   height="100"
+   viewBox="0 0 100 100"
+   version="1.1"
+   id="svg5"
+   inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20, custom)"
+   sodipodi:docname="icon-projects.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview7"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:document-units="px"
+     showgrid="false"
+     inkscape:zoom="2.9141965"
+     inkscape:cx="54.217345"
+     inkscape:cy="6.1766596"
+     inkscape:window-width="1920"
+     inkscape:window-height="1019"
+     inkscape:window-x="0"
+     inkscape:window-y="33"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="svg5" />
+  <defs
+     id="defs2" />
+  <path
+     id="rect846"
+     style="fill:#1d8fc9;stroke:#000000;stroke-width:2.04131;stroke-linecap:round;stroke-linejoin:round"
+     d="M 1.0206528,15.041147 H 98.979347 V 68.626894 H 1.0206528 Z" />
+  <path
+     id="rect846-6"
+     style="fill:#f6f8f8;stroke:#000000;stroke-width:2.05443;stroke-linecap:round;stroke-linejoin:round"
+     d="M 6.2503581,19.91102 H 93.563283 V 62.7106 H 6.2503581 Z" />
+  <path
+     id="rect1148"
+     style="fill:#1d8fc9;fill-opacity:1;stroke:#000000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+     d="m 41.953125,69.147549 c 3.727668,2.111808 3.500227,7.673464 0,13.376953 H 50 58.046875 c -3.500227,-5.703489 -3.727669,-11.265145 0,-13.376953 H 50 Z" />
+  <path
+     id="rect1148-3"
+     style="fill:#1d8fc9;stroke:#000000;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round"
+     d="m 34.720269,82.590942 h 30.559462 c 1.126665,0 2.033692,0.356678 2.033692,0.799727 v 1.03911 c 0,0.443048 -0.907027,0.799727 -2.033692,0.799727 H 34.720269 c -1.126665,0 -2.033692,-0.356679 -2.033692,-0.799727 v -1.03911 c 0,-0.443049 0.907027,-0.799727 2.033692,-0.799727 z" />
+  <path
+     id="rect847"
+     style="stroke-width:1.70417;stroke-linecap:round;stroke-linejoin:round"
+     d="m 13.259277,26.594948 h 29.132596 v 2.567314 H 13.259277 Z" />
+  <path
+     id="rect847-7"
+     style="stroke-width:1.52107;stroke-linecap:round;stroke-linejoin:round"
+     d="M 13.259277,34.29689 H 36.46805 v 2.567315 H 13.259277 Z" />
+  <path
+     id="rect847-7-5"
+     style="stroke-width:1.62802;stroke-linecap:round;stroke-linejoin:round"
+     d="m 13.259277,41.998833 h 26.586812 v 2.567314 H 13.259277 Z" />
+  <path
+     id="rect847-7-5-3"
+     style="stroke-width:0.414169;stroke-linecap:round;stroke-linejoin:round"
+     d="m 18.443194,58.09095 h 4.417548 v 1 h -4.417548 z" />
+  <path
+     d="m 77.586096,40.075326 v -1.680914 l 6.160884,-2.39919 -6.160884,-2.406595 v -1.68832 l 7.604842,2.89532 v 2.38438 z"
+     style="font-weight:bold;font-family:'Liberation Mono';-inkscape-font-specification:'Liberation Mono Bold';stroke-width:0.379131"
+     id="path27058" />
+  <path
+     d="m 68.396606,41.149038 6.07943,-11.136982 h 1.688318 l -6.049809,11.136982 z"
+     style="font-weight:bold;font-family:'Liberation Mono';-inkscape-font-specification:'Liberation Mono Bold';stroke-width:0.379131"
+     id="path27056" />
+  <path
+     d="m 59.384832,37.180007 v -2.38438 l 7.604841,-2.89532 v 1.68832 l -6.168289,2.406595 6.168289,2.399191 v 1.680915 z"
+     style="font-weight:bold;font-family:'Liberation Mono';-inkscape-font-specification:'Liberation Mono Bold';stroke-width:0.379131"
+     id="path27054" />
+  <path
+     id="rect27101"
+     style="stroke-width:1.98046;stroke-linecap:round;stroke-linejoin:round"
+     d="M 7.1079167,50.036518 H 92.892083 v 0.813634 H 7.1079167 Z" />
+  <path
+     d="m 17.042456,57.120762 q 0,0.632276 -0.426175,0.9816 -0.422681,0.345831 -1.254074,0.37727 v 0.611318 h -0.380763 v -0.600838 q -0.751047,-0.02795 -1.170236,-0.352818 -0.419189,-0.328364 -0.551931,-1.002559 l 0.89427,-0.164183 q 0.06637,0.394736 0.261992,0.579878 0.199115,0.181648 0.565905,0.216581 v -1.365857 q -0.01048,-0.007 -0.0524,-0.01398 -0.04192,-0.01048 -0.05589,-0.01048 -0.562412,-0.129244 -0.848857,-0.303907 -0.286445,-0.178155 -0.443642,-0.447135 -0.153701,-0.272472 -0.153701,-0.663715 0,-0.579878 0.394736,-0.894269 0.394736,-0.317886 1.159755,-0.349325 V 53.25025 h 0.380763 v 0.468095 q 0.681183,0.02445 1.047973,0.303911 0.36679,0.275967 0.527479,0.918723 l -0.92222,0.136236 Q 15.910643,54.476378 15.362204,54.40302 v 1.22962 l 0.03843,0.007 q 0.101305,0 0.614811,0.167676 0.517,0.167676 0.772007,0.496041 0.255006,0.324871 0.255006,0.817418 z m -2.061012,-2.731715 q -0.639264,0.04891 -0.639264,0.558918 0,0.157196 0.0524,0.2585 0.0524,0.09781 0.157197,0.167676 0.104797,0.06986 0.429668,0.174662 z m 1.152769,2.745688 q 0,-0.174662 -0.06288,-0.282954 -0.06288,-0.111783 -0.185141,-0.181648 -0.118771,-0.06986 -0.523987,-0.185142 v 1.28202 q 0.772006,-0.0524 0.772006,-0.632276 z"
+     style="font-weight:bold;font-family:'Liberation Mono';-inkscape-font-specification:'Liberation Mono Bold';stroke-width:0.178854"
+     id="path37543" />
+</svg>
diff --git a/src/components/Icons/Projects/Projects.module.scss b/src/components/Icons/Projects/Projects.module.scss
new file mode 100644
index 0000000..3cf939a
--- /dev/null
+++ b/src/components/Icons/Projects/Projects.module.scss
@@ -0,0 +1,40 @@
+@use "@styles/abstracts/functions" as fun;
+
+.icon {
+  display: block;
+  margin: auto;
+  width: var(--icon-size, #{fun.convert-px(40)});
+}
+
+.root,
+.separator,
+.cursor,
+.line,
+.text {
+  fill: var(--color-fg);
+}
+
+.stand {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-primary-dark);
+
+  &--top {
+    stroke-width: 3;
+  }
+
+  &--bottom {
+    stroke-width: 2;
+  }
+}
+
+.screen {
+  fill: var(--color-bg);
+  stroke: var(--color-primary-dark);
+  stroke-width: 3;
+}
+
+.contour {
+  fill: var(--color-primary-lighter);
+  stroke: var(--color-primary-dark);
+  stroke-width: 3;
+}
diff --git a/src/components/Icons/Projects/Projects.tsx b/src/components/Icons/Projects/Projects.tsx
new file mode 100644
index 0000000..76f35a6
--- /dev/null
+++ b/src/components/Icons/Projects/Projects.tsx
@@ -0,0 +1,66 @@
+import styles from './Projects.module.scss';
+
+const ProjectsIcon = () => {
+  return (
+    <svg
+      viewBox="0 0 100 100"
+      xmlns="http://www.w3.org/2000/svg"
+      className={styles.icon}
+    >
+      <path
+        d="M 1.0206528,15.041147 H 98.979347 V 68.626894 H 1.0206528 Z"
+        className={styles.contour}
+      />
+      <path
+        d="M 6.2503581,19.91102 H 93.563283 V 62.7106 H 6.2503581 Z"
+        className={styles.screen}
+      />
+      <path
+        d="m 41.953125,69.147549 c 3.727668,2.111808 3.500227,7.673464 0,13.376953 H 50 58.046875 c -3.500227,-5.703489 -3.727669,-11.265145 0,-13.376953 H 50 Z"
+        className={`${styles.stand} ${styles['stand--top']}`}
+      />
+      <path
+        d="m 34.720269,82.590942 h 30.559462 c 1.126665,0 2.033692,0.356678 2.033692,0.799727 v 1.03911 c 0,0.443048 -0.907027,0.799727 -2.033692,0.799727 H 34.720269 c -1.126665,0 -2.033692,-0.356679 -2.033692,-0.799727 v -1.03911 c 0,-0.443049 0.907027,-0.799727 2.033692,-0.799727 z"
+        className={`${styles.stand} ${styles['stand--bottom']}`}
+      />
+      <path
+        d="m 13.259277,26.594948 h 29.132596 v 2.567314 H 13.259277 Z"
+        className={styles.line}
+      />
+      <path
+        d="M 13.259277,34.29689 H 36.46805 v 2.567315 H 13.259277 Z"
+        className={styles.line}
+      />
+      <path
+        d="m 13.259277,41.998833 h 26.586812 v 2.567314 H 13.259277 Z"
+        className={styles.line}
+      />
+      <path
+        d="m 18.443194,58.09095 h 4.417548 v 1 h -4.417548 z"
+        className={styles.cursor}
+      />
+      <path
+        d="m 77.586096,40.075326 v -1.680914 l 6.160884,-2.39919 -6.160884,-2.406595 v -1.68832 l 7.604842,2.89532 v 2.38438 z"
+        className={styles.text}
+      />
+      <path
+        d="m 68.396606,41.149038 6.07943,-11.136982 h 1.688318 l -6.049809,11.136982 z"
+        className={styles.text}
+      />
+      <path
+        d="m 59.384832,37.180007 v -2.38438 l 7.604841,-2.89532 v 1.68832 l -6.168289,2.406595 6.168289,2.399191 v 1.680915 z"
+        className={styles.text}
+      />
+      <path
+        d="M 7.1079167,50.036518 H 92.892083 v 0.813634 H 7.1079167 Z"
+        className={styles.separator}
+      />
+      <path
+        d="m 17.042456,57.120762 q 0,0.632276 -0.426175,0.9816 -0.422681,0.345831 -1.254074,0.37727 v 0.611318 h -0.380763 v -0.600838 q -0.751047,-0.02795 -1.170236,-0.352818 -0.419189,-0.328364 -0.551931,-1.002559 l 0.89427,-0.164183 q 0.06637,0.394736 0.261992,0.579878 0.199115,0.181648 0.565905,0.216581 v -1.365857 q -0.01048,-0.007 -0.0524,-0.01398 -0.04192,-0.01048 -0.05589,-0.01048 -0.562412,-0.129244 -0.848857,-0.303907 -0.286445,-0.178155 -0.443642,-0.447135 -0.153701,-0.272472 -0.153701,-0.663715 0,-0.579878 0.394736,-0.894269 0.394736,-0.317886 1.159755,-0.349325 V 53.25025 h 0.380763 v 0.468095 q 0.681183,0.02445 1.047973,0.303911 0.36679,0.275967 0.527479,0.918723 l -0.92222,0.136236 Q 15.910643,54.476378 15.362204,54.40302 v 1.22962 l 0.03843,0.007 q 0.101305,0 0.614811,0.167676 0.517,0.167676 0.772007,0.496041 0.255006,0.324871 0.255006,0.817418 z m -2.061012,-2.731715 q -0.639264,0.04891 -0.639264,0.558918 0,0.157196 0.0524,0.2585 0.0524,0.09781 0.157197,0.167676 0.104797,0.06986 0.429668,0.174662 z m 1.152769,2.745688 q 0,-0.174662 -0.06288,-0.282954 -0.06288,-0.111783 -0.185141,-0.181648 -0.118771,-0.06986 -0.523987,-0.185142 v 1.28202 q 0.772006,-0.0524 0.772006,-0.632276 z"
+        className={styles.root}
+      />
+    </svg>
+  );
+};
+
+export default ProjectsIcon;
diff --git a/src/components/Icons/index.tsx b/src/components/Icons/index.tsx
index 68aa2ac..5fe2c19 100644
--- a/src/components/Icons/index.tsx
+++ b/src/components/Icons/index.tsx
@@ -8,6 +8,7 @@ import CVIcon from './CV/CV';
 import HamburgerIcon from './Hamburger/Hamburger';
 import HomeIcon from './Home/Home';
 import MoonIcon from './Moon/Moon';
+import ProjectsIcon from './Projects/Projects';
 import SearchIcon from './Search/Search';
 import SunIcon from './Sun/Sun';
 
@@ -22,6 +23,7 @@ export {
   HamburgerIcon,
   HomeIcon,
   MoonIcon,
+  ProjectsIcon,
   SearchIcon,
   SunIcon,
 };
diff --git a/src/components/MainNav/MainNav.module.scss b/src/components/MainNav/MainNav.module.scss
index 21c5b9d..3cfb727 100644
--- a/src/components/MainNav/MainNav.module.scss
+++ b/src/components/MainNav/MainNav.module.scss
@@ -99,10 +99,17 @@
   @extend %reset-list;
 
   @include mix.media("screen") {
+    @include mix.dimensions(null, "2xs", "height") {
+      display: grid;
+      grid-template-columns: min-content min-content;
+      max-height: calc(100vh - var(--toolbar-size));
+    }
+
     @include mix.dimensions("md") {
       display: flex;
       flex-flow: row wrap;
       align-items: center;
+      gap: var(--spacing-2xs);
     }
   }
 }
@@ -111,6 +118,7 @@
   --draw-border-width: #{fun.convert-px(4)};
 
   display: block;
+  min-width: fun.convert-px(85);
   padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-2xs);
   background: var(--color-bg);
   background-repeat: no-repeat;
@@ -120,12 +128,8 @@
   text-decoration: none;
 
   @include mix.media("screen") {
-    @include mix.dimensions(null, "2xs", "height") {
-      padding: var(--spacing-2xs) var(--spacing-sm) 0;
-    }
-
     @include mix.dimensions("md") {
-      margin: 0 var(--spacing-2xs);
+      margin: 0;
       background-color: inherit;
       border-radius: 8%;
     }
diff --git a/src/components/MainNav/MainNav.tsx b/src/components/MainNav/MainNav.tsx
index 0339a35..afc4193 100644
--- a/src/components/MainNav/MainNav.tsx
+++ b/src/components/MainNav/MainNav.tsx
@@ -7,6 +7,7 @@ import {
   CVIcon,
   HamburgerIcon,
   HomeIcon,
+  ProjectsIcon,
 } from '@components/Icons';
 import { mainNav } from '@config/nav';
 import styles from './MainNav.module.scss';
@@ -31,6 +32,8 @@ const MainNav = ({
         return <ContactIcon />;
       case 'cv':
         return <CVIcon />;
+      case 'projects':
+        return <ProjectsIcon />;
       default:
         break;
     }
diff --git a/src/components/Toolbar/Toolbar.module.scss b/src/components/Toolbar/Toolbar.module.scss
index 096ad50..aabec9a 100644
--- a/src/components/Toolbar/Toolbar.module.scss
+++ b/src/components/Toolbar/Toolbar.module.scss
@@ -26,11 +26,6 @@
     var(--color-shadow-dark);
 
   @include mix.media("screen") {
-    @include mix.dimensions(null, "2xs", "height") {
-      --toolbar-size: #{fun.convert-px(52)};
-      --btn-size: #{fun.convert-px(42)};
-    }
-
     @include mix.dimensions("sm") {
       --toolbar-size: auto;
 
diff --git a/src/config/nav.ts b/src/config/nav.ts
index 9e715e5..ff69a78 100644
--- a/src/config/nav.ts
+++ b/src/config/nav.ts
@@ -4,6 +4,7 @@ import { NavItem } from '@ts/types/nav';
 export const mainNav: NavItem[] = [
   { id: 'home', name: t`Home`, slug: '/' },
   { id: 'blog', name: t`Blog`, slug: '/blog' },
+  { id: 'projects', name: t`Projects`, slug: '/projets' },
   { id: 'cv', name: t`Resume`, slug: '/cv' },
   { id: 'contact', name: t`Contact`, slug: '/contact' },
 ];
diff --git a/src/styles/abstracts/_variables.scss b/src/styles/abstracts/_variables.scss
index 3d1eb50..416b3c0 100644
--- a/src/styles/abstracts/_variables.scss
+++ b/src/styles/abstracts/_variables.scss
@@ -38,7 +38,7 @@ $ratios: (
 /// @prop {String} keys - Keys are identifiers mapped to a given length
 /// @prop {Map} values - Values are actual breakpoints expressed in pixels
 $breakpoints: (
-  "2xs": fun.convert-px(400, "em"),
+  "2xs": fun.convert-px(500, "em"),
   "xs": fun.convert-px(600, "em"),
   "sm": fun.convert-px(800, "em"),
   "md": fun.convert-px(1280, "em"),
@@ -151,7 +151,7 @@ $light-theme_black: hsl(207, 47%, 11%);
 $light-theme_blue: hsl(206, 75%, 31%);
 $light-theme_blue-o30: hsla(206, 75%, 31%, 0.3);
 $light-theme_blue-bright: hsl(206, 77%, 36%);
-$light-theme_blue-brighter: hsl(206, 70%, 49%);
+$light-theme_blue-brighter: hsl(206, 77%, 48%);
 $light-theme_blue-dark: hsl(206, 76%, 28%);
 $light-theme_blue-darker: hsl(206, 60%, 20%);
 $light-theme_grey: hsl(206, 15%, 80%);