mobile navigation fix

Signed-off-by: Arnaud Guéras <arnaudgs@gmail.com>

diff --git a/content/about/become-a-member.md b/content/about/become-a-member.md
index e98f1d64d3ea07086dbaeeb2e004c63f0653762e..ef2b67c8824686174c6032b4b8a1188d9a9f11f2 100644 (file)
--- 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
     <i class="fas fa-arrow-right"></i>
   </a>
 </p>
-<p class="txt-c">
+<!-- <p class="txt-c">
   <a href="TODO" class="btn btn-tertiary">
     Need some help?
     <i class="fas fa-arrow-right"></i>
   </a>
-</p>
+</p> -->
 
 {{</section>}}
 

diff --git a/content/contribute/get-started.md b/content/contribute/get-started.md
index 21d2c7e1a9cbe31954bce5ad63a25a9a9a07e0a9..1b15867d189fff597fd51006715ec9943cc3f1b6 100644 (file)
--- 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
 {{<vertical-lists cols="2">}}
 - title: "**Read** documentation"
   text: >
-    <p><a href="http://wiki.xenproject.org/" class="btn btn-tertiary">Access documentation <i class="fas fa-arrow-up-right-from-square"></i></a></p>
+    <p><a href="https://wiki.xenproject.org/" class="btn btn-tertiary">Access documentation <i class="fas fa-arrow-up-right-from-square"></i></a></p>
     <p><a href="https://wiki.xenproject.org/wiki/Index_Guide" class="btn btn-tertiary">How to use documentation <i class="fas fa-arrow-up-from-square"></i></a></p>
     
 - title: "**Communicate** with others"

diff --git a/themes/xen-project/assets/css/grid.scss b/themes/xen-project/assets/css/grid.scss
index 340aa63f204b6c3c18c4788cb9239851ecb966bf..32db705235408983f79f4b30317951d03789e0f6 100644 (file)
--- 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 59c79acb661faf8d4c39d24fe6a7b2416be05ec4..5e955c854af29f35ef4098d4fc5cdc53dbad7ac4 100644 (file)
--- 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 12624bc02e24ff699c3d356210ba99f4c41b87f4..a5a4228ae5ec33e0c6de66d12f64b8ac863c23f0 100644 (file)
--- 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 b05d8dc1c2c4a206c30026d3c45cc90ed7f668ae..b81a3bb935722b9ccecdcbdf551de6c153c0a449 100644 (file)
--- 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 a3cd24008f361a44aa416109faa15208c2e2ba8b..c134a75bf1dba3fa0412d07e2f98c8490db84846 100644 (file)
--- a/themes/xen-project/layouts/partials/header.html
+++ b/themes/xen-project/layouts/partials/header.html
@@ -5,7 +5,7 @@
         <img src="/img/logo-xen-reverse.svg" alt="Xen-Project" />
       </a>
     </div>
-    <button class="menu-toggle btn btn-tertiary" title="Toggle menu"></button>
+    <button class="menu-toggle" title="Toggle menu"></button>
     <div class="header-content" data-menu-title="Menu">
       {{ partial "menu.html" (dict "menuID" "main" "page" .) }}
       {{ partial "socials.html" }}