geo/geo-coop
geo/geo-coop
7
1
Fork 0
Code Issues 54 Pull requests Projects Releases Packages Wiki Activity Actions

Make responsive, add our tweaks, de-conflict variables

Browse source 
Ref #114 #126
This commit is contained in:
benjamin melançon 2025-07-15 20:12:30 -04:00
parent c7c310a394
commit 65aa18444e
1 changed files with 43 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

80
web/themes/custom/geofresco/src/global/_layout.scss
View file

@ -1,12 +1,12 @@
@charset "UTF-8"; @charset "UTF-8";
// Extend or override Bulma's layouts ../../node_modules/bulma/sass/layout // Extend or override Bulma's layouts ../../node_modules/bulma/sass/layout
@use "variables" as *; @use "variables" as local;
@use "../../node_modules/bulma/sass/utilities/mixins" as *; @use "../../node_modules/bulma/sass/utilities/mixins";
@use "../../node_modules/bulma/sass/utilities/initial-variables" as *; @use "../../node_modules/bulma/sass/utilities/initial-variables" as *;
// Center logo & sitename when they stack on tiny screens. // Center logo & sitename when they stack on tiny screens.
@include until($mini) { @include mixins.until(local.$mini) {
.sitename.column, .sitename.column,
.logo.column { .logo.column {
width: 100%; width: 100%;
@ -50,10 +50,10 @@
/* On full content pages. */ /* On full content pages. */
.featured-image .background-replacement-for-no-image { .featured-image .background-replacement-for-no-image {
height: 12rem; height: 12rem;
@include from($desktop) { @include mixins.from($desktop) {
height: 14rem; height: 14rem;
} }
@include from($widescreen) { @include mixins.from($widescreen) {
height: 16rem; height: 16rem;
} }
} }
@ -64,30 +64,26 @@
} }
// Main navigation, goes to code in page.html.twig // 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 { .hamburger-container {
width: max-content;
position: absolute;
top: 10px;
right: 10px;
color: white;
transition: transform 0.5s ease; 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 { .hamburger-container .checkbox {
opacity: 0; opacity: 0;
position: absolute; 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 { .hamburger-container .checkbox:focus ~ .hamburger {
/* Not all browsers support outline: auto, so set a sensible fallback outline. */ outline: 2px solid yellow; // Default for browsers that do not support outline: auto
outline: 2px solid white;
outline: auto; outline: auto;
outline-offset: 4px; 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) { @supports selector(:focus-visible) {
.hamburger-container .checkbox:not(:focus-visible) ~ .hamburger { .hamburger-container .checkbox:not(:focus-visible) ~ .hamburger {
outline: none; outline: none;
@ -122,54 +118,64 @@
} }
.hamburger { .hamburger {
width: 32px;
height: 32px;
position: relative;
display: block;
transition: transform 0.5s ease;
z-index: 1;
cursor: pointer; 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 { .hamburger .slice {
display: block; display: block;
width: 100%; width: 100%;
height: 2px; height: 0.1875rem;
background-color: white; background-color: $green;
transition: all 0.5s ease; transition: all 0.3s ease;
} }
.hamburger .slice:not(:first-child) { .hamburger .slice:not(:first-child) {
margin-top: 10px; margin-top: 0.5rem;
} }
.drawer { .drawer {
position: fixed; position: absolute;
left: 0; right: 0;
top: 0; top: 5rem;
height: 100%; height: fit-content;
width: max-content; width: max-content;
max-width: 100%; max-width: 100%;
padding: 22px; padding: 1.5rem;
background: black; background: local.$offwhite;
transform: translateX(-100%); transform: translateX(-100%);
transition: transform 0.5s ease; transition: transform 0.4s ease;
z-index: 100;
} }
.drawer .nav-list { .drawer .nav-list {
padding: 0; padding: 0;
list-style: none; list-style: none;
margin-top: 30px; // margin-top: 30px;
margin-left: 20px; // margin-left: 20px;
} }
.drawer .nav-list .nav-list-item { .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 */ /* Make the drawer full-width on mobile */
@media screen and (max-width: 768px) { @media screen and (max-width: local.$mini) {
.drawer { .drawer {
width: 100%; width: 100%;
} }