modal share

assets/css/base/_responsive.scss

@@ -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-up: "screen and (min-width: 768px)";
-$small: "screen and (max-width: 720px)";
+$small: "screen and (max-width: 768px)";
 $x-small: "screen and (max-width: 560px)";
 $paysage: "screen and (max-height: 670px) and (min-width: 1080px)";
 

assets/css/base/_var.scss

@@ -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;
   }
 }

assets/css/components/_buttons.scss

@@ -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{

assets/css/components/_modal-share.scss

@@ -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);
+
+            }
+        }
+    }
+   
+}

assets/css/partials/_site-header.scss

@@ -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;
+  }
+}

assets/css/style.css

@@ -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,19 +976,26 @@ body main {
   -o-object-fit: cover;
      object-fit: cover;
 }
-.page-enquete #banner--page {
+@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: var(--padding-body);
-  padding-right: 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;
+  }
+}
+.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;
@@ -866,9 +1003,9 @@ body main {
   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 */

assets/css/style.scss

@@ -11,6 +11,7 @@
 @import 'components/keywords';
 @import 'components/form-newsletter';
 @import 'components/list-socials';
+@import 'components/modal-share';
 @import 'components/text';
 
 

assets/css/template/_page-enquete.scss

@@ -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: var(--padding-body);
-        padding-right: 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;
+
+    }
+
+}

assets/icons/link.svg

@@ -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>

assets/js/header.js

@@ -1,6 +1,3 @@
-// ===============================
-// HEADER
-// ===============================
 export function headerToggle() {
   const header = document.getElementById("site-header");
   const buttonToggle = document.querySelector("#menu-toggle");

assets/js/onload.js

@@ -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();
 }

assets/js/share.js

@@ -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);
+            });
+        });
+    });
+}

components/modal-share.html

@@ -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>

components/site-header.html

@@ -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>

components/socials.html

@@ -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>

index.html

@@ -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.

page-enquete/index.html

@@ -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>