investigation responsive
All checks were successful
Deploy / Deploy to Production (push) Successful in 14s
All checks were successful
Deploy / Deploy to Production (push) Successful in 14s
This commit is contained in:
Julie Blanc
parent
f24b296ff7
commit
bdb60646d0
14 changed files with 562 additions and 133 deletions
|
|
@ -195,6 +195,9 @@ body.is-hidden .bottom-bar__inner {
|
|||
#site-header #site-title svg {
|
||||
width: 80px;
|
||||
}
|
||||
#site-header #site-title {
|
||||
top: -4px;
|
||||
}
|
||||
}
|
||||
#site-header #nav-highlight,
|
||||
#site-header #nav-investigation {
|
||||
|
|
@ -209,10 +212,31 @@ body.is-hidden .bottom-bar__inner {
|
|||
gap: var(--gap);
|
||||
list-style-type: none;
|
||||
}
|
||||
#site-header #nav-highlight ul li,
|
||||
#site-header #nav-investigation ul li {
|
||||
white-space: nowrap;
|
||||
}
|
||||
#site-header #nav-highlight ul {
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@media screen and (max-width: 1080px) {
|
||||
#site-header #nav-highlight ul {
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 890px) {
|
||||
#site-header #nav-highlight ul {
|
||||
justify-content: flex-end;
|
||||
padding-right: 2ch;
|
||||
}
|
||||
#site-header #nav-highlight ul li {
|
||||
display: none;
|
||||
}
|
||||
#site-header #nav-highlight ul li.support {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
#site-header #nav-investigation {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
|
|
@ -221,6 +245,28 @@ body.is-hidden .bottom-bar__inner {
|
|||
opacity: 0;
|
||||
transition: top 0.3s ease;
|
||||
pointer-events: none;
|
||||
min-width: 0;
|
||||
}
|
||||
#site-header #nav-investigation .title {
|
||||
text-transform: uppercase;
|
||||
font-size: var(--fs-small);
|
||||
font-weight: 500;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-left: 2ch;
|
||||
padding-right: 2ch;
|
||||
text-align: center;
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
@media screen and (max-width: 1080px) {
|
||||
#site-header #nav-investigation ul {
|
||||
font-size: var(--fs-small);
|
||||
padding-left: 6ch;
|
||||
padding-right: 6ch;
|
||||
}
|
||||
}
|
||||
#site-header #nav-investigation li {
|
||||
color: var(--color-txt-light);
|
||||
|
|
@ -236,16 +282,6 @@ body.is-hidden .bottom-bar__inner {
|
|||
#site-header #nav-investigation li.is-selected:hover a:hover {
|
||||
color: var(--color-txt);
|
||||
}
|
||||
#site-header.has-nav-investigation #nav-highlight {
|
||||
display: none;
|
||||
}
|
||||
#site-header.has-nav-investigation #nav-investigation {
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
top: 0px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
#site-header #theme-toggle {
|
||||
width: var(--h-block);
|
||||
height: var(--h-block);
|
||||
|
|
@ -284,11 +320,36 @@ body.is-hidden .bottom-bar__inner {
|
|||
fill: var(--grey-200) !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1080px) {
|
||||
#nav-highlight {
|
||||
#site-header.has-nav-investigation #nav-highlight {
|
||||
display: none;
|
||||
}
|
||||
#site-header.has-nav-investigation #nav-investigation {
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
top: 0px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
#site-header #nav-investigation .title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
#site-header #nav-highlight ul {
|
||||
display: none;
|
||||
}
|
||||
#site-header #nav-investigation .title {
|
||||
display: none;
|
||||
}
|
||||
#site-header.has-nav-investigation #nav-investigation ul {
|
||||
display: none;
|
||||
}
|
||||
#site-header.has-nav-investigation #nav-investigation .title {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
button {
|
||||
cursor: pointer;
|
||||
font-family: var(--font);
|
||||
|
|
@ -314,10 +375,10 @@ button:disabled {
|
|||
cursor: auto;
|
||||
}
|
||||
|
||||
.soutenir a {
|
||||
.support a {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
.soutenir a:hover {
|
||||
.support a:hover {
|
||||
color: var(--color-accent) !important;
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
|
@ -698,10 +759,6 @@ button.sort[data-sort-type=up] .arrow {
|
|||
}
|
||||
#investigation__hero {
|
||||
width: 100%;
|
||||
position: relative;
|
||||
left: 0;
|
||||
padding-top: calc(var(--spacing) * 4);
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
|
@ -718,7 +775,7 @@ button.sort[data-sort-type=up] .arrow {
|
|||
padding: calc(var(--spacing) * 0.5) var(--padding-body);
|
||||
padding-bottom: 0;
|
||||
text-align: center;
|
||||
width: var(--max-w-content);
|
||||
max-width: var(--max-w-content);
|
||||
margin-inline: auto;
|
||||
}
|
||||
#investigation__hero figure {
|
||||
|
|
@ -1954,6 +2011,10 @@ button.sort[data-sort-type=up] .arrow {
|
|||
}
|
||||
|
||||
@container opengraph (width < 500px) {}
|
||||
.swiper {
|
||||
width: 100% !important;
|
||||
min-width: 0;
|
||||
}
|
||||
.swiper .swiper-button-prev,
|
||||
.swiper .swiper-button-next {
|
||||
color: var(--color-txt);
|
||||
|
|
@ -2123,7 +2184,8 @@ button.sort[data-sort-type=up] .arrow {
|
|||
color: var(--color-txt-light);
|
||||
flex-grow: 1;
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
padding-top: 5px;
|
||||
min-width: 0;
|
||||
}
|
||||
#bottom-bar .title-group .type {
|
||||
text-transform: uppercase;
|
||||
|
|
@ -2133,18 +2195,29 @@ button.sort[data-sort-type=up] .arrow {
|
|||
padding-left: 1ch;
|
||||
padding-right: 1ch;
|
||||
}
|
||||
#bottom-bar .title-group .title {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
#bottom-bar .bottom-bar__inner {
|
||||
height: calc(var(--header-h) * 0.75);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
#bottom-bar .btn--download, #bottom-bar .btn--back-to-top {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
#bottom-bar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
#bottom-bar .bottom-bar__inner {
|
||||
height: calc(var(--header-h) * 0.5);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
#bottom-bar .title-group, #bottom-bar .btn--download, #bottom-bar .btn--back-to-top {
|
||||
#bottom-bar .title-group {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -2241,6 +2314,9 @@ button.sort[data-sort-type=up] .arrow {
|
|||
#site-header #site-title svg {
|
||||
width: 80px;
|
||||
}
|
||||
#site-header #site-title {
|
||||
top: -4px;
|
||||
}
|
||||
}
|
||||
#site-header #nav-highlight,
|
||||
#site-header #nav-investigation {
|
||||
|
|
@ -2255,10 +2331,31 @@ button.sort[data-sort-type=up] .arrow {
|
|||
gap: var(--gap);
|
||||
list-style-type: none;
|
||||
}
|
||||
#site-header #nav-highlight ul li,
|
||||
#site-header #nav-investigation ul li {
|
||||
white-space: nowrap;
|
||||
}
|
||||
#site-header #nav-highlight ul {
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@media screen and (max-width: 1080px) {
|
||||
#site-header #nav-highlight ul {
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 890px) {
|
||||
#site-header #nav-highlight ul {
|
||||
justify-content: flex-end;
|
||||
padding-right: 2ch;
|
||||
}
|
||||
#site-header #nav-highlight ul li {
|
||||
display: none;
|
||||
}
|
||||
#site-header #nav-highlight ul li.support {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
#site-header #nav-investigation {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
|
|
@ -2267,6 +2364,28 @@ button.sort[data-sort-type=up] .arrow {
|
|||
opacity: 0;
|
||||
transition: top 0.3s ease;
|
||||
pointer-events: none;
|
||||
min-width: 0;
|
||||
}
|
||||
#site-header #nav-investigation .title {
|
||||
text-transform: uppercase;
|
||||
font-size: var(--fs-small);
|
||||
font-weight: 500;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
padding-left: 2ch;
|
||||
padding-right: 2ch;
|
||||
text-align: center;
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
@media screen and (max-width: 1080px) {
|
||||
#site-header #nav-investigation ul {
|
||||
font-size: var(--fs-small);
|
||||
padding-left: 6ch;
|
||||
padding-right: 6ch;
|
||||
}
|
||||
}
|
||||
#site-header #nav-investigation li {
|
||||
color: var(--color-txt-light);
|
||||
|
|
@ -2282,16 +2401,6 @@ button.sort[data-sort-type=up] .arrow {
|
|||
#site-header #nav-investigation li.is-selected:hover a:hover {
|
||||
color: var(--color-txt);
|
||||
}
|
||||
#site-header.has-nav-investigation #nav-highlight {
|
||||
display: none;
|
||||
}
|
||||
#site-header.has-nav-investigation #nav-investigation {
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
top: 0px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
#site-header #theme-toggle {
|
||||
width: var(--h-block);
|
||||
height: var(--h-block);
|
||||
|
|
@ -2330,11 +2439,36 @@ button.sort[data-sort-type=up] .arrow {
|
|||
fill: var(--grey-200) !important;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1080px) {
|
||||
#nav-highlight {
|
||||
#site-header.has-nav-investigation #nav-highlight {
|
||||
display: none;
|
||||
}
|
||||
#site-header.has-nav-investigation #nav-investigation {
|
||||
position: relative;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
top: 0px;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 768px) {
|
||||
#site-header #nav-investigation .title {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
#site-header #nav-highlight ul {
|
||||
display: none;
|
||||
}
|
||||
#site-header #nav-investigation .title {
|
||||
display: none;
|
||||
}
|
||||
#site-header.has-nav-investigation #nav-investigation ul {
|
||||
display: none;
|
||||
}
|
||||
#site-header.has-nav-investigation #nav-investigation .title {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
#site-menu {
|
||||
position: fixed;
|
||||
width: var(--menu-w);
|
||||
|
|
@ -2535,6 +2669,14 @@ body main .page__content {
|
|||
white-space: nowrap;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.page__type {
|
||||
height: calc(var(--h-block) * 0.75);
|
||||
font-size: var(--fs-xsmall);
|
||||
padding: 0 1ch;
|
||||
padding-top: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
main .page__header {
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
|
|
@ -2542,7 +2684,7 @@ main .page__header {
|
|||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
main .page__header {
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
}
|
||||
}
|
||||
main .page__header .page__title {
|
||||
|
|
@ -2554,7 +2696,16 @@ main .page__header .page__title {
|
|||
line-height: var(--leading-title);
|
||||
margin-top: calc(var(--spacing) * 1);
|
||||
margin-bottom: calc(var(--spacing) * 1.5);
|
||||
text-wrap: balance;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
main .page__header .page__title {
|
||||
text-wrap: balance;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
main .page__header .page__title {
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
}
|
||||
main .page__header .description {
|
||||
font-size: var(--fs-text);
|
||||
|
|
@ -2683,6 +2834,18 @@ main .page__header .description {
|
|||
[data-template=investigation] main .page__content {
|
||||
max-width: 100%;
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
[data-template=investigation] main #investigation__hero {
|
||||
padding-top: calc(var(--spacing) * 4);
|
||||
margin-bottom: calc(var(--spacing) * 3);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
[data-template=investigation] main #investigation__hero {
|
||||
padding-top: calc(var(--spacing) * 1.5);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
}
|
||||
[data-template=investigation] main .investigation__content {
|
||||
font-size: var(--fs-text);
|
||||
}
|
||||
|
|
@ -2693,6 +2856,11 @@ main .page__header .description {
|
|||
margin-inline: auto;
|
||||
font-size: var(--fs-normal);
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
[data-template=investigation] main #investigation__dl {
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
}
|
||||
[data-template=investigation] main #investigation__dl .dl__group {
|
||||
display: grid;
|
||||
grid-gap: var(--padding-inner);
|
||||
|
|
@ -2727,9 +2895,6 @@ main .page__header .description {
|
|||
#investigation__content {
|
||||
padding-top: calc(var(--spacing) * 4);
|
||||
}
|
||||
#investigation__content .section-content {
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
}
|
||||
#investigation__content .section-title-only {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -2778,27 +2943,70 @@ main .page__header .description {
|
|||
margin-bottom: calc(var(--spacing) * 2);
|
||||
padding: calc(var(--padding-inner) * 2) calc(var(--padding-inner) * 1.5);
|
||||
}
|
||||
#investigation__content .subsection-w-media {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: var(--padding-body);
|
||||
position: relative;
|
||||
}
|
||||
#investigation__content .subsection-w-media .media {
|
||||
margin-inline: auto;
|
||||
max-width: var(--max-w-content);
|
||||
padding-left: var(--padding-inner);
|
||||
padding-right: var(--padding-inner);
|
||||
position: sticky;
|
||||
top: calc(var(--header-h) + var(--spacing));
|
||||
align-self: start;
|
||||
}
|
||||
#investigation__content .subsection-txt {
|
||||
min-height: calc(100vh - var(--header-h));
|
||||
max-width: var(--max-w-content);
|
||||
padding-left: var(--padding-inner);
|
||||
padding-right: var(--padding-inner);
|
||||
padding-bottom: calc(var(--spacing) * 6);
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
#investigation__content .section-content {
|
||||
margin-bottom: calc(var(--spacing) * 4);
|
||||
}
|
||||
#investigation__content .subsection-w-media {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: var(--padding-body);
|
||||
position: relative;
|
||||
}
|
||||
#investigation__content .subsection-w-media .media {
|
||||
margin-inline: auto;
|
||||
max-width: var(--max-w-content);
|
||||
position: sticky;
|
||||
top: calc(var(--header-h) + var(--spacing));
|
||||
align-self: start;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 768px) and (min-width: 1080px) {
|
||||
#investigation__content .subsection-w-media .media {
|
||||
padding-left: var(--padding-inner);
|
||||
padding-right: var(--padding-inner);
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
#investigation__content .subsection-txt {
|
||||
min-height: calc(100vh - var(--header-h));
|
||||
padding-left: var(--padding-inner);
|
||||
padding-right: var(--padding-inner);
|
||||
padding-bottom: calc(var(--spacing) * 6);
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
#investigation__content .section-content:not(.section-title-only) {
|
||||
padding-bottom: calc(var(--spacing) * 1);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
#investigation__content .section-title-only {
|
||||
margin-bottom: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
#investigation__content .media {
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
#investigation__content h3 {
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 1.5);
|
||||
font-size: 1.35em;
|
||||
}
|
||||
#investigation__content h4 {
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
font-size: 1em;
|
||||
}
|
||||
#investigation__content h4, #investigation__content h5 {
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
#investigation__content .subsection-txt .insert {
|
||||
margin-top: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
#investigation__content .subsection-w-hscroll {
|
||||
position: relative;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue