diff --git a/web/themes/custom/geofresco/src/global/_components.scss b/web/themes/custom/geofresco/src/global/_components.scss index c0b488e..e2c1209 100644 --- a/web/themes/custom/geofresco/src/global/_components.scss +++ b/web/themes/custom/geofresco/src/global/_components.scss @@ -4,18 +4,16 @@ * ../../node_modules/bulma/sass/components */ -@use "variables" as *; +@use "variables" as local; @use "../../node_modules/bulma/sass/utilities/mixins" as *; @use "../../node_modules/bulma/sass/utilities/initial-variables" as *; -/** - * Make menu items slightly less far apart so we never entirely lose - * 'Community' on mid-size screens. - * See https://gitlab.com/drutopia/octavia/issues/52 - */ +// Make menu items slightly less far apart so we never entirely lose 'Community' +// on mid-size screens. See https://gitlab.com/drutopia/octavia/issues/52 .navbar-item, .navbar-link { padding-left: .75rem; padding-right: .75rem; + padding-top: 1.5rem; @include from($widescreen) { padding-left: 1rem; padding-right: 1rem; @@ -28,21 +26,33 @@ } #navbar-menu { + a:hover { + background-color: local.$yellow !important; + } display: flex; // More modern Bulma has is-flex-wrap-wrap as a class for this. flex-wrap: wrap; - @include until($tablet) { - width: 100%; - justify-content: space-around; + @include until($desktop) { + display: table; + // width: 100%; + // justify-content: space-around; + // Do not show the down arrow when it is already expanded. + .navbar-link::after { + display: none !important; + } } @include from($desktop) { flex-wrap: nowrap; margin-right: -1rem; + // Stay open as long as we are hovering; Bulma should be handling this but :shrug: + .navbar-dropdown:hover { + display: block; + } } } -/* Featured images on article pages */ +// Featured images on article pages. .featured-image figure.image { width: 100vw; position: relative; @@ -131,7 +141,7 @@ */ .footer .views-field { .field-content { - background-color: rgba($offwhite, 0.9); + background-color: rgba(local.$offwhite, 0.9); padding: 0.2em; border-radius: 0.3em; } @@ -147,14 +157,14 @@ } .page-title .title > span { - background-color: rgba($offwhite, 0.66); + background-color: rgba(local.$offwhite, 0.66); padding: 0.4em 0.3em 0.3em 0.3em; border-radius: 0.4em; line-height: 1.8; } .block--footer_menus { - background-color: rgba($offwhite, 0.9); + background-color: rgba(local.$offwhite, 0.9); padding: 0.2em; border-radius: 0.3em; } diff --git a/web/themes/custom/geofresco/src/global/_content.scss b/web/themes/custom/geofresco/src/global/_content.scss index f7df403..5654cd3 100644 --- a/web/themes/custom/geofresco/src/global/_content.scss +++ b/web/themes/custom/geofresco/src/global/_content.scss @@ -1,7 +1,4 @@ -/** - * Styles related to contributor-added content on the site, such as embedded - * media. - */ +// Styles for contributor-added content on the site, such as embedded media. iframe { width: 100%; @@ -10,3 +7,8 @@ iframe { height: revert-layer; } } + +// Header tabs section is only shown to content editors for the Edit etc tabs. +.header-tabs { + padding: 0; +} \ No newline at end of file diff --git a/web/themes/custom/geofresco/src/global/_elements.scss b/web/themes/custom/geofresco/src/global/_elements.scss index d147f9c..45c059e 100644 --- a/web/themes/custom/geofresco/src/global/_elements.scss +++ b/web/themes/custom/geofresco/src/global/_elements.scss @@ -26,11 +26,15 @@ .geo-logo-name { display: flex !important; + padding-bottom: 0 !important; // Or else .column's padding takes precedence. overflow: hidden; width: 100%; .logo, .sitename { display: table-cell; } + .sitename { + padding-top: 0.125rem; // 2px, better vertically-center "Organizing" in green stripe + } .logo a { display: block; } @@ -52,6 +56,7 @@ .slogan { box-shadow: 0 2px 0 0 whitesmoke; + margin-top: -1rem; 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. .title { diff --git a/web/themes/custom/geofresco/src/global/_layout.scss b/web/themes/custom/geofresco/src/global/_layout.scss index 938ca4b..f7423b0 100644 --- a/web/themes/custom/geofresco/src/global/_layout.scss +++ b/web/themes/custom/geofresco/src/global/_layout.scss @@ -5,12 +5,12 @@ @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. +// Allow sitename to slide over the logo on tiny screens. @include mixins.until(local.$mini) { .geo-logo-name .sitename { position: absolute; left: calc(100vw - 14rem); - top: 0.5rem; + top: 0; } // .logo.column { // width: 100%; @@ -18,10 +18,14 @@ .navigation.column .hamburger { position: absolute; right: 0; - top: 0.5rem; + top: 0; } } +.search-bar { + padding-top: 1.75rem; +} + .search-bar > .block, .logo > .image { display: inline-block; diff --git a/web/themes/custom/geofresco/src/global/_paint.scss b/web/themes/custom/geofresco/src/global/_paint.scss index 6601345..2e40e3e 100644 --- a/web/themes/custom/geofresco/src/global/_paint.scss +++ b/web/themes/custom/geofresco/src/global/_paint.scss @@ -63,3 +63,14 @@ .page--content-item--gleaning .page-title { background-color: $gleaning; } + +:root { + --bulma-body-color: $geo-green; + --bulma-navbar-dropdown-background-color: white; + --bulma-navbar-dropdown-z: 999; +} +// Not figuring out the damn -l -h -s to make our primary color. +.button.is-primary { + background-color: $geo-green; + color: white; +} diff --git a/web/themes/custom/geofresco/src/global/global.scss b/web/themes/custom/geofresco/src/global/global.scss index a762629..9f66817 100644 --- a/web/themes/custom/geofresco/src/global/global.scss +++ b/web/themes/custom/geofresco/src/global/global.scss @@ -6,6 +6,8 @@ @forward "../../node_modules/bulma/sass/utilities" with ( $background: white, + $green: $geo-green, + $blue: $blue, ); @forward "fonts"; @forward "../../node_modules/bulma/sass/base/_index"; @@ -15,18 +17,26 @@ @forward "../../node_modules/bulma/sass/form/_index"; @forward "form"; // $navbar-breakpoint: calc($mini/2); -@forward "../../node_modules/bulma/sass/components/_index"; +@forward "../../node_modules/bulma/sass/components/_index" with ( + $navbar-dropdown-background-color: white, +); @forward "components"; @forward "../../node_modules/bulma/sass/grid/_index"; @forward "grid"; @forward "../../node_modules/bulma/sass/layout/_index"; @forward "layout"; -// Import the themes so that all CSS variables have a value -@forward "../../node_modules/bulma/sass/themes"; - // Stylesheets below will have access to all Bulma variables and mixins. @forward "content"; @forward "paint"; +// Import the themes so that all CSS variables have a value (not) but avoid dark mode. +@use "../../node_modules/bulma/sass/themes/light"; +@use "../../node_modules/bulma/sass/themes/setup"; + +:root { + @include light.light-theme; + @include setup.setup-theme; +} + // @forward '../../node_modules/bulma-extensions/bulma-timeline/dist/bulma-timeline';