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

Format source code (no other changes)

Browse source
This commit is contained in:
benjamin melançon 2025-07-15 20:21:31 -04:00
parent f94ea2a8e0
commit 03a075e255
1 changed files with 92 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -43,11 +43,11 @@
// Prevent a slight horizontal scroll.
/* On content listing pages (e.g. card view mode). */
// On content listing pages (e.g. card view mode).
.background-replacement-for-no-image {
height: 10rem;
}
/* On full content pages. */
// On full content pages.
.featured-image .background-replacement-for-no-image {
height: 12rem;
@include mixins.from($desktop) {
@ -58,114 +58,114 @@
}
}
/* Yes i know i should just give author bios their own class */
// Yes i know i should just give author bios their own class
.node--type-people.node--view-mode-teaser {
margin-bottom: 1rem;
}
// 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 {
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.
.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.
.hamburger-container .checkbox:focus ~ .hamburger {
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.
@supports selector(:focus-visible) {
.hamburger-container .checkbox:not(:focus-visible) ~ .hamburger {
outline: none;
// Code adapted from https://unused-css.com/blog/css-only-hamburger-menu/
.hamburger-container {
transition: transform 0.5s ease;
}
}
/* Hide any focusable elements in the drawer by default to aid keyboard navigation. We use visibility so it makes the elements unfocusable, but doesn't affect the layout. We can also add a "transition" to visibility, which will make it show instantly when we open the drawer, but take half a second to hide it when we close the drawer. */
.hamburger-container .drawer a {
visibility: hidden;
transition: visibility 0.5s linear;
}
// 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;
}
/* Make the focusable elements in the drawer visible when it is open. */
.hamburger-container .checkbox:checked ~ .drawer a {
visibility: visible;
}
// 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 {
outline: 2px solid yellow; // Default for browsers that do not support outline: auto
outline: auto;
outline-offset: 4px;
}
.hamburger-container .checkbox:checked ~ .drawer {
transform: translateX(0%);
}
// 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;
}
}
.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(1) {
transform: translateY(12px) rotate(45deg);
}
// Hide any focusable elements in the drawer by default to aid keyboard navigation. We use visibility so it makes the elements unfocusable, but doesn't affect the layout. We can also add a "transition" to visibility, which will make it show instantly when we open the drawer, but take half a second to hide it when we close the drawer.
.hamburger-container .drawer a {
visibility: hidden;
transition: visibility 0.5s linear;
}
.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(2) {
opacity: 0;
}
// Make the focusable elements in the drawer visible when it is open.
.hamburger-container .checkbox:checked ~ .drawer a {
visibility: visible;
}
.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(3) {
transform: translateY(-12px) rotate(-45deg);
}
.hamburger-container .checkbox:checked ~ .drawer {
transform: translateX(0%);
}
.hamburger {
cursor: pointer;
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-container .checkbox:checked ~ .hamburger .slice:nth-child(1) {
transform: translateY(12px) rotate(45deg);
}
.hamburger .slice {
display: block;
width: 100%;
height: 0.1875rem;
background-color: $green;
transition: all 0.3s ease;
}
.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(2) {
opacity: 0;
}
.hamburger .slice:not(:first-child) {
margin-top: 0.5rem;
}
.hamburger-container .checkbox:checked ~ .hamburger .slice:nth-child(3) {
transform: translateY(-12px) rotate(-45deg);
}
.drawer {
position: absolute;
right: 0;
top: 5rem;
height: fit-content;
width: max-content;
max-width: 100%;
padding: 1.5rem;
background: local.$offwhite;
transform: translateX(-100%);
transition: transform 0.4s ease;
z-index: 100;
}
.hamburger {
cursor: pointer;
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;
}
.drawer .nav-list {
padding: 0;
list-style: none;
// margin-top: 30px;
// margin-left: 20px;
}
.hamburger .slice {
display: block;
width: 100%;
height: 0.1875rem;
background-color: $green;
transition: all 0.3s ease;
}
.drawer .nav-list .nav-list-item {
// padding-bottom: 10px;
}
.hamburger .slice:not(:first-child) {
margin-top: 0.5rem;
}
.drawer {
position: absolute;
right: 0;
top: 5rem;
height: fit-content;
width: max-content;
max-width: 100%;
padding: 1.5rem;
background: local.$offwhite;
transform: translateX(-100%);
transition: transform 0.4s ease;
z-index: 100;
}
.drawer .nav-list {
padding: 0;
list-style: none;
// margin-top: 30px;
// margin-left: 20px;
}
.drawer .nav-list .nav-list-item {
// padding-bottom: 10px;
}
}
@include mixins.tablet {
@ -174,7 +174,7 @@
}
}
/* Make the drawer full-width on mobile */
// Make the drawer full-width on mobile
@media screen and (max-width: local.$mini) {
.drawer {
width: 100%;