page investigations
All checks were successful
Deploy / Deploy to Production (push) Successful in 11s
All checks were successful
Deploy / Deploy to Production (push) Successful in 11s
This commit is contained in:
Julie Blanc
parent
ea648498e2
commit
6cf52a6703
20 changed files with 556 additions and 278 deletions
|
|
@ -10,6 +10,7 @@
|
|||
--fs-xbig: 38px;
|
||||
--fs-button-bold: 22px;
|
||||
--max-w-content: 700px;
|
||||
--max-w-container: 1280px;
|
||||
--leading-tight: 1.05;
|
||||
--leading-normal: 1.2;
|
||||
--fw-normal: 400;
|
||||
|
|
@ -679,154 +680,148 @@ button:disabled {
|
|||
background-color: var(--color-accent);
|
||||
}
|
||||
|
||||
[data-template=subscription-newsletter] .p__baseline-big,
|
||||
[data-template=thanks] .p__baseline-big,
|
||||
[data-template=support] .p__baseline-big,
|
||||
[data-template=store] .p__baseline-big {
|
||||
font-family: var(--title);
|
||||
font-size: var(--fs-big);
|
||||
font-weight: var(--fw-bold);
|
||||
line-height: 1.1;
|
||||
text-align: center;
|
||||
margin: calc(var(--spacing) * 1) 0;
|
||||
}
|
||||
[data-template=subscription-newsletter] .p__baseline-big strong,
|
||||
[data-template=thanks] .p__baseline-big strong,
|
||||
[data-template=support] .p__baseline-big strong,
|
||||
[data-template=store] .p__baseline-big strong {
|
||||
font-weight: var(--fw-bolf);
|
||||
color: var(--color-accent);
|
||||
}
|
||||
[data-template=subscription-newsletter] .p__baseline-big .link-don,
|
||||
[data-template=thanks] .p__baseline-big .link-don,
|
||||
[data-template=support] .p__baseline-big .link-don,
|
||||
[data-template=store] .p__baseline-big .link-don {
|
||||
display: block;
|
||||
color: var(--color-accent);
|
||||
text-decoration: none;
|
||||
}
|
||||
[data-template=subscription-newsletter] .p__baseline-big .link-don:hover,
|
||||
[data-template=thanks] .p__baseline-big .link-don:hover,
|
||||
[data-template=support] .p__baseline-big .link-don:hover,
|
||||
[data-template=store] .p__baseline-big .link-don:hover {
|
||||
-webkit-text-decoration: underline 2px;
|
||||
text-decoration: underline 2px;
|
||||
text-underline-offset: 4px;
|
||||
}
|
||||
[data-template=subscription-newsletter] .p__baseline,
|
||||
[data-template=thanks] .p__baseline,
|
||||
[data-template=support] .p__baseline,
|
||||
[data-template=store] .p__baseline {
|
||||
.title-page {
|
||||
font-size: var(--fs-medium);
|
||||
font-weight: var(--fw-medium);
|
||||
line-height: 1.1;
|
||||
text-align: center;
|
||||
margin: calc(var(--spacing) * 1) 0;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
[data-template=subscription-newsletter] .p__baseline,
|
||||
[data-template=thanks] .p__baseline,
|
||||
[data-template=support] .p__baseline,
|
||||
[data-template=store] .p__baseline {
|
||||
text-align: center;
|
||||
margin: var(--spacing) 0;
|
||||
}
|
||||
}
|
||||
[data-template=subscription-newsletter] .p__details,
|
||||
[data-template=thanks] .p__details,
|
||||
[data-template=support] .p__details,
|
||||
[data-template=store] .p__details {
|
||||
font-size: var(--fs-small);
|
||||
margin-bottom: 0.5em;
|
||||
color: var(--grey-400);
|
||||
}
|
||||
[data-template=subscription-newsletter] .section__heading,
|
||||
[data-template=thanks] .section__heading,
|
||||
[data-template=support] .section__heading,
|
||||
[data-template=store] .section__heading {
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: var(--fw-medium);
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
[data-template=subscription-newsletter] ul, [data-template=subscription-newsletter] ol,
|
||||
[data-template=thanks] ul,
|
||||
[data-template=thanks] ol,
|
||||
[data-template=support] ul,
|
||||
[data-template=support] ol,
|
||||
[data-template=store] ul,
|
||||
[data-template=store] ol {
|
||||
margin-left: 3ch;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.card--small {
|
||||
display: grid;
|
||||
grid-gap: var(--padding-inner);
|
||||
grid-template-columns: 2fr 3fr;
|
||||
margin-bottom: var(--spacing);
|
||||
.card--article {
|
||||
border: var(--border-light);
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.card--small figure {
|
||||
.card--article figure {
|
||||
aspect-ratio: 16/9;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card--small figure img {
|
||||
.card--article figure img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
|
||||
}
|
||||
.card--small:hover figure img {
|
||||
.card--article:hover figure img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.card--small .content {
|
||||
.card--article .content {
|
||||
padding: var(--padding-inner);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-grow: 2;
|
||||
}
|
||||
.card--article .title {
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
font-size: var(--fs-medium);
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
flex-grow: 2;
|
||||
}
|
||||
.card--article .title a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.card--article .description {
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
font-size: var(--fs-small);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card--article .dl {
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
.card--article .dl .dl__group {
|
||||
display: grid;
|
||||
grid-gap: var(--padding-inner);
|
||||
grid-template-columns: 2fr 3fr;
|
||||
position: relative;
|
||||
border-top: var(--border-light);
|
||||
padding: calc(var(--spacing) * 0.5) 0;
|
||||
}
|
||||
.card--article .dl dt {
|
||||
color: var(--color-txt-light);
|
||||
padding-right: 1ch;
|
||||
}
|
||||
.card--article .dl ul:not(.keywords) {
|
||||
list-style: none;
|
||||
}
|
||||
.card--article .dl ul:not(.keywords) li {
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
.card--article .dl .dl__group__keywords {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.card--article:hover {
|
||||
border-color: var(--color-txt);
|
||||
}
|
||||
|
||||
.card--article-small {
|
||||
display: grid;
|
||||
grid-gap: var(--padding-inner);
|
||||
grid-template-columns: 2fr 3fr;
|
||||
position: relative;
|
||||
margin-bottom: var(--spacing);
|
||||
}
|
||||
.card--article-small figure {
|
||||
aspect-ratio: 16/9;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
}
|
||||
.card--article-small figure img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
|
||||
}
|
||||
.card--article-small:hover figure img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
.card--article-small .content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-top: calc(var(--spacing) * 0.25);
|
||||
}
|
||||
.card--small .title {
|
||||
.card--article-small .title {
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-medium);
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
.card--small .title a {
|
||||
.card--article-small .title a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.card--small time {
|
||||
.card--article-small time {
|
||||
flex-grow: 1;
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
.card--small .keywords {
|
||||
.card--article-small .keywords {
|
||||
margin-top: 1.5em;
|
||||
padding-bottom: calc(var(--spacing) * 0.25);
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
.card--small:hover .title {
|
||||
.card--article-small:hover .title {
|
||||
text-decoration: underline;
|
||||
}
|
||||
@media screen and (max-width: 1080px) {
|
||||
.card--small .title {
|
||||
.card--article-small .title {
|
||||
font-size: var(--fs-normal);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.card--small .content {
|
||||
.card--article-small .content {
|
||||
padding: 0;
|
||||
}
|
||||
.card--small .title {
|
||||
.card--article-small .title {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.card--small time {
|
||||
.card--article-small time {
|
||||
font-size: var(--fs-small);
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
.card--small .keywords {
|
||||
.card--article-small .keywords {
|
||||
margin-top: 0.5em;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
|
@ -836,6 +831,7 @@ button:disabled {
|
|||
display: grid;
|
||||
grid-gap: var(--padding-inner);
|
||||
grid-template-columns: 2fr 3fr;
|
||||
position: relative;
|
||||
padding: calc(var(--spacing) * 0.5) 0;
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
|
|
@ -901,8 +897,9 @@ button:disabled {
|
|||
}
|
||||
.card--impact .open-graph__details summary {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 3fr;
|
||||
grid-gap: var(--padding-inner);
|
||||
grid-template-columns: 2fr 3fr;
|
||||
position: relative;
|
||||
}
|
||||
.card--impact .open-graph__details summary .summary-inner {
|
||||
grid-column: 2;
|
||||
|
|
@ -922,8 +919,9 @@ button:disabled {
|
|||
|
||||
.card--open-graph {
|
||||
display: grid;
|
||||
grid-template-columns: 2fr 3fr;
|
||||
grid-gap: var(--padding-inner);
|
||||
grid-template-columns: 2fr 3fr;
|
||||
position: relative;
|
||||
border: var(--border-light);
|
||||
border-radius: var(--radius-small);
|
||||
position: relative;
|
||||
|
|
@ -1306,89 +1304,101 @@ body main {
|
|||
padding: 0 var(--padding-body);
|
||||
}
|
||||
|
||||
.page-enquete {
|
||||
[data-template=investigations] main #container-cards {
|
||||
max-width: var(--max-w-container);
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
|
||||
grid-auto-rows: minmax(100px, auto);
|
||||
grid-gap: var(--padding-body);
|
||||
margin-bottom: 10vh;
|
||||
}
|
||||
|
||||
[data-template=investigation-summary] main {
|
||||
position: relative;
|
||||
}
|
||||
.page-enquete header .page-type {
|
||||
[data-template=investigation-summary] main header .page-type {
|
||||
text-transform: uppercase;
|
||||
color: var(--color-txt-light);
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
.page-enquete header h2 {
|
||||
[data-template=investigation-summary] main header h2 {
|
||||
font-size: var(--fs-xbig);
|
||||
line-height: var(--leading-tight);
|
||||
}
|
||||
.page-enquete .section__article a:hover {
|
||||
[data-template=investigation-summary] main .section__article a:hover {
|
||||
color: var(--grey-200);
|
||||
}
|
||||
.page-enquete .section__article .section__title {
|
||||
[data-template=investigation-summary] main .section__article .section__title {
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
.page-enquete #hero {
|
||||
[data-template=investigation-summary] main #hero {
|
||||
width: 100vw;
|
||||
position: relative;
|
||||
left: calc(var(--padding-body) * -1);
|
||||
}
|
||||
.page-enquete #hero figcaption {
|
||||
[data-template=investigation-summary] main #hero figcaption {
|
||||
color: var(--color-txt-light);
|
||||
font-size: var(--fs-small);
|
||||
padding-top: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.page-enquete #hero figcaption {
|
||||
[data-template=investigation-summary] main #hero figcaption {
|
||||
font-size: var(--fs-xsmall);
|
||||
}
|
||||
}
|
||||
.page-enquete #hero.hero-video figure {
|
||||
[data-template=investigation-summary] main #hero.hero-video figure {
|
||||
width: 100%;
|
||||
}
|
||||
.page-enquete #hero.hero-video figure img {
|
||||
[data-template=investigation-summary] main #hero.hero-video figure img {
|
||||
width: 100%;
|
||||
aspect-ratio: 16/9;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
.page-enquete #nav--page ul {
|
||||
[data-template=investigation-summary] main #nav--page ul {
|
||||
list-style: none;
|
||||
}
|
||||
.page-enquete #nav--page ul li {
|
||||
[data-template=investigation-summary] main #nav--page ul li {
|
||||
text-align: center;
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
.page-enquete #nav--page ul li a {
|
||||
[data-template=investigation-summary] main #nav--page ul li a {
|
||||
display: block;
|
||||
padding: 0.3em 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
.page-enquete #section__short {
|
||||
[data-template=investigation-summary] main #section__short {
|
||||
font-size: var(--fs-medium);
|
||||
}
|
||||
.page-enquete #section__dl {
|
||||
[data-template=investigation-summary] main #section__dl {
|
||||
margin-top: calc(var(--spacing) * 1.5);
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
.page-enquete #section__dl .dl__group {
|
||||
[data-template=investigation-summary] main #section__dl .dl__group {
|
||||
display: grid;
|
||||
grid-gap: var(--padding-inner);
|
||||
grid-template-columns: 2fr 3fr;
|
||||
position: relative;
|
||||
border-top: var(--border-light);
|
||||
padding: calc(var(--spacing) * 0.5) 0;
|
||||
}
|
||||
.page-enquete #section__dl dt {
|
||||
[data-template=investigation-summary] main #section__dl dt {
|
||||
color: var(--color-txt-light);
|
||||
padding-right: 1ch;
|
||||
}
|
||||
.page-enquete #section__dl ul:not(.keywords) {
|
||||
[data-template=investigation-summary] main #section__dl ul:not(.keywords) {
|
||||
list-style: none;
|
||||
}
|
||||
.page-enquete #section__dl ul:not(.keywords) li {
|
||||
[data-template=investigation-summary] main #section__dl ul:not(.keywords) li {
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
.page-enquete #section__synthese p + p {
|
||||
[data-template=investigation-summary] main #section__synthese p + p {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
.page-enquete #section__synthese h4 {
|
||||
[data-template=investigation-summary] main #section__synthese h4 {
|
||||
margin-top: 2em;
|
||||
margin-bottom: 1em;
|
||||
font-size: var(--fs-normal);
|
||||
|
|
@ -1414,30 +1424,30 @@ body main {
|
|||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.page-enquete header {
|
||||
[data-template=investigation-summary] main header {
|
||||
padding-top: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
.page-enquete header .page-type {
|
||||
[data-template=investigation-summary] main header .page-type {
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
.page-enquete .section__article {
|
||||
[data-template=investigation-summary] main .section__article {
|
||||
margin: calc(var(--spacing) * 1.5) 0;
|
||||
}
|
||||
.page-enquete #section__impacts, .page-enquete #section__en-lien {
|
||||
[data-template=investigation-summary] main #section__impacts, [data-template=investigation-summary] main #section__en-lien {
|
||||
margin-top: 0px;
|
||||
}
|
||||
.page-enquete #hero {
|
||||
[data-template=investigation-summary] main #hero {
|
||||
margin: calc(var(--spacing) * 1.5) 0;
|
||||
}
|
||||
.page-enquete #hero figcaption {
|
||||
[data-template=investigation-summary] main #hero figcaption {
|
||||
margin: 0 var(--padding-body);
|
||||
}
|
||||
.page-enquete .modal--share {
|
||||
[data-template=investigation-summary] main .modal--share {
|
||||
position: absolute;
|
||||
width: calc(100% - var(--padding-body) * 2);
|
||||
bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
.page-enquete #banner--page {
|
||||
[data-template=investigation-summary] main #banner--page {
|
||||
padding: calc(var(--spacing) * 0.5) 0;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
|
|
@ -1449,31 +1459,31 @@ body main {
|
|||
background: linear-gradient(0deg, var(--color-bg) 0%, var(--color-bg) 64%, transparent 100%);
|
||||
z-index: 800;
|
||||
}
|
||||
.page-enquete #banner--page #nav--page {
|
||||
[data-template=investigation-summary] main #banner--page #nav--page {
|
||||
display: none;
|
||||
}
|
||||
.page-enquete #banner--page .btn--group {
|
||||
[data-template=investigation-summary] main #banner--page .btn--group {
|
||||
display: flex;
|
||||
gap: calc(var(--spacing) * 0.25);
|
||||
position: relative;
|
||||
}
|
||||
.page-enquete #banner--page .btn--group > button,
|
||||
.page-enquete #banner--page .btn--group > label {
|
||||
[data-template=investigation-summary] main #banner--page .btn--group > button,
|
||||
[data-template=investigation-summary] main #banner--page .btn--group > label {
|
||||
width: 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
.page-enquete #banner--page {
|
||||
[data-template=investigation-summary] main #banner--page {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.2s ease-in;
|
||||
}
|
||||
.page-enquete #banner--page.is-visible {
|
||||
[data-template=investigation-summary] main #banner--page.is-visible {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.page-enquete #section__dl .dl__group {
|
||||
[data-template=investigation-summary] main #section__dl .dl__group {
|
||||
-moz-column-gap: 1ch;
|
||||
column-gap: 1ch;
|
||||
font-size: var(--fs-small);
|
||||
|
|
@ -1481,7 +1491,7 @@ body main {
|
|||
}
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.page-enquete #banner--page {
|
||||
[data-template=investigation-summary] main #banner--page {
|
||||
height: calc(100vh - var(--header-h));
|
||||
height: calc(100dvh - var(--header-h));
|
||||
margin-bottom: calc((100vh - var(--header-h)) * -1);
|
||||
|
|
@ -1495,38 +1505,38 @@ body main {
|
|||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.page-enquete #banner--page .btn--group {
|
||||
[data-template=investigation-summary] main #banner--page .btn--group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: calc(var(--spacing) * 0.25);
|
||||
}
|
||||
.page-enquete #banner--page .btn--group > button,
|
||||
.page-enquete #banner--page .btn--group > label {
|
||||
[data-template=investigation-summary] main #banner--page .btn--group > button,
|
||||
[data-template=investigation-summary] main #banner--page .btn--group > label {
|
||||
width: 100%;
|
||||
max-width: 160px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.page-enquete #hero {
|
||||
[data-template=investigation-summary] main #hero {
|
||||
margin: calc(var(--spacing) * 3) 0;
|
||||
}
|
||||
.page-enquete .section__article {
|
||||
[data-template=investigation-summary] main .section__article {
|
||||
margin-left: var(--banner-medium);
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
.page-enquete #section__short {
|
||||
[data-template=investigation-summary] main #section__short {
|
||||
margin-top: var(--padding-body);
|
||||
}
|
||||
.page-enquete header {
|
||||
[data-template=investigation-summary] main header {
|
||||
max-width: var(--max-w-content);
|
||||
margin: calc(var(--spacing) * 2) auto;
|
||||
}
|
||||
.page-enquete .section__article .section__title {
|
||||
[data-template=investigation-summary] main .section__article .section__title {
|
||||
font-size: var(--fs-medium);
|
||||
margin-bottom: var(--spacing);
|
||||
}
|
||||
.page-enquete #section__synthese {
|
||||
[data-template=investigation-summary] main #section__synthese {
|
||||
font-size: var(--fs-medium);
|
||||
}
|
||||
.modal--share {
|
||||
|
|
@ -1536,21 +1546,21 @@ body main {
|
|||
}
|
||||
}
|
||||
@media screen and (min-width: 1080px) {
|
||||
.page-enquete #banner--page {
|
||||
[data-template=investigation-summary] main #banner--page {
|
||||
width: calc((100% - var(--max-w-content)) / 2);
|
||||
}
|
||||
.page-enquete #hero {
|
||||
[data-template=investigation-summary] main #hero {
|
||||
margin: calc(var(--spacing) * 3) 0;
|
||||
}
|
||||
.page-enquete #hero figcaption {
|
||||
[data-template=investigation-summary] main #hero figcaption {
|
||||
max-width: var(--max-w-content);
|
||||
margin: 0 auto;
|
||||
}
|
||||
.page-enquete header {
|
||||
[data-template=investigation-summary] main header {
|
||||
max-width: var(--max-w-content);
|
||||
margin: calc(var(--spacing) * 2) auto;
|
||||
}
|
||||
.page-enquete .section__article {
|
||||
[data-template=investigation-summary] main .section__article {
|
||||
max-width: var(--max-w-content);
|
||||
margin: calc(var(--spacing) * 3) auto;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue