This commit is contained in:
Julie Blanc
parent
3836144423
commit
4fee638a93
10 changed files with 342 additions and 143 deletions
|
|
@ -1565,28 +1565,6 @@ button.sort[data-sort-type=up] .arrow {
|
|||
background-color: var(--grey-950);
|
||||
border-color: var(--color-txt);
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.card--folder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: calc(var(--padding-inner) * 0.5);
|
||||
}
|
||||
.card--folder .content {
|
||||
display: contents;
|
||||
}
|
||||
.card--folder .title {
|
||||
order: 1;
|
||||
}
|
||||
.card--folder figure {
|
||||
order: 2;
|
||||
}
|
||||
.card--folder .short {
|
||||
order: 3;
|
||||
}
|
||||
.card--folder ul {
|
||||
order: 4;
|
||||
}
|
||||
}
|
||||
|
||||
@container cardfolder (width < 680px) {
|
||||
figure {
|
||||
|
|
@ -1688,13 +1666,16 @@ button.sort[data-sort-type=up] .arrow {
|
|||
aspect-ratio: inherit;
|
||||
}
|
||||
}
|
||||
#home__investigations {
|
||||
--slide-padding: 30px;
|
||||
}
|
||||
#home__investigations .swiper-button-prev,
|
||||
#home__investigations .swiper-button-next {
|
||||
--swiper-navigation-size: 32px;
|
||||
color: var(--color-txt);
|
||||
background-color: var(--color-bg);
|
||||
height: 100%;
|
||||
width: 60px;
|
||||
width: var(--slide-padding);
|
||||
}
|
||||
#home__investigations .swiper-button-prev svg,
|
||||
#home__investigations .swiper-button-next svg {
|
||||
|
|
@ -1711,14 +1692,16 @@ button.sort[data-sort-type=up] .arrow {
|
|||
#home__investigations .swiper-button-prev {
|
||||
left: 0px;
|
||||
top: 0px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
#home__investigations .swiper-button-next {
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
#home__investigations .swiper-slide {
|
||||
padding-left: 60px;
|
||||
padding-right: 60px;
|
||||
padding-left: var(--slide-padding);
|
||||
padding-right: var(--slide-padding);
|
||||
}
|
||||
#home__investigations .swiper-pagination {
|
||||
position: relative;
|
||||
|
|
@ -1733,6 +1716,15 @@ button.sort[data-sort-type=up] .arrow {
|
|||
#home__investigations .swiper-pagination .swiper-pagination-bullet-active {
|
||||
background: var(--color-txt);
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
#home__investigations .swiper-button-prev,
|
||||
#home__investigations .swiper-button-next {
|
||||
display: none;
|
||||
}
|
||||
#home__investigations .swiper-slide {
|
||||
padding: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
#site-header {
|
||||
z-index: var(--z-header);
|
||||
|
|
@ -2003,9 +1995,14 @@ body main {
|
|||
main .page__header {
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
main .page__header {
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
}
|
||||
}
|
||||
main .page__header .page__title {
|
||||
max-width: var(--max-w-content);
|
||||
text-transform: uppercase;
|
||||
|
|
@ -2049,35 +2046,15 @@ main .page__header .description-medium {
|
|||
}
|
||||
}
|
||||
|
||||
.section--home {
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
.section--home .btn--bold-inline {
|
||||
text-transform: none;
|
||||
margin-top: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
.section--home .btn--bold-inline svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
top: 0px;
|
||||
}
|
||||
.section--home .section--inner {
|
||||
max-width: 1300px;
|
||||
margin: calc(var(--spacing) * 3) auto;
|
||||
display: grid;
|
||||
--gap: calc(var(--padding-body)*2);
|
||||
grid-template-columns: repeat(2, calc((100% - var(--gap)) * 0.5));
|
||||
grid-gap: var(--gap);
|
||||
}
|
||||
.section--home .col-left {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.section--home .col-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.section--home .title-section {
|
||||
font-size: var(--fs-medium);
|
||||
font-weight: normal;
|
||||
|
|
@ -2086,23 +2063,93 @@ main .page__header .description-medium {
|
|||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
.section--home .description-section {
|
||||
max-width: 42ch;
|
||||
font-size: var(--fs-medium);
|
||||
line-height: 1.1;
|
||||
margin-bottom: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
@media screen and (min-width: 1080px) {
|
||||
.section--home {
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
.section--home .section--inner {
|
||||
max-width: 1280px;
|
||||
margin: calc(var(--spacing) * 3) auto;
|
||||
display: grid;
|
||||
--gap: calc(var(--padding-body)*2);
|
||||
grid-template-columns: 1fr 640px;
|
||||
grid-gap: var(--gap);
|
||||
}
|
||||
.section--home .col-left {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.section--home .col-right {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 1080px) {
|
||||
.section--home#home__investigations, .section--home#home__hero {
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
.section--home .section--inner {
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
}
|
||||
.section--home .col-left {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
.section--home .col-left .title-section {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.section--home .section--inner {
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.section--home .col-left {
|
||||
margin-bottom: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
.section--home .title-section {
|
||||
margin-bottom: calc(var(--spacing) * 0.25);
|
||||
}
|
||||
.section--home .description-section {
|
||||
max-width: 42ch;
|
||||
font-size: var(--fs-normal);
|
||||
}
|
||||
.section--home .btn--bold-inline {
|
||||
color: var(--color-txt-light);
|
||||
border-color: var(--color-txt-light);
|
||||
height: calc(var(--h-block) * 0.75);
|
||||
margin-top: calc(var(--spacing) * 0.75);
|
||||
}
|
||||
.section--home .btn--bold-inline a {
|
||||
padding: 0 1ch;
|
||||
padding-top: 2px;
|
||||
}
|
||||
.section--home .btn--bold-inline svg {
|
||||
fill: var(--color-txt-light);
|
||||
}
|
||||
}
|
||||
|
||||
#home__investigations .home-investigations-slider {
|
||||
max-width: 500px;
|
||||
height: auto;
|
||||
}
|
||||
#home__investigations .card--article {
|
||||
align-items: flex-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
#home__investigations .card--article .time-alone {
|
||||
display: block;
|
||||
}
|
||||
#home__investigations .card--article .description, #home__investigations .card--article .dl, #home__investigations .card--article .pin {
|
||||
#home__investigations .card--article .description,
|
||||
#home__investigations .card--article .dl,
|
||||
#home__investigations .card--article .pin {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
@ -2110,6 +2157,13 @@ main .page__header .description-medium {
|
|||
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;
|
||||
}
|
||||
}
|
||||
#home__hero .section--inner {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -2119,6 +2173,11 @@ main .page__header .description-medium {
|
|||
line-height: 1.1;
|
||||
max-width: 26ch;
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
#home__hero .baseline {
|
||||
font-size: 34px;
|
||||
}
|
||||
}
|
||||
#home__hero button {
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue