style pages investigations + investigation summary
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
84f67c88cc
commit
05e49af352
24 changed files with 494 additions and 871 deletions
|
|
@ -10,6 +10,7 @@
|
|||
--fs-xbig: 38px;
|
||||
--fs-button-bold: 22px;
|
||||
--max-w-content: 700px;
|
||||
--max-w-cards: 1000px;
|
||||
--max-w-container: 1280px;
|
||||
--leading-tight: 1.05;
|
||||
--leading-normal: 1.3;
|
||||
|
|
@ -135,7 +136,7 @@ body, #site-header, #site-footer {
|
|||
}
|
||||
|
||||
#site-header {
|
||||
z-index: 900;
|
||||
z-index: 9000;
|
||||
--gap: 3ch;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -390,66 +391,24 @@ button:disabled {
|
|||
color: var(--color-txt);
|
||||
}
|
||||
|
||||
.btn--light {
|
||||
border: var(--border-light);
|
||||
.btn--back-to-top {
|
||||
display: flex;
|
||||
border-color: var(--color-txt);
|
||||
width: -moz-fit-content;
|
||||
width: fit-content;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.btn__default {
|
||||
--size: calc(var(--h-block) - 8px);
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: var(--fw-normal);
|
||||
height: var(--size);
|
||||
padding-right: 1.5ch;
|
||||
.btn--back-to-top .icon {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
transform: rotate(-90deg);
|
||||
transform-origin: center;
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0ch;
|
||||
color: var(--color-accent);
|
||||
font-weight: var(--fw-medium);
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
top: -1px;
|
||||
}
|
||||
.btn__default .icon, .btn__default .txt {
|
||||
z-index: 10;
|
||||
}
|
||||
.btn__default .icon {
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: var(--color-bg);
|
||||
text-align: center;
|
||||
}
|
||||
.btn__default .icon svg {
|
||||
fill: var(--color-bg);
|
||||
width: 80%;
|
||||
}
|
||||
.btn__default .txt {
|
||||
font-family: var(--font-title);
|
||||
color: var(--color-accent);
|
||||
font-size: var(--fs-normal);
|
||||
font-weight: var(--fw-bold);
|
||||
padding-left: 1ch;
|
||||
}
|
||||
.btn__default::after {
|
||||
content: "";
|
||||
display: block;
|
||||
background-color: var(--color-accent);
|
||||
border-radius: calc(var(--size) / 2);
|
||||
width: var(--size);
|
||||
height: var(--size);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
z-index: 0;
|
||||
transition: width 0.2s;
|
||||
}
|
||||
.btn__default:hover .txt {
|
||||
color: var(--color-bg);
|
||||
display: block;
|
||||
}
|
||||
.btn__default:hover::after {
|
||||
width: 100%;
|
||||
.btn--back-to-top .icon svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
|
|
@ -488,18 +447,49 @@ button:disabled {
|
|||
|
||||
.keywords {
|
||||
list-style: none;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75ch;
|
||||
}
|
||||
.keywords li {
|
||||
display: inline-block;
|
||||
padding-right: 0.75ch;
|
||||
}
|
||||
.keywords li a {
|
||||
.keywords a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(var(--h-block) * 0.75);
|
||||
padding: 0 1ch;
|
||||
padding-top: 2px;
|
||||
border: var(--border-light);
|
||||
border-radius: var(--radius-btn);
|
||||
font-size: var(--fs-small);
|
||||
line-height: 1;
|
||||
white-space: nowrap;
|
||||
text-decoration: none;
|
||||
}
|
||||
.keywords li a::before {
|
||||
.keywords a::before {
|
||||
content: "#";
|
||||
padding-right: 0.25ch;
|
||||
}
|
||||
.keywords a:hover {
|
||||
border-color: currentColor;
|
||||
background-color: var(--grey-800);
|
||||
}
|
||||
|
||||
.keywords--small {
|
||||
list-style: none;
|
||||
}
|
||||
.keywords--small li {
|
||||
display: inline;
|
||||
}
|
||||
.keywords--small a {
|
||||
text-decoration: none;
|
||||
}
|
||||
.keywords--small a::before {
|
||||
content: "#";
|
||||
padding-right: 0.25ch;
|
||||
}
|
||||
.keywords--small a::after {
|
||||
content: " ";
|
||||
}
|
||||
|
||||
button.sort .arrow {
|
||||
line-height: 0;
|
||||
|
|
@ -523,32 +513,10 @@ button.sort[data-sort-type=up] .arrow {
|
|||
}
|
||||
|
||||
#hero {
|
||||
width: calc(100vw - var(--padding-body) * 2);
|
||||
width: 100%;
|
||||
position: relative;
|
||||
left: 0;
|
||||
}
|
||||
#hero .page-title-small {
|
||||
color: var(--color-txt-light);
|
||||
font-size: var(--fs-small);
|
||||
top: calc(var(--spacing) * 0.25);
|
||||
right: calc(var(--spacing) * 0.25);
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
z-index: 200;
|
||||
background-color: rgba(255, 255, 255, 0.05);
|
||||
padding: 5px 1ch;
|
||||
}
|
||||
@media screen and (max-width: 1080px) {
|
||||
#hero .page-title-small {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
#hero {
|
||||
width: 100vw;
|
||||
left: calc(var(--padding-body) * -1);
|
||||
}
|
||||
}
|
||||
#hero figcaption {
|
||||
color: var(--color-txt-light);
|
||||
font-size: var(--fs-small);
|
||||
|
|
@ -1053,22 +1021,21 @@ button.sort[data-sort-type=up] .arrow {
|
|||
transform: translateX(0);
|
||||
}
|
||||
|
||||
.page__title {
|
||||
.page__header {
|
||||
max-width: var(--max-w-cards);
|
||||
margin: calc(var(--spacing) * 1.5) auto;
|
||||
}
|
||||
.page__header .page__title {
|
||||
font-size: var(--fs-big);
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
margin: calc(var(--spacing) * 1.5) auto;
|
||||
text-align: center;
|
||||
max-width: var(--max-w-container);
|
||||
}
|
||||
|
||||
.page__description {
|
||||
display: none;
|
||||
max-width: var(--max-w-content);
|
||||
margin: calc(var(--spacing) * 2) auto;
|
||||
.page__header .page__description {
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
}
|
||||
.page__description p {
|
||||
font-size: var(--fs-normal);
|
||||
.page__header .page__description p {
|
||||
font-size: var(--fs-medium);
|
||||
max-width: 54ch;
|
||||
}
|
||||
|
||||
.card--article {
|
||||
|
|
@ -1103,6 +1070,7 @@ button.sort[data-sort-type=up] .arrow {
|
|||
font-size: var(--fs-medium);
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
text-wrap: balance;
|
||||
}
|
||||
.card--article .title a {
|
||||
text-decoration: none;
|
||||
|
|
@ -1131,25 +1099,46 @@ button.sort[data-sort-type=up] .arrow {
|
|||
color: var(--color-txt-light);
|
||||
padding-right: 1ch;
|
||||
}
|
||||
.card--article .dl ul:not(.keywords) {
|
||||
.card--article .dl ul {
|
||||
list-style: none;
|
||||
}
|
||||
.card--article .dl ul:not(.keywords) li {
|
||||
.card--article .dl ul li {
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
.card--article .dl .dl__group__keywords {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
.card--article .keywords-wrapper {
|
||||
display: grid;
|
||||
grid-gap: var(--padding-inner);
|
||||
grid-template-columns: 2fr 3fr;
|
||||
position: relative;
|
||||
z-index: 3000;
|
||||
margin-top: calc(var(--spacing) * -1);
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
.card--article .keywords {
|
||||
grid-column: 2;
|
||||
}
|
||||
.card--article:hover {
|
||||
border-color: var(--color-txt);
|
||||
}
|
||||
.card--article .link-block {
|
||||
z-index: 2000;
|
||||
}
|
||||
|
||||
.card--article-small {
|
||||
display: grid;
|
||||
grid-gap: var(--padding-inner);
|
||||
grid-template-columns: 2fr 3fr;
|
||||
position: relative;
|
||||
margin-bottom: var(--spacing);
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
padding-bottom: calc(var(--spacing) * 0.5);
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
.card--article-small:first-of-type {
|
||||
padding-top: calc(var(--spacing) * 0.5);
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
.card--article-small figure {
|
||||
aspect-ratio: 16/9;
|
||||
|
|
@ -1175,6 +1164,8 @@ button.sort[data-sort-type=up] .arrow {
|
|||
font-weight: normal;
|
||||
font-size: var(--fs-medium);
|
||||
margin-bottom: 0.25em;
|
||||
text-wrap: balance;
|
||||
max-width: 42ch;
|
||||
}
|
||||
.card--article-small .title a {
|
||||
text-decoration: none;
|
||||
|
|
@ -1183,10 +1174,12 @@ button.sort[data-sort-type=up] .arrow {
|
|||
flex-grow: 1;
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
.card--article-small .keywords {
|
||||
.card--article-small .keywords--small {
|
||||
margin-top: 1.5em;
|
||||
padding-bottom: calc(var(--spacing) * 0.25);
|
||||
color: var(--color-txt-light);
|
||||
z-index: 1000;
|
||||
max-width: 32ch;
|
||||
}
|
||||
.card--article-small:hover .title {
|
||||
text-decoration: underline;
|
||||
|
|
@ -1208,7 +1201,8 @@ button.sort[data-sort-type=up] .arrow {
|
|||
font-size: var(--fs-small);
|
||||
margin-top: 0.25em;
|
||||
}
|
||||
.card--article-small .keywords {
|
||||
.card--article-small .keywords--small {
|
||||
font-size: var(--fs-small);
|
||||
margin-top: 0.5em;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
|
@ -1372,7 +1366,7 @@ button.sort[data-sort-type=up] .arrow {
|
|||
}
|
||||
|
||||
#site-header {
|
||||
z-index: 900;
|
||||
z-index: 9000;
|
||||
--gap: 3ch;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
|
|
@ -1537,6 +1531,11 @@ body.menu-open #menu-toggle .close {
|
|||
padding: calc(var(--padding-body) * 2) var(--padding-body);
|
||||
z-index: 500;
|
||||
}
|
||||
#site-footer .site-footer__container {
|
||||
max-width: var(--max-w-cards);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--padding-body);
|
||||
}
|
||||
#site-footer .logo {
|
||||
margin-top: calc(var(--spacing) * 0.25);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
|
|
@ -1563,9 +1562,6 @@ body.menu-open #menu-toggle .close {
|
|||
color: var(--color-txt);
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
#site-footer {
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
}
|
||||
#site-footer .footer__socials {
|
||||
margin-top: calc(var(--spacing) * 0.75);
|
||||
padding-top: calc(var(--spacing) * 0.25);
|
||||
|
|
@ -1587,14 +1583,11 @@ body.menu-open #menu-toggle .close {
|
|||
@media screen and (min-width: 768px) {
|
||||
#site-footer .site-footer__container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-columns: 3fr 2fr;
|
||||
-moz-column-gap: calc(var(--spacing) * 2);
|
||||
column-gap: calc(var(--spacing) * 2);
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
#site-footer .footer__socials .socials {
|
||||
max-width: 400px;
|
||||
-moz-columns: 2;
|
||||
columns: 2;
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
|
|
@ -1616,7 +1609,8 @@ body {
|
|||
body main {
|
||||
flex-grow: 1;
|
||||
padding: 0 var(--padding-body);
|
||||
padding: var(--header-h);
|
||||
padding-top: var(--header-h);
|
||||
padding-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
|
||||
.section--home {
|
||||
|
|
@ -1654,7 +1648,7 @@ body main {
|
|||
|
||||
@media screen and (min-width: 560px) {
|
||||
[data-template=investigations] main #container-cards {
|
||||
max-width: var(--max-w-container);
|
||||
max-width: var(--max-w-cards);
|
||||
margin: 0 auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
|
|
@ -1680,30 +1674,43 @@ body main {
|
|||
}
|
||||
}
|
||||
|
||||
.search-container {
|
||||
max-width: var(--max-w-content);
|
||||
margin: 0 auto;
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
|
||||
.page__sort {
|
||||
max-width: var(--max-w-container);
|
||||
max-width: var(--max-w-cards);
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
grid-gap: var(--padding-inner);
|
||||
margin: 0 auto;
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
|
||||
[data-template=investigation-summary] main {
|
||||
position: relative;
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
}
|
||||
[data-template=investigation-summary] main #banner--page {
|
||||
display: none;
|
||||
}
|
||||
[data-template=investigation-summary] main header {
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
[data-template=investigation-summary] main header .page-title {
|
||||
max-width: var(--max-w-content);
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-big);
|
||||
line-height: var(--leading-tight);
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
text-wrap: balance;
|
||||
}
|
||||
[data-template=investigation-summary] main header .description {
|
||||
max-width: 62ch;
|
||||
}
|
||||
[data-template=investigation-summary] main .section__article {
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
[data-template=investigation-summary] main .section__article a:hover {
|
||||
color: var(--grey-200);
|
||||
|
|
@ -1711,7 +1718,9 @@ body main {
|
|||
[data-template=investigation-summary] main .section__article .section__title {
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
padding-right: 2ch;
|
||||
text-wrap: balance;
|
||||
}
|
||||
[data-template=investigation-summary] main #nav--page ul {
|
||||
list-style: none;
|
||||
|
|
@ -1725,9 +1734,6 @@ body main {
|
|||
padding: 0.3em 0;
|
||||
text-decoration: none;
|
||||
}
|
||||
[data-template=investigation-summary] main #section__short {
|
||||
font-size: var(--fs-medium);
|
||||
}
|
||||
[data-template=investigation-summary] main #section__dl {
|
||||
margin-top: calc(var(--spacing) * 1.5);
|
||||
border-bottom: var(--border-light);
|
||||
|
|
@ -1750,6 +1756,9 @@ body main {
|
|||
[data-template=investigation-summary] main #section__dl ul:not(.keywords) li {
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
[data-template=investigation-summary] main #section__synthese {
|
||||
max-width: var(--max-w-content);
|
||||
}
|
||||
[data-template=investigation-summary] main #section__synthese p + p {
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
|
@ -1765,20 +1774,11 @@ body main {
|
|||
|
||||
@media screen and (max-width: 768px) {
|
||||
[data-template=investigation-summary] main header {
|
||||
padding-top: calc(var(--spacing) * 1);
|
||||
}
|
||||
[data-template=investigation-summary] main header .page-type {
|
||||
font-size: var(--fs-small);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
[data-template=investigation-summary] main .section__article {
|
||||
margin: calc(var(--spacing) * 1.5) 0;
|
||||
}
|
||||
[data-template=investigation-summary] main #section__impacts,
|
||||
[data-template=investigation-summary] main #section__en-lien {
|
||||
margin-top: 0px;
|
||||
}
|
||||
[data-template=investigation-summary] main #hero {
|
||||
margin: calc(var(--spacing) * 0.5) 0;
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
[data-template=investigation-summary] main #hero figcaption {
|
||||
margin: 0 var(--padding-body);
|
||||
|
|
@ -1826,81 +1826,6 @@ body main {
|
|||
padding: calc(var(--spacing) * 0.25) 0;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
[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);
|
||||
margin-bottom: calc((100dvh - var(--header-h)) * -1);
|
||||
padding: var(--padding-body);
|
||||
padding-left: 0px;
|
||||
padding-bottom: calc(var(--padding-body) * 2);
|
||||
position: sticky;
|
||||
top: var(--header-h);
|
||||
width: var(--banner-medium);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
[data-template=investigation-summary] main #banner--page .btn--group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: calc(var(--spacing) * 0.25);
|
||||
}
|
||||
[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;
|
||||
}
|
||||
[data-template=investigation-summary] main #hero {
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
[data-template=investigation-summary] main .section__article {
|
||||
margin-left: var(--banner-medium);
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
[data-template=investigation-summary] main #section__short {
|
||||
margin-top: var(--padding-body);
|
||||
}
|
||||
[data-template=investigation-summary] main header {
|
||||
max-width: var(--max-w-content);
|
||||
margin-left: var(--banner-medium);
|
||||
margin-top: calc(var(--spacing) * 1.5);
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
[data-template=investigation-summary] main .section__article .section__title {
|
||||
font-size: var(--fs-medium);
|
||||
margin-bottom: var(--spacing);
|
||||
}
|
||||
[data-template=investigation-summary] main #section__synthese {
|
||||
font-size: var(--fs-medium);
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 1080px) {
|
||||
[data-template=investigation-summary] main #banner--page {
|
||||
width: calc((100% - var(--max-w-content)) / 2);
|
||||
}
|
||||
[data-template=investigation-summary] main #hero {
|
||||
margin-top: 0;
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
[data-template=investigation-summary] main #hero figcaption {
|
||||
max-width: var(--max-w-content);
|
||||
margin: 0 auto;
|
||||
}
|
||||
[data-template=investigation-summary] main header {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
[data-template=investigation-summary] main .section__article {
|
||||
max-width: var(--max-w-content);
|
||||
margin: calc(var(--spacing) * 3) auto;
|
||||
}
|
||||
}
|
||||
:root {
|
||||
--rapport-w: 290px;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue