From 53e3faf0be7719e3692a6be4e1f06894bca3c87d Mon Sep 17 00:00:00 2001 From: =?utf8?q?Arnaud=20Gu=C3=A9ras?= Date: Wed, 20 Nov 2024 15:08:33 +0100 Subject: [PATCH] mobile navigation fix MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Signed-off-by: Arnaud Guéras --- content/about/become-a-member.md | 4 +- content/contribute/get-started.md | 2 +- themes/xen-project/assets/css/grid.scss | 6 ++- .../assets/css/header/header-mobile.scss | 46 ++++++++++++++----- .../assets/css/molecules/features-list.scss | 6 ++- themes/xen-project/assets/css/variables.scss | 4 +- .../xen-project/layouts/partials/header.html | 2 +- 7 files changed, 52 insertions(+), 18 deletions(-) diff --git a/content/about/become-a-member.md b/content/about/become-a-member.md index e98f1d6..ef2b67c 100644 --- a/content/about/become-a-member.md +++ b/content/about/become-a-member.md @@ -134,12 +134,12 @@ The Board process will help ensure non-technical decisions are collectively dete

-

+ {{}} diff --git a/content/contribute/get-started.md b/content/contribute/get-started.md index 21d2c7e..1b15867 100644 --- a/content/contribute/get-started.md +++ b/content/contribute/get-started.md @@ -31,7 +31,7 @@ We've collated some information to help you get started, click here for resource {{}} - title: "**Read** documentation" text: > -

Access documentation

+

Access documentation

How to use documentation

- title: "**Communicate** with others" diff --git a/themes/xen-project/assets/css/grid.scss b/themes/xen-project/assets/css/grid.scss index 340aa63..32db705 100644 --- a/themes/xen-project/assets/css/grid.scss +++ b/themes/xen-project/assets/css/grid.scss @@ -30,7 +30,11 @@ section { } .section-row { - --min-col-width: 380px; + --min-col-width: 300px; + @include tablet { + --min-col-width: 380px; + } + display: flex; flex-wrap: wrap; gap: var(--gap, 1rem); diff --git a/themes/xen-project/assets/css/header/header-mobile.scss b/themes/xen-project/assets/css/header/header-mobile.scss index 59c79ac..5e955c8 100644 --- a/themes/xen-project/assets/css/header/header-mobile.scss +++ b/themes/xen-project/assets/css/header/header-mobile.scss @@ -3,6 +3,7 @@ background: var(--header-color-background); border-bottom: none; padding: var(--sp-xs) var(--sp-sm); + color: #fff; .header-inner { display: flex; @@ -32,7 +33,8 @@ @include media-max("header-breakpoint") { .menu-toggle { - color: var(--header-color-menu-toggle); + color: #fff; + border: none; font-size: 20px; font-style: normal; font-weight: 900; @@ -46,6 +48,7 @@ gap: 10px; position: absolute; left: 10px; + background: none; &::before { content: var(--icon-bars); @@ -56,6 +59,7 @@ .header.active { .header-content { display: flex; + padding: 40px 12px; } .menu-toggle, @@ -69,6 +73,9 @@ padding: var(--sp-xs) var(--sp-sm); font-size: 20px; z-index: 11; + &::before { + content: none; + } } .header-content::before, @@ -84,7 +91,6 @@ .menu li.active > a { z-index: 13; - color: inherit; gap: var(--sp-sm); pointer-events: none; cursor: default; @@ -96,7 +102,8 @@ pointer-events: all; content: var(--icon-arrow-left); font-family: var(--font-family-icons); - color: inherit; + color: #fff; + //var(--color-action-text) cursor: pointer; } @@ -106,7 +113,8 @@ .menu-toggle { left: auto; right: var(--sp-sm); - color: inherit; + color: #fff; + font-weight: 900; &::before { @@ -135,7 +143,9 @@ .menu { font-weight: 500; flex: 1; - + a { + color: #fff; + } &, li, ul { @@ -162,8 +172,8 @@ gap: var(--sp-md); } > li { - > a { - display: flex; + a { + display: inline flex; align-items: center; gap: var(--sp-xs); &::after { @@ -178,8 +188,8 @@ } // level 2 ul a { - width: 100%; - display: block; + // width: 100%; + // display: block; } } @@ -210,10 +220,24 @@ content: var(--arrow-up-right-from-square); } } + + li.active > a { + @include media-max("header-breakpoint") { + &::before { + content: var(--icon-arrow-left) !important; + font-family: var(--font-family-icons); + right: auto !important; + transform: scale(1); + position: static; + height: auto; + background: none; + } + } + } // level 2 ul a { - width: 100%; - display: block; + // width: 100%; + // display: block; } } diff --git a/themes/xen-project/assets/css/molecules/features-list.scss b/themes/xen-project/assets/css/molecules/features-list.scss index 12624bc..a5a4228 100644 --- a/themes/xen-project/assets/css/molecules/features-list.scss +++ b/themes/xen-project/assets/css/molecules/features-list.scss @@ -54,7 +54,11 @@ --li-width: calc(100% / var(--features-columns-count) - var(--gap)); margin: 0; flex: 1 1 var(--li-width); - min-width: 300px; + min-width: 240px; + + @include tablet { + min-width: 300px; + } } // diff --git a/themes/xen-project/assets/css/variables.scss b/themes/xen-project/assets/css/variables.scss index b05d8dc..b81a3bb 100644 --- a/themes/xen-project/assets/css/variables.scss +++ b/themes/xen-project/assets/css/variables.scss @@ -1,6 +1,6 @@ :root { --container-width: 1312px; - --content-padding-horizontal: 40px; + --content-padding-horizontal: 20px; --font-size: 1em; --font-family: "gotham", sans-serif; @@ -26,6 +26,8 @@ --p1-font-size: 1.125rem; /* 18px */ @include tablet { + --content-padding-horizontal: 40px; + --container-paddings: var(--sp-lg); --section-space: 100px; --block-space: 160px; diff --git a/themes/xen-project/layouts/partials/header.html b/themes/xen-project/layouts/partials/header.html index a3cd240..c134a75 100644 --- a/themes/xen-project/layouts/partials/header.html +++ b/themes/xen-project/layouts/partials/header.html @@ -5,7 +5,7 @@ Xen-Project - +
{{ partial "menu.html" (dict "menuID" "main" "page" .) }} {{ partial "socials.html" }} -- 2.39.5