From df9e8b1985a0f1c71c0657e72fad008bf437faba Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Thu, 20 Jan 2022 17:13:15 +0100 Subject: 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. --- src/assets/images/icon-projects.svg | 89 ++++++++++++++++++++++ src/components/Icons/Projects/Projects.module.scss | 40 ++++++++++ src/components/Icons/Projects/Projects.tsx | 66 ++++++++++++++++ src/components/Icons/index.tsx | 2 + src/components/MainNav/MainNav.module.scss | 14 ++-- src/components/MainNav/MainNav.tsx | 3 + src/components/Toolbar/Toolbar.module.scss | 5 -- src/config/nav.ts | 1 + src/styles/abstracts/_variables.scss | 4 +- 9 files changed, 212 insertions(+), 12 deletions(-) create mode 100644 src/assets/images/icon-projects.svg create mode 100644 src/components/Icons/Projects/Projects.module.scss create mode 100644 src/components/Icons/Projects/Projects.tsx (limited to 'src') 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 @@ + + + + + + + + + + + + + + + + + + + + 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 ( + + + + + + + + + + + + + + + + ); +}; + +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 ; case 'cv': return ; + case 'projects': + return ; 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%); -- cgit v1.2.3