diff --git a/src/patterns/03-layouts/layout/_layout.scss b/src/patterns/03-layouts/layout/_layout.scss index d8aa3e619a9b3129859384ef77d152985a6a6c9c..4c0aef918859ee95aed7c8e70de691b37a1d5b2e 100644 --- a/src/patterns/03-layouts/layout/_layout.scss +++ b/src/patterns/03-layouts/layout/_layout.scss @@ -2,22 +2,25 @@ .layout { @include uw-contained-width; - - .uw-node__with-image .card__node & { - padding: var(--size-1); + .uw-node__with-media .card__node & { + padding: var(--size-2); @media(min-width: $screen-xxl) { - padding: var(--size-1) 0; + padding: var(--size-2) 0; } } - + &.card__media{ + padding: 0 var(--size-2); + } &.uw-contained-width { @include uw-contained-width; - padding: var(--size-1); + padding: var(--size-2); @media(min-width: $screen-xxl) { - padding: var(--size-1) 0; + padding: var(--size-2) 0; + } + &.card__media{ + padding: 0 var(--size-2); } - &--narrow { /* Match the width of WCMS2's narrow: 496px */ max-width: 31rem; @@ -102,6 +105,9 @@ } } } + &.card__media{ + padding: 0; + } } // When wrapped with class to identify sidebar .uw-node__with-sidebar & { diff --git a/src/patterns/04-components/card/_card.scss b/src/patterns/04-components/card/_card.scss index fed2f271d9f030652bd53205d82ee272f06a3f8c..eb96036d8c2fd2d5ac046ed2e8ea519f250cdffe 100644 --- a/src/patterns/04-components/card/_card.scss +++ b/src/patterns/04-components/card/_card.scss @@ -136,17 +136,7 @@ $card-padding: var(--size-2) !default; } .card__media{ - .card__header{ - margin: 0 auto; - max-width: var(--layout-max-width); - padding: 0 var(--size-1); - @media(min-width: $screen-xxl) { - padding: 0; - } - .card__title{ - margin: var(--size-1) 0; - } - } +// } // body 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 4a36271e9d9e2dc75941b2dea924ec953f717b8e..e000fa2f9ed09404829a882440fb04f01f1e6513 100644 --- a/src/patterns/04-components/card/card--node/_card--node.scss +++ b/src/patterns/04-components/card/card--node/_card--node.scss @@ -12,7 +12,11 @@ margin: 0 auto; max-width: var(--layout-max-width); } - + .uw-node__with-media &{ + > .card__header{ + padding: var(--size-2); + } + } .uw-node__without-media & { .card__header, .card__footer { @@ -79,7 +83,7 @@ } // CSS for specific node card presentations: &--contact { - background: $test-color-2; + background: $test-color-9; display: grid; gap: var(--grid-gap); @@ -92,28 +96,29 @@ @media(min-width: $screen-md) { display: grid; gap: var(--size-4); - grid-template-columns: var(--size-20) 1fr; + //grid-template-columns: var(--size-20) 1fr; } .card__image { - grid-column: 1 / 3; - + //grid-column: 1 / 3; + background: $test-color-3; @media(min-width: $screen-md) { - grid-column: 1 / 2; + //grid-column: 1 / 2; } } .card__header, .card__body, .card__footer { - grid-column: 1 / 3; + //grid-column: 1 / 3; @media(min-width: $screen-md) { - grid-column: 2 / 3; + //grid-column: 2 / 3; } padding: 0; } .uw-node__without-media & { + background: $test-color-9; @media(min-width: $screen-md) { grid-template-columns: 100%; } @@ -121,7 +126,7 @@ .card__header, .card__body, .card__footer { - grid-column: 1 / 2; + //grid-column: 1 / 2; } } } @@ -137,7 +142,25 @@ } .uw-node__with-media & { + .card__header{ + display: grid; + padding: var(--size-2); + .card__title{ + margin: 0; + padding: var(--size-2) 0; + } + } + .card__media{ + // + } + .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(var(--layout-wide-max-width)); + } .card__featured-image { align-items: center; background-position: center center; @@ -156,7 +179,7 @@ align-self: end; margin-bottom: 0; margin-top: 0; - + padding: inherit; .card__date { margin-bottom: 0; margin-top: 0; @@ -186,14 +209,6 @@ } } } - - .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(var(--layout-wide-max-width)); - } } // CSS for displaying the title within the node : } diff --git a/src/patterns/04-components/card/card--teaser/_card--teaser.scss b/src/patterns/04-components/card/card--teaser/_card--teaser.scss index dbcf5e876b340d32fab9d9c301180028923d3576..273b33045fe01702760ffa058db27f8665cb0a23 100644 --- a/src/patterns/04-components/card/card--teaser/_card--teaser.scss +++ b/src/patterns/04-components/card/card--teaser/_card--teaser.scss @@ -18,7 +18,7 @@ max-width: 90%; } - .uw-node__without-image & { + .uw-node__without-media & { .card__header, .card__footer { padding: 0;