Skip to content
Snippets Groups Projects
Commit a56f2bdb authored by wodby's avatar wodby
Browse files

Merge remote-tracking branch 'origin/3.0.x' into feature/ISTWCMS-5234-ebremner-hero

parents 91f5bf39 e294c1a1
No related branches found
No related tags found
1 merge request!128Feature/istwcms 5234 ebremner hero
Showing
with 202 additions and 94 deletions
......@@ -212,7 +212,7 @@ gesso:
background: "#0071BC"
text: "#fff"
table:
border: "#757575"
border: "#ccc"
background: "#fff"
background-head: "#eee"
background-foot: "#eee"
......@@ -250,20 +250,20 @@ gesso:
stack: georgia, "droid serif", "Times New Roman", Times, serif
secondary:
name: Secondary
stack: BureauGrot, impact, "avenir next condensed heavy", "Droid Sans",
sans-serif;
stack: BureauGrot, Barlow , impact, "avenir next condensed heavy", "Droid
Sans", sans-serif;
book:
name: Book
stack: '"BureauGrot Book", impact, "avenir next condensed heavy", "Droid
Sans", sans-serif'
stack: '"BureauGrot Book", Barlow, impact, "avenir next condensed heavy",
"Droid Sans", sans-serif'
condensed:
name: Condensed
stack: BureauGrotCond, impact, "avenir next condensed heavy", "Droid Sans",
sans-serif
stack: BureauGrotCond, "Barlow Condensed", impact, "avenir next condensed
heavy", "Droid Sans", sans-serif
condensedbook:
name: Condensed-Book
stack: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
Sans", sans-serif'
stack: '"BureauGrotCond Book", "Barlow Condensed", impact, "avenir next
condensed heavy", "Droid Sans", sans-serif'
system:
name: System Typ1451-Regular
stack: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
......@@ -330,38 +330,38 @@ gesso:
font-size: 41.056px
font-weight: 400
h1:
font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
Sans", sans-serif'
font-family: '"BureauGrotCond Book", "Barlow Condensed", impact, "avenir next
condensed heavy", "Droid Sans", sans-serif'
font-size: 41.056px
font-weight: 400
line-height: 1.1
h2:
font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
Sans", sans-serif'
font-family: '"BureauGrotCond Book", "Barlow Condensed", impact, "avenir next
condensed heavy", "Droid Sans", sans-serif'
font-size: 28.832px
font-weight: 400
line-height: 1.1
h3:
font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
Sans", sans-serif'
font-family: '"BureauGrotCond Book", "Barlow Condensed", impact, "avenir next
condensed heavy", "Droid Sans", sans-serif'
font-size: 22.784px
font-weight: 400
line-height: 1.1
h4:
font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
Sans", sans-serif'
font-family: '"BureauGrotCond Book", "Barlow Condensed", impact, "avenir next
condensed heavy", "Droid Sans", sans-serif'
font-size: 20.256px
font-weight: 400
line-height: 1.1
h5:
font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
Sans", sans-serif'
font-family: '"BureauGrotCond Book", "Barlow Condensed", impact, "avenir next
condensed heavy", "Droid Sans", sans-serif'
font-size: 18px
font-weight: 400
line-height: 1.1
h6:
font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid
Sans", sans-serif'
font-family: '"BureauGrotCond Book", "Barlow Condensed", impact, "avenir next
condensed heavy", "Droid Sans", sans-serif'
font-size: 16px
font-weight: 400
line-height: 1.1
......
......@@ -4,7 +4,13 @@
<title>{{ title }}</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&family=Barlow:wght@400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&family=Barlow:wght@400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap"
media="print" onload="this.media='all'" />
<noscript>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&family=Barlow:wght@400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" />
</noscript>
<link rel="stylesheet" href="../../../../css/style.css?{{ cacheBuster }}" media="all" />
<link rel="stylesheet" href="../../../../css/pattern-scaffolding.css?{{ cacheBuster }}" media="all" />
......
......@@ -7,8 +7,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{{ page_title }} | {{ site_name }}</title>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;700&family=Barlow:wght@300;400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;700&family=Barlow:wght@300;400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" media="print" onload="this.media='all'" />
<noscript>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@400;500;700&family=Barlow:wght@300;400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" />
</noscript>
<link rel="stylesheet" href="../../../../css/styles.css?{{ cacheBuster }}" media="all">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css?{{ cacheBuster }}" media="all">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css?{{ cacheBuster }}" media="all">
......
......@@ -7,8 +7,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{{ page_title }} | {{ site_name }}</title>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preload" as="style" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&family=Barlow:wght@400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&family=Barlow:wght@400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" media="print" onload="this.media='all'" />
<noscript>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&family=Barlow:wght@400;500;700&family=Source+Sans+Pro:300,300i,400,400i,600,600i,700,700i&display=swap" />
</noscript>
<link rel="stylesheet" href="../../../css/styles.css?{{ cacheBuster }}" media="all">
<script src="../../../js/libraries/modernizr.min.js?v=3.3.1"></script>
<link rel="stylesheet" href="../../../css/pattern-lab.css?{{ cacheBuster }}" media="all">
......
......@@ -58,14 +58,14 @@ $test-color-12: #f00;
width: 100vw;
}
@mixin uw-full-width-reset {
left: 0;
left: inherit;
margin-left: -1rem;
margin-right: -1rem;
max-width: 100%;
padding: 0;
margin-right: -2rem;
max-width: inherit;
padding:inherit;
position: relative;
right: 0;
width: 100%;
right: inherit;
width: inherit;
}
@mixin uw-contained-width-reset() {
margin-left:inherit;
......
......@@ -254,7 +254,7 @@ $gesso: (
text: #fff,
),
table: (
border: #757575,
border: #ccc,
background: #fff,
background-head: #eee,
background-foot: #eee,
......@@ -300,19 +300,19 @@ $gesso: (
),
secondary: (
name: Secondary,
stack: 'BureauGrot, impact, "avenir next condensed heavy", "Droid Sans", sans-serif;',
stack: 'BureauGrot, Barlow , impact, "avenir next condensed heavy", "Droid Sans", sans-serif;',
),
book: (
name: Book,
stack: '"BureauGrot Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
stack: '"BureauGrot Book", Barlow, impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
),
condensed: (
name: Condensed,
stack: 'BureauGrotCond, impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
stack: 'BureauGrotCond, "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
),
condensedbook: (
name: Condensed-Book,
stack: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
stack: '"BureauGrotCond Book", "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
),
system: (
name: 'System Typ1451-Regular',
......@@ -386,37 +386,37 @@ $gesso: (
font-weight: 400,
),
h1: (
font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
font-family: '"BureauGrotCond Book", "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
font-size: 41.056px,
font-weight: 400,
line-height: 1.1,
),
h2: (
font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
font-family: '"BureauGrotCond Book", "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
font-size: 28.832px,
font-weight: 400,
line-height: 1.1,
),
h3: (
font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
font-family: '"BureauGrotCond Book", "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
font-size: 22.784px,
font-weight: 400,
line-height: 1.1,
),
h4: (
font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
font-family: '"BureauGrotCond Book", "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
font-size: 20.256px,
font-weight: 400,
line-height: 1.1,
),
h5: (
font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
font-family: '"BureauGrotCond Book", "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
font-size: 18px,
font-weight: 400,
line-height: 1.1,
),
h6: (
font-family: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
font-family: '"BureauGrotCond Book", "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif',
font-size: 16px,
font-weight: 400,
line-height: 1.1,
......
......@@ -212,7 +212,7 @@ gesso:
background: brand.blue.base
text: grayscale.white
table:
border: grayscale.gray-5
border: grayscale.gray-3
background: grayscale.white
background-head: grayscale.gray-2
background-foot: grayscale.gray-2
......@@ -250,16 +250,16 @@ gesso:
stack: 'georgia, "droid serif", "Times New Roman", Times, serif'
secondary:
name: Secondary
stack: 'BureauGrot, impact, "avenir next condensed heavy", "Droid Sans", sans-serif;'
stack: 'BureauGrot, Barlow , impact, "avenir next condensed heavy", "Droid Sans", sans-serif;'
book:
name: Book
stack: '"BureauGrot Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
stack: '"BureauGrot Book", Barlow, impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
condensed:
name: Condensed
stack: 'BureauGrotCond, impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
stack: 'BureauGrotCond, "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
condensedbook:
name: Condensed-Book
stack: '"BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
stack: '"BureauGrotCond Book", "Barlow Condensed", impact, "avenir next condensed heavy", "Droid Sans", sans-serif'
system:
name: System Typ1451-Regular
stack: 'Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif'
......
{# Due to barlow being a fallback font from google this allows the fonts to be displayed in pattern lab #}
<style>
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@300;500&display=swap');
</style>
{% for webfont in webfonts %}
<div class="pattern-lab-font">
<h3 class="pattern-lab-font__family" style="{{ webfont.style }}">{{ webfont.family_name }}</h3>
......
......@@ -32,6 +32,28 @@ webfonts:
font_name: 'georgia'
font_weight: '700'
font_style: 'normal'
-
family_name: 'Barlow'
style: 'font-family: Barlow, sans-serif;'
font:
-
font_preview_character: 'Aa'
font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
font_preview_style: 'font-family: Barlow; font-weight: 400; font-style: normal;'
font_name: 'Barlow'
font_weight: 'normal'
font_style: 'normal'
-
family_name: 'Barlow Condensed'
style: 'font-family:"Barlow Condensed", sans-serif;'
font:
-
font_preview_character: 'Aa'
font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
font_preview_style: "font-family: 'Barlow Condensed'; font-weight: 500; font-style: normal;"
font_name: 'Barlow Condensed'
font_weight: 'medium'
font_style: 'normal'
-
family_name: 'BureauGrot'
style: 'font-family: "BureauGrot", serif;'
......@@ -204,7 +226,8 @@ webfonts:
-
font_preview_character: 'Aa'
font_preview: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ<br />abcdefghijklmnopqrstuvwxyz<br />1234567890(,.;:?!$&*)'
font_preview_style: "font-family: fdsu-rwd; font-weight: 400; font-style: normal;"
font_preview_style: 'font-family: fdsu-rwd; font-weight: 400; font-style: normal;'
font_name: 'fdsu-rwd'
font_weight: 'normal'
font_style: 'normal'
......@@ -2,26 +2,24 @@
// Table styles.
caption {
margin-bottom: rem(gesso-spacing(xxs));
font-size: gesso-base-font-size();
font-style:italic;
padding: gesso-spacing(xs);
}
// col {}
// colgroup {}
table {
border-collapse: collapse;
border-spacing: 0;
margin-bottom: rem(gesso-spacing(xs));
min-width: 100%;
}
margin: rem(gesso-spacing(xs)) 0;
max-width: 100%;
width: 100%;
// tbody {}
}
td {
background-color: gesso-color(table, background);
border: 1px solid gesso-color(table, border);
padding: rem(gesso-spacing(sm));
padding: gesso-spacing(xs);
}
tfoot {
......@@ -32,10 +30,14 @@ tfoot {
}
th {
background-color: gesso-color(table, background);
background-color: gesso-color(table, background-head);
border: 1px solid gesso-color(table, border);
padding: rem(gesso-spacing(sm));
font-style:italic;
padding: gesso-spacing(xs);
text-align: left;
&[scope="row"] {
background-color: gesso-color(table, background-head);
}
}
thead {
......
......@@ -96,7 +96,9 @@ label,
font-family: $form-label-font-family;
font-size: gesso-font-size(2);
font-weight: gesso-font-weight(regular);
margin-bottom: rem(gesso-spacing(xs));
form &{
margin-bottom: rem(gesso-spacing(xs));
}
abbr {
display: inline;
font-size: gesso-font-size(1);
......
......@@ -6,9 +6,6 @@ $sidebar-gap: $grid-gap;
}
&__sidebar{
display:none;
*{
padding-right:0.25rem;
}
}
// Reset the grid to become flexed when we have sidebar.
&.uw-node__with-sidebar{
......@@ -25,25 +22,30 @@ $sidebar-gap: $grid-gap;
margin:0 auto;
}
.uw-full-width{
width:100vw;
}
@include medium {
flex-direction: row;
gap:$sidebar-gap;
.layout{
padding-right:0;
width: clamp(320px, 868px, calc(100vw - 347px));
}
.uw-contained-width{
padding-right:0;
width: clamp(320px, 868px, calc(100vw - 347px));
}
/* Match the width of WCMS2's narrow: 496px */
.uw-contained-width--narrow{
padding-right:0;
width: clamp(320px, 496px, calc(100vw - 347px));
}
/* Match the width of WCMS2's wide: 753px */
.uw-contained-width--wide{
padding-right:0;
width: clamp(320px, 753px, calc(100vw - 347px));
}
}
......@@ -51,27 +53,33 @@ $sidebar-gap: $grid-gap;
.uw-node__sidebar{
// Turn on sidebar with display.
display:block;
padding:0 1rem;
width:100%;
.layout{
padding:0;
}
@include medium {
padding: 1rem 0;
padding:0;
width: $sidebar-width;
.layout{
width:inherit;
}
}
}
}
}
// Class appears when full width content loads with sidebar on page
.uw-section-has-full-width.uw-node__with-sidebar {
.uw-node__grid {
justify-content: space-between;
.uw-node__node{
width:100%;
@include medium {
padding-right:0;
width: calc(100vw - 347px);
}
}
}
.uw-full-width{
max-width:inherit;
padding:0;
......@@ -79,8 +87,8 @@ $sidebar-gap: $grid-gap;
}
}
.uw-node__sidebar{
padding: 0
@include medium{
padding: 0
}
}
}
......@@ -135,6 +135,9 @@ $card-padding: rem(gesso-spacing(sm)) !default;
.card__content {
margin-bottom: rem(gesso-spacing(md));
width: 100%;
&:empty{
margin-bottom:0;
}
}
.card__media {
......
......@@ -31,4 +31,47 @@
padding: 0;
}
}
// CSS for specific node card presentations layers
&--contact {
display:grid;
gap:$grid-gap;
.card__content{
.layout {padding:0;}
}
@include medium {
display: grid;
gap: 2rem;
grid-template-columns: 10rem 1fr;
}
.card__image {
grid-column: 1 / 3;
grid-row: 1 / 10;
@include medium {
grid-column: 1 / 2;
}
}
.card__header,
.card__body,
.card__footer {
grid-column: 1 / 3;
@include medium {
grid-column: 2 / 3;
}
padding: 0;
}
.uw-node__without-image & {
@include medium {
grid-template-columns: 100%;
}
.card__header,
.card__body,
.card__footer {
grid-column: 1 / 2;
}
}
}
}
{% if node.hero_image and node.hero_image.img_element %}
{% if node.hero_image and node.hero_image.img_element or node.image %}
{% set node_image_class = 'with-image' %}
{% else %}
{% set node_image_class = 'without-image' %}
{% endif %}
{% set modifier_classes = 'node--' ~ node.bundle %}
<div class="uw-node__{{ node_image_class }}">
{% include '@components/card/card.twig' with {
'url': node.url,
......@@ -11,7 +13,7 @@
'show_hover': '',
'header': node.header,
'media': node.media,
'listing_image': node.listing_image,
'image': node.image,
'content': node.content,
'footer': node.footer,
'tags': node.tags,
......
......@@ -4,11 +4,14 @@
{% set show_hover = 'true' %}
{% endif %}
{% set modifier_classes = 'teaser--' ~ teaser.bundle %}
{% include '@components/card/card.twig' with {
'modifier_classes': modifier_classes,
'type': type,
'url': teaser.url,
'header': teaser.header,
'listing_image': teaser.listing_image,
'image': teaser.image,
'content': teaser.content,
'footer': teaser.footer,
'tags': teaser.tags,
......
<div class="card__contact-for">
{% embed '@components/details/details.twig' %}
{% embed '@components/details/details.twig' with {
'is_open': TRUE,
}%}
{% block details_summary %}
Contact for
{% endblock %}
......
<div class="card__contact-info">
{% embed '@components/details/details.twig' %}
{% embed '@components/details/details.twig' with {
'is_open': TRUE,
}%}
{% block details_summary %}
Contact Information
{% endblock %}
......
<div class="card__content">
{{ content }}
</div>
<div class="card__content">{{ content }}</div>
{% if footer.additional_info %}
{% include '@components/card/card-elements/_additional-info.twig' with {
'additional_info': footer.additional_info
} %}
{% endif %}
{% if footer.service_information %}
{% include '@components/card/card-elements/_service-information.twig' with {
......@@ -28,6 +23,18 @@
} %}
{% endif %}
{% if footer.contact_for %}
{% include '@components/card/card-elements/_contact-for.twig' with {
'contact_for': footer.contact_for
} %}
{% endif %}
{% if footer.groups %}
{% include '@components/card/card-elements/_groups.twig' with {
'groups': footer.groups.groups
} %}
{% endif %}
{% if footer.links %}
{% include '@components/card/card-elements/_links.twig' with {
'links': footer.links
......@@ -40,15 +47,9 @@
}%}
{% endif %}
{% if footer.contact_for %}
{% include '@components/card/card-elements/_contact-for.twig' with {
'contact_for': footer.contact_for
} %}
{% endif %}
{% if footer.groups %}
{% include '@components/card/card-elements/_groups.twig' with {
'groups': footer.groups.groups
{% if footer.additional_info %}
{% include '@components/card/card-elements/_additional-info.twig' with {
'additional_info': footer.additional_info
} %}
{% endif %}
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment