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";
// 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%;
}