Merge branch 'master'

Y/Scripts/yfold.js

@@ -79,3 +79,48 @@ function toggleYfold(id) {
     var expand = content.classList.contains("anim-hide") || content.classList.contains("hidden") ;
     setStatus(id, expand, content, true) ;
 }
+
+/*********************************
+
+ Du js pour les codes snippets !
+ - theme sombre/clair
+ - copier le texte
+
+**********************************/
+
+window.onload = function() {
+  console.log("DOM loaded.")
+  var snippet = document.getElementsByTagName("code")[0];
+  console.log(snippet);
+
+  let img = document.createElement('div');
+  img.innerHTML = '<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M407 128H185C153.52 128 128 153.52 128 185V407C128 438.48 153.52 464 185 464H407C438.48 464 464 438.48 464 407V185C464 153.52 438.48 128 407 128Z" stroke="black" stroke-width="32" stroke-linejoin="round"/><path d="M383.5 128L384 104C383.958 89.1609 378.044 74.9416 367.551 64.4487C357.058 53.9558 342.839 48.0422 328 48H112C95.0416 48.0501 78.792 54.8091 66.8005 66.8005C54.8091 78.792 48.0501 95.0416 48 112V328C48.0422 342.839 53.9558 357.058 64.4487 367.551C74.9416 378.044 89.1609 383.958 104 384H128" stroke="black" stroke-width="32" stroke-linecap="round" stroke-linejoin="round"/></svg>';
+  img.addEventListener('click', function() {
+    console.log(snippet.innerText);
+    navigator.clipboard.writeText(snippet.innerText).then(function() {
+      console.log("copié !");
+      img.classList = "valid"
+    }, function() {
+      console.log("pas copié !");
+      img.classList = "not-valid"
+    });
+  });
+
+  let theme = document.createElement('div');
+  theme.setAttribute("class", "theme");
+  theme.innerHTML = '<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M256 464C370.875 464 464 370.875 464 256C464 141.125 370.875 48 256 48C141.125 48 48 141.125 48 256C48 370.875 141.125 464 256 464Z" stroke="black" stroke-width="32" stroke-linejoin="round"/><path d="M256 464C141.12 464 48 370.88 48 256C48 141.12 141.12 48 256 48V464Z" fill="black"/></svg>';
+
+  theme.addEventListener('click', function() {
+    snippet.classList.toggle("light");
+    console.log("theme switched !");
+    if (theme.classList == "theme darken") {
+      theme.classList = "theme lighten";
+    } else {
+      theme.classList = "theme darken";
+    }
+  });
+
+
+  snippet.appendChild(img)
+  snippet.appendChild(theme)
+};

Y/ystyle.css

@@ -211,8 +211,9 @@ footer .pcom a {
 
 /* PAGE DE CODE */
 code:not(.inline)  {
+  position: relative;
   z-index: 2;
-  background: #000;
+  background: rgba(19,19,19,.8);
   width: min(94vw, 900px);
   border-radius: 12px;
   margin-left: 3vw;
@@ -237,24 +238,58 @@ code * {
   display: inline;
 }
 
+code div {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  padding: 6px;
+  border-radius: 8px;
+  height: 42px;
+  width: 42px;
+  background: #333;
+}
+
+code div.theme {
+  right: 62px;
+}
+
+code div svg {
+  height: 30px;
+  width: 30px;
+  filter: invert(1);
+}
+
+code div.valid {
+  background: #181;
+}
+
+code div.not-valid {
+  background: #811;
+}
+
+code div.valid, code div.not-valid, code div.darken {
+  animation-name: shake;
+  animation-duration: .6s;
+}
+
 span.comment {
   font-style: italic;
   color: rgb(128, 139, 150);
   white-space: pre;
 }
 
-span.kw, code.kw {
-  color: rgb(227,99,99);
-}
-
-span.type {
+span.kw {
   color: rgb(203, 128, 53);
 }
 
-span.fname {
+span.type {
   color: rgb(203, 203, 53);
 }
 
+span.fname {
+  color: #72e0d1;
+}
+
 span.string {
   color: rgb(53, 203, 128);
 }
@@ -483,3 +518,31 @@ border-radius: 12px;
     margin-bottom: 0;
   }
 }
+
+@keyframes shake {
+  0% {
+    transform: translateX(0%);
+  }
+
+  20% {
+    transform: translateX(-5%);
+  }
+
+  40% {
+    transform: translateX(15%);
+  }
+
+  60% {
+    transform: translateX(-15%);
+  }
+
+  80% {
+    transform: translateX(5%);
+  }
+
+  100% {
+    transform: translateX(0%);
+  }
+
+
+}