This commit is contained in:
Julie Blanc
parent
08ebf7fc9e
commit
5914178e2f
19 changed files with 440 additions and 63 deletions
|
|
@ -2,8 +2,8 @@ $desktop: "screen and (min-width: 1200px)";
|
|||
$medium: "screen and (max-width: 1080px)";
|
||||
$medium-up: "screen and (min-width: 1080px)";
|
||||
|
||||
$small-up: "screen and (min-width: 720px)";
|
||||
$small: "screen and (max-width: 720px)";
|
||||
$small-up: "screen and (min-width: 768px)";
|
||||
$small: "screen and (max-width: 768px)";
|
||||
$x-small: "screen and (max-width: 560px)";
|
||||
$paysage: "screen and (max-height: 670px) and (min-width: 1080px)";
|
||||
|
||||
|
|
|
|||
|
|
@ -54,15 +54,20 @@
|
|||
--border: 1px solid var(--color-txt);
|
||||
--border-light: 1px solid var(--grey-800);
|
||||
|
||||
|
||||
--header-h: 80px;
|
||||
--header-h-shrinked: 50px;
|
||||
--menu-w: 420px;
|
||||
|
||||
|
||||
|
||||
|
||||
// responsive
|
||||
--padding-body: 26px;
|
||||
--padding-inner: 14px;
|
||||
|
||||
--radius-small: 4px;
|
||||
--radius-btn: 4px;
|
||||
--spacing: 30px;
|
||||
--h-block: 30px;
|
||||
|
||||
|
|
@ -78,5 +83,7 @@
|
|||
--fs-medium: 20px;
|
||||
--fs-big: 30px;
|
||||
--fs-x-big: 38px;
|
||||
|
||||
--header-h: 60px;
|
||||
}
|
||||
}
|
||||
|
|
@ -36,7 +36,7 @@ button:disabled{
|
|||
display: block;
|
||||
height: calc(var(--h-block)*1);
|
||||
border: var(--border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius-btn);
|
||||
font-size: var(--fs-small);
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
|
|
@ -49,7 +49,15 @@ button:disabled{
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 2ch;
|
||||
padding-top: 5px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
&.no-link{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 2ch;
|
||||
padding-top: 4px;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -68,6 +76,8 @@ button:disabled{
|
|||
}
|
||||
|
||||
.btn--bold-inline:hover{
|
||||
background-color: var(--grey-800);
|
||||
color: var(--color-txt);
|
||||
a{
|
||||
background-color: var(--grey-800);
|
||||
color: var(--color-txt);
|
||||
|
|
@ -78,6 +88,8 @@ button:disabled{
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
// DELETE ?
|
||||
|
||||
.btn__default{
|
||||
|
|
|
|||
120
assets/css/components/_modal-share.scss
Normal file
120
assets/css/components/_modal-share.scss
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
.modal--share{
|
||||
border: var(--border);
|
||||
border-radius: var(--radius-btn);
|
||||
background-color: var(--color-bg);
|
||||
padding: var(--padding-inner);
|
||||
padding-top: calc( var(--padding-inner)*0.5);
|
||||
padding-bottom: calc( var(--padding-inner)*1.5);
|
||||
|
||||
.modal-title{
|
||||
display: none;
|
||||
}
|
||||
|
||||
.socials{
|
||||
display: block;
|
||||
list-style: none;
|
||||
|
||||
li{
|
||||
font-size: var(--fs-normal);
|
||||
padding-bottom: 6px;
|
||||
border-bottom: var(--border-light);
|
||||
padding-top: 6px;
|
||||
|
||||
a{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1ch;
|
||||
text-decoration: none;
|
||||
}
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
svg{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.text{
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
&:hover{
|
||||
color: var(--color-accent);
|
||||
|
||||
.icon svg,
|
||||
.icon svg path,
|
||||
.icon svg rect{
|
||||
fill: var(--color-accent)!important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
.copy-link{
|
||||
display: flex;
|
||||
gap: 0.5ch;
|
||||
margin-top: calc(var(--spacing)*0.75);
|
||||
|
||||
.copy-link__field{
|
||||
flex-grow: 1;
|
||||
display: grid;
|
||||
grid-template-columns: var(--h-block) 1fr;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.icon{
|
||||
display: flex;
|
||||
width: var(--h-block);
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
// top: -2px;
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
}
|
||||
.icon svg{
|
||||
width: 12px;
|
||||
}
|
||||
input{
|
||||
font-size: var(--fs-small);
|
||||
font-family: var(--font);
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-txt);
|
||||
padding-top: 2px;
|
||||
grid-column: 1/end;
|
||||
grid-row: 1;
|
||||
padding-left: var(--h-block);
|
||||
padding-right: 0.5ch;
|
||||
border: var(--border-light);
|
||||
border-radius: var(--radius-btn);
|
||||
height: var(--h-block);
|
||||
&:focus{
|
||||
border-color: var(--color-txt);
|
||||
outline: none;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
button{
|
||||
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;
|
||||
&:hover{
|
||||
background-color: var(--color-accent);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -20,7 +20,6 @@
|
|||
.site-header__inner{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-bottom: var(--border-light);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -82,7 +81,18 @@
|
|||
position: fixed;
|
||||
top: 0;
|
||||
|
||||
.site-header__inner{
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
|
||||
& ~ main{
|
||||
margin-top: var(--header-h);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media #{$medium}{
|
||||
#nav-highlight{
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,19 +34,21 @@
|
|||
--header-h-shrinked: 50px;
|
||||
--menu-w: 420px;
|
||||
--padding-body: 26px;
|
||||
--padding-inner: 14px;
|
||||
--radius-small: 4px;
|
||||
--radius-btn: 4px;
|
||||
--spacing: 30px;
|
||||
--h-block: 30px;
|
||||
--curve: cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
||||
}
|
||||
@media screen and (max-width: 720px) {
|
||||
@media screen and (max-width: 768px) {
|
||||
:root {
|
||||
--fs-medium: 20px;
|
||||
--fs-big: 26px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 720px) {
|
||||
@media screen and (max-width: 768px) {
|
||||
:root {
|
||||
--fs-x-small: 10px;
|
||||
--fs-small: 11px;
|
||||
|
|
@ -54,6 +56,7 @@
|
|||
--fs-medium: 20px;
|
||||
--fs-big: 30px;
|
||||
--fs-x-big: 38px;
|
||||
--header-h: 60px;
|
||||
}
|
||||
}
|
||||
* {
|
||||
|
|
@ -110,7 +113,6 @@ body {
|
|||
#site-header .site-header__inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-bottom: var(--border-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -159,10 +161,18 @@ body {
|
|||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
#site-header.is-visible .site-header__inner {
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
#site-header.is-visible ~ main {
|
||||
margin-top: var(--header-h);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1080px) {
|
||||
#nav-highlight {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
button {
|
||||
cursor: pointer;
|
||||
font-family: var(--font);
|
||||
|
|
@ -195,7 +205,7 @@ button:disabled {
|
|||
display: block;
|
||||
height: calc(var(--h-block) * 1);
|
||||
border: var(--border);
|
||||
border-radius: 4px;
|
||||
border-radius: var(--radius-btn);
|
||||
font-size: var(--fs-small);
|
||||
text-transform: uppercase;
|
||||
line-height: 1;
|
||||
|
|
@ -210,7 +220,15 @@ button:disabled {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 2ch;
|
||||
padding-top: 5px;
|
||||
padding-top: 4px;
|
||||
}
|
||||
.btn--bold.no-link,
|
||||
.btn--bold-inline.no-link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 2ch;
|
||||
padding-top: 4px;
|
||||
}
|
||||
|
||||
.btn--bold {
|
||||
|
|
@ -225,6 +243,10 @@ button:disabled {
|
|||
color: var(--color-bg);
|
||||
}
|
||||
|
||||
.btn--bold-inline:hover {
|
||||
background-color: var(--grey-800);
|
||||
color: var(--color-txt);
|
||||
}
|
||||
.btn--bold-inline:hover a {
|
||||
background-color: var(--grey-800);
|
||||
color: var(--color-txt);
|
||||
|
|
@ -437,7 +459,7 @@ button:disabled {
|
|||
display: none;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 720px) {
|
||||
@media screen and (min-width: 768px) {
|
||||
.footer__socials .list-socials {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -459,6 +481,107 @@ button:disabled {
|
|||
line-height: 1;
|
||||
}
|
||||
}
|
||||
.modal--share {
|
||||
border: var(--border);
|
||||
border-radius: var(--radius-btn);
|
||||
background-color: var(--color-bg);
|
||||
padding: var(--padding-inner);
|
||||
padding-top: calc(var(--padding-inner) * 0.5);
|
||||
padding-bottom: calc(var(--padding-inner) * 1.5);
|
||||
}
|
||||
.modal--share .modal-title {
|
||||
display: none;
|
||||
}
|
||||
.modal--share .socials {
|
||||
display: block;
|
||||
list-style: none;
|
||||
}
|
||||
.modal--share .socials li {
|
||||
font-size: var(--fs-normal);
|
||||
padding-bottom: 6px;
|
||||
border-bottom: var(--border-light);
|
||||
padding-top: 6px;
|
||||
}
|
||||
.modal--share .socials li a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1ch;
|
||||
text-decoration: none;
|
||||
}
|
||||
.modal--share .socials li .icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.modal--share .socials li .icon svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.modal--share .socials li .text {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
.modal--share .socials li:hover {
|
||||
color: var(--color-accent);
|
||||
}
|
||||
.modal--share .socials li:hover .icon svg,
|
||||
.modal--share .socials li:hover .icon svg path,
|
||||
.modal--share .socials li:hover .icon svg rect {
|
||||
fill: var(--color-accent) !important;
|
||||
}
|
||||
.modal--share .copy-link {
|
||||
display: flex;
|
||||
gap: 0.5ch;
|
||||
margin-top: calc(var(--spacing) * 0.75);
|
||||
}
|
||||
.modal--share .copy-link .copy-link__field {
|
||||
flex-grow: 1;
|
||||
display: grid;
|
||||
grid-template-columns: var(--h-block) 1fr;
|
||||
}
|
||||
.modal--share .copy-link .icon {
|
||||
display: flex;
|
||||
width: var(--h-block);
|
||||
height: 100%;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
grid-row: 1;
|
||||
grid-column: 1;
|
||||
}
|
||||
.modal--share .copy-link .icon svg {
|
||||
width: 12px;
|
||||
}
|
||||
.modal--share .copy-link input {
|
||||
font-size: var(--fs-small);
|
||||
font-family: var(--font);
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--color-txt);
|
||||
padding-top: 2px;
|
||||
grid-column: 1/end;
|
||||
grid-row: 1;
|
||||
padding-left: var(--h-block);
|
||||
padding-right: 0.5ch;
|
||||
border: var(--border-light);
|
||||
border-radius: var(--radius-btn);
|
||||
height: var(--h-block);
|
||||
}
|
||||
.modal--share .copy-link input:focus {
|
||||
border-color: var(--color-txt);
|
||||
outline: none;
|
||||
}
|
||||
.modal--share .copy-link button {
|
||||
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;
|
||||
}
|
||||
.modal--share .copy-link button:hover {
|
||||
background-color: var(--color-accent);
|
||||
}
|
||||
|
||||
[data-template=subscription-newsletter] .p__baseline-big,
|
||||
[data-template=thanks] .p__baseline-big,
|
||||
[data-template=support] .p__baseline-big,
|
||||
|
|
@ -503,7 +626,7 @@ button:disabled {
|
|||
text-align: center;
|
||||
margin: calc(var(--spacing) * 1) 0;
|
||||
}
|
||||
@media screen and (max-width: 720px) {
|
||||
@media screen and (max-width: 768px) {
|
||||
[data-template=subscription-newsletter] .p__baseline,
|
||||
[data-template=thanks] .p__baseline,
|
||||
[data-template=support] .p__baseline,
|
||||
|
|
@ -561,7 +684,6 @@ button:disabled {
|
|||
#site-header .site-header__inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-bottom: var(--border-light);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
|
@ -610,10 +732,18 @@ button:disabled {
|
|||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
#site-header.is-visible .site-header__inner {
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
#site-header.is-visible ~ main {
|
||||
margin-top: var(--header-h);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1080px) {
|
||||
#nav-highlight {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
#site-menu {
|
||||
position: fixed;
|
||||
width: var(--menu-w);
|
||||
|
|
@ -743,7 +873,7 @@ body.menu-open #menu-toggle .close {
|
|||
font-size: var(--fs-small);
|
||||
color: var(--color-txt);
|
||||
}
|
||||
@media screen and (max-width: 720px) {
|
||||
@media screen and (max-width: 768px) {
|
||||
#site-footer {
|
||||
margin-top: calc(var(--spacing) * 2);
|
||||
}
|
||||
|
|
@ -765,7 +895,7 @@ body.menu-open #menu-toggle .close {
|
|||
text-align: center;
|
||||
}
|
||||
}
|
||||
@media screen and (min-width: 720px) {
|
||||
@media screen and (min-width: 768px) {
|
||||
#site-footer .site-footer__container {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
|
@ -846,13 +976,14 @@ body main {
|
|||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
}
|
||||
@media screen and (min-width: 1080px) {
|
||||
.page-enquete #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-bottom: var(--padding-body);
|
||||
padding-right: var(--padding-body);
|
||||
padding: var(--padding-body);
|
||||
padding-left: 0px;
|
||||
position: sticky;
|
||||
top: var(--header-h);
|
||||
width: calc((100% - var(--max-w-content)) / 2);
|
||||
|
|
@ -860,15 +991,21 @@ body main {
|
|||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
.page-enquete .modal--share {
|
||||
position: absolute;
|
||||
bottom: calc(var(--padding-body) + var(--h-block) + var(--spacing) * 0.25);
|
||||
width: calc(100% - var(--padding-body));
|
||||
}
|
||||
.page-enquete #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 > button {
|
||||
width: 100%;
|
||||
max-width: 28ch;
|
||||
max-width: 160px;
|
||||
}
|
||||
.page-enquete #nav--page ul {
|
||||
list-style: none;
|
||||
|
|
@ -920,4 +1057,10 @@ body main {
|
|||
-webkit-text-decoration: 1px underline var(--color-txt-light);
|
||||
text-decoration: 1px underline var(--color-txt-light);
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1080px) {
|
||||
#banner--page {
|
||||
display: none;
|
||||
}
|
||||
}/*# sourceMappingURL=style.css.map */
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -11,6 +11,7 @@
|
|||
@import 'components/keywords';
|
||||
@import 'components/form-newsletter';
|
||||
@import 'components/list-socials';
|
||||
@import 'components/modal-share';
|
||||
@import 'components/text';
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -68,31 +68,41 @@
|
|||
|
||||
// banner-page -------------------------------------------------
|
||||
|
||||
@media #{$medium-up}{
|
||||
#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-bottom: var(--padding-body);
|
||||
padding-right: var(--padding-body);
|
||||
padding: var(--padding-body);
|
||||
padding-left: 0px;
|
||||
position: sticky;
|
||||
top: var(--header-h);
|
||||
width: calc((100% - var(--max-w-content))/2);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
.btn--group{
|
||||
|
||||
.modal--share{
|
||||
position: absolute;
|
||||
bottom: calc(var(--padding-body) + var(--h-block) + var(--spacing) * 0.25);
|
||||
width: calc(100% - var(--padding-body));
|
||||
|
||||
}
|
||||
|
||||
#banner--page .btn--group{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: calc(var(--spacing)*0.25);
|
||||
|
||||
button{
|
||||
width: 100%;
|
||||
max-width: 28ch;
|
||||
}
|
||||
|
||||
> button{
|
||||
width: 100%;
|
||||
max-width: 160px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -182,3 +192,14 @@
|
|||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
@media #{$medium}{
|
||||
|
||||
#banner--page{
|
||||
display: none;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
Before Width: | Height: | Size: 309 B After Width: | Height: | Size: 309 B |
1
assets/icons/link.svg
Normal file
1
assets/icons/link.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" style="fill: var(--color-txt)" width="24" height="24" viewBox="0 0 24 24"><path d="M13.723 18.654l-3.61 3.609c-2.316 2.315-6.063 2.315-8.378 0-1.12-1.118-1.735-2.606-1.735-4.188 0-1.582.615-3.07 1.734-4.189l4.866-4.865c2.355-2.355 6.114-2.262 8.377 0 .453.453.81.973 1.089 1.527l-1.593 1.592c-.18-.613-.5-1.189-.964-1.652-1.448-1.448-3.93-1.51-5.439-.001l-.001.002-4.867 4.865c-1.5 1.499-1.5 3.941 0 5.44 1.517 1.517 3.958 1.488 5.442 0l2.425-2.424c.993.284 1.791.335 2.654.284zm.161-16.918l-3.574 3.576c.847-.05 1.655 0 2.653.283l2.393-2.389c1.498-1.502 3.94-1.5 5.44-.001 1.517 1.518 1.486 3.959 0 5.442l-4.831 4.831-.003.002c-1.438 1.437-3.886 1.552-5.439-.002-.473-.474-.785-1.042-.956-1.643l-.084.068-1.517 1.515c.28.556.635 1.075 1.088 1.528 2.245 2.245 6.004 2.374 8.378 0l4.832-4.831c2.314-2.316 2.316-6.062-.001-8.377-2.317-2.321-6.067-2.313-8.379-.002z"/></svg>
|
||||
|
After Width: | Height: | Size: 911 B |
|
|
@ -1,6 +1,3 @@
|
|||
// ===============================
|
||||
// HEADER
|
||||
// ===============================
|
||||
export function headerToggle() {
|
||||
const header = document.getElementById("site-header");
|
||||
const buttonToggle = document.querySelector("#menu-toggle");
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
import { headerToggle, headerScrollVisibility } from './header.js';
|
||||
import { copyLink } from './share.js';
|
||||
|
||||
// TEMP, with includeHTML() --------------------------------------
|
||||
|
||||
|
|
@ -24,9 +25,10 @@ function runIncludeHTML() {
|
|||
|
||||
// Note: une fois que IncludeHTML() est supprimé, on peut supprimer tout le temp au dessus
|
||||
// remplacer `function initAfterLoad()` par ↓
|
||||
// window.onload = async function () {
|
||||
// window.onload = async function () { }
|
||||
|
||||
function initAfterLoad() {
|
||||
headerToggle();
|
||||
headerScrollVisibility();
|
||||
copyLink();
|
||||
}
|
||||
|
|
|
|||
19
assets/js/share.js
Normal file
19
assets/js/share.js
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
export function copyLink() {
|
||||
let buttons = document.querySelectorAll('.copy-link button');
|
||||
buttons.forEach(function (button, index) {
|
||||
console.log(button);
|
||||
let link = button.parentNode.querySelector("input").value;
|
||||
|
||||
button.addEventListener('click', function() {
|
||||
navigator.clipboard.writeText(link).then(() => {
|
||||
const originalText = button.textContent;
|
||||
button.textContent = 'Lien copié';
|
||||
setTimeout(() => {
|
||||
button.textContent = originalText;
|
||||
}, 1000);
|
||||
}).catch(err => {
|
||||
console.error('Erreur lors de la copie:', err);
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
45
components/modal-share.html
Normal file
45
components/modal-share.html
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<div class="modal-title">
|
||||
<p>Partager</p>
|
||||
<button><span class="close" w3-include-html="/assets/icons/close.svg"></span></button>
|
||||
</div>
|
||||
|
||||
<ul class="socials">
|
||||
<li class="socials__x">
|
||||
<a href="https://x.com/index_ngo" target="_blank" rel="noopener noreferrer">
|
||||
<span class="icon" w3-include-html="/assets/icons/socials/x-social.svg"></span>
|
||||
<span class="text">X</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="socials__facebook">
|
||||
<a href="https://www.facebook.com/index.ngo/" target="_blank" rel="noopener noreferrer">
|
||||
<span class="icon" w3-include-html="/assets/icons/socials/facebook.svg"></span>
|
||||
<span class="text">Facebook</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="socials__linkedin">
|
||||
<a href="https://fr.linkedin.com/company/index-ngo" target="_blank" rel="noopener noreferrer">
|
||||
<span class="icon" w3-include-html="/assets/icons/socials/linkedin.svg"></span>
|
||||
<span class="text">LinkedIn</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="socials__bsk">
|
||||
<a href="https://bsky.app/profile/index-ngo.bsky.social" target="_blank" rel="noopener noreferrer">
|
||||
<span class="icon" w3-include-html="/assets/icons/socials/bluesky.svg"></span>
|
||||
<span class="text">Bluesky</span>
|
||||
</a>
|
||||
</li>
|
||||
<li class="socials__mastodon">
|
||||
<a href="https://mastodon.design/@index_ngo@mastodon.social" target="_blank" rel="noopener noreferrer">
|
||||
<span class="icon" w3-include-html="/assets/icons/socials/mastodon.svg"></span>
|
||||
<span class="text">Mastodon</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="copy-link">
|
||||
<div class="copy-link__field">
|
||||
<span class="icon" w3-include-html="/assets/icons/link.svg"> </span>
|
||||
<input type="text" readonly="" value="http://127.0.0.1:5500/page-enquete">
|
||||
</div>
|
||||
<button class="copy-link__btn">Copier</button>
|
||||
</div>
|
||||
|
|
@ -37,7 +37,7 @@
|
|||
|
||||
<button id="menu-toggle">
|
||||
<span class="open" w3-include-html="/assets/icons/menu.svg"></span>
|
||||
<span class="close" w3-include-html="/assets/icons/menu-close.svg"></span>
|
||||
<span class="close" w3-include-html="/assets/icons/close.svg"></span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
|
@ -17,7 +17,6 @@
|
|||
<span class="text">Facebook</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="https://www.youtube.com/index-ngo" target="_blank" rel="noopener noreferrer">
|
||||
<span class="icon" w3-include-html="/assets/icons/socials/youtube.svg"></span>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@
|
|||
|
||||
|
||||
<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.
|
||||
|
|
|
|||
|
|
@ -42,7 +42,8 @@
|
|||
|
||||
<div class="btn--group">
|
||||
<button class="btn--bold"><a href="#">Lire le rapport</a></button>
|
||||
<button class="btn--bold-inline"><a href="#">Partager</a></button>
|
||||
<button class="btn--bold-inline no-link">Partager</button>
|
||||
<div class="modal--share" w3-include-html="/components/modal-share.html"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue