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/components/MainNav/MainNav.module.scss | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) (limited to 'src/components/MainNav/MainNav.module.scss') 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%; } -- cgit v1.2.3