diff --git a/source/_patterns/04-components/card/_card.scss b/source/_patterns/04-components/card/_card.scss
index 4d1a106465a884477cec26f60696bb819a7cbe6a..92bcb8101b17e06234092a25c96392e51ade2cfe 100644
--- a/source/_patterns/04-components/card/_card.scss
+++ b/source/_patterns/04-components/card/_card.scss
@@ -29,24 +29,66 @@ $card-padding: rem(gesso-spacing(sm)) !default;
.card--show-hover{
border-bottom: 3px solid $card-accent-border-color;
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__featured-image{
- background-position:center center;
- background-repeat:no-repeat;
+.card__image{}
+.card__featured-image {
+ align-items: center;
+ background-position: center center;
+ background-repeat: no-repeat;
background-size: cover;
- height:45rem;
+ display: grid;
+ height: 45rem;
+ justify-items: center;
min-height: 44rem;
+ position: relative;
+ .card__header {
+ align-self: end;
+ margin-bottom: 0;
+ margin-top: 0;
+ max-width: $max-width;
+ padding: 0 gesso-spacing(md);
+ @include xl {
+ padding: 0;
+ }
+
+ .card__date {
+ margin-bottom: 0;
+ margin-top: 0;
+ }
+
+ .card__title {
+ background: gesso-brand(org-default, uw-white, primary);
+ font-size: gesso-font-size(8);
+ margin-bottom: 0;
+ margin-top: 0;
+ padding: gesso-spacing(sm) gesso-spacing(md);
+ }
+
+ .card__sub-title {
+ background: gesso-brand(org-default, uw-white, primary);
+ font-size: gesso-font-size(4);
+ margin-bottom: 0;
+ margin-top: 0;
+ padding: gesso-spacing(xs) gesso-spacing(md);
+ }
+
+ .card__author {
+ background: gesso-brand(org-default, uw-white, primary);
+ margin-bottom: 0;
+ margin-top: 0;
+ padding: gesso-spacing(xs) gesso-spacing(md);
+ }
+ }
}
-// top
.card__header{
@include uw-no-breakout();
- color: $card-meta-color;
margin-bottom: rem(gesso-spacing(xs));
width: 100%;
@@ -66,9 +108,7 @@ $card-padding: rem(gesso-spacing(sm)) !default;
);
}
}
-.card__sub-title{
-
-}
+.card__sub-title{}
.card__author{
@include uw-no-breakout();
font-family: gesso-font-family(systemmedium);
@@ -84,15 +124,10 @@ $card-padding: rem(gesso-spacing(sm)) !default;
}
// body
.card__body {
- @include uw-flex-grid();
- //background:$test-color-10;
- gap:inherit;
- padding: $card-padding;
- width: 100%;
+
}
.card__content {
- //background:$test-color-9;
margin-bottom: rem(gesso-spacing(md));
width: 100%;
}
@@ -135,17 +170,8 @@ $card-padding: rem(gesso-spacing(sm)) !default;
// footer
.card__footer {
- @include uw-no-breakout();
- margin-top: auto;
- padding: rem(gesso-spacing(md));
- width: 100%;
- > div {
- margin-bottom: rem(gesso-spacing(sm));
- &:last-child {
- margin-bottom: 0;
- }
- }
+ width: 100%;
}
.card__tags{
width: 100%;
@@ -159,8 +185,7 @@ $card-padding: rem(gesso-spacing(sm)) !default;
width: 100%;
}
-
-
+// Have not worked on card feature.
.card--feature {
.card__body {
padding-top: $card-padding;
diff --git a/source/_patterns/04-components/card/card--banner/_card--banner.scss b/source/_patterns/04-components/card/card--banner/_card--banner.scss
index a68201e6ecee677786e210af853f0b166b603039..78258753300d98282701f80bf7f4516d9fa3c27e 100644
--- a/source/_patterns/04-components/card/card--banner/_card--banner.scss
+++ b/source/_patterns/04-components/card/card--banner/_card--banner.scss
@@ -4,100 +4,119 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
.#{$faculty} {
// If the UW branding group
@if $faculty == org-default {
- .card.banner{
- .card__header{
- background-color: rgba(0,0,0,.8);
+ .card__banner--caption{
+ background-color:$uw-black;
+ @include small {
+ background-color: rgba(0,0,0,.8);
+ }
+ a {
+ color: $uw-gold;
+ &:hover {
+ color: $uw-gold;
+ }
+ }
}
- .sub-title{
+ .card__banner--sub-title {
color: $uw-white;
}
- .card__title {
+ .card__banner--title {
color: $uw-gold;
-
- a {
- color: $uw-gold;
- }
}
-
}
-
- }
@else {
- .card.banner{
- .card__header{
- background: rgba(gesso-brand($faculty, 'primary'), 0.8);
+ .card__banner--caption{
+ background:gesso-brand($faculty, 'primary');
+ @include small {
+ background: rgba(gesso-brand($faculty, 'primary'), 0.8);
+ }
+ a {
+ color:gesso-brand($faculty, 'lvl1');
+ &:hover {
+ color:gesso-brand($faculty, 'lvl1');
+ }
+ }
}
- .sub-title{
+ .card__banner--sub-title {
color:gesso-brand($faculty, 'lvl1');
}
- .card__title {
+ .card__banner--title {
color:gesso-brand($faculty, 'lvl1');
- a {
- color:gesso-brand($faculty, 'lvl1');
- }
}
}
}
- }
}
-.card.banner {
-
+.card__banner {
.card__body {
+ padding:inherit;
+ }
+}
+.card__banner--image {
margin-bottom: 0;
padding: 0;
- position:relative;
-
+ position: relative;
+}
+.card__banner--caption {
+ display: block;
+ height: auto;
+ margin-bottom: 0;
+ opacity: 1;
+ padding: 1rem 2rem;
+ position:relative;
+ @include small{
+ bottom:0;
+ position:absolute;
}
- .card__header {
-
- bottom: 0;
- display: block;
- height: auto;
- margin-bottom:0;
- opacity: 1;
- padding: 1rem 2rem;
- position: absolute;
- text-align: center;
- width: 100%;
- z-index: gesso-z-index(overlay);
- .card__title {
- font-family: $header-font-family;
- font-size: gesso-font-size(6);
- line-height: 1.25;
- margin:0;
- strong{
- font-weight:400;
- }
- }
-
- .sub-title {
- font-family:gesso-font-family(book);
- font-size: gesso-font-size(0);
- line-height:1;
-
- }
+ text-align: center;
+ width: 100%;
+ z-index: gesso-z-index(overlay);
+ strong{
+ font-weight:400;
}
-
- .card__media {
-
- margin-bottom: 0;
- order:inherit;
- a {
- display:block;
+ a {
+ text-decoration: none;
+ &:hover {
+ text-decoration: underline;
}
}
-
- .card__title {
- a {
- font-family: $header-font-family;
- font-weight: 400;
- letter-spacing: .045rem;
- text-align: center;
- text-decoration: none;
- &:hover {
- text-decoration: underline;
- }
+}
+.card__banner--title {
+ display: block;
+ font-family: $header-font-family;
+ font-size: gesso-font-size(6);
+ font-weight: 400;
+ letter-spacing: .045rem;
+ line-height: 1.25;
+ margin: 0;
+ text-align: center;
+ width:auto;
+}
+.card__banner--sub-title {
+ display: block;
+ font-family: gesso-font-family(book);
+ font-size: gesso-font-size(0);
+ line-height: 1.25;
+ width:auto;
+}
+.card__banner--media {
+ background:$uw-black;
+ margin-bottom: 0;
+ order: inherit;
+ a {
+ background:$uw-black;
+ display: block;
+ opacity:1;
+ transition-delay: 0s;
+ transition-duration: .2s;
+ transition-property: color,background-color,border-color,opacity;
+ transition-timing-function: linear;
+ &:hover{
+ opacity:0.6;
+ transition-delay: 0s;
+ transition-duration: .2s;
+ transition-property: color,background-color,border-color,opacity;
+ transition-timing-function: linear;
}
+
}
}
diff --git a/source/_patterns/04-components/card/card--banner/card--banner.twig b/source/_patterns/04-components/card/card--banner/card--banner.twig
index 2e31e0d0dd83429af946f7701fe1a39855065668..c38d3d905d7928061138ae5476dc00b6a8fa63d8 100644
--- a/source/_patterns/04-components/card/card--banner/card--banner.twig
+++ b/source/_patterns/04-components/card/card--banner/card--banner.twig
@@ -3,5 +3,6 @@
'banner': image,
'show_header': 'no',
'type': 'banner',
+ 'faculty': faculty,
} %}
{% endfor %}
diff --git a/source/_patterns/04-components/card/card--banner/card--banner.yml b/source/_patterns/04-components/card/card--banner/card--banner.yml
index 44f6529d4db017a96eb7859d7df1ef1973e3ce05..84585205e8a3da23ed138834ee5393924dc1135a 100644
--- a/source/_patterns/04-components/card/card--banner/card--banner.yml
+++ b/source/_patterns/04-components/card/card--banner/card--banner.yml
@@ -3,7 +3,7 @@ banners:
-
sources:
-
- srcset: '../../../../source/images/president/president_xlarge.jpg'
+ srcset: '../../../../source/images/president/original.jpg'
media: 'all and (min-width: 63.19rem)'
type: 'image/jpeg'
-
@@ -22,53 +22,9 @@ banners:
srcset: '../../../../source/images/president/president_xsmall.jpg'
media: 'all and (min-width: 15rem)'
type: 'image/jpeg'
- img_element: '../../../../source/images/president/president_xlarge.jpg'
+ img_element: '../../../../source/images/president/original.jpg'
alt: 'Alternative text'
big_text: 'Image1'
small_text: 'Caption 1'
link: 'http://google.ca'
- -
- sources:
- - srcset: '../../../../source/images/president/president_xlarge.jpg'
- media: 'all and (min-width: 63.19rem)'
- type: 'image/jpeg'
- - srcset: '../../../../source/images/president/president_large.jpg'
- media: 'all and (min-width: 49.81rem)'
- type: 'image/jpeg'
- - srcset: '../../../../source/images/president/president_medium.jpg'
- media: 'all and (min-width: 30rem)'
- type: 'image/jpeg'
- - srcset: '../../../../source/images/president/president_small.jpg'
- media: 'all and (min-width: 25rem)'
- type: 'image/jpeg'
- - srcset: '../../../../source/images/president/president_xsmall.jpg'
- media: 'all and (min-width: 15rem)'
- type: 'image/jpeg'
- img_element: '../../../../source/images/president/president_xlarge.jpg'
- alt: 'Alternative text'
- big_text: 'Image2'
- -
- sources:
- - srcset: '../../../../source/images/president/president_xlarge.jpg'
- media: 'all and (min-width: 63.19rem)'
- type: 'image/jpeg'
- - srcset: '../../../../source/images/president/president_large.jpg'
- media: 'all and (min-width: 49.81rem)'
- type: 'image/jpeg'
- - srcset: '../../../../source/images/president/president_medium.jpg'
- media: 'all and (min-width: 30rem)'
- type: 'image/jpeg'
- - srcset: '../../../../source/images/president/president_small.jpg'
- media: 'all and (min-width: 25rem)'
- type: 'image/jpeg'
- - srcset: '../../../../source/images/president/president_xsmall.jpg'
- media: 'all and (min-width: 15rem)'
- type: 'image/jpeg'
- img_element: '../../../../source/images/president/president_xlarge.jpg'
- alt: 'Alternative text'
- big_text: 'Image3'
- link: 'http://google.ca'
- autoplay: 1
- slide_speed: 7000
- style: 'full-width'
- transition_speed: 400
+ faculty: 'org-default'
diff --git a/source/_patterns/04-components/card/card--node/_card--node.scss b/source/_patterns/04-components/card/card--node/_card--node.scss
index e9e4ace03ba03b291cfea95da8047fb8f22b1f9f..6865e64abf4e5948ae390fc46e67eec0d52c4d84 100644
--- a/source/_patterns/04-components/card/card--node/_card--node.scss
+++ b/source/_patterns/04-components/card/card--node/_card--node.scss
@@ -9,59 +9,17 @@
.card__footer {
margin:0 auto;
max-width: $max-width;
- }
- }
- .card__featured-image {
- align-items: center;
- display: grid;
- justify-items: center;
- position: relative;
-
- .card__header {
- align-self: end;
- margin-bottom: 0;
- margin-top: 0;
- max-width: $max-width;
- padding: 0 gesso-spacing(md);
+ padding: 0 gesso-spacing(sm);
@include xl{
padding: 0;
}
-
-
- .card__date {
- margin-bottom: 0;
- margin-top: 0;
- }
-
- .card__title {
- background: gesso-brand(org-default, uw-white, primary);
- font-size: gesso-font-size(8);
- margin-bottom: 0;
- margin-top: 0;
- padding: gesso-spacing(sm) gesso-spacing(md);
- }
-
- .card__sub-title {
- background: gesso-brand(org-default, uw-white, primary);
- font-size: gesso-font-size(4);
- margin-bottom: 0;
- margin-top: 0;
- padding: gesso-spacing(xs) gesso-spacing(md);
- }
-
- .card__author {
- background: gesso-brand(org-default, uw-white, primary);
- margin-bottom: 0;
- margin-top: 0;
- padding: gesso-spacing(xs) gesso-spacing(md);
- }
}
}
.card__footer{
- padding: gesso-spacing(xs) gesso-spacing(md);
+ margin-bottom: rem(gesso-spacing(md));
+ padding: 0 gesso-spacing(sm);
+ @include xl{
+ padding: 0;
+ }
}
}
-// Why is this in here ?
-.uw-main > div > .action-links{
- margin:0 !important;
-}
diff --git a/source/_patterns/04-components/card/card--node/card--node-news-item.twig b/source/_patterns/04-components/card/card--node/card--node-news-item.twig
new file mode 100644
index 0000000000000000000000000000000000000000..8233a43ceb4b331dbd4fec4dbd7b49712a3d6ac7
--- /dev/null
+++ b/source/_patterns/04-components/card/card--node/card--node-news-item.twig
@@ -0,0 +1,18 @@
+{% if node.hero_image and node.hero_image.img_element %}
+ {% set node_image_class = 'with-image' %}
+{% else %}
+ {% set node_image_class = 'without-image' %}
+{% endif %}
+
+
+<div class="uw-node__{{ node_image_class }}">
+ {% include '@components/card/card.twig' with {
+ 'url': news.url,
+ 'type': type,
+ 'show_hover': '',
+ 'header': news.header,
+ 'hero_image': news.hero_image,
+ 'content': news.content,
+ 'footer': news.footer,
+ } %}
+</div>
diff --git a/source/_patterns/04-components/card/card--node/card--node-news-item.yml b/source/_patterns/04-components/card/card--node/card--node-news-item.yml
new file mode 100644
index 0000000000000000000000000000000000000000..562d50fc289a71b86d8835b44e11704d32950f43
--- /dev/null
+++ b/source/_patterns/04-components/card/card--node/card--node-news-item.yml
@@ -0,0 +1,37 @@
+---
+modifier_classes: ''
+header_level: '2'
+type: 'news-item'
+news:
+ url: '#'
+ header:
+ date:
+ 0: 'Friday, September 19, 2020'
+ title: 'NEWS TITTLE title 1'
+ author:
+ name: 'Author Lastname'
+ link: '#'
+ sources:
+ - srcset: '../../../../source/images/president/president_xlarge.jpg'
+ media: 'all and (min-width: 63.19rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_large.jpg'
+ media: 'all and (min-width: 49.81rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_medium.jpg'
+ media: 'all and (min-width: 30rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_small.jpg'
+ media: 'all and (min-width: 25rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_xsmall.jpg'
+ media: 'all and (min-width: 15rem)'
+ type: 'image/jpeg'
+ img_element: '../../../../source/images/president/president_xlarge.jpg'
+ alt: 'Alternative text'
+# listing_image:
+# img_element: '../../../../source/images/president/president_xlarge.jpg'
+# alt: 'Alternative listing image text.'
+ hero_image:
+ img_element: '../../../../source/images/president/original.jpg'
+ alt: 'Alternative hero text'
diff --git a/source/_patterns/04-components/card/card--node/card--node.yml b/source/_patterns/04-components/card/card--node/card--node.yml
index 285c45e3fe9a836c8331e058ad058481860042f0..c2ff68a51562aee14356c753f14e3a482584b341 100644
--- a/source/_patterns/04-components/card/card--node/card--node.yml
+++ b/source/_patterns/04-components/card/card--node/card--node.yml
@@ -1,17 +1,19 @@
---
modifier_classes: ''
header_level: '2'
+type: 'node'
+show_title: 'no'
node:
url: '#'
header:
date:
0: 'Friday, September 19, 2020'
- title: 'This is a Card title'
+ title: 'Blog Teaser title 1'
author:
name: 'Author Lastname'
link: '#'
- tags:
- tag1:
+ footer:
+ tags:
-
url: '#'
title: 'Tag 1'
@@ -28,7 +30,6 @@ node:
url: '#'
title: 'Tag 4'
type: 'simple'
- tag2:
-
url: '#'
title: 'Tag 5'
@@ -60,20 +61,9 @@ node:
img_element: '../../../../source/images/president/president_xlarge.jpg'
alt: 'Alternative text'
content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
- social_media:
- menu_tree:
- - text: 'Facebook'
- url: 'https://www.facebook.com/university.waterloo'
- - text: 'Twitter'
- url: 'https://twitter.com/uWaterloo'
- - text: 'YouTube'
- url: 'https://www.youtube.com/user/uwaterloo'
- - text: 'Instagram'
- url: 'https://www.instagram.com/uofwaterloo/'
- - text: 'LinkedIn'
- url: 'https://www.linkedin.com/edu/school?id=10875'
- social_media_placement: 'card-footer'
- hero_image:
+ listing_image:
img_element: '../../../../source/images/president/president_xlarge.jpg'
- alt: 'Alternative hero text'
-type: 'node'
+ alt: 'Alternative listing image text.'
+# hero_image:
+# img_element: '../../../../source/images/president/president_xlarge.jpg'
+# alt: 'Alternative hero text'
diff --git a/source/_patterns/04-components/card/card--teaser/_card--teaser.scss b/source/_patterns/04-components/card/card--teaser/_card--teaser.scss
index 721191676c6ddea156a87dfe8b3b7489f43c32d7..c2b9356463eeb497d48f207313f076f6bfac926c 100644
--- a/source/_patterns/04-components/card/card--teaser/_card--teaser.scss
+++ b/source/_patterns/04-components/card/card--teaser/_card--teaser.scss
@@ -1,3 +1,8 @@
.card__teaser{
-
+ .uw-node__without-image &{
+ .card__header,
+ .card__footer {
+ padding: 0;
+ }
+ }
}
diff --git a/source/_patterns/04-components/card/card--teaser/card--teaser.twig b/source/_patterns/04-components/card/card--teaser/card--teaser.twig
index 48591f837ae4f8c5b84806224377033a50a29061..21e03b0a007b5bb7dcab827fff85f34859dbed25 100644
--- a/source/_patterns/04-components/card/card--teaser/card--teaser.twig
+++ b/source/_patterns/04-components/card/card--teaser/card--teaser.twig
@@ -10,7 +10,6 @@
'header': teaser.header,
'listing_image': teaser.listing_image,
'content': teaser.content,
- 'tags': teaser.tags,
+ 'footer': teaser.footer,
'show_hover': show_hover,
- 'type': type,
} %}
diff --git a/source/_patterns/04-components/card/card--teaser/card--teaser.yml b/source/_patterns/04-components/card/card--teaser/card--teaser.yml
new file mode 100644
index 0000000000000000000000000000000000000000..2fb97282fb8c54bf8a61afaedf7bfd0e9ccf96be
--- /dev/null
+++ b/source/_patterns/04-components/card/card--teaser/card--teaser.yml
@@ -0,0 +1,69 @@
+---
+modifier_classes: ''
+header_level: '2'
+type: 'teaser'
+show_hover: 'yes'
+teaser:
+ url: '#'
+ header:
+ date:
+ 0: 'Friday, September 19, 2020'
+ title: 'Blog Teaser title 1'
+ author:
+ name: 'Author Lastname'
+ link: '#'
+ footer:
+ tags:
+ -
+ url: '#'
+ title: 'Tag 1'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 2'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 3'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 4'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 5'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 6'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 7'
+ type: 'simple'
+ sources:
+ - srcset: '../../../../source/images/president/president_xlarge.jpg'
+ media: 'all and (min-width: 63.19rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_large.jpg'
+ media: 'all and (min-width: 49.81rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_medium.jpg'
+ media: 'all and (min-width: 30rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_small.jpg'
+ media: 'all and (min-width: 25rem)'
+ type: 'image/jpeg'
+ - srcset: '../../../../source/images/president/president_xsmall.jpg'
+ media: 'all and (min-width: 15rem)'
+ type: 'image/jpeg'
+ img_element: '../../../../source/images/president/president_xlarge.jpg'
+ alt: 'Alternative text'
+ content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+ listing_image:
+ img_element: '../../../../source/images/president/president_xlarge.jpg'
+ alt: 'Alternative listing image text.'
+# hero_image:
+# img_element: '../../../../source/images/president/president_xlarge.jpg'
+# alt: 'Alternative hero text'
diff --git a/source/_patterns/04-components/card/card-elements/_banner.twig b/source/_patterns/04-components/card/card-elements/_banner.twig
index 3cd7896ad40c229c354d58dbedae73c470993970..7a324bb4e857de6bf9c9abf8172599c136a4dfef 100644
--- a/source/_patterns/04-components/card/card-elements/_banner.twig
+++ b/source/_patterns/04-components/card/card-elements/_banner.twig
@@ -1,12 +1,35 @@
-<div class="card__banner--image">
+<div class="card__banner--image {{ image.faculty }}">
+ {% if image.link %}
+ <div class="card__banner--media">
+ <a href="{{ image.link }}">
+ {% endif %}
+ {% include "@components/responsive-image/responsive-image.twig" with {
+ sources: image.sources,
+ img_element: listing_image.img_element,
+ alt: listing_image.alt
+ }%}
+
+ {% if image.link %}
+ </a>
+ </div>
+
+ {% endif %}
{% if image.big_text or image.small_text %}
- <div class="card__banner--titles">
+ <div class="card__banner--caption">
{% if image.big_text %}
+ <strong>
+ {% if image.link %}
+ <a href="{{ image.link }}">
+ {% endif %}
<span class="card__banner--title">
{{ image.big_text }}
</span>
+ {% if image.link %}
+ </a>
+ {% endif %}
{% endif %}
+ </strong>
{% if image.small_text %}
<span class="card__banner--sub-title">
{{ image.small_text }}
@@ -15,17 +38,4 @@
</div>
{% endif %}
- {% if image.url %}
- <a href="{{ image.url }}">
- {% endif %}
-
- {% include "@components/responsive-image/responsive-image.twig" with {
- sources: image.sources,
- img_element: listing_image.img_element,
- alt: listing_image.alt
- }%}
-
- {% if url %}
- </a>
- {% endif %}
</div>
diff --git a/source/_patterns/04-components/card/card.twig b/source/_patterns/04-components/card/card.twig
index efd8a12821ff2a0b92d28ebe3cb5585dba6efaf3..1978d33b62234df2f2bfd23ef6805aa954e0866f 100644
--- a/source/_patterns/04-components/card/card.twig
+++ b/source/_patterns/04-components/card/card.twig
@@ -1,6 +1,6 @@
{% import '@base/macros/uw.macro.twig' as macros %}
-<article class="card{% if type %} card__{{ type }}{% endif %}{% if show_hover %} card--show-hover {% endif %}" >
+<article class="card{% if type %} card__{{ type }}{% endif %}{% if modifiier_classes %} card__{{ modifiier_classes }}{% endif %} {% if show_hover %} card--show-hover {% endif %}" >
{% if hero_image %}
<div class="card__image">
@@ -26,7 +26,7 @@
} %}
{% endif %}
- {% if content or banner or listing_image %}
+ {% if content or banner %}
<div class="card__body">
{% if banner %}
diff --git a/source/_patterns/04-components/card/card.yml b/source/_patterns/04-components/card/card.yml
index fe8dca9da19939cfcdcc3020044a672d42b21cbe..0699189b5322454cffd58668acbbb21bf60903cc 100644
--- a/source/_patterns/04-components/card/card.yml
+++ b/source/_patterns/04-components/card/card.yml
@@ -1,16 +1,18 @@
---
modifier_classes: ''
header_level: '2'
+type: 'node'
url: '#'
+show_title: 'yes'
header:
date:
0: 'Friday, September 19, 2020'
- title: 'This is a Card title'
+ title: 'Card title 1'
author:
name: 'Author Lastname'
link: '#'
-tags:
- tag1:
+footer:
+ tags:
-
url: '#'
title: 'Tag 1'
@@ -27,19 +29,18 @@ tags:
url: '#'
title: 'Tag 4'
type: 'simple'
- tag2:
- -
- url: '#'
- title: 'Tag 5'
- type: 'simple'
- -
- url: '#'
- title: 'Tag 6'
- type: 'simple'
- -
- url: '#'
- title: 'Tag 7'
- type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 5'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 6'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 7'
+ type: 'simple'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
@@ -59,20 +60,9 @@ sources:
img_element: '../../../../source/images/president/president_xlarge.jpg'
alt: 'Alternative text'
content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
-social_media:
- menu_tree:
- - text: 'Facebook'
- url: 'https://www.facebook.com/university.waterloo'
- - text: 'Twitter'
- url: 'https://twitter.com/uWaterloo'
- - text: 'YouTube'
- url: 'https://www.youtube.com/user/uwaterloo'
- - text: 'Instagram'
- url: 'https://www.instagram.com/uofwaterloo/'
- - text: 'LinkedIn'
- url: 'https://www.linkedin.com/edu/school?id=10875'
-social_media_placement: 'card-footer'
-hero_image:
+listing_image:
img_element: '../../../../source/images/president/president_xlarge.jpg'
- alt: 'Alternative hero text'
-type: 'card'
+ alt: 'Alternative listing image text.'
+#hero_image:
+# img_element: '../../../../source/images/president/president_xlarge.jpg'
+# alt: 'Alternative hero text'
diff --git a/source/_patterns/04-components/content-grid-list/content-grid-list.twig b/source/_patterns/04-components/content-grid-list/content-grid-list.twig
index 7c4407b7a2c1e921f19ce0ce98d949581621fd71..7334d7263d143d8b193db6241e43b5fec1917535 100644
--- a/source/_patterns/04-components/content-grid-list/content-grid-list.twig
+++ b/source/_patterns/04-components/content-grid-list/content-grid-list.twig
@@ -7,25 +7,35 @@
{% if views %}
<div class ="views-row">
{% endif %}
- {% include "@components/card/card.twig" with {
- modifier_classes: item.modifier_classes,
- title: item.title,
- header_level: '2',
- url: item.url,
- footer: item.footer,
- date: item.date,
- date_format: item.date_format,
- read_more: item.read_more,
- tags: item.tags,
- tag_type: item.tag_type,
- sources: item.sources,
- img_element: item.img_element,
- alt: item.alt,
- content: item.content,
- show_hover: true,
- author_name: item.author_name,
- author_link: item.author_link
- } %}
+{# {% include "@components/card/card.twig" with {#}
+{# modifier_classes: item.modifier_classes,#}
+{# title: item.title,#}
+{# header_level: '2',#}
+{# url: item.url,#}
+{# footer: item.footer,#}
+{# date: item.date,#}
+{# date_format: item.date_format,#}
+{# read_more: item.read_more,#}
+{# tags: item.tags,#}
+{# tag_type: item.tag_type,#}
+{# sources: item.sources,#}
+{# img_element: item.img_element,#}
+{# alt: item.alt,#}
+{# content: item.content,#}
+{# show_hover: true,#}
+{# author_name: item.author_name,#}
+{# author_link: item.author_link#}
+{# } %}#}
+ {% include '@components/card/card.twig' with {
+ 'url': item.url,
+ 'type': item.type,
+ 'show_hover': '',
+ 'header': item.header,
+ 'hero_image': item.hero_image,
+ 'listing_image': item.listing_image,
+ 'content': item.content,
+ 'footer': item.footer,
+ } %}
{% if views %}
</div>
{% endif %}
diff --git a/source/_patterns/04-components/multi-type-list/multi-type-list.yml b/source/_patterns/04-components/multi-type-list/multi-type-list.yml
index 1db58b54fb84c4cf201f70f5b7ad3f1edb4d0869..2e3c1e939585cdd43119d8c32520c07e9aa479f6 100644
--- a/source/_patterns/04-components/multi-type-list/multi-type-list.yml
+++ b/source/_patterns/04-components/multi-type-list/multi-type-list.yml
@@ -1,26 +1,43 @@
lists:
- Blog:
- -
- title: 'Blog Teaser title 1'
- url: '#'
- date:
- - 'Friday, September 18, 2020'
- author_name: 'Author Lastname'
- author_link: '#'
- tags:
- tag1:
- - url: '#'
+ blog:
+ - url: '#'
+ header:
+ date:
+ 0: 'Friday, September 19, 2020'
+ title: 'Blog Teaser title 1'
+ author:
+ name: 'Author Lastname'
+ link: '#'
+ footer:
+ tags:
+ -
+ url: '#'
title: 'Tag 1'
type: 'simple'
- - url: '#'
+ -
+ url: '#'
title: 'Tag 2'
type: 'simple'
- - url: '#'
+ -
+ url: '#'
title: 'Tag 3'
type: 'simple'
- - url: '#'
+ -
+ url: '#'
title: 'Tag 4'
type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 5'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 6'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 7'
+ type: 'simple'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
@@ -38,30 +55,49 @@ lists:
media: 'all and (min-width: 15rem)'
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
- alt: 'Alternative text for blog teaser photo'
- content: |-
- <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
- -
- title: 'Blog Teaser title 2'
- url: '#'
- date:
- - 'Friday, September 18, 2020'
- author_name: 'Author Lastname'
- author_link: '#'
- tags:
- tag1:
- - url: '#'
+ alt: 'Alternative text'
+ content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+ listing_image:
+ img_element: '../../../../source/images/president/president_xlarge.jpg'
+ alt: 'Alternative listing image text.'
+ - url: '#'
+ header:
+ date:
+ 0: 'Friday, September 19, 2020'
+ title: 'Blog Teaser title 2'
+ author:
+ name: 'Author Lastname'
+ link: '#'
+ footer:
+ tags:
+ -
+ url: '#'
title: 'Tag 1'
type: 'simple'
- - url: '#'
+ -
+ url: '#'
title: 'Tag 2'
type: 'simple'
- - url: '#'
+ -
+ url: '#'
title: 'Tag 3'
type: 'simple'
- - url: '#'
+ -
+ url: '#'
title: 'Tag 4'
type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 5'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 6'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 7'
+ type: 'simple'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
@@ -79,25 +115,49 @@ lists:
media: 'all and (min-width: 15rem)'
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
- alt: 'Alternative text for blog teaser photo'
- content: |-
- <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
- -
- title: 'Blog Teaser title 3'
- url: '#'
- date:
- - 'Friday, September 18, 2020'
- author_name: 'Author Lastname'
- author_link: '#'
- tags:
- - url: '#'
- title: 'Tag 1'
- - url: '#'
- title: 'Tag 2'
- - url: '#'
- title: 'Tag 3'
- - url: '#'
- title: 'Tag 4'
+ alt: 'Alternative text'
+ content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+ listing_image:
+ img_element: '../../../../source/images/president/president_xlarge.jpg'
+ alt: 'Alternative listing image text.'
+ - url: '#'
+ header:
+ date:
+ 0: 'Friday, September 19, 2020'
+ title: 'Blog Teaser title 2'
+ author:
+ name: 'Author Lastname'
+ link: '#'
+ footer:
+ tags:
+ -
+ url: '#'
+ title: 'Tag 1'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 2'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 3'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 4'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 5'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 6'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 7'
+ type: 'simple'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
@@ -115,29 +175,50 @@ lists:
media: 'all and (min-width: 15rem)'
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
- alt: 'Alternative text for blog teaser photo'
- content: |-
- <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
- News:
- -
- title: 'News Teaser title 1'
- url: '#'
- date:
- - 'Sep. 18, 2020'
- tags:
- tag1:
- - url: '#'
+ alt: 'Alternative text'
+ content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+ listing_image:
+ img_element: '../../../../source/images/president/president_xlarge.jpg'
+ alt: 'Alternative listing image text.'
+ news:
+ - url: '#'
+ header:
+ date:
+ 0: 'Friday, September 19, 2020'
+ title: 'News Teaser title 1'
+ author:
+ name: 'Author Lastname'
+ link: '#'
+ footer:
+ tags:
+ -
+ url: '#'
title: 'Tag 1'
type: 'simple'
- - url: '#'
+ -
+ url: '#'
title: 'Tag 2'
type: 'simple'
- - url: '#'
+ -
+ url: '#'
title: 'Tag 3'
type: 'simple'
- - url: '#'
+ -
+ url: '#'
title: 'Tag 4'
type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 5'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 6'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 7'
+ type: 'simple'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
@@ -155,28 +236,49 @@ lists:
media: 'all and (min-width: 15rem)'
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
- alt: 'Alternative text for blog teaser photo'
- content: |-
- <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
- -
- title: 'News Teaser title 2'
- url: '#'
- date:
- - 'Sep. 18, 2020'
- tags:
- tag1:
- - url: '#'
+ alt: 'Alternative text'
+ content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+ listing_image:
+ img_element: '../../../../source/images/president/president_xlarge.jpg'
+ alt: 'Alternative listing image text.'
+ - url: '#'
+ header:
+ date:
+ 0: 'Friday, September 19, 2020'
+ title: 'News Teaser title 2'
+ author:
+ name: 'Author Lastname'
+ link: '#'
+ footer:
+ tags:
+ -
+ url: '#'
title: 'Tag 1'
type: 'simple'
- - url: '#'
+ -
+ url: '#'
title: 'Tag 2'
type: 'simple'
- - url: '#'
+ -
+ url: '#'
title: 'Tag 3'
type: 'simple'
- - url: '#'
+ -
+ url: '#'
title: 'Tag 4'
type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 5'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 6'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 7'
+ type: 'simple'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
@@ -194,28 +296,49 @@ lists:
media: 'all and (min-width: 15rem)'
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
- alt: 'Alternative text for blog teaser photo'
- content: |-
- <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
- -
- title: 'News Teaser title 3'
- url: '#'
- date:
- - 'Sep. 18, 2020'
- tags:
- tag1:
- - url: '#'
+ alt: 'Alternative text'
+ content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+ listing_image:
+ img_element: '../../../../source/images/president/president_xlarge.jpg'
+ alt: 'Alternative listing image text.'
+ - url: '#'
+ header:
+ date:
+ 0: 'Friday, September 19, 2020'
+ title: 'News Teaser title 3'
+ author:
+ name: 'Author Lastname'
+ link: '#'
+ footer:
+ tags:
+ -
+ url: '#'
title: 'Tag 1'
type: 'simple'
- - url: '#'
+ -
+ url: '#'
title: 'Tag 2'
type: 'simple'
- - url: '#'
+ -
+ url: '#'
title: 'Tag 3'
type: 'simple'
- - url: '#'
+ -
+ url: '#'
title: 'Tag 4'
type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 5'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 6'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 7'
+ type: 'simple'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
@@ -233,29 +356,50 @@ lists:
media: 'all and (min-width: 15rem)'
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
- alt: 'Alternative text for blog teaser photo'
- content: |-
- <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
- Events:
- -
- title: 'Event Teaser title 1'
- url: '#'
- date:
- - 'Friday, September 18, 2020 2:20- 4:20 PM EDT'
- tags:
- tag1:
- - url: '#'
+ alt: 'Alternative text'
+ content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+ listing_image:
+ img_element: '../../../../source/images/president/president_xlarge.jpg'
+ alt: 'Alternative listing image text.'
+ events:
+ - url: '#'
+ header:
+ date:
+ 0: 'Friday, September 19, 2020'
+ title: 'Event Teaser title 1'
+ author:
+ name: 'Author Lastname'
+ link: '#'
+ footer:
+ tags:
+ -
+ url: '#'
title: 'Tag 1'
type: 'simple'
- - url: '#'
+ -
+ url: '#'
title: 'Tag 2'
type: 'simple'
- - url: '#'
+ -
+ url: '#'
title: 'Tag 3'
type: 'simple'
- - url: '#'
+ -
+ url: '#'
title: 'Tag 4'
type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 5'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 6'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 7'
+ type: 'simple'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
@@ -273,28 +417,49 @@ lists:
media: 'all and (min-width: 15rem)'
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
- alt: 'Alternative text for blog teaser photo'
- content: |-
- <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
- -
- title: 'Event Teaser title 2'
- url: '#'
- date:
- - 'Friday, September 18, 2020 2:20- 4:20 PM EDT'
- tags:
- tag1:
- - url: '#'
+ alt: 'Alternative text'
+ content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+ listing_image:
+ img_element: '../../../../source/images/president/president_xlarge.jpg'
+ alt: 'Alternative listing image text.'
+ - url: '#'
+ header:
+ date:
+ 0: 'Friday, September 19, 2020'
+ title: 'Event Teaser title 2'
+ author:
+ name: 'Author Lastname'
+ link: '#'
+ footer:
+ tags:
+ -
+ url: '#'
title: 'Tag 1'
type: 'simple'
- - url: '#'
+ -
+ url: '#'
title: 'Tag 2'
type: 'simple'
- - url: '#'
+ -
+ url: '#'
title: 'Tag 3'
type: 'simple'
- - url: '#'
+ -
+ url: '#'
title: 'Tag 4'
type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 5'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 6'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 7'
+ type: 'simple'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
@@ -312,28 +477,49 @@ lists:
media: 'all and (min-width: 15rem)'
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
- alt: 'Alternative text for blog teaser photo'
- content: |-
- <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
- -
- title: 'Event Teaser title 3'
- url: '#'
- date:
- - 'Friday, September 18, 2020 2:20- 4:20 PM EDT'
- tags:
- tag1:
- - url: '#'
+ alt: 'Alternative text'
+ content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+ listing_image:
+ img_element: '../../../../source/images/president/president_xlarge.jpg'
+ alt: 'Alternative listing image text.'
+ - url: '#'
+ header:
+ date:
+ 0: 'Friday, September 19, 2020'
+ title: 'Event Teaser title 2'
+ author:
+ name: 'Author Lastname'
+ link: '#'
+ footer:
+ tags:
+ -
+ url: '#'
title: 'Tag 1'
type: 'simple'
- - url: '#'
+ -
+ url: '#'
title: 'Tag 2'
type: 'simple'
- - url: '#'
+ -
+ url: '#'
title: 'Tag 3'
type: 'simple'
- - url: '#'
+ -
+ url: '#'
title: 'Tag 4'
type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 5'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 6'
+ type: 'simple'
+ -
+ url: '#'
+ title: 'Tag 7'
+ type: 'simple'
sources:
- srcset: '../../../../source/images/president/president_xlarge.jpg'
media: 'all and (min-width: 63.19rem)'
@@ -351,6 +537,8 @@ lists:
media: 'all and (min-width: 15rem)'
type: 'image/jpeg'
img_element: '../../../../source/images/president/president_xlarge.jpg'
- alt: 'Alternative text for blog teaser photo'
- content: |-
- <p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>
+ alt: 'Alternative text'
+ content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+ listing_image:
+ img_element: '../../../../source/images/president/president_xlarge.jpg'
+ alt: 'Alternative listing image text.'
diff --git a/source/images/president/original.jpg b/source/images/president/original.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..8bdef20d8394bc47d57ffd198f80f155bcb9f785
Binary files /dev/null and b/source/images/president/original.jpg differ
diff --git a/source/images/president/president_large.jpg b/source/images/president/president_large.jpg
index 4c06d436b5c59e3659e79c04fd791d30ec958eeb..853587f2a66e6eae278a8f115c38910a81705c1c 100644
Binary files a/source/images/president/president_large.jpg and b/source/images/president/president_large.jpg differ
diff --git a/source/images/president/president_medium.jpg b/source/images/president/president_medium.jpg
index 68a42126627f70838d6731aa9d74e63e4671060d..ca99cadfc02d5ae1b1ce3054bc5fcb87b237dab7 100644
Binary files a/source/images/president/president_medium.jpg and b/source/images/president/president_medium.jpg differ
diff --git a/source/images/president/president_small.jpg b/source/images/president/president_small.jpg
index 27cfac4821aeec942230164def50583768c7ce3c..77ddb0f4a484b69654283fd3f22a5c1c55db315d 100644
Binary files a/source/images/president/president_small.jpg and b/source/images/president/president_small.jpg differ
diff --git a/source/images/president/president_xlarge.jpg b/source/images/president/president_xlarge.jpg
index c7978d592ee38920ef4a3ccf18734478f578fc7e..cf84754e89499eafdc6fa0ce17020098ebb402f6 100644
Binary files a/source/images/president/president_xlarge.jpg and b/source/images/president/president_xlarge.jpg differ
diff --git a/source/images/president/president_xsmall.jpg b/source/images/president/president_xsmall.jpg
index 0cfcaec037865aa53a2195b34cad539e0b92965c..bbaed6baa7649d5f6b70dbd1ecbc1396e78a6885 100644
Binary files a/source/images/president/president_xsmall.jpg and b/source/images/president/president_xsmall.jpg differ