Skip to content
Snippets Groups Projects

Compare revisions

Changes are shown as if the source revision was being merged into the target revision. Learn more about comparing revisions.

Source

Select target project
No results found

Target

Select target project
  • wcms/uw_wcms_gesso
1 result
Show changes
Commits on Source (10)
Showing
with 160 additions and 79 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">
......
......@@ -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 {
......
......@@ -8,12 +8,17 @@ $card-meta-color: gesso-color(ui, generic, text-dark) !default;
$card-padding: rem(gesso-spacing(sm)) !default;
.card {
width: 100%;
.views-row &{
height:100%;
.views-row & {
height: 100%;
}
.uw-label {
display: block;
margin-top: 1rem;
}
&__catalog-tags {
padding-bottom: rem(gesso-spacing(sm));
}
......@@ -25,12 +30,13 @@ $card-padding: rem(gesso-spacing(sm)) !default;
box-shadow: gesso-box-shadow(1);
padding: $card-padding;
transition: box-shadow gesso-duration(short) gesso-easing(ease-in-out);
&:hover,
&:focus-within {
box-shadow: gesso-box-shadow(3);
}
}
.card__image{}
.card__featured-image {
align-items: center;
background-position: center center;
......@@ -41,6 +47,7 @@ $card-padding: rem(gesso-spacing(sm)) !default;
justify-items: center;
min-height: 44rem;
position: relative;
.card__header {
align-self: end;
margin-bottom: 0;
......@@ -51,7 +58,6 @@ $card-padding: rem(gesso-spacing(sm)) !default;
padding: 0;
}
.card__date {
margin-bottom: 0;
margin-top: 0;
......@@ -81,16 +87,19 @@ $card-padding: rem(gesso-spacing(sm)) !default;
}
}
}
.card__header{
@include uw-no-breakout();
margin-bottom: rem(gesso-spacing(xs));
width: 100%;
}
.card__date {
font-size: rem(gesso-font-size(0));
margin-bottom: rem(gesso-spacing(sm));
}
.card__title {
margin:rem(gesso-spacing(xs)) 0;
padding:0;
......@@ -102,13 +111,14 @@ $card-padding: rem(gesso-spacing(sm)) !default;
);
}
}
.card__sub-title{}
.card__author{
@include uw-no-breakout();
font-family: gesso-font-family(systemmedium);
font-size: gesso-font-size(-1);
margin-top: 0;
padding: 0 0 gesso-spacing(xs) 0;
a {
@include link(
$card-link-color,
......@@ -116,10 +126,12 @@ $card-padding: rem(gesso-spacing(sm)) !default;
);
}
}
// body
.card__body {
width: 100%;
}
.card__content {
margin-bottom: rem(gesso-spacing(md));
width: 100%;
......@@ -127,13 +139,14 @@ $card-padding: rem(gesso-spacing(sm)) !default;
margin-bottom:0;
}
}
.card__media {
//background:$test-color-4;
margin-bottom: rem(gesso-spacing(md));
order:-1;
width: 100%;
a {
a {
display:inline-block;
height: 100%;
width: 100%;
......@@ -146,6 +159,7 @@ $card-padding: rem(gesso-spacing(sm)) !default;
}
}
}
img {
//-webkit-filter: grayscale(0);
//filter: grayscale(0);
......@@ -168,16 +182,17 @@ $card-padding: rem(gesso-spacing(sm)) !default;
.card__footer {
width: 100%;
}
.card__tags{
margin:0;
padding:0;
width: 100%;
}
.card__readmore {
text-align: right;
}
.card__social{
max-width:20rem;
width: 100%;
......@@ -190,17 +205,12 @@ $card-padding: rem(gesso-spacing(sm)) !default;
}
.card__media {
margin-bottom: 0;
}
@include breakpoint(gesso-breakpoint(md)) {
flex-direction: row;
.card__title {
}
.card__body {
max-width: 600px;
padding: $card-padding 2vw 0;
......
......@@ -12,7 +12,7 @@
'type': type,
'show_hover': '',
'header': node.header,
'hero_image': node.hero_image,
'media': node.media,
'image': node.image,
'content': node.content,
'footer': node.footer,
......
<div class="card__media">
{% if media.type == 'banner' %}
{% include '@components/banners/banners.twig' with {
'banners': media.media
} only %}
{% endif %}
{% if media.type == 'image' %}
{% include '@components/card/card-elements/_hero-image.twig' with {
'hero_image': media.media,
'header': header
} %}
{% endif %}
{% if media.type == 'remote_video' %}
{% include '@components/remote-video/remote-video.twig' with {
'remote_video': media.media
} %}
{% endif %}
</div>
{% import '@base/macros/uw.macro.twig' as macros %}
{% if type == 'teaser' %}
{% set show_title = 'yes' %}
{% elseif media and media.type == 'image' %}
{% set show_title = 'no' %}
{% else %}
{% set show_title = 'no' %}
{% endif %}
<article class="card{% if type %} card__{{ type }}{% endif %}{% if modifier_classes %} card__{{ modifier_classes }}{% endif %}{% if show_hover %} card--show-hover {% endif %}" >
{% if hero_image %}
<div class="card__image">
{% include '@components/card/card-elements/_hero-image.twig' with {
'hero_image': hero_image,
'header': header
} %}
</div>
{% if media %}
{% include '@components/card/card-elements/_media.twig' with {
'media': media,
'header': header,
} %}
{% endif %}
{% if image %}
......@@ -17,10 +23,10 @@
} %}
{% endif %}
{% if header and not hero_image %}
{% if header and show_title == 'yes' %}
{% include '@components/card/card-elements/_header.twig' with {
'header': header,
'show_title': type == 'teaser' ? 'yes' : 'no'
'show_title': show_title,
} %}
{% endif %}
......