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

Compare commits

base: geo:f94ea2a8e02fdb608fbb47cdbffb217c62963647
Branches Tags
geo:main
geo:drupal10-rebased
geo:drupal10
geo:master
geo:12-comments
geo:old-aug-left-on-local
..
compare: geo:d56ee8dceed3dd845788f8856def40e584713a0f
Branches Tags
geo:main
geo:drupal10-rebased
geo:drupal10
geo:master
geo:12-comments
geo:old-aug-left-on-local

No commits in common. "f94ea2a8e02fdb608fbb47cdbffb217c62963647" and "d56ee8dceed3dd845788f8856def40e584713a0f" have entirely different histories.
f94ea2a8e0 ... d56ee8dcee

4 changed files with 61 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

13
web/themes/custom/geofresco/src/global/_components.scss
View file

@ -22,14 +22,6 @@
} }
} }
.site-title {
display: inline-block;
width: 4.6em;
word-break: keep-all; // Shouldn't be needed but Chrome needs it.
font-size: 37px;
line-height: 38px;
}
.geo-logo-name { .geo-logo-name {
display: flex !important; display: flex !important;
overflow: hidden; overflow: hidden;
@ -39,10 +31,7 @@
} }
.logo a { .logo a {
display: block; display: block;
// width: 199px; width: 199px;
}
.logo img {
height: 7.5rem;
} }
@include from($tablet) { @include from($tablet) {
width: fit-content; width: fit-content;

36
web/themes/custom/geofresco/src/global/_elements.scss
View file

@ -1,41 +1,50 @@
@charset "UTF-8"; @charset "UTF-8";
// Extend or override Bulma's elements ../../node_modules/bulma/sass/elements /* Extend or override Bulma's elements ../../node_modules/bulma/sass/elements */
@use "../../node_modules/bulma/sass/utilities/derived-variables" as *; @use "../../node_modules/bulma/sass/utilities/derived-variables" as *;
@use "variables" as *; @use "variables" as *;
.site-title {
display: inline-block;
width: 4.6em;
word-break: keep-all; /* Shouldn't be needed but Chrome needs it. */
font-size: 37px;
line-height: 38px;
}
.user-account-menu li { .user-account-menu li {
display: inline-block; display: inline-block;
padding: .1rem .6rem; padding: .1rem .6rem;
} }
// Add a gradient across only a portion of the vertical height of the navbar. /* Add a gradient across only a portion of the vertical width of the navbar. */
.header { .header,
.sitename {
background: linear-gradient( background: linear-gradient(
$background, $background,
$background 5.3765rem, $background 74px,
$light-green 5.3765rem, $light-green 74px,
$green 8.4rem, $green 120px,
$background 8.4rem, $background 120px,
$background $background
); );
} }
#navbar-menu .navbar-item { #navbar-menu .navbar-item {
font-size: 1.357rem; font-size: 22px;
} }
.slogan { .slogan {
box-shadow: 0 2px 0 0 whitesmoke; box-shadow: 0 2px 0 0 whitesmoke;
margin-bottom: 2px; // Needed to see the boxshadow when we have the featured image directly below. margin-bottom: 2px; /* Needed to see the boxshadow when we have the featured image directly below. */
padding-bottom: 4px; // Give just a little extra space at the bottom for the *appearance* of balance. padding-bottom: 4px; /* Give just a little extra space at the bottom for the *appearance* of balance. */
.title { .title {
color: $green-gray; color: $green-gray;
font-size: 1.2rem; font-size: 1.2rem;
} }
} }
// Give some space above the subtitle. /* Give some space above the subtitle. */
.featured-image { .featured-image {
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
@ -47,16 +56,17 @@
margin: 1em; margin: 1em;
} }
.drum { .drum {
margin-bottom: 1.2rem; margin-bottom: 1.2rem;
} }
// Remove empty gap from featured homepage image, to match look of content. /* Remove empty gap from featured homepage image, to match look of content. */
.block--highlighted { .block--highlighted {
margin-top: -1.5rem; margin-top: -1.5rem;
} }
// I know this is wrong but it seems to work flawlessly across sizes. /* I know this is wrong but it seems to work flawlessly across sizes. */
.more-link { .more-link {
float: right; float: right;
position: relative; position: relative;

78
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 local; @use "variables" as *;
@use "../../node_modules/bulma/sass/utilities/mixins"; @use "../../node_modules/bulma/sass/utilities/mixins" as *;
@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 mixins.until(local.$mini) { @include until($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 mixins.from($desktop) { @include from($desktop) {
height: 14rem; height: 14rem;
} }
@include mixins.from($widescreen) { @include from($widescreen) {
height: 16rem; height: 16rem;
} }
} }
@ -64,26 +64,30 @@
} }
// 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 {
outline: 2px solid yellow; // Default for browsers that do not support outline: auto /* Not all browsers support outline: auto, so set a sensible fallback outline. */
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;
@ -118,64 +122,54 @@
} }
.hamburger { .hamburger {
cursor: pointer; width: 32px;
display: block; height: 32px;
position: relative; position: relative;
margin-left: auto; display: block;
margin-right: 0; transition: transform 0.5s ease;
padding: 1.5rem 2rem 1rem 1rem;
width: 5rem;
height: 5rem;
transition: transform 0.3s ease;
z-index: 1; z-index: 1;
cursor: pointer;
padding-top: 5px;
} }
.hamburger .slice { .hamburger .slice {
display: block; display: block;
width: 100%; width: 100%;
height: 0.1875rem; height: 2px;
background-color: $green; background-color: white;
transition: all 0.3s ease; transition: all 0.5s ease;
} }
.hamburger .slice:not(:first-child) { .hamburger .slice:not(:first-child) {
margin-top: 0.5rem; margin-top: 10px;
} }
.drawer { .drawer {
position: absolute; position: fixed;
right: 0; left: 0;
top: 5rem; top: 0;
height: fit-content; height: 100%;
width: max-content; width: max-content;
max-width: 100%; max-width: 100%;
padding: 1.5rem; padding: 22px;
background: local.$offwhite; background: black;
transform: translateX(-100%); transform: translateX(-100%);
transition: transform 0.4s ease; transition: transform 0.5s 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: local.$mini) { @media screen and (max-width: 768px) {
.drawer { .drawer {
width: 100%; width: 100%;
} }

4
web/themes/custom/geofresco/src/global/global.scss
View file

@ -3,9 +3,7 @@
@use "variables" as *; @use "variables" as *;
// Import each part of Bulma separately so we can layer in our styles. // Import each part of Bulma separately so we can layer in our styles.
// Extend or override Bulam's base styles in this themes base.scss etc. // Extend or override Bulam's base styles in this themes base.scss etc.
@use "../../node_modules/bulma/sass/utilities" with ( @forward "../../node_modules/bulma/sass/utilities/_index";
$background: white,
);
@forward "fonts"; @forward "fonts";
@forward "../../node_modules/bulma/sass/base/_index"; @forward "../../node_modules/bulma/sass/base/_index";
@forward "base"; @forward "base";