From 1c6de1066564eb80c76fdd932915f6c7a21e7394 Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Mon, 17 Oct 2022 13:29:05 -0400
Subject: [PATCH] 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 | 16 +++++++++++++++-
.../card/card-elements/_header.twig | 8 ++++++--
.../card/card-elements/_media.twig | 4 +++-
.../04-components/site-name/_site-name.scss | 17 +++++++++++++----
.../04-components/site-name/site-name.twig | 2 +-
.../04-components/site-slogan/site-slogan.twig | 2 +-
6 files changed, 39 insertions(+), 10 deletions(-)
diff --git a/src/patterns/04-components/card/_card.scss b/src/patterns/04-components/card/_card.scss
index b0311a49..8a7130ca 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 c2a53578..d605ca28 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 3031be5f..4cc86f95 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 b488afb5..a3ce43e5 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 cf965df0..fc3e3103 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 119efc92..544caf6b 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>
--
GitLab