This commit is contained in:
Julie Blanc
parent
6d71b353f3
commit
ace7dfaede
5 changed files with 343 additions and 388 deletions
|
|
@ -170,58 +170,6 @@ button:disabled{
|
|||
|
||||
|
||||
|
||||
.btn--home{
|
||||
background-color: var(--color-bg);
|
||||
display: block;
|
||||
height: calc(var(--h-block)*1);
|
||||
border: 1px solid currentColor;
|
||||
border-radius: var(--radius-btn);
|
||||
font-size: var(--fs-xsmall);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
|
||||
color: var(--color-accent);
|
||||
|
||||
transition: .3s ease-in;
|
||||
|
||||
@media #{$small} {
|
||||
}
|
||||
|
||||
svg{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
fill: var(--color-accent);
|
||||
transition: fill .3s ease-in;
|
||||
}
|
||||
a{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1ch;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 2ch;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
&:hover{
|
||||
border-color: var(--color-accent);
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-bg);
|
||||
svg{
|
||||
fill: var(--color-bg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.btn--toc{
|
||||
svg{
|
||||
|
|
|
|||
|
|
@ -414,48 +414,6 @@ button:disabled {
|
|||
fill: var(--grey-100);
|
||||
}
|
||||
|
||||
.btn--home {
|
||||
background-color: var(--color-bg);
|
||||
display: block;
|
||||
height: calc(var(--h-block) * 1);
|
||||
border: 1px solid currentColor;
|
||||
border-radius: var(--radius-btn);
|
||||
font-size: var(--fs-xsmall);
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
color: var(--color-accent);
|
||||
transition: 0.3s ease-in;
|
||||
}
|
||||
.btn--home svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
fill: var(--color-accent);
|
||||
transition: fill 0.3s ease-in;
|
||||
}
|
||||
.btn--home a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1ch;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 2ch;
|
||||
padding-top: 4px;
|
||||
}
|
||||
.btn--home:hover {
|
||||
border-color: var(--color-accent);
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-bg);
|
||||
}
|
||||
.btn--home:hover svg {
|
||||
fill: var(--color-bg);
|
||||
}
|
||||
|
||||
.btn--toc svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
|
|
@ -2484,103 +2442,116 @@ main .page__header .description-medium {
|
|||
}
|
||||
}
|
||||
|
||||
.section--home .title-section {
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-big);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
.section--home .description-section {
|
||||
max-width: 42ch;
|
||||
font-size: var(--fs-normal);
|
||||
line-height: 1.1;
|
||||
}
|
||||
.section--home .btn--home {
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
}
|
||||
@media screen and (min-width: 1080px) {
|
||||
@media screen and (min-width: 768px) {
|
||||
.section--home {
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1080px) {
|
||||
.section--home {
|
||||
padding-bottom: calc(var(--spacing) * 4);
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
}
|
||||
.section--home:first-of-type {
|
||||
padding-top: calc(var(--spacing) * 2);
|
||||
}
|
||||
.section--home .col-left {
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
}
|
||||
.section--home .baseline-section {
|
||||
max-width: 42ch;
|
||||
font-size: var(--fs-medium);
|
||||
line-height: 1.1;
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
.section--home .btn--bold-inline {
|
||||
text-transform: none;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
.section--home .btn--bold-inline .icon {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
.section--home .btn--bold-inline svg {
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
@media screen and (min-width: 1080px) {
|
||||
.section--home .section--inner {
|
||||
max-width: 1280px;
|
||||
margin: calc(var(--spacing) * 4) auto;
|
||||
max-width: 1600px;
|
||||
margin-inline: auto;
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
padding-top: calc(var(--spacing) * 4);
|
||||
display: grid;
|
||||
--gap: calc(var(--padding-body)*2);
|
||||
grid-template-columns: 1fr 640px;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
grid-gap: var(--gap);
|
||||
}
|
||||
.section--home .col-left {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
align-self: start;
|
||||
position: sticky;
|
||||
top: calc(var(--header-h) + var(--spacing) * 4);
|
||||
}
|
||||
.section--home .col-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
#home__investigations .home-investigations-slider {
|
||||
max-width: 500px;
|
||||
height: auto;
|
||||
}
|
||||
#home__investigations .card--article .time-alone {
|
||||
display: block;
|
||||
}
|
||||
#home__investigations .card--article .dl,
|
||||
#home__investigations .card--article .pin {
|
||||
display: none;
|
||||
@media screen and (max-width: 768px) {
|
||||
.section--home .card--article,
|
||||
.section--home .card--impact {
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
.section--home .baseline-section {
|
||||
font-size: var(--fs-big);
|
||||
}
|
||||
}
|
||||
|
||||
#home__hero {
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
#home__hero {
|
||||
margin-top: calc(var(--spacing) * 2.5);
|
||||
padding-bottom: calc(var(--spacing) * 1.5);
|
||||
margin-bottom: 0px;
|
||||
@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;
|
||||
}
|
||||
}
|
||||
#home__hero .section--inner {
|
||||
display: block;
|
||||
}
|
||||
#home__hero .baseline {
|
||||
font-size: var(--fs-big);
|
||||
line-height: 1.1;
|
||||
max-width: 32ch;
|
||||
}
|
||||
#home__hero button {
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
}
|
||||
|
||||
#home__folders .card--folder {
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1080px) {
|
||||
.section--home:not(#home-hero) {
|
||||
border-bottom: var(--border);
|
||||
padding-bottom: calc(var(--spacing) * 4);
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
}
|
||||
.section--home:not(#home-hero) .col-left {
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
#home__hero {
|
||||
height: calc(100vh - var(--header-h));
|
||||
margin: 0 !important;
|
||||
border-bottom: none !important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding-bottom: 25vh !important;
|
||||
}
|
||||
#home__investigations {
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
[data-template=investigation-summary] main {
|
||||
position: relative;
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -1,41 +1,60 @@
|
|||
.section--home {
|
||||
|
||||
.title-section {
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-big);
|
||||
@media #{$small-up} {
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
|
||||
@media #{$medium} {
|
||||
padding-bottom: calc(var(--spacing)*4);
|
||||
margin-bottom: calc(var(--spacing)*4);
|
||||
&:first-of-type{
|
||||
padding-top: calc(var(--spacing)*2);
|
||||
}
|
||||
.col-left{
|
||||
margin-bottom: calc(var(--spacing)*3);
|
||||
}
|
||||
}
|
||||
|
||||
.baseline-section {
|
||||
max-width: 42ch;
|
||||
font-size: var(--fs-medium);
|
||||
line-height: 1.1;
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
.description-section {
|
||||
max-width: 42ch;
|
||||
font-size: var(--fs-normal);
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
.btn--home{
|
||||
margin-top: calc(var(--spacing)*2);
|
||||
.btn--bold-inline{
|
||||
text-transform: none;
|
||||
font-weight: 500;
|
||||
font-size: var(--fs-small);
|
||||
.icon{
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
svg{
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media #{$medium-up} {
|
||||
|
||||
border-bottom: var(--border-light);
|
||||
|
||||
.section--inner {
|
||||
max-width: 1280px;
|
||||
margin: calc(var(--spacing)*4) auto;
|
||||
max-width: 1600px;
|
||||
margin-inline: auto;
|
||||
margin-bottom: calc(var(--spacing)*4);
|
||||
padding-top: calc(var(--spacing)*4);
|
||||
display: grid;
|
||||
--gap: calc(var(--padding-body)*2);
|
||||
grid-template-columns: 1fr 640px;
|
||||
grid-template-columns: 1fr 2fr;
|
||||
grid-gap: var(--gap);
|
||||
}
|
||||
|
||||
|
||||
.col-left {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
align-self: start;
|
||||
position: sticky;
|
||||
top: calc(var(--header-h) + var(--spacing)*4);
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -47,55 +66,21 @@
|
|||
|
||||
}
|
||||
|
||||
@media #{$medium} {
|
||||
|
||||
// &#home__investigations,
|
||||
// &#home__hero {
|
||||
// border-bottom: var(--border-light);
|
||||
// }
|
||||
|
||||
// .section--inner {
|
||||
// margin-top: calc(var(--spacing)*3);
|
||||
// margin-bottom: calc(var(--spacing)*4);
|
||||
// }
|
||||
|
||||
// .col-left {
|
||||
// display: flex;
|
||||
// flex-wrap: wrap;
|
||||
// align-items: flex-end;
|
||||
// justify-content: space-between;
|
||||
// margin-bottom: calc(var(--spacing)*2);
|
||||
|
||||
// .title-section {
|
||||
// width: 100%;
|
||||
// }
|
||||
|
||||
// }
|
||||
}
|
||||
|
||||
@media #{$x-small} {
|
||||
// .section--inner {
|
||||
// margin-top: calc(var(--spacing)*2);
|
||||
// margin-bottom: calc(var(--spacing)*4);
|
||||
// margin-bottom: 0px;
|
||||
// }
|
||||
|
||||
// .col-left{
|
||||
// margin-bottom: calc(var(--spacing)*1.5);
|
||||
// }
|
||||
|
||||
|
||||
// .title-section {
|
||||
// margin-bottom: calc(var(--spacing)*0.25);
|
||||
// }
|
||||
|
||||
// .description-section {
|
||||
// max-width: 42ch;
|
||||
// font-size: var(--fs-normal);
|
||||
// }
|
||||
|
||||
|
||||
}
|
||||
@media #{$small} {
|
||||
|
||||
.card--article,
|
||||
.card--impact{
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
.baseline-section{
|
||||
font-size: var(--fs-big);
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -111,91 +96,67 @@
|
|||
|
||||
#home__investigations {
|
||||
|
||||
.home-investigations-slider {
|
||||
max-width: 500px;
|
||||
height: auto;
|
||||
}
|
||||
@media #{$small-up} {
|
||||
.col-right{
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--padding-body);
|
||||
|
||||
.card--article {
|
||||
.card--article:first-of-type{
|
||||
grid-column: span 2;
|
||||
|
||||
.time-alone {
|
||||
display: block;
|
||||
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;
|
||||
// margin-top: var(--padding-body);
|
||||
}
|
||||
}
|
||||
|
||||
.dl,
|
||||
.pin {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
#home__hero {
|
||||
margin-top: calc(var(--spacing)*3);
|
||||
margin-bottom: calc(var(--spacing)*3);
|
||||
|
||||
@media #{$x-small} {
|
||||
margin-top: calc(var(--spacing)*2.5);
|
||||
padding-bottom: calc(var(--spacing)*1.5);
|
||||
margin-bottom: 0px;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.section--inner {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.baseline {
|
||||
font-size: var(--fs-big);
|
||||
line-height: 1.1;
|
||||
max-width: 32ch;
|
||||
}
|
||||
|
||||
button {
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
#home__folders {
|
||||
.card--folder {
|
||||
margin-bottom: calc(var(--spacing)*0.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media #{$medium} {
|
||||
|
||||
.section--home:not(#home-hero) {
|
||||
border-bottom: var(--border);
|
||||
padding-bottom: calc(var(--spacing)*4);
|
||||
margin-bottom: calc(var(--spacing)*4);
|
||||
|
||||
.col-left{
|
||||
margin-bottom: calc(var(--spacing)*3);
|
||||
}
|
||||
}
|
||||
|
||||
#home__hero{
|
||||
height: calc(100vh - var(--header-h));
|
||||
margin: 0!important;
|
||||
border-bottom: none!important;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-end;
|
||||
padding-bottom: 25vh!important;
|
||||
|
||||
}
|
||||
|
||||
#home__investigations{
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue