diff --git a/.gitignore b/.gitignore index 13e17dfde50f9e0691506def2efb2cb7070dc564..13c8caccc86f144b92d3bdcbae062097e67b8350 100755 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,4 @@ gesso/ css/ js/ source/_patterns/00-config/_design-tokens.artifact.scss +source/_data/design-tokens.artifact.yml diff --git a/source/_patterns/03-layouts/header/header.twig b/source/_patterns/03-layouts/header/header.twig index 648f2180a413ee33446dd9a8dc49b87a0c324426..d56b468bd0994a651d3aa3687dcded14ef709961 100644 --- a/source/_patterns/03-layouts/header/header.twig +++ b/source/_patterns/03-layouts/header/header.twig @@ -30,6 +30,7 @@ <div class="uw-header__site-name"> {% include '@components/site-name/site-name.twig' with { 'site_name': site_name, + 'subtitle': subtitle, 'home_link': home_link } %} </div> diff --git a/source/_patterns/04-components/facts-and-figures/_facts-and-figures.scss b/source/_patterns/04-components/facts-and-figures/_facts-and-figures.scss index b21805d336b38f501a71091071b6966c185f11f4..01bd414c8e056ecd104520b1578e5cfb2edf8ba3 100644 --- a/source/_patterns/04-components/facts-and-figures/_facts-and-figures.scss +++ b/source/_patterns/04-components/facts-and-figures/_facts-and-figures.scss @@ -580,6 +580,12 @@ are the same height. */ font-size:rem(gesso-font-size(-1)); line-height: 1.2; } + em, i { + font-style: normal; + } + strong, b { + font-weight: bold; + } } } &--no-carousel{ diff --git a/source/_patterns/04-components/facts-and-figures/facts-and-figures.twig b/source/_patterns/04-components/facts-and-figures/facts-and-figures.twig index bfbea4ed26448b4888e3c58231c6dafc38ab48f2..d84882160e141c19e908962264afc790ccc735c3 100644 --- a/source/_patterns/04-components/facts-and-figures/facts-and-figures.twig +++ b/source/_patterns/04-components/facts-and-figures/facts-and-figures.twig @@ -16,6 +16,12 @@ <div class="uw-ff--text uw-ff--text__{{ detail.type }}"> <img src="{{ detail.icon }}" /> </div> + {% elseif detail.type == 'caption' %} + {% if detail.caption %} + <span class="uw-ff--text uw-ff--text__caption"> + {{ detail.caption }} + </span> + {% endif %} {% else %} <span class="uw-ff--text uw-ff--text__{{ detail.type }}">{{ detail.text }}</span> {% endif %} @@ -38,6 +44,12 @@ <div class="uw-ff--text uw-ff--text__{{ detail.type }}"> <img src="{{ detail.icon }}" /> </div> + {% elseif detail.type == 'caption' %} + {% if detail.caption %} + <span class="uw-ff--text uw-ff--text__caption"> + {{ detail.caption }} + </span> + {% endif %} {% else %} <span class="uw-ff--text uw-ff--text__{{ detail.type }}">{{ detail.text }}</span> {% endif %} diff --git a/source/_patterns/04-components/facts-and-figures/facts-and-figures.yml b/source/_patterns/04-components/facts-and-figures/facts-and-figures.yml index e371ef04bf1a9accf724d77d4dcfbf75b7366397..94ec08f55889780b0c0192d8d906e3325650539f 100644 --- a/source/_patterns/04-components/facts-and-figures/facts-and-figures.yml +++ b/source/_patterns/04-components/facts-and-figures/facts-and-figures.yml @@ -19,6 +19,9 @@ ffs: - text: 'Small #1' type: 'small' + - + caption: '<p>This <strong>would be</strong> caption</p>' + type: 'caption' - - type: 'infographics' infographics: @@ -65,3 +68,6 @@ ffs: - text: 'Small #1' type: 'small' + - + caption: '<p>This would be caption</p>' + type: 'caption' diff --git a/source/_patterns/04-components/site-name/_site-name.scss b/source/_patterns/04-components/site-name/_site-name.scss index 8ee4cc17c318ae1bc36543d2929099da9e5a4251..8ea86a65df62292c725a079a87b7df873ff026b4 100644 --- a/source/_patterns/04-components/site-name/_site-name.scss +++ b/source/_patterns/04-components/site-name/_site-name.scss @@ -3,7 +3,7 @@ $site-name-font-family: gesso-grayscale(gray-2); $site-name-font-size: gesso-font-size(5); - +$site-slogan-font-size: gesso-font-size(2); .uw-site-name { a{ &:hover{ text-decoration:underline;} @@ -29,6 +29,17 @@ $site-name-font-size: gesso-font-size(5); font-size:$site-name-font-size; margin:0; padding:0.5rem 0; + } + &__subtitle { + display:block; + font-family: gesso-font-family(condensedbook); + font-size: gesso-font-size(0); + @include medium{ + font-size: $site-slogan-font-size; + } + + margin: 0; + padding:0 0 0.5rem; } } diff --git a/source/_patterns/04-components/site-name/site-name.twig b/source/_patterns/04-components/site-name/site-name.twig index 74b9c200d284f1b6960b5e20854a4c7df2eaa42f..cdea90c9c2db406786beb03a326a4eafd81b4827 100644 --- a/source/_patterns/04-components/site-name/site-name.twig +++ b/source/_patterns/04-components/site-name/site-name.twig @@ -2,6 +2,13 @@ <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> + + {% if subtitle %} + {% include '@components/site-slogan/site-slogan.twig' with { + 'subtitle': subtitle, + } %} + {% endif %} + </a> </div> </div> diff --git a/source/_patterns/04-components/site-slogan/site-slogan.twig b/source/_patterns/04-components/site-slogan/site-slogan.twig index c381c5e9e853e2b6717b0913ef220660c8b3a136..119efc92f64845bdcc21c72d394d590012c2dd76 100644 --- a/source/_patterns/04-components/site-slogan/site-slogan.twig +++ b/source/_patterns/04-components/site-slogan/site-slogan.twig @@ -1 +1 @@ -<span class="site-slogan">{{ site_slogan }}</span> +<h2 class="uw-site-name__subtitle">{{ subtitle }}</h2>