Ajuster les styles pour investigation-summary
- Renommage _investigation-summary.scss en _investigation.scss - Mise à jour des styles pour investigation-summary et investigations Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
0364f65771
commit
dce79809bc
6 changed files with 349 additions and 419 deletions
|
|
@ -1699,7 +1699,8 @@ body main {
|
||||||
[data-template=investigation-summary] main .section__article {
|
[data-template=investigation-summary] main .section__article {
|
||||||
margin: calc(var(--spacing) * 1.5) 0;
|
margin: calc(var(--spacing) * 1.5) 0;
|
||||||
}
|
}
|
||||||
[data-template=investigation-summary] main #section__impacts, [data-template=investigation-summary] main #section__en-lien {
|
[data-template=investigation-summary] main #section__impacts,
|
||||||
|
[data-template=investigation-summary] main #section__en-lien {
|
||||||
margin-top: 0px;
|
margin-top: 0px;
|
||||||
}
|
}
|
||||||
[data-template=investigation-summary] main #hero {
|
[data-template=investigation-summary] main #hero {
|
||||||
|
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -1,39 +1,35 @@
|
||||||
@charset "UTF-8";
|
@charset "UTF-8";
|
||||||
@import 'base/responsive';
|
@import "base/responsive";
|
||||||
@import 'base/var';
|
@import "base/var";
|
||||||
@import 'base/body';
|
@import "base/body";
|
||||||
|
|
||||||
@import 'partials/site-header';
|
@import "partials/site-header";
|
||||||
|
|
||||||
// @import 'components/nav-tabs';
|
// @import 'components/nav-tabs';
|
||||||
// @import 'components/btn--default';
|
// @import 'components/btn--default';
|
||||||
@import 'components/buttons';
|
@import "components/buttons";
|
||||||
@import 'components/tags';
|
@import "components/tags";
|
||||||
@import 'components/keywords';
|
@import "components/keywords";
|
||||||
@import 'components/details-summary';
|
@import "components/details-summary";
|
||||||
@import 'components/sort';
|
@import "components/sort";
|
||||||
|
|
||||||
@import 'components/figures';
|
@import "components/figures";
|
||||||
@import 'components/hero';
|
@import "components/hero";
|
||||||
@import 'components/form-newsletter';
|
@import "components/form-newsletter";
|
||||||
@import 'components/search-form';
|
@import "components/search-form";
|
||||||
@import 'components/list-socials';
|
@import "components/list-socials";
|
||||||
@import 'components/modal-share';
|
@import "components/modal-share";
|
||||||
@import 'components/text';
|
@import "components/text";
|
||||||
@import 'components/card-article';
|
@import "components/card-article";
|
||||||
@import 'components/card-article-small';
|
@import "components/card-article-small";
|
||||||
@import 'components/card-impact';
|
@import "components/card-impact";
|
||||||
@import 'components/card-open-graph';
|
@import "components/card-open-graph";
|
||||||
|
|
||||||
|
|
||||||
@import 'partials/site-header';
|
|
||||||
@import 'partials/site-menu';
|
|
||||||
@import 'partials/site-footer';
|
|
||||||
@import 'partials/main-layout';
|
|
||||||
|
|
||||||
|
|
||||||
@import 'template/investigations';
|
|
||||||
@import 'template/investigation-summary';
|
|
||||||
@import 'template/rapport';
|
|
||||||
|
|
||||||
|
@import "partials/site-header";
|
||||||
|
@import "partials/site-menu";
|
||||||
|
@import "partials/site-footer";
|
||||||
|
@import "partials/main-layout";
|
||||||
|
|
||||||
|
@import "template/investigations";
|
||||||
|
@import "template/investigation";
|
||||||
|
@import "template/rapport";
|
||||||
|
|
|
||||||
|
|
@ -1,338 +0,0 @@
|
||||||
[data-template="investigation-summary"] main{
|
|
||||||
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
header{
|
|
||||||
|
|
||||||
.page-title{
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: var(--fs-big);
|
|
||||||
line-height: var(--leading-tight);
|
|
||||||
margin-top: calc(var(--spacing)*1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.section__article{
|
|
||||||
a:hover{
|
|
||||||
color: var(--grey-200);
|
|
||||||
}
|
|
||||||
.section__title{
|
|
||||||
font-weight: normal;
|
|
||||||
text-transform: uppercase;
|
|
||||||
margin-bottom: calc(var(--spacing)*0.5)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
#nav--page{
|
|
||||||
ul{
|
|
||||||
list-style: none;
|
|
||||||
li{
|
|
||||||
text-align: center;
|
|
||||||
color: var(--color-txt-light);
|
|
||||||
a{
|
|
||||||
display: block;
|
|
||||||
padding: 0.3em 0;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#section__short{
|
|
||||||
font-size: var(--fs-medium);
|
|
||||||
}
|
|
||||||
|
|
||||||
#section__dl{
|
|
||||||
margin-top: calc(var(--spacing)*1.5);
|
|
||||||
border-bottom: var(--border-light);
|
|
||||||
|
|
||||||
.dl__group{
|
|
||||||
@include grid-content();
|
|
||||||
border-top: var(--border-light);
|
|
||||||
padding: calc(var(--spacing)*0.5) 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
dt{
|
|
||||||
color: var(--color-txt-light);
|
|
||||||
padding-right: 1ch;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul:not(.keywords){
|
|
||||||
list-style: none;
|
|
||||||
li{
|
|
||||||
padding-bottom: 0.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#section__synthese{
|
|
||||||
p + p{
|
|
||||||
margin-top: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4{
|
|
||||||
margin-top: 2em;
|
|
||||||
margin-bottom: 1em;
|
|
||||||
font-size: var(--fs-normal);
|
|
||||||
font-weight: normal;
|
|
||||||
text-decoration: 1px underline var(--color-txt-light);
|
|
||||||
text-underline-offset: 3px;
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// SHARE ACTIONS --------------------------------------------------
|
|
||||||
// ----------------------------------------------------------------
|
|
||||||
|
|
||||||
#share-banner__desktop{ display: none; }
|
|
||||||
#share-banner__desktop ~ .modal--share{
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
transition: opacity .2s ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
#share-banner__desktop:checked ~ .modal--share{
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// SMALL ----------------------------------------------------------
|
|
||||||
// ----------------------------------------------------------------
|
|
||||||
|
|
||||||
|
|
||||||
@media #{$small}{
|
|
||||||
|
|
||||||
[data-template="investigation-summary"] main{
|
|
||||||
|
|
||||||
header{
|
|
||||||
padding-top: calc(var(--spacing)*1);
|
|
||||||
.page-type{
|
|
||||||
font-size: var(--fs-small);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.section__article{
|
|
||||||
margin: calc(var(--spacing)*1.5) 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#section__impacts, #section__en-lien{
|
|
||||||
margin-top: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#hero{
|
|
||||||
margin: calc(var(--spacing)*0.5) 0;
|
|
||||||
figcaption{
|
|
||||||
margin: 0 var(--padding-body);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal--share{
|
|
||||||
position: absolute;
|
|
||||||
width: calc(100% - var(--padding-body)*2);
|
|
||||||
bottom: calc(var(--spacing) * 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#banner--page {
|
|
||||||
padding: calc(var(--spacing)*0.5) 0;
|
|
||||||
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100vw;
|
|
||||||
padding: calc(var(--spacing)*0.75) var(--padding-body);
|
|
||||||
padding-top: var(--spacing);
|
|
||||||
background-color: var(--color-bg);
|
|
||||||
background: linear-gradient(0deg,var(--color-bg) 0%, var(--color-bg) 64%, transparent 100%);
|
|
||||||
z-index: 800;
|
|
||||||
|
|
||||||
#nav--page{
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.btn--group{
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
gap: calc(var(--spacing)*0.25);
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
> button,
|
|
||||||
> label {
|
|
||||||
width: 50%;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
// action
|
|
||||||
|
|
||||||
#banner--page{
|
|
||||||
opacity: 0;
|
|
||||||
pointer-events: none;
|
|
||||||
transition: opacity .2s ease-in;
|
|
||||||
}
|
|
||||||
|
|
||||||
#banner--page.is-visible{
|
|
||||||
opacity: 1;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media #{$x-small}{
|
|
||||||
[data-template="investigation-summary"] main{
|
|
||||||
#section__dl .dl__group{
|
|
||||||
|
|
||||||
column-gap: 1ch;
|
|
||||||
font-size: var(--fs-small);
|
|
||||||
padding: calc(var(--spacing)*0.25) 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// DESKTOP ----------------------------------------------------------
|
|
||||||
// ----------------------------------------------------------------
|
|
||||||
|
|
||||||
|
|
||||||
@media #{$small-up}{
|
|
||||||
|
|
||||||
[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;
|
|
||||||
}
|
|
||||||
|
|
||||||
#banner--page .btn--group{
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: calc(var(--spacing)*0.25);
|
|
||||||
|
|
||||||
> button,
|
|
||||||
> label {
|
|
||||||
width: 100%;
|
|
||||||
max-width: 160px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
#hero{
|
|
||||||
margin-top: calc(var(--spacing)*1);
|
|
||||||
margin-bottom: calc(var(--spacing)*3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section__article{
|
|
||||||
margin-left: var(--banner-medium);
|
|
||||||
margin-top: calc(var(--spacing)*3);
|
|
||||||
margin-bottom: calc(var(--spacing)*3);
|
|
||||||
}
|
|
||||||
|
|
||||||
#section__short{
|
|
||||||
margin-top: var(--padding-body);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
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);
|
|
||||||
}
|
|
||||||
|
|
||||||
.section__article{
|
|
||||||
.section__title{
|
|
||||||
font-size: var(--fs-medium);
|
|
||||||
margin-bottom: var(--spacing);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#section__synthese{
|
|
||||||
font-size: var(--fs-medium);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.modal--share{
|
|
||||||
position: absolute;
|
|
||||||
bottom: calc(var(--padding-body)*2 + var(--h-block) + var(--spacing) * 0.25);
|
|
||||||
width: calc(100% - var(--padding-body));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@media #{$medium-up}{
|
|
||||||
|
|
||||||
[data-template="investigation-summary"] main{
|
|
||||||
|
|
||||||
#banner--page{
|
|
||||||
width: calc((100% - var(--max-w-content))/2);
|
|
||||||
}
|
|
||||||
|
|
||||||
#hero{
|
|
||||||
margin-top: 0;
|
|
||||||
margin-bottom: calc(var(--spacing)*3);
|
|
||||||
figcaption{
|
|
||||||
max-width: var(--max-w-content);
|
|
||||||
margin: 0 auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
.section__article{
|
|
||||||
max-width: var(--max-w-content);
|
|
||||||
margin: calc(var(--spacing)*3) auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
|
||||||
290
assets/css/template/_investigation.scss
Normal file
290
assets/css/template/_investigation.scss
Normal file
|
|
@ -0,0 +1,290 @@
|
||||||
|
[data-template="investigation-summary"] main {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
header {
|
||||||
|
.page-title {
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: normal;
|
||||||
|
font-size: var(--fs-big);
|
||||||
|
line-height: var(--leading-tight);
|
||||||
|
margin-top: calc(var(--spacing) * 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__article {
|
||||||
|
a:hover {
|
||||||
|
color: var(--grey-200);
|
||||||
|
}
|
||||||
|
.section__title {
|
||||||
|
font-weight: normal;
|
||||||
|
text-transform: uppercase;
|
||||||
|
margin-bottom: calc(var(--spacing) * 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#nav--page {
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
li {
|
||||||
|
text-align: center;
|
||||||
|
color: var(--color-txt-light);
|
||||||
|
a {
|
||||||
|
display: block;
|
||||||
|
padding: 0.3em 0;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#section__short {
|
||||||
|
font-size: var(--fs-medium);
|
||||||
|
}
|
||||||
|
|
||||||
|
#section__dl {
|
||||||
|
margin-top: calc(var(--spacing) * 1.5);
|
||||||
|
border-bottom: var(--border-light);
|
||||||
|
|
||||||
|
.dl__group {
|
||||||
|
@include grid-content();
|
||||||
|
border-top: var(--border-light);
|
||||||
|
padding: calc(var(--spacing) * 0.5) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
dt {
|
||||||
|
color: var(--color-txt-light);
|
||||||
|
padding-right: 1ch;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul:not(.keywords) {
|
||||||
|
list-style: none;
|
||||||
|
li {
|
||||||
|
padding-bottom: 0.2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#section__synthese {
|
||||||
|
p + p {
|
||||||
|
margin-top: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h4 {
|
||||||
|
margin-top: 2em;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
font-size: var(--fs-normal);
|
||||||
|
font-weight: normal;
|
||||||
|
text-decoration: 1px underline var(--color-txt-light);
|
||||||
|
text-underline-offset: 3px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// SHARE ACTIONS --------------------------------------------------
|
||||||
|
// ----------------------------------------------------------------
|
||||||
|
|
||||||
|
#share-banner__desktop {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
#share-banner__desktop ~ .modal--share {
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.2s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
#share-banner__desktop:checked ~ .modal--share {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
// SMALL ----------------------------------------------------------
|
||||||
|
// ----------------------------------------------------------------
|
||||||
|
|
||||||
|
@media #{$small} {
|
||||||
|
[data-template="investigation-summary"] main {
|
||||||
|
header {
|
||||||
|
padding-top: calc(var(--spacing) * 1);
|
||||||
|
.page-type {
|
||||||
|
font-size: var(--fs-small);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__article {
|
||||||
|
margin: calc(var(--spacing) * 1.5) 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#section__impacts,
|
||||||
|
#section__en-lien {
|
||||||
|
margin-top: 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#hero {
|
||||||
|
margin: calc(var(--spacing) * 0.5) 0;
|
||||||
|
figcaption {
|
||||||
|
margin: 0 var(--padding-body);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal--share {
|
||||||
|
position: absolute;
|
||||||
|
width: calc(100% - var(--padding-body) * 2);
|
||||||
|
bottom: calc(var(--spacing) * 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
#banner--page {
|
||||||
|
padding: calc(var(--spacing) * 0.5) 0;
|
||||||
|
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
padding: calc(var(--spacing) * 0.75) var(--padding-body);
|
||||||
|
padding-top: var(--spacing);
|
||||||
|
background-color: var(--color-bg);
|
||||||
|
background: linear-gradient(
|
||||||
|
0deg,
|
||||||
|
var(--color-bg) 0%,
|
||||||
|
var(--color-bg) 64%,
|
||||||
|
transparent 100%
|
||||||
|
);
|
||||||
|
z-index: 800;
|
||||||
|
|
||||||
|
#nav--page {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.btn--group {
|
||||||
|
display: flex;
|
||||||
|
gap: calc(var(--spacing) * 0.25);
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
> button,
|
||||||
|
> label {
|
||||||
|
width: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// action
|
||||||
|
|
||||||
|
#banner--page {
|
||||||
|
opacity: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
transition: opacity 0.2s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
#banner--page.is-visible {
|
||||||
|
opacity: 1;
|
||||||
|
pointer-events: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media #{$x-small} {
|
||||||
|
[data-template="investigation-summary"] main {
|
||||||
|
#section__dl .dl__group {
|
||||||
|
column-gap: 1ch;
|
||||||
|
font-size: var(--fs-small);
|
||||||
|
padding: calc(var(--spacing) * 0.25) 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// DESKTOP ----------------------------------------------------------
|
||||||
|
// ----------------------------------------------------------------
|
||||||
|
|
||||||
|
@media #{$small-up} {
|
||||||
|
[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;
|
||||||
|
}
|
||||||
|
|
||||||
|
#banner--page .btn--group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
gap: calc(var(--spacing) * 0.25);
|
||||||
|
|
||||||
|
> button,
|
||||||
|
> label {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 160px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#hero {
|
||||||
|
margin-top: calc(var(--spacing) * 1);
|
||||||
|
margin-bottom: calc(var(--spacing) * 3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__article {
|
||||||
|
margin-left: var(--banner-medium);
|
||||||
|
margin-top: calc(var(--spacing) * 3);
|
||||||
|
margin-bottom: calc(var(--spacing) * 3);
|
||||||
|
}
|
||||||
|
|
||||||
|
#section__short {
|
||||||
|
margin-top: var(--padding-body);
|
||||||
|
}
|
||||||
|
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__article {
|
||||||
|
.section__title {
|
||||||
|
font-size: var(--fs-medium);
|
||||||
|
margin-bottom: var(--spacing);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#section__synthese {
|
||||||
|
font-size: var(--fs-medium);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.modal--share {
|
||||||
|
position: absolute;
|
||||||
|
bottom: calc(
|
||||||
|
var(--padding-body) * 2 + var(--h-block) + var(--spacing) * 0.25
|
||||||
|
);
|
||||||
|
width: calc(100% - var(--padding-body));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media #{$medium-up} {
|
||||||
|
[data-template="investigation-summary"] main {
|
||||||
|
#banner--page {
|
||||||
|
width: calc((100% - var(--max-w-content)) / 2);
|
||||||
|
}
|
||||||
|
|
||||||
|
#hero {
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: calc(var(--spacing) * 3);
|
||||||
|
figcaption {
|
||||||
|
max-width: var(--max-w-content);
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.section__article {
|
||||||
|
max-width: var(--max-w-content);
|
||||||
|
margin: calc(var(--spacing) * 3) auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,53 +1,34 @@
|
||||||
|
[data-template="investigations"] main {
|
||||||
[data-template="investigations"] main{
|
#container-cards {
|
||||||
|
@media #{$x-small-up} {
|
||||||
|
max-width: var(--max-w-container);
|
||||||
|
margin: 0 auto;
|
||||||
#container-cards{
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||||
@media #{$x-small-up}{
|
grid-auto-rows: minmax(100px, auto);
|
||||||
max-width: var(--max-w-container);
|
grid-gap: calc(var(--padding-body) * 1.5);
|
||||||
margin: 0 auto;
|
margin-bottom: 10vh;
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
|
||||||
grid-auto-rows: minmax(100px, auto);
|
|
||||||
grid-gap: calc(var(--padding-body)*1.5);
|
|
||||||
margin-bottom: 10vh;
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
|
||||||
@media #{$x-small}{
|
|
||||||
margin-bottom: 10vh;
|
|
||||||
.card--article{
|
|
||||||
margin-bottom: calc(var(--spacing)*1.5);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@media #{$x-small} {
|
||||||
.search-container{
|
margin-bottom: 10vh;
|
||||||
max-width: var(--max-w-content);
|
.card--article {
|
||||||
margin: 0 auto;
|
margin-bottom: calc(var(--spacing) * 1.5);
|
||||||
margin-bottom: calc(var(--spacing)*2);
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.page__sort{
|
.search-container {
|
||||||
max-width: var(--max-w-container);
|
max-width: var(--max-w-content);
|
||||||
display: flex;
|
margin: 0 auto;
|
||||||
justify-content: right;
|
margin-bottom: calc(var(--spacing) * 2);
|
||||||
grid-gap: var(--padding-inner);
|
}
|
||||||
margin: 0 auto;
|
|
||||||
margin-bottom: calc(var(--spacing)*0.5);
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.page__sort {
|
||||||
|
max-width: var(--max-w-container);
|
||||||
|
display: flex;
|
||||||
|
justify-content: right;
|
||||||
|
grid-gap: var(--padding-inner);
|
||||||
|
margin: 0 auto;
|
||||||
|
margin-bottom: calc(var(--spacing) * 0.5);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue