ISTWCMS-5880: css for titles, swapping the page title and slogan to div and...

ISTWCMS-5880: css for titles, swapping the page title and slogan to div and span, setting header_levels on headers of card

src/patterns/04-components/card/_card.scss

@@ -121,7 +121,7 @@ $card-padding: var(--size-2) !default;
 
 .card__title {
   font-family: var(--font-condensedbook);
-  line-height: var(--font-lineheight-2);
+  line-height: var(--font-lineheight-1);
   margin: 0 0 var(--size-1) 0;
   padding: 0;
   width: 100%;
@@ -135,6 +135,20 @@ $card-padding: var(--size-2) !default;
   padding: 0 0 var(--size-1) 0;
 }
 
+.card__media{
+  .card__header{
+    margin: 0 auto;
+    max-width: var(--layout-max-width);
+    padding: 0 var(--size-1);
+    @media(min-width: $screen-xxl) {
+      padding: 0;
+    }
+    .card__title{
+      margin: var(--size-1) 0;
+    }
+  }
+}
+
 // body
 .card__body {
   width: 100%;

src/patterns/04-components/card/card-elements/_header.twig

 <div class="card__header">
-
   {% if bundle == 'uw_ct_profile' %}
     {% if image %}
       <div class="uw-image__profiles">
@@ -27,8 +26,13 @@
   {% endif %}
 
   {% if header.title and show_title == 'yes' %}
+
+    {% if type  == 'teaser' %}
+      {% set header_level = '2' %}
+    {% endif %}
+
     {% include '@components/card/card-elements/_title.twig' with {
-      'header_level': 2,
+      'header_level': header_level,
       'title': header.title,
       'type': type
     } %}

src/patterns/04-components/card/card-elements/_media.twig

@@ -8,6 +8,7 @@
       {% include '@components/card/card-elements/_header.twig' with {
         'header': header,
         'show_title': 'yes',
+        'header_level': 1,
       } %}
     {% endif %}
   {% endif %}
@@ -15,7 +16,8 @@
   {% if media.type == 'image' %}
     {% include '@components/card/card-elements/_hero-image.twig' with {
       'hero_image': media.media,
-      'header': header
+      'header': header,
+      'header_level': 2,
     } %}
   {% endif %}
 

src/patterns/04-components/site-name/_site-name.scss

 // @file
 // Styles for Site name.
 @use '../../01-core' as *;
-
 $site-name-font-size: var(--font-size-5);
 $site-slogan-font-size: var(--font-size-2);
 
@@ -20,20 +19,30 @@ $site-slogan-font-size: var(--font-size-2);
   }
 
   &__text {
+    font-family: var(--font-condensedbook);
     font-size: $site-name-font-size;
+    font-weight: var(--font-weight-400);
+    hyphens: none;
+    line-height: var(--font-lineheight-1);
+    //margin: 0 0 var(--size-1);
     margin: 0;
     padding: var(--size-1) 0;
+    text-rendering: optimizeLegibility;
   }
 
   &__subtitle {
     display: block;
     font-family: var(--font-condensedbook);
     font-size: var(--font-size-0);
-
+    font-weight: var(--font-weight-400);
+    hyphens: none;
+    line-height: var(--font-lineheight-4);
+    //margin: 0 0 var(--size-1);
+    margin: 0;
+    padding: 0 0 0.5rem;
+    text-rendering: optimizeLegibility;
     @media(min-width: $screen-md) {
       font-size: $site-slogan-font-size;
     }
-    margin: 0;
-    padding: 0 0 0.5rem;
   }
 }

src/patterns/04-components/site-name/site-name.twig

 <div class="uw-site-name">
   <div class="uw-site-name__wrapper">
     <a class="uw-site-name__link" href="{{ home_link }}" title="{{ site_name}} {{ 'Home'|t }}" rel="home">
-      <h1 class="uw-site-name__text">{{ site_name }}</h1>
+      <div class="uw-site-name__text">{{ site_name }}</div>
       {% if subtitle %}
         {% include '@components/site-slogan/site-slogan.twig' with {
           'subtitle': subtitle,

src/patterns/04-components/site-slogan/site-slogan.twig

-<h2 class="uw-site-name__subtitle">{{ subtitle }}</h2>
+<span class="uw-site-name__subtitle">{{ subtitle }}</span>