Verified Commit 23301df6 authored by Théodore Biadala's avatar Théodore Biadala
Browse files

Issue #3188136 by ahsannazir, tirupati_singh, yevko, bhanu951, kostyashupenko,... 

Issue #3188136 by ahsannazir, tirupati_singh, yevko, bhanu951, kostyashupenko, arunkumark, gauravvvv, claudiu.cristea, ameymudras, mherchel, guilhermevp, sagarmohite0031, sourav_paul, manojithape, chetanbharambe, vikashsoni, akhildev.cs, redseujac, emofsnead, andy-blum, smustgrave, alexpott: The site slogan doesn't show with Olivero
parent 05057f1f

core/tests/Drupal/FunctionalTests/Theme/OliveroTest.php

+12 −0
Original line number Diff line number Diff line
@@ -162,4 +162,16 @@ public function testPagerAttribute(): void { 
    }

  }



  /**

   * Tests slogan of system branding block.

   */

  public function testSystemSiteBrandingSlogan(): void {

    $this->config('system.site')

      ->set('slogan', 'Community carpentry')

      ->save();



    $this->drupalGet('<front>');

    $this->assertSession()->pageTextContains('Community carpentry');

  }



}

core/themes/olivero/config/optional/block.block.olivero_site_branding.yml

+1 −1
Original line number Diff line number Diff line
@@ -18,5 +18,5 @@ settings: 
  provider: system

  use_site_logo: true

  use_site_name: true

  use_site_slogan: false

  use_site_slogan: true

visibility: {  }

core/themes/olivero/css/components/header-site-branding.css

+26 −8
Original line number Diff line number Diff line
@@ -17,7 +17,7 @@ 
  min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */

  min-height: var(--sp3);

  margin-inline: calc(-1 * var(--container-padding)) var(--sp); /* Negative margin to break out of .container element. */

  padding-block: 0 var(--sp0-5);

  padding-block: var(--sp0-5);

  padding-inline-start: var(--container-padding);

  padding-inline-end: var(--container-padding);

  background-image: linear-gradient(160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%);
@@ -66,6 +66,7 @@ 
.site-branding__inner {

  display: flex;

  align-items: center;

  gap: var(--sp0-5);

}



.site-branding__inner a {
@@ -113,8 +114,6 @@ 


.site-branding__text {

  color: var(--color--white);

  font-size: 1.125rem;

  font-weight: bold;

}



.site-branding__text a {
@@ -123,24 +122,43 @@ 


@media (min-width: 43.75rem) {

  .site-branding__text {

    display: grid;

    gap: var(--sp0-5);

  }

}



.site-branding__name {

  font-size: 1.125rem;

  font-weight: bold;

}



@media (min-width: 43.75rem) {

  .site-branding__name {

    font-size: 1.75rem;

    line-height: 1.75rem;

  }

}



@media (min-width: 75rem) {

  .site-branding__text {

  .site-branding__name {

    letter-spacing: 0.02em;

    font-size: 2rem;

    line-height: var(--sp2);

  }

}



.site-branding__slogan {

  font-size: var(--font-size-xs);

  line-height: var(--line-height-s);

}



@media (min-width: 43.75rem) {

  .site-branding__slogan {

    font-size: var(--font-size-base);

  }

}



.site-branding--bg-gray .site-branding__text,

.site-branding--bg-white .site-branding__text {

  color: var(--color--primary-50);

}
 


.site-branding__logo + .site-branding__text {

  margin-inline-start: 0.75rem;

}

core/themes/olivero/css/components/header-site-branding.pcss.css

+21 −7
Original line number Diff line number Diff line
@@ -12,7 +12,7 @@ 
  min-width: calc((2 * var(--grid-col-width)) + (2 * var(--grid-gap)) + var(--container-padding)); /* Span minimum of 2 column widths. */

  min-height: var(--sp3);

  margin-inline: calc(-1 * var(--container-padding)) var(--sp); /* Negative margin to break out of .container element. */

  padding-block: 0 var(--sp0-5);

  padding-block: var(--sp0-5);

  padding-inline-start: var(--container-padding);

  padding-inline-end: var(--container-padding);

  background-image: linear-gradient(160deg, var(--color--primary-50) 0%, var(--color--primary-40) 78.66%);
@@ -53,6 +53,7 @@ 
.site-branding__inner {

  display: flex;

  align-items: center;

  gap: var(--sp0-5);



  & a {

    text-decoration: none;
@@ -91,13 +92,21 @@ 


.site-branding__text {

  color: var(--color--white);

  font-size: 18px;

  font-weight: bold;



  & a {

    color: inherit;

  }



  @media (--md) {

    display: grid;

    gap: var(--sp0-5);

  }

}



.site-branding__name {

  font-size: 18px;

  font-weight: bold;



  @media (--md) {

    font-size: 28px;

    line-height: 28px;
@@ -110,11 +119,16 @@ 
  }

}



.site-branding__slogan {

  font-size: var(--font-size-xs);

  line-height: var(--line-height-s);



  @media (--md) {

    font-size: var(--font-size-base);

  }

}



.site-branding--bg-gray .site-branding__text,

.site-branding--bg-white .site-branding__text {

  color: var(--color--primary-50);

}
 


.site-branding__logo + .site-branding__text {

  margin-inline-start: 12px;

}

core/themes/olivero/templates/block/block--system-branding-block.html.twig

+10 −5
Original line number Diff line number Diff line
@@ -21,11 +21,16 @@ 
        <img src="{{ site_logo }}" alt="{{ 'Home'|t }}" fetchpriority="high"/>

      </a>

    {% endif %}

    {% if site_name %}

    {% if site_name or site_slogan %}

      <div class="site-branding__text">

        {% if site_name %}

          <div class="site-branding__name">

          <a href="{{ path('<front>') }}" title="{{ 'Home'|t }}" rel="home">{{ site_name }}</a>

            <a href="{{ path('<front>') }}" rel="home" title="{{ 'Home'|t }}">{{ site_name }}</a>

          </div>

        {% endif %}

        {% if site_slogan %}

          <div class="site-branding__slogan">{{ site_slogan }}</div>

        {% endif %}

      </div>

    {% endif %}

  </div>