merge
This commit is contained in:
isUnknown
commit
bfa3025a54
11 changed files with 1599 additions and 238 deletions
|
|
@ -103,13 +103,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
button{
|
||||
.copy-link__btn{
|
||||
background-color: var(--color-txt);
|
||||
color: var(--color-bg);
|
||||
border-radius: var(--radius-btn);
|
||||
padding: 0 1ch;
|
||||
font-size: var(--fs-small);
|
||||
padding-top: 2px;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover{
|
||||
background-color: var(--color-accent);
|
||||
|
||||
|
|
@ -120,3 +122,29 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
|
||||
// SHARE ACTIONS --------------------------------------------------
|
||||
// ----------------------------------------------------------------
|
||||
|
||||
#share-banner__content,
|
||||
#share-banner__aside,
|
||||
#share-banner__desktop{
|
||||
display: none;
|
||||
}
|
||||
#share-banner__content ~ .modal--share,
|
||||
#share-banner__aside ~ .modal--share,
|
||||
#share-banner__desktop ~ .modal--share{
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity .2s ease-in;
|
||||
}
|
||||
|
||||
#share-banner__content:checked ~ .modal--share,
|
||||
#share-banner__aside:checked ~ .modal--share,
|
||||
#share-banner__desktop:checked ~ .modal--share{
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
1007
assets/css/style.css
1007
assets/css/style.css
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
|
|
@ -30,6 +30,16 @@
|
|||
@import "partials/site-footer";
|
||||
@import "partials/main-layout";
|
||||
|
||||
@import "template/home";
|
||||
@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";
|
||||
|
|
|
|||
47
assets/css/template/_home.scss
Normal file
47
assets/css/template/_home.scss
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
|
||||
|
||||
|
||||
.section--home{
|
||||
margin: calc(var(--spacing)*3);
|
||||
|
||||
.title-section{
|
||||
font-size: var(--fs-medium);
|
||||
font-weight: normal;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#home__investigations{
|
||||
.container-cards{
|
||||
max-width: var(--max-w-container);
|
||||
margin: 0 auto;
|
||||
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;
|
||||
}
|
||||
}
|
||||
#home__description{
|
||||
|
||||
|
||||
.section--inner{
|
||||
max-width: var(--max-w-container);
|
||||
}
|
||||
|
||||
p{
|
||||
font-size: var(--fs-big);
|
||||
max-width: var(--max-w-content);
|
||||
}
|
||||
|
||||
button{
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
|
||||
}
|
||||
|
||||
button .icon svg{
|
||||
width: 11px;
|
||||
}
|
||||
|
||||
}
|
||||
327
assets/css/template/_investigation-summary.scss
Normal file
327
assets/css/template/_investigation-summary.scss
Normal file
|
|
@ -0,0 +1,327 @@
|
|||
[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;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
header{
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.section__article{
|
||||
max-width: var(--max-w-content);
|
||||
margin: calc(var(--spacing)*3) auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
|
|
@ -16,19 +16,25 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
grid-gap: var(--padding-inner);
|
||||
margin: 0 auto;
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
@media #{$x-small} {
|
||||
margin-bottom: 10vh;
|
||||
.card--article {
|
||||
margin-bottom: calc(var(--spacing) * 1.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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);
|
||||
display: flex;
|
||||
justify-content: right;
|
||||
grid-gap: var(--padding-inner);
|
||||
margin: 0 auto;
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,147 +1,146 @@
|
|||
:root{
|
||||
--rapport-w: 280px;
|
||||
--rapport-w: 290px;
|
||||
}
|
||||
|
||||
|
||||
#rapport{
|
||||
margin-bottom: 20vh;
|
||||
padding-left: var(--rapport-w);
|
||||
padding-left: calc(var(--rapport-w) + var(--padding-body)*1);
|
||||
padding-bottom: 10vh;
|
||||
margin: 0 auto;
|
||||
max-width: calc(var(--max-w-content) + var(--rapport-w));
|
||||
max-width: calc(var(--max-w-content) + var(--rapport-w) + var(--padding-body));
|
||||
margin-top: calc(var(--spacing)*-1);
|
||||
}
|
||||
|
||||
.rapport__header{
|
||||
#rapport .rapport__header{
|
||||
margin-top: calc(var(--spacing)*2);
|
||||
max-width: var(--max-w-content);
|
||||
margin-bottom: calc(var(--spacing)*2.5);
|
||||
|
||||
// display: grid;
|
||||
// grid-template-columns: 1fr 140px;
|
||||
// column-gap: calc(var(--spacing)*1.5);
|
||||
// row-gap: calc(var(--spacing)*2);
|
||||
|
||||
margin-top: calc(var(--spacing)*2);
|
||||
max-width: var(--max-w-content);
|
||||
padding-bottom: calc(var(--spacing)*0.5);
|
||||
display: grid;
|
||||
column-gap: var(--padding-inner);
|
||||
row-gap: calc(var(--spacing)*1);
|
||||
grid-template-columns: 30% 70%;
|
||||
grid-template-rows: auto auto 1fr;
|
||||
position: relative;
|
||||
|
||||
|
||||
.rapport__title-group{
|
||||
grid-column: span 2;
|
||||
.rapport__title-group{
|
||||
grid-row: 1;
|
||||
grid-column: span 2;
|
||||
// padding-bottom: calc(var(--spacing)*1);
|
||||
|
||||
.title{
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-big);
|
||||
line-height: var(--leading-tight);
|
||||
font-weight: normal;
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
.subtitle{
|
||||
font-size: var(--fs-big);
|
||||
line-height: var(--leading-tight);
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
font-weight: normal;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.rapport__figure{
|
||||
width: 100%;
|
||||
aspect-ratio: 2/1;
|
||||
margin-top: calc(var(--spacing)*2);
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.rapport__dl{
|
||||
align-self: start;
|
||||
font-size: var(--fs-small);
|
||||
border-bottom: var(--border-light);
|
||||
flex-grow: 2;
|
||||
align-items: flex-start;
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.thumbnail--group{
|
||||
display: flex;
|
||||
gap: calc(var(--spacing)*0.5);
|
||||
.title{
|
||||
text-transform: uppercase;
|
||||
font-weight: normal;
|
||||
font-size: var(--fs-big);
|
||||
line-height: var(--leading-tight);
|
||||
font-weight: normal;
|
||||
margin-top: calc(var(--spacing)*1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.btn--group{
|
||||
display: flex;
|
||||
gap: calc(var(--spacing)*0.5);
|
||||
.subtitle{
|
||||
font-size: var(--fs-big);
|
||||
line-height: var(--leading-tight);
|
||||
// margin-top: calc(var(--spacing)*0.25);
|
||||
font-weight: normal;
|
||||
|
||||
}
|
||||
|
||||
.thumbnail{
|
||||
max-width: 260px;
|
||||
display: grid;
|
||||
display: none;
|
||||
grid-template-columns: 2fr 3fr;
|
||||
column-gap: calc(var(--padding-inner)*1);
|
||||
padding: calc(var(--padding-inner)*0.5);
|
||||
border: var(--border-light);
|
||||
figure{
|
||||
display: flex;
|
||||
aspect-ratio: 4/3;
|
||||
grid-column: 1;
|
||||
grid-row: 1/3;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail__title{
|
||||
padding-top: calc(var(--padding-inner)*0.5);
|
||||
a{
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
button{
|
||||
align-self: end;
|
||||
display: flex;
|
||||
align-items: end;
|
||||
justify-content: end;
|
||||
padding-right: calc(var(--padding-inner)*0.5);
|
||||
padding-bottom: calc(var(--padding-inner)*0.5);
|
||||
}
|
||||
|
||||
|
||||
button svg{
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.rapport__figure{
|
||||
width: 100%;
|
||||
aspect-ratio: 4/5;
|
||||
grid-row: span 2;
|
||||
grid-column: 1;
|
||||
|
||||
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.rapport__dl{
|
||||
grid-row: 2;
|
||||
grid-column: 2;
|
||||
align-self: start;
|
||||
|
||||
// align-self: start;
|
||||
font-size: var(--fs-small);
|
||||
border-bottom: var(--border-light);
|
||||
// flex-grow: 2;
|
||||
align-items: flex-start;
|
||||
// margin-top: calc(var(--spacing)*1);
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.btn--group{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: start;
|
||||
align-items: start;
|
||||
gap: calc(var(--spacing)*0.5);
|
||||
position: relative;
|
||||
grid-row: 3;
|
||||
grid-column: 2;
|
||||
|
||||
button, label{
|
||||
min-width: 28ch;
|
||||
justify-content: flex-start;
|
||||
a{
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
label{
|
||||
// position: relative;
|
||||
}
|
||||
|
||||
.modal--share{
|
||||
max-width: 240px;
|
||||
position: absolute;
|
||||
height: 250px;
|
||||
top: calc(var(--h-block) * 1.5);
|
||||
left: 260px;
|
||||
|
||||
|
||||
&::before{
|
||||
content: "◀";
|
||||
transform: rotate(90deg);
|
||||
font-size: 10px;
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
right: calc(var(--h-block) * 1.5);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
#rapport{
|
||||
|
||||
.rapport__content{
|
||||
max-width: var(--max-w-content);
|
||||
margin-top: calc(var(--spacing)*3);
|
||||
// margin-top: calc(var(--spacing)*0.5);
|
||||
|
||||
|
||||
.section-content{
|
||||
|
|
@ -188,13 +187,14 @@
|
|||
position: fixed;
|
||||
top: calc(var(--header-h) + var(--padding-body));
|
||||
left: var(--padding-body);
|
||||
--border-aside: var(--border-light);
|
||||
|
||||
// border-radius: var(--radius-small);
|
||||
height: calc(100vh - var(--header-h) - var(--padding-body)*4);
|
||||
|
||||
.tabs{
|
||||
display: flex;
|
||||
border: var(--border-light);
|
||||
border: var(--border-aside);
|
||||
height: calc(var(--h-block)*1.25);
|
||||
|
||||
.tab{
|
||||
|
|
@ -208,7 +208,7 @@
|
|||
|
||||
.tab[for="tab-print"]{
|
||||
width: calc(var(--h-block)*1.5);
|
||||
border-right: var(--border-light);
|
||||
border-right: var(--border-aside);
|
||||
padding-left: 0;
|
||||
justify-content: center;
|
||||
.icon{
|
||||
|
|
@ -225,7 +225,7 @@
|
|||
padding: var(--padding-body);
|
||||
height: calc(100% - var(--h-block)*1.25);
|
||||
overflow: scroll;
|
||||
border: var(--border-light);
|
||||
border: var(--border-aside);
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
|
|
@ -235,15 +235,21 @@
|
|||
|
||||
li{
|
||||
font-size: var(--fs-small);
|
||||
padding: 5px 1ch;
|
||||
padding-top: 7px;
|
||||
|
||||
color: var(--color-txt-light);
|
||||
|
||||
a{
|
||||
display: block;
|
||||
padding: 5px 1ch;
|
||||
padding-top: 7px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
li.selected{
|
||||
// color: var(--color-accent);
|
||||
background-color: var(--grey-800);
|
||||
color: var(--color-txt);
|
||||
}
|
||||
|
||||
li:hover{
|
||||
|
|
@ -264,10 +270,39 @@
|
|||
|
||||
}
|
||||
|
||||
#download-pdf{
|
||||
margin: 0 auto;
|
||||
.btn--group{
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
display: flex;
|
||||
gap: var(--padding-inner);
|
||||
|
||||
[for="share-banner__aside"]{
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#download-pdf{
|
||||
a{
|
||||
padding-left: 1ch;
|
||||
padding-right: 1ch;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal--share{
|
||||
position: absolute;
|
||||
bottom: calc(var(--h-block) * -1.5);
|
||||
right: calc(-100% + var(--padding-inner));
|
||||
|
||||
&::before{
|
||||
content: "◀";
|
||||
font-size: 10px;
|
||||
position: absolute;
|
||||
bottom: calc(var(--h-block) * 0.25);
|
||||
left: -9px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
1
assets/icons/share.svg
Normal file
1
assets/icons/share.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M371.8 82.4C359.8 87.4 352 99 352 112L352 192L240 192C142.8 192 64 270.8 64 368C64 481.3 145.5 531.9 164.2 542.1C166.7 543.5 169.5 544 172.3 544C183.2 544 192 535.1 192 524.3C192 516.8 187.7 509.9 182.2 504.8C172.8 496 160 478.4 160 448.1C160 395.1 203 352.1 256 352.1L352 352.1L352 432.1C352 445 359.8 456.7 371.8 461.7C383.8 466.7 397.5 463.9 406.7 454.8L566.7 294.8C579.2 282.3 579.2 262 566.7 249.5L406.7 89.5C397.5 80.3 383.8 77.6 371.8 82.6z"/></svg>
|
||||
|
After Width: | Height: | Size: 679 B |
|
|
@ -1,10 +1,29 @@
|
|||
<?php snippet('header') ?>
|
||||
<main>
|
||||
<p>
|
||||
L’objet central de notre action est de concourir à la manifestation de la vérité dans des affaires où celle-ci est entravée par des intérêts de pouvoir.
|
||||
Nos enquêtes portent principalement principalement sur les cas de violences policières, en France comme à l'international, ainsi que sur les violations des droits humains au sens large. Nous intervenons également dans les situations où nos techniques d'investigation numérique peuvent permettre d'établir les faits autour d'une controverse d'intérêt public, qu'elle soit historique ou contemporaine.
|
||||
Notre champ d’action est avant tout public. Nos enquêtes et rapports d’expertise sont souvent publiés en partenariat avec d'autres médias d'information et sont régulièrement utilisés dans les procédures judiciaires sur les affaires concernées, contribuant ainsi à l'établissement des faits.
|
||||
Nous œuvrons également à la diffusion des techniques et des méthodes de l’investigation en sources ouvertes (OSINT) au sein de la société civile. Dans le cadre de notre programme de formation, nous animons des ateliers avec des collectifs citoyens, des ONG, des universités et le grand public. Enfin, nous intervenons régulièrement dans la sphère publique pour présenter nos travaux et notre approche.
|
||||
</p>
|
||||
|
||||
<section class="section--home" id="home__description">
|
||||
<div class="section--inner">
|
||||
<p>Index est une ONG d’investigation numérique, au service du public, de la vérité et de la justice.</p>
|
||||
|
||||
<button class="btn--bold-inline btn--light">
|
||||
<a href="#">
|
||||
<span class="icon"><?= svg('assets/icons/arrow-left.svg') ?></span>
|
||||
<span class="text">En savoir plus</span>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section--home" id="home__investigations">
|
||||
<div class="section--inner">
|
||||
<h2 class="title-section">Dernières Enquêtes</h2>
|
||||
|
||||
<section class="container-cards">
|
||||
</section>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
<?php snippet('footer') ?>
|
||||
|
|
@ -40,12 +40,22 @@
|
|||
|
||||
</div>
|
||||
|
||||
<button id="download-pdf" class="btn--bold">
|
||||
<a href="#">
|
||||
<span class="icon"><?= svg('assets/icons/pdf.svg') ?></span>
|
||||
<span class="text">Télégarcher le PDF</span>
|
||||
</a>
|
||||
</button>
|
||||
<div class="btn--group">
|
||||
<button id="download-pdf" class="btn--bold">
|
||||
<a href="#">
|
||||
<span class="icon"><?= svg('assets/icons/pdf.svg') ?></span>
|
||||
<span class="text">Télégarcher le PDF</span>
|
||||
</a>
|
||||
</button>
|
||||
<label for="share-banner__aside" class="btn--bold-inline btn--light no-link">
|
||||
<span class="icon"><?= svg('assets/icons/share.svg') ?></span>
|
||||
<span class="text">Partager</span>
|
||||
</label>
|
||||
|
||||
</div>
|
||||
|
||||
<input type="checkbox" id="share-banner__aside">
|
||||
<?php snippet('modal-share') ?>
|
||||
</aside>
|
||||
|
||||
|
||||
|
|
@ -74,23 +84,6 @@
|
|||
</dl>
|
||||
|
||||
|
||||
<div class="thumbnail--group">
|
||||
<div class="thumbnail thumbnail-pdf">
|
||||
<figure><img src="/assets/images/cover-rapport.png"></figure>
|
||||
<p class="thumbnail__title"><a href="#">Télégarcher le PDF</a></p>
|
||||
<button><?= svg('assets/icons/arrow-left.svg') ?></button>
|
||||
<a class="link-block" href="#"></a>
|
||||
</div>
|
||||
<div class="thumbnail thumbnail-summary">
|
||||
<figure><img src="/assets/images/Nidal-Khaled-Amirah.png"></figure>
|
||||
<p class="thumbnail__title"><a href="#">Voir la synthèse</a></p>
|
||||
<button><?= svg('assets/icons/arrow-left.svg') ?></button>
|
||||
<a class="link-block" href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="btn--group">
|
||||
<button class="btn--bold-inline btn--light">
|
||||
<a href="#">
|
||||
|
|
@ -105,9 +98,19 @@
|
|||
<span class="text">Voir la synthèse</span>
|
||||
</a>
|
||||
</button>
|
||||
|
||||
|
||||
<label for="share-banner__content" class="btn--bold-inline btn--light no-link">
|
||||
<span class="icon"><?= svg('assets/icons/share.svg') ?></span>
|
||||
<span class="text">Partager</span>
|
||||
</label>
|
||||
<input type="checkbox" id="share-banner__content">
|
||||
<?php snippet('modal-share') ?>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</header>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue