pinned invesetigations front
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
This commit is contained in:
Julie Blanc
parent
347c45bc22
commit
f1ace8cc05
7 changed files with 338 additions and 159 deletions
|
|
@ -29,7 +29,7 @@
|
|||
--leading-tight: 1.05;
|
||||
--leading-normal: 1.3;
|
||||
|
||||
--leading-title: 1.1;
|
||||
--leading-title: 1.2;
|
||||
// --leading-relaxed: 1.4;
|
||||
// --leading-loose: 1.8;
|
||||
|
||||
|
|
|
|||
|
|
@ -6,16 +6,26 @@
|
|||
|
||||
padding: var(--padding-inner);
|
||||
|
||||
|
||||
|
||||
@include figure-16-9();
|
||||
@include pin();
|
||||
|
||||
& > figure{
|
||||
& > figure,
|
||||
.video-extract{
|
||||
width: calc(100% + var(--padding-inner)*2);
|
||||
position: relative;
|
||||
left: calc(var(--padding-inner)*-1);
|
||||
top: calc(var(--padding-inner)*-1);
|
||||
|
||||
|
||||
}
|
||||
|
||||
.video-extract video{
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
object-fit: cover;
|
||||
position: relative;
|
||||
|
||||
}
|
||||
|
||||
.content{
|
||||
|
|
@ -41,13 +51,13 @@
|
|||
line-height: var(--leading-title);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
text-wrap: balance;
|
||||
// text-wrap: balance;
|
||||
|
||||
a{ text-decoration: none;}
|
||||
}
|
||||
|
||||
.description{
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
margin-top: calc(var(--spacing)*1.25);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
|
|
@ -56,14 +66,18 @@
|
|||
}
|
||||
|
||||
.dl{
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
margin-top: calc(var(--spacing)*0.75);
|
||||
// font-size: var(--fs-small);
|
||||
border-bottom: var(--border-light);
|
||||
|
||||
font-size: var(--fs-small);
|
||||
flex-grow: 2;
|
||||
.dl__group{
|
||||
@include grid-content();
|
||||
border-top: var(--border-light);
|
||||
padding: calc(var(--spacing)*0.5) 0;
|
||||
&:last-of-type{
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
}
|
||||
|
||||
dt{
|
||||
|
|
@ -90,8 +104,111 @@
|
|||
z-index: 2000;
|
||||
}
|
||||
|
||||
.keywords-wrapper{
|
||||
padding-top: calc(var(--spacing)*0.75);
|
||||
z-index: 100;
|
||||
.keywords li a{
|
||||
font-size: var(--fs-xsmall);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
[data-template="home"] .pinned-home{
|
||||
grid-column: span 2;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: calc(var(--padding-inner)*2);
|
||||
|
||||
|
||||
figure,
|
||||
picture,
|
||||
.video-extract{
|
||||
grid-column: span 2;
|
||||
display: flex;
|
||||
|
||||
width: calc(100% + var(--padding-inner)*4);
|
||||
position: relative;
|
||||
left: calc(var(--padding-inner)*-2);
|
||||
top: calc(var(--padding-inner)*-2);
|
||||
}
|
||||
|
||||
|
||||
.title{
|
||||
grid-column: span 2;
|
||||
font-size: var(--fs-text);
|
||||
padding-right: 3ch;
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
}
|
||||
|
||||
|
||||
.description{
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
padding-right: 3ch;
|
||||
display: block;
|
||||
-webkit-line-clamp: unset;
|
||||
-webkit-box-orient: unset;
|
||||
overflow: visible;
|
||||
font-size: var(--fs-normal);
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
dl{
|
||||
margin-top: 0px;
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
.keywords-wrapper{
|
||||
grid-column: span 2;
|
||||
grid-row: 4;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
// .card--article:first-of-type{
|
||||
// grid-column: span 2;
|
||||
|
||||
// display: grid;
|
||||
// grid-template-columns: 1fr 1fr;
|
||||
|
||||
// figure,
|
||||
// picture{
|
||||
// grid-column: span 2;
|
||||
// }
|
||||
|
||||
// .title{
|
||||
// grid-column: span 2;
|
||||
// font-size: var(--fs-medium);
|
||||
// padding-right: 3ch;
|
||||
// margin-bottom: calc(var(--spacing)*1);
|
||||
// }
|
||||
|
||||
// .description{
|
||||
// grid-column: 1;
|
||||
// grid-row: 3;
|
||||
// padding-right: 3ch;
|
||||
// display: block;
|
||||
// -webkit-line-clamp: unset;
|
||||
// -webkit-box-orient: unset;
|
||||
// overflow: visible;
|
||||
// }
|
||||
|
||||
// dl{
|
||||
// grid-column: 2;
|
||||
// grid-row: 3;
|
||||
// }
|
||||
|
||||
// .keywords-wrapper{
|
||||
// grid-column: 2;
|
||||
// grid-row: 4;
|
||||
// }
|
||||
// }
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
:root {
|
||||
--leading-tight: 1.05;
|
||||
--leading-normal: 1.3;
|
||||
--leading-title: 1.1;
|
||||
--leading-title: 1.2;
|
||||
--fw-normal: 400;
|
||||
--fw-medium: 500;
|
||||
--fw-bold: 600;
|
||||
|
|
@ -1196,12 +1196,21 @@ button.sort[data-sort-type=up] .arrow {
|
|||
height: 100%;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
.card--article > figure {
|
||||
.card--article > figure,
|
||||
.card--article .video-extract {
|
||||
width: calc(100% + var(--padding-inner) * 2);
|
||||
position: relative;
|
||||
left: calc(var(--padding-inner) * -1);
|
||||
top: calc(var(--padding-inner) * -1);
|
||||
}
|
||||
.card--article .video-extract video {
|
||||
width: 100%;
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
position: relative;
|
||||
}
|
||||
.card--article .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -1222,13 +1231,12 @@ button.sort[data-sort-type=up] .arrow {
|
|||
line-height: var(--leading-title);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
text-wrap: balance;
|
||||
}
|
||||
.card--article .title a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.card--article .description {
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
margin-top: calc(var(--spacing) * 1.25);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
|
|
@ -1236,9 +1244,9 @@ button.sort[data-sort-type=up] .arrow {
|
|||
font-size: var(--fs-small);
|
||||
}
|
||||
.card--article .dl {
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
border-bottom: var(--border-light);
|
||||
margin-top: calc(var(--spacing) * 0.75);
|
||||
font-size: var(--fs-small);
|
||||
flex-grow: 2;
|
||||
}
|
||||
.card--article .dl .dl__group {
|
||||
display: grid;
|
||||
|
|
@ -1248,6 +1256,9 @@ button.sort[data-sort-type=up] .arrow {
|
|||
border-top: var(--border-light);
|
||||
padding: calc(var(--spacing) * 0.5) 0;
|
||||
}
|
||||
.card--article .dl .dl__group:last-of-type {
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
.card--article .dl dt {
|
||||
color: var(--color-txt-light);
|
||||
padding-right: 1ch;
|
||||
|
|
@ -1265,6 +1276,57 @@ button.sort[data-sort-type=up] .arrow {
|
|||
.card--article .link-block {
|
||||
z-index: 2000;
|
||||
}
|
||||
.card--article .keywords-wrapper {
|
||||
padding-top: calc(var(--spacing) * 0.75);
|
||||
z-index: 100;
|
||||
}
|
||||
.card--article .keywords-wrapper .keywords li a {
|
||||
font-size: var(--fs-xsmall);
|
||||
}
|
||||
|
||||
[data-template=home] .pinned-home {
|
||||
grid-column: span 2;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
padding: calc(var(--padding-inner) * 2);
|
||||
}
|
||||
[data-template=home] .pinned-home figure,
|
||||
[data-template=home] .pinned-home picture,
|
||||
[data-template=home] .pinned-home .video-extract {
|
||||
grid-column: span 2;
|
||||
display: flex;
|
||||
width: calc(100% + var(--padding-inner) * 4);
|
||||
position: relative;
|
||||
left: calc(var(--padding-inner) * -2);
|
||||
top: calc(var(--padding-inner) * -2);
|
||||
}
|
||||
[data-template=home] .pinned-home .title {
|
||||
grid-column: span 2;
|
||||
font-size: var(--fs-text);
|
||||
padding-right: 3ch;
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
[data-template=home] .pinned-home .description {
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
padding-right: 3ch;
|
||||
display: block;
|
||||
-webkit-line-clamp: unset;
|
||||
-webkit-box-orient: unset;
|
||||
overflow: visible;
|
||||
font-size: var(--fs-normal);
|
||||
margin-top: 0px;
|
||||
}
|
||||
[data-template=home] .pinned-home dl {
|
||||
margin-top: 0px;
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
}
|
||||
[data-template=home] .pinned-home .keywords-wrapper {
|
||||
grid-column: span 2;
|
||||
grid-row: 4;
|
||||
}
|
||||
|
||||
.card--package,
|
||||
.card--article-small {
|
||||
|
|
@ -2322,9 +2384,8 @@ main .page__header .description {
|
|||
margin-bottom: calc(var(--spacing) * 4);
|
||||
padding-top: calc(var(--spacing) * 4);
|
||||
display: grid;
|
||||
--gap: calc(var(--padding-body)*2);
|
||||
grid-template-columns: 1fr 2fr;
|
||||
grid-gap: var(--gap);
|
||||
grid-template-columns: minmax(360px, 1fr) 2fr;
|
||||
grid-gap: calc(var(--padding-body) * 3);
|
||||
}
|
||||
.section--home .col-left {
|
||||
align-self: start;
|
||||
|
|
@ -2352,44 +2413,15 @@ main .page__header .description {
|
|||
}
|
||||
}
|
||||
|
||||
#home__investigations .section--inner {
|
||||
padding-top: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
#home__investigations .col-right {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--padding-body);
|
||||
}
|
||||
#home__investigations .col-right .card--article:first-of-type {
|
||||
grid-column: span 2;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
#home__investigations .col-right .card--article:first-of-type figure,
|
||||
#home__investigations .col-right .card--article:first-of-type picture {
|
||||
grid-column: span 2;
|
||||
}
|
||||
#home__investigations .col-right .card--article:first-of-type .title {
|
||||
grid-column: span 2;
|
||||
font-size: var(--fs-medium);
|
||||
padding-right: 3ch;
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
#home__investigations .col-right .card--article:first-of-type .description {
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
padding-right: 3ch;
|
||||
display: block;
|
||||
-webkit-line-clamp: unset;
|
||||
-webkit-box-orient: unset;
|
||||
overflow: visible;
|
||||
}
|
||||
#home__investigations .col-right .card--article:first-of-type dl {
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
}
|
||||
#home__investigations .col-right .card--article:first-of-type .keywords-wrapper {
|
||||
grid-column: 2;
|
||||
grid-row: 4;
|
||||
}
|
||||
#home__investigations .col-right .see-more {
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -7,12 +7,14 @@
|
|||
@media #{$medium} {
|
||||
padding-bottom: calc(var(--spacing)*4);
|
||||
margin-bottom: calc(var(--spacing)*4);
|
||||
&:first-of-type{
|
||||
|
||||
&:first-of-type{
|
||||
padding-top: calc(var(--spacing)*2);
|
||||
}
|
||||
.col-left{
|
||||
margin-bottom: calc(var(--spacing)*3);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.baseline-section {
|
||||
|
|
@ -45,9 +47,9 @@
|
|||
margin-bottom: calc(var(--spacing)*4);
|
||||
padding-top: calc(var(--spacing)*4);
|
||||
display: grid;
|
||||
--gap: calc(var(--padding-body)*2);
|
||||
grid-template-columns: 1fr 2fr;
|
||||
grid-gap: var(--gap);
|
||||
// grid-template-columns: 1fr 2fr;
|
||||
grid-template-columns: minmax(360px, 1fr) 2fr;
|
||||
grid-gap: calc(var(--padding-body)*3);
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -100,53 +102,19 @@
|
|||
|
||||
|
||||
|
||||
|
||||
#home__investigations {
|
||||
|
||||
.section--inner{
|
||||
padding-top: calc(var(--spacing)*1.5);
|
||||
}
|
||||
|
||||
@media #{$small-up} {
|
||||
.col-right{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--padding-body);
|
||||
|
||||
.card--article:first-of-type{
|
||||
grid-column: span 2;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
figure,
|
||||
picture{
|
||||
grid-column: span 2;
|
||||
}
|
||||
|
||||
.title{
|
||||
grid-column: span 2;
|
||||
font-size: var(--fs-medium);
|
||||
padding-right: 3ch;
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
.description{
|
||||
grid-column: 1;
|
||||
grid-row: 3;
|
||||
padding-right: 3ch;
|
||||
display: block;
|
||||
-webkit-line-clamp: unset;
|
||||
-webkit-box-orient: unset;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
dl{
|
||||
grid-column: 2;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
.keywords-wrapper{
|
||||
grid-column: 2;
|
||||
grid-row: 4;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.see-more{
|
||||
grid-column: span 2;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue