diff --git a/src/patterns/04-components/card/_card.scss b/src/patterns/04-components/card/_card.scss index b0311a49c7d402615f0adbb454831edd21a50fe2..8a7130ca28bbf34e3982c78a9acec4e00b7440ac 100644 --- a/src/patterns/04-components/card/_card.scss +++ b/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%; diff --git a/src/patterns/04-components/card/card-elements/_header.twig b/src/patterns/04-components/card/card-elements/_header.twig index c2a5357833d1adffef2768f9ddbbd046b3a93b7f..d605ca28ca2ec61dddd344c1862f149452d1abac 100644 --- a/src/patterns/04-components/card/card-elements/_header.twig +++ b/src/patterns/04-components/card/card-elements/_header.twig @@ -1,5 +1,4 @@ <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 } %} diff --git a/src/patterns/04-components/card/card-elements/_media.twig b/src/patterns/04-components/card/card-elements/_media.twig index 3031be5f6f599e30ba6ca76c5f66f512a4854aaf..4cc86f95e267baa9cf880f9599e15a596b25b5d4 100644 --- a/src/patterns/04-components/card/card-elements/_media.twig +++ b/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 %} diff --git a/src/patterns/04-components/site-name/_site-name.scss b/src/patterns/04-components/site-name/_site-name.scss index b488afb5cf805aa0127c51f87fc356b2e0dd985a..a3ce43e5fa8bda444b4543f0c08ee3c00a498f00 100644 --- a/src/patterns/04-components/site-name/_site-name.scss +++ b/src/patterns/04-components/site-name/_site-name.scss @@ -1,7 +1,6 @@ // @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; } } diff --git a/src/patterns/04-components/site-name/site-name.twig b/src/patterns/04-components/site-name/site-name.twig index cf965df04c7c44c234601f5947f3c3dfab649762..fc3e3103bea1bb3520041a7f1e26296a9c7d6d27 100644 --- a/src/patterns/04-components/site-name/site-name.twig +++ b/src/patterns/04-components/site-name/site-name.twig @@ -1,7 +1,7 @@ <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, diff --git a/src/patterns/04-components/site-slogan/site-slogan.twig b/src/patterns/04-components/site-slogan/site-slogan.twig index 119efc92f64845bdcc21c72d394d590012c2dd76..544caf6bac6168f154faaa85c968f6066b8dbebe 100644 --- a/src/patterns/04-components/site-slogan/site-slogan.twig +++ b/src/patterns/04-components/site-slogan/site-slogan.twig @@ -1 +1 @@ -<h2 class="uw-site-name__subtitle">{{ subtitle }}</h2> +<span class="uw-site-name__subtitle">{{ subtitle }}</span>