diff --git a/web/themes/custom/geofresco/src/global/_components.scss b/web/themes/custom/geofresco/src/global/_components.scss index 38d75bd..dcc1614 100644 --- a/web/themes/custom/geofresco/src/global/_components.scss +++ b/web/themes/custom/geofresco/src/global/_components.scss @@ -18,6 +18,47 @@ } } +.geo-logo-name { + display: flex !important; + overflow: hidden; + width: 100%; + .logo, .sitename { + display: table-cell; + } + .logo a { + display: block; + width: 199px; + } + @include from($tablet) { + width: fit-content; + } + @include until($mini) { + justify-content: flex-end; + } +} + +@include until($desktop) { + .search-bar { + display: none !important; + } +} + +// Mostly to reduce the impact of the ridiculous (mostly on Chrome) ghost mobile horizontal scroll. +.search-icon { + padding-right: 1rem; +} + +#navbar-menu { + 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; + } +} + + /* Featured images on article pages */ .featured-image figure.image { width: 100vw; diff --git a/web/themes/custom/geofresco/src/global/_layout.scss b/web/themes/custom/geofresco/src/global/_layout.scss index fe740b0..8b91de6 100644 --- a/web/themes/custom/geofresco/src/global/_layout.scss +++ b/web/themes/custom/geofresco/src/global/_layout.scss @@ -1,7 +1,6 @@ @charset "UTF-8"; // Extend or override Bulma's layouts ../../node_modules/bulma/sass/layout - // Center logo & sitename when they stack on tiny screens. @include until($mini) { .sitename.column, @@ -15,6 +14,7 @@ display: inline-block; } + // Allow the primary page content to be flush with the bottom of the slogan. .main-section { padding-top: 0; @@ -38,9 +38,6 @@ } // Prevent a slight horizontal scroll. -.page-title .container { - overflow-x: hidden; -} /* On content listing pages (e.g. card view mode). */ .background-replacement-for-no-image { diff --git a/web/themes/custom/geofresco/src/templates/block/block--system-branding-block.html.twig b/web/themes/custom/geofresco/src/templates/block/block--system-branding-block.html.twig index 996b9c2..9b743af 100644 --- a/web/themes/custom/geofresco/src/templates/block/block--system-branding-block.html.twig +++ b/web/themes/custom/geofresco/src/templates/block/block--system-branding-block.html.twig @@ -14,18 +14,18 @@ * @ingroup themeable */ #} +<div class="column is-narrow geo-logo-name is-paddingless"> {% if site_logo %} -<div class="logo column is-narrow is-paddingless has-text-centered"> - <figure class="image no-upscale"> - <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home"> - <img src="{{ site_logo }}" alt="{{ site_name }} Home" /> - </a> - </figure> +<div class="logo"> + <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home"> + <img src="{{ site_logo }}" alt="GEO's logo, a gently winding path through green to a large bright sun on the horizon." /> + </a> </div> {% endif %} -<div class="sitename column is-narrow is-paddingless has-text-centered"> +<div class="sitename"> <a class="site-title title is-3" href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home"> <span class="green">Grassroots Economic</span> <span class="yellow">Organizing</span></a> </div> +</div> diff --git a/web/themes/custom/geofresco/src/templates/elements/menu--nav-bulma.html.twig b/web/themes/custom/geofresco/src/templates/elements/menu--nav-bulma.html.twig index 5d70476..ffc614c 100644 --- a/web/themes/custom/geofresco/src/templates/elements/menu--nav-bulma.html.twig +++ b/web/themes/custom/geofresco/src/templates/elements/menu--nav-bulma.html.twig @@ -58,7 +58,7 @@ %} {% endif %} {% if item.url|render == '/search' %} - {% set item_classes = item_classes|merge(['is-hidden-tablet']) %} + {% set item_classes = item_classes|merge(['is-hidden-desktop search-icon']) %} {% endif %} {% endif %} {{ link( diff --git a/web/themes/custom/geofresco/src/templates/layout/page.html.twig b/web/themes/custom/geofresco/src/templates/layout/page.html.twig index dc48376..6cfb141 100644 --- a/web/themes/custom/geofresco/src/templates/layout/page.html.twig +++ b/web/themes/custom/geofresco/src/templates/layout/page.html.twig @@ -16,17 +16,17 @@ %} {% endif %} {% block navbar %} -{# We put everything in Bulma columns so must do navbar in header block #} +{# We put everything in Bulma columns so must do navbar in header block, not here #} {% endblock navbar %} {% block header %} -<div class="header columns is-mobile is-multiline is-marginless"> +<div class="header columns is-marginless"> {% block navbar_branding %} {{ page.navbar_branding }} {% endblock navbar_branding %} <nav class="navigation column"> <div class="columns"> {% if page.header_search %} - <div class="search-bar column has-text-right is-hidden-mobile"> + <div class="search-bar column has-text-right"> {{ page.header_search }} </div> {% endif %} @@ -39,7 +39,7 @@ {% endblock navbar_social %} {% block primary_menu %} {% if page.primary_menu %} - <div class="column is-narrow"> + <div class="column"> {{ page.primary_menu }} </div> {% endif %} @@ -47,11 +47,13 @@ </div> </nav> </div> +{% if is_front %} <div class="columns"> <div class="column has-text-centered"> <p class="slogan"><strong class="title">{{ site_slogan }}</strong></p> </div> </div> +{% endif %} {{ page.highlighted }} {{ page.help }} {% block tabs %}