diff --git a/src/patterns/04-components/card/_card.scss b/src/patterns/04-components/card/_card.scss
index 61d722b731223b68c0cfc6ab289d2cd39649a476..34fe34b50f617d02becd00d87e20ce2de8a73892 100644
--- a/src/patterns/04-components/card/_card.scss
+++ b/src/patterns/04-components/card/_card.scss
@@ -27,7 +27,7 @@ $card-padding: var(--size-2) !default;
}
// if card--show-hover class is present then show "
-.card--show-hover{
+.card--show-hover {
border-bottom: 3px solid $card-accent-border-color;
box-shadow: var(--shadow-1);
transition: box-shadow 300ms ease;
@@ -54,6 +54,7 @@ $card-padding: var(--size-2) !default;
filter: opacity(100%);
transition: filter;
}
+
&:hover,
&:focus {
img {
@@ -76,8 +77,10 @@ $card-padding: var(--size-2) !default;
min-height: 44rem;
position: relative;
}
+
.card__header{
@include uw-no-breakout();
+
margin-bottom: var(--size-3);
width: 100%;
@@ -86,26 +89,26 @@ $card-padding: var(--size-2) !default;
grid-template-columns: 1fr auto;
.card__author {
- grid-column: 1/2;
+ grid-column: 1 / 2;
}
.card__date {
- grid-column: 1/2;
+ grid-column: 1 / 2;
}
.card__title {
- grid-column: 1/2;
+ grid-column: 1 / 2;
}
.view-interact {
background-color: var(--uw-white-1);
- grid-column: 2/3;
- grid-row: 2/3;
+ grid-column: 2 / 3;
+ grid-row: 2 / 3;
margin: 0;
- padding: 1rem 1rem 0 0;
+ padding: var(--size-2) var(--size-2) 0 0;
.uw-node__without-image & {
- grid-column: 2/3;
+ grid-column: 2 / 3;
grid-row: inherit;
margin-bottom: 1rem;
padding: 0;
@@ -128,8 +131,8 @@ $card-padding: var(--size-2) !default;
a {
@include link-reverse(
- var(--uw-black-primary),
- var(--uw-black-primary)
+ var(--uw-black-primary),
+ var(--uw-black-primary)
);
}
}
@@ -140,10 +143,11 @@ $card-padding: var(--size-2) !default;
font-size: var(--font-size-1);
margin-top: 0;
padding: 0 0 var(--size-1) 0;
+
a {
@include link(
- var(--uw-black-primary),
- var(--uw-black-primary)
+ var(--uw-black-primary),
+ var(--uw-black-primary)
);
}
}
@@ -162,7 +166,6 @@ $card-padding: var(--size-2) !default;
}
}
-
.card__position {
color: var(--uw-black-primary);
font-size: 1.26562rem;
@@ -174,8 +177,8 @@ $card-padding: var(--size-2) !default;
}
.card__tags {
- margin:0;
- padding:0;
+ margin: 0;
+ padding: 0;
width: 100%;
}
@@ -188,14 +191,17 @@ $card-padding: var(--size-2) !default;
width: 100%;
}
-.card__project{
+.card__project {
+
&-members--content {
@include uw-flex-grid();
+
.card__project-member {
@include flex(1 1 auto);
@include flex-grow(1);
width: 45%;
}
+
@media(min-width: $screen-md) {
.card__project-member {
@include flex(1 1 auto);
diff --git a/src/patterns/04-components/card/card--node/_card--node.scss b/src/patterns/04-components/card/card--node/_card--node.scss
index 4aa523e02a8fa2c309d384bd1fa27e00334d9324..a636d84f10e5e2d3ff9a0ffe55ad6243ac77fab7 100644
--- a/src/patterns/04-components/card/card--node/_card--node.scss
+++ b/src/patterns/04-components/card/card--node/_card--node.scss
@@ -1,34 +1,39 @@
+@use '../../../01-core' as *;
+
.card__node {
> .card__header,
> .card__footer {
margin: 0 auto;
- max-width: $max-width;
+ max-width: var(--max-width);
}
.uw-node__without-image & {
.card__header,
.card__footer {
margin: 0 auto;
- max-width: $max-width;
- padding: 0 gesso-spacing(sm);
- @include xl {
+ max-width: var(--max-width);
+ padding: 0 var(--size-2);
+
+ @media(min-width: $screen-xl) {
padding: 0;
}
}
}
.card__tags {
- margin: 1rem auto;
- max-width: $max-width;
- padding: 0 gesso-spacing(sm);
- @include xl {
+ margin: var(--size-2) auto;
+ max-width: var(--max-width);
+ padding: 0 var(--size-2);
+
+ @media(min-width: $screen-xl) {
padding: 0;
}
}
.card__footer {
- margin-bottom: rem(gesso-spacing(md));
+ margin-bottom: var(--size-3);
margin-top: auto;
- padding: 0 gesso-spacing(sm);
- @include xl {
+ padding: 0 var(--size-2);
+
+ @media(min-width: $screen-xl) {
padding: 0;
}
}
@@ -50,16 +55,17 @@
position: relative;
.card__header {
- @include uw-contained-width(75rem);
- align-self:flex-end;
- margin-bottom:4rem;
+ @include uw-contained-width(var(--max-width));
+ align-self: flex-end;
+ margin-bottom: 4rem;
margin-top: 0;
+
.card__title {
- background: rgba(0,0,0,0.50);
- color:#fff;
+ background: rgba(0, 0, 0, 0.50);
+ color: #fff;
margin-bottom: 0;
- margin-top: 2rem;
- padding: gesso-spacing(md) gesso-spacing(md);
+ margin-top: var(--size-4);
+ padding: var(--size-3) var(--size-3);
}
}
}
@@ -68,7 +74,7 @@
// CSS for specific node card presentations:
&--contact {
display: grid;
- gap: $grid-gap;
+ gap: var(--grid-gap);
.card__content {
.layout {
@@ -76,16 +82,17 @@
}
}
- @include medium {
+ @media(min-width: $screen-md) {
display: grid;
- gap: 2rem;
- grid-template-columns: 10rem 1fr;
+ gap: var(--size-4);
+ grid-template-columns: var(--size-20) 1fr;
}
.card__image {
grid-column: 1 / 3;
grid-row: 1 / 10;
- @include medium {
+
+ @media(min-width: $screen-md) {
grid-column: 1 / 2;
}
}
@@ -94,14 +101,14 @@
.card__body,
.card__footer {
grid-column: 1 / 3;
- @include medium {
+ @media(min-width: $screen-md) {
grid-column: 2 / 3;
}
padding: 0;
}
.uw-node__without-image & {
- @include medium {
+ @media(min-width: $screen-md) {
grid-template-columns: 100%;
}
@@ -117,11 +124,14 @@
&--blog,
&--news-item,
&--event {
+
.uw-node__without-image & {
@include uw-contained-width();
- padding:0;
+ padding: 0;
}
+
.uw-node__with-image & {
+
.card__featured-image {
align-items: center;
background-position: center center;
@@ -132,6 +142,7 @@
justify-items: center;
min-height: 44rem;
position: relative;
+
.card__header {
// Width is experimental to match one of the wide-width in
// layouts for small width page look.
@@ -139,34 +150,40 @@
align-self: end;
margin-bottom: 0;
margin-top: 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);
+ background: var(--uw-white);
+ font-size: var(--font-size-8);
margin-bottom: 0;
margin-top: 0;
- padding: gesso-spacing(sm) gesso-spacing(sm);
+ padding: var(--size-2);
}
+
.card__sub-title {
- background: gesso-brand(org-default, uw-white, primary);
- font-size: gesso-font-size(4);
+ background: var(--uw-white);
+ font-size: var(--font-size-4);
margin-bottom: 0;
margin-top: 0;
- padding: gesso-spacing(xs) gesso-spacing(sm);
+ padding: var(--size-1) var(--size-2);
}
+
.card__author {
- background: gesso-brand(org-default, uw-white, primary);
+ background: var(--uw-white);
margin-bottom: 0;
margin-top: 0;
- padding: gesso-spacing(xs) gesso-spacing(sm);
+ padding: var(--size-1) var(--size-2);
}
}
}
+
.card__footer,
.card__tags {
+
// Width is experimental to match one of the max-widths in
// layouts for narrower width page look.
@include uw-contained-width(47.0625rem);
@@ -175,17 +192,18 @@
// CSS for displaying the title within the node :
}
- &--opportunity{
- .uw-node__without-image &{
- .card__header{
- margin-bottom:gesso-spacing(md);
+ &--opportunity {
+ .uw-node__without-image & {
+ .card__header {
+ margin-bottom: var(--size-3);
}
}
}
- &--project{
- .card__footer{
- .card__tags{
- padding:0;
+
+ &--project {
+ .card__footer {
+ .card__tags {
+ padding: 0;
}
}
}