From 65aa18444e04e82aac3317bb7afaea711f80bf53 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?benjamin=20melan=C3=A7on?= <ben@agaric.coop>
Date: Tue, 15 Jul 2025 20:12:30 -0400
Subject: [PATCH] Make responsive, add our tweaks, de-conflict variables

Ref #114 #126
---
 .../custom/geofresco/src/global/_layout.scss  | 80 ++++++++++---------
 1 file changed, 43 insertions(+), 37 deletions(-)

diff --git a/web/themes/custom/geofresco/src/global/_layout.scss b/web/themes/custom/geofresco/src/global/_layout.scss
index 270339b..f2a15da 100644
--- a/web/themes/custom/geofresco/src/global/_layout.scss
+++ b/web/themes/custom/geofresco/src/global/_layout.scss
@@ -1,12 +1,12 @@
 @charset "UTF-8";
 // Extend or override Bulma's layouts ../../node_modules/bulma/sass/layout
 
-@use "variables" as *;
-@use "../../node_modules/bulma/sass/utilities/mixins" as *;
+@use "variables" as local;
+@use "../../node_modules/bulma/sass/utilities/mixins";
 @use "../../node_modules/bulma/sass/utilities/initial-variables" as *;
 
 // Center logo & sitename when they stack on tiny screens.
-@include until($mini) {
+@include mixins.until(local.$mini) {
   .sitename.column,
   .logo.column {
     width: 100%;
@@ -50,10 +50,10 @@
 /* On full content pages. */
 .featured-image .background-replacement-for-no-image {
   height: 12rem;
-  @include from($desktop) {
+  @include mixins.from($desktop) {
     height: 14rem;
   }
-  @include from($widescreen) {
+  @include mixins.from($widescreen) {
     height: 16rem;
   }
 }
@@ -64,30 +64,26 @@
 }
 
 // Main navigation, goes to code in page.html.twig
+@include mixins.mobile {
+// Code adapted from https://unused-css.com/blog/css-only-hamburger-menu/
 .hamburger-container {
-  width: max-content;
-  position: absolute;
-  top: 10px;
-  right: 10px;
-  color: white;
   transition: transform 0.5s ease;
 }
 
-/* We don't need the checkbox to be visible, but we can't set it to display: none because this will break keyboard navigation. Instead set the opacity to 0 and the position to absolute so it doesn't push the rest of the content down */
+// We don't need the checkbox to be visible, but we can't set it to display: none because this will break keyboard navigation. Instead set the opacity to 0 and the position to absolute so it doesn't push the rest of the content down.
 .hamburger-container .checkbox {
   opacity: 0;
   position: absolute;
 }
 
-/* Show an outline when the hamburger is selected using the keyboard. Older browsers don't support :focus-visible, so we will just use :focus here. */
+// Show an outline when the hamburger is selected using the keyboard. Older browsers don't support :focus-visible, so we will just use :focus here.
 .hamburger-container .checkbox:focus ~ .hamburger {
-  /* Not all browsers support outline: auto, so set a sensible fallback outline. */
-  outline: 2px solid white;
+  outline: 2px solid yellow; // Default for browsers that do not support outline: auto
   outline: auto;
   outline-offset: 4px;
 }
 
-/* For newer browsers that do support :focus-visible, hide the outline when the checkbox isn't selected with the keyboard. */
+// For newer browsers that do support :focus-visible, hide the outline when the checkbox isn't selected with the keyboard.
 @supports selector(:focus-visible) {
   .hamburger-container .checkbox:not(:focus-visible) ~ .hamburger {
     outline: none;
@@ -122,54 +118,64 @@
 }
 
 .hamburger {
-  width: 32px;
-  height: 32px;
-  position: relative;
-  display: block;
-  transition: transform 0.5s ease;
-  z-index: 1;
   cursor: pointer;
-  padding-top: 5px;
+  display: block;
+  position: relative;
+  margin-left: auto;
+  margin-right: 0;
+  padding: 1.5rem 2rem 1rem 1rem;
+  width: 5rem;
+  height: 5rem;
+  transition: transform 0.3s ease;
+  z-index: 1;
 }
 
 .hamburger .slice {
   display: block;
   width: 100%;
-  height: 2px;
-  background-color: white;
-  transition: all 0.5s ease;
+  height: 0.1875rem;
+  background-color: $green;
+  transition: all 0.3s ease;
 }
 
 .hamburger .slice:not(:first-child) {
-  margin-top: 10px;
+  margin-top: 0.5rem;
 }
 
 .drawer {
-  position: fixed;
-  left: 0;
-  top: 0;
-  height: 100%;
+  position: absolute;
+  right: 0;
+  top: 5rem;
+  height: fit-content;
   width: max-content;
   max-width: 100%;
-  padding: 22px;
-  background: black;
+  padding: 1.5rem;
+  background: local.$offwhite;
   transform: translateX(-100%);
-  transition: transform 0.5s ease;
+  transition: transform 0.4s ease;
+  z-index: 100;
 }
 
 .drawer .nav-list {
   padding: 0;
   list-style: none;
-  margin-top: 30px;
-  margin-left: 20px;
+  // margin-top: 30px;
+  // margin-left: 20px;
 }
 
 .drawer .nav-list .nav-list-item {
-  padding-bottom: 10px;
+  // padding-bottom: 10px;
+}
+}
+
+@include mixins.tablet {
+  .hamburger, #hamburger-toggle {
+    display: none;
+  }
 }
 
 /* Make the drawer full-width on mobile */
-@media screen and (max-width: 768px) {
+@media screen and (max-width: local.$mini) {
   .drawer {
     width: 100%;
   }