modifié : config.toml

modifié :         public/base-de-donnees/index.html
	modifié :         public/base.css
	modifié :         public/index.html
	modifié :         public/intro.css
	modifié :         sass/color.scss
	modifié :         static/js/menu.js
	modifié :         templates/partials/menu.html

config.toml

@@ -15,7 +15,9 @@ build_search_index = true
 
 [extra]
 # Put all your custom variables here
-mastodon = "https://mamot.fr/@totoy"
+mastodon = "https://social.bim.land/@totoy"
 mail = "kitoy__at__kitoy.me"
-gitlab = "https://gitlab.com/totoy"
+git = "https://kitoy.me/git"
 music = "https://losprimos.eu"
+xmpp = "kitoy__at__kitoy.me"
+gpg = ""

public/base-de-donnees/index.html

@@ -38,19 +38,9 @@
       <p> RSS </p>
       </a>
 
-    <a href="mailto:kitoy__at__kitoy.me">
+    <a href="https:&#x2F;&#x2F;kitoy.me/contact/">
-      <img src="/img/mail.svg" alt="Mail" />
+      <img src="/img/mail.svg" alt="Contact" />
-      <p> Mail/XMPP </p>
+      <p> Me contacter </p>
-    </a>
-
-    <a href="https:&#x2F;&#x2F;mamot.fr&#x2F;@totoy">
-      <img src="/img/masto.svg" alt="Réseaux sociaux" />
-      <p> Mastodon </p>
-      </a>
-
-    <a href="https:&#x2F;&#x2F;gitlab.com&#x2F;totoy">
-      <img src="/img/gitlab.svg" alt="gitlab" />
-      <p> Coding </p>
     </a>
 
 </div>

public/base.css

@@ -1 +1 @@
-html{height:100%}body{font:100% Helvetica,sans-serif;color:#DFE166;background-color:#5D535E}*{-moz-box-sizing:border-box;box-sizing:border-box}a{color:#9A9EAB;text-decoration:none}.date{margin-bottom:0}.slug{text-align:left;margin-bottom:2rem}.readmore{text-align:right}.readmore a{color:#DFE166;text-decoration:underline}.menugauche{position:fixed;max-width:100px}.menu img{max-width:20px;max-height:20px}.copyleft{display:inline-block;transform:rotate(180deg);padding-bottom:-15px}pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}.toggle{background-color:#ED5752;text-align:center;height:100px;width:100px;border-radius:50%;position:fixed;margin:140px;margin-left:110px;top:100px;bottom:0px;left:0px;right:0px}.toggle h2{margin-top:1.5em}.menu{background-color:#DFE166;height:100px;width:100px;transform:scale(0);border-radius:50%;border-style:double;border-color:#ED5752;position:fixed;margin-top:140px;margin-left:110px;top:100px;bottom:0px;left:0px;right:0px;z-index:-1;transition:0.7s}.menu a{display:inline-block;position:fixed;font-size:15px;color:#5D535E}.menu p{margin-top:-4px;font-size:5px}a:nth-child(1){top:3px;left:43px}a:nth-child(2){top:25px;left:69px}a:nth-child(3){top:54px;left:65px}a:nth-child(4){top:65px;left:35px}a:nth-child(5){top:45px;left:7px}a:nth-child(6){top:15px;left:13px}.articles{margin-left:21rem;margin-top:5rem;margin-bottom:3rem;padding:0.5em;border:7px double;border-color:#DFE166;border-radius:10px 10px 10px 10px}.articles h1{color:#DFE166;text-align:center}.description{text-align:center;font-weight:200;font-style:italic;font-size:17px;padding-bottom:30px}.articles h2,h3,h4{color:#9A9EAB}.pagination a{border:1px solid;border-color:#9A9EAB;padding:3px;font-size:13px}.center{margin:auto;width:50%;padding:10px}footer{position:relative;bottom:0px;width:100%;text-align:center}@media only screen and (max-width: 768px){.articles{margin-left:3rem;position:relative}.toggle{display:none}.menugauche{max-width:unset;position:sticky;top:0px;z-index:5;width:100%}.menu{width:93%;height:5rem;border-radius:0%;border:5px double;border-color:#ED5752;position:sticky;margin-top:3rem;border-radius:10px 10px 10px 10px;margin-bottom:0px;margin-left:7%;transform:none}.menu a{display:inline-block;position:absolute}.menu img{transform:scale(2)}.menu p{margin:0.3rem;font-size:13px}.menu img:hover{transform:scale(3)}a:nth-child(1){top:25px;left:7%}a:nth-child(2){top:25px;left:24%}a:nth-child(3){top:25px;left:41%}a:nth-child(4){top:25px;left:58%}a:nth-child(5){top:25px;left:75%}a:nth-child(6){top:25px;left:90%}}@media only screen and (max-width: 700px){.menu p{display:none}.menu{align-self:center}}
+html{height:100%}body{font:100% Helvetica,sans-serif;color:#F8F5F2;background-color:#000B29}*{-moz-box-sizing:border-box;box-sizing:border-box}a{color:#EDB83D;text-decoration:none}.date{margin-bottom:0}.slug{text-align:left;margin-bottom:2rem}.readmore{text-align:right}.readmore a{color:#F8F5F2;text-decoration:underline}.menugauche{position:fixed;max-width:100px}.menu img{max-width:20px;max-height:20px}.copyleft{display:inline-block;transform:rotate(180deg);padding-bottom:-15px}pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}.toggle{background-color:#D70026;text-align:center;height:100px;width:100px;border-radius:50%;position:fixed;margin:140px;margin-left:110px;top:100px;bottom:0px;left:0px;right:0px}.toggle h2{margin-top:1.5em}.menu{background-color:#F8F5F2;height:100px;width:100px;transform:scale(0);border-radius:50%;border-style:double;border-color:#D70026;position:fixed;margin-top:140px;margin-left:110px;top:100px;bottom:0px;left:0px;right:0px;z-index:-1;transition:0.7s}.menu a{display:inline-block;position:fixed;font-size:15px;color:#000B29}.menu p{margin-top:-4px;font-size:5px}a:nth-child(1){top:3px;left:40px}a:nth-child(2){top:35px;left:7px}a:nth-child(3){top:67px;left:40px}a:nth-child(4){top:35px;left:69px}a:nth-child(6){top:15px;left:35px}.articles{margin-left:21rem;margin-top:5rem;margin-bottom:3rem;padding:0.5em;border:7px double;border-color:#F8F5F2;border-radius:10px 10px 10px 10px}.articles h1{color:#F8F5F2;text-align:center}.description{text-align:center;font-weight:200;font-style:italic;font-size:17px;padding-bottom:30px}.articles h2,h3,h4{color:#EDB83D}.pagination a{border:1px solid;border-color:#EDB83D;padding:3px;font-size:13px}.center{margin:auto;width:50%;padding:10px}.contact{text-align:center}footer{position:relative;bottom:0px;width:100%;text-align:center}@media only screen and (max-width: 768px){.articles{margin-left:3rem;position:relative}.toggle{display:none}.menugauche{max-width:unset;position:sticky;top:0px;z-index:5;width:100%}.menu{width:93%;height:5rem;border-radius:0%;border:5px double;border-color:#D70026;position:sticky;margin-top:3rem;border-radius:10px 10px 10px 10px;margin-bottom:0px;margin-left:7%;transform:none}.menu a{display:inline-block;position:absolute}.menu img{transform:scale(2)}.menu p{margin:0.3rem;font-size:13px}.menu img:hover{transform:scale(3)}a:nth-child(1){top:25px;left:20%}a:nth-child(2){top:25px;left:40%}a:nth-child(3){top:25px;left:60%}a:nth-child(4){top:25px;left:80%}}@media only screen and (max-width: 700px){.menu p{display:none}.menu{align-self:center}}

public/index.html

@@ -38,19 +38,9 @@
       <p> RSS </p>
       </a>
 
-    <a href="mailto:kitoy__at__kitoy.me">
+    <a href="https:&#x2F;&#x2F;kitoy.me/contact/">
-      <img src="/img/mail.svg" alt="Mail" />
+      <img src="/img/mail.svg" alt="Contact" />
-      <p> Mail/XMPP </p>
+      <p> Me contacter </p>
-    </a>
-
-    <a href="https:&#x2F;&#x2F;mamot.fr&#x2F;@totoy">
-      <img src="/img/masto.svg" alt="Réseaux sociaux" />
-      <p> Mastodon </p>
-      </a>
-
-    <a href="https:&#x2F;&#x2F;gitlab.com&#x2F;totoy">
-      <img src="/img/gitlab.svg" alt="gitlab" />
-      <p> Coding </p>
     </a>
 
 </div>

public/intro.css

@@ -1 +1 @@
-html{height:100%}body{font:100% Helvetica,sans-serif;color:#DFE166;background-color:#5D535E}*{-moz-box-sizing:border-box;box-sizing:border-box}a{color:#9A9EAB;text-decoration:none}.date{margin-bottom:0}.slug{text-align:left;margin-bottom:2rem}.readmore{text-align:right}.readmore a{color:#DFE166;text-decoration:underline}.menugauche{position:fixed;max-width:100px}.menu img{max-width:20px;max-height:20px}.copyleft{display:inline-block;transform:rotate(180deg);padding-bottom:-15px}pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}.toggle{background-color:#ED5752;text-align:center;height:100px;width:100px;border-radius:50%;position:fixed;margin:140px;margin-left:110px;top:100px;bottom:0px;left:0px;right:0px}.toggle h2{margin-top:1.5em}.menu{background-color:#DFE166;height:100px;width:100px;transform:scale(0);border-radius:50%;border-style:double;border-color:#ED5752;position:fixed;margin-top:140px;margin-left:110px;top:100px;bottom:0px;left:0px;right:0px;z-index:-1;transition:0.7s}.menu a{display:inline-block;position:fixed;font-size:15px;color:#5D535E}.menu p{margin-top:-4px;font-size:5px}a:nth-child(1){top:3px;left:43px}a:nth-child(2){top:25px;left:69px}a:nth-child(3){top:54px;left:65px}a:nth-child(4){top:65px;left:35px}a:nth-child(5){top:45px;left:7px}a:nth-child(6){top:15px;left:13px}.articles{margin-left:21rem;margin-top:5rem;margin-bottom:3rem;padding:0.5em;border:7px double;border-color:#DFE166;border-radius:10px 10px 10px 10px}.articles h1{color:#DFE166;text-align:center}.description{text-align:center;font-weight:200;font-style:italic;font-size:17px;padding-bottom:30px}.articles h2,h3,h4{color:#9A9EAB}.pagination a{border:1px solid;border-color:#9A9EAB;padding:3px;font-size:13px}.center{margin:auto;width:50%;padding:10px}footer{position:relative;bottom:0px;width:100%;text-align:center}@media only screen and (max-width: 768px){.articles{margin-left:3rem;position:relative}.toggle{display:none}.menugauche{max-width:unset;position:sticky;top:0px;z-index:5;width:100%}.menu{width:93%;height:5rem;border-radius:0%;border:5px double;border-color:#ED5752;position:sticky;margin-top:3rem;border-radius:10px 10px 10px 10px;margin-bottom:0px;margin-left:7%;transform:none}.menu a{display:inline-block;position:absolute}.menu img{transform:scale(2)}.menu p{margin:0.3rem;font-size:13px}.menu img:hover{transform:scale(3)}a:nth-child(1){top:25px;left:7%}a:nth-child(2){top:25px;left:24%}a:nth-child(3){top:25px;left:41%}a:nth-child(4){top:25px;left:58%}a:nth-child(5){top:25px;left:75%}a:nth-child(6){top:25px;left:90%}}@media only screen and (max-width: 700px){.menu p{display:none}.menu{align-self:center}}.card{padding:15px;background-color:#DFE166;text-align:center}.card h2{color:#5D535E}.grid-container{display:grid;grid-template-columns:repeat(auto-fill, minmax(500px, 1fr));grid-gap:20px}
+html{height:100%}body{font:100% Helvetica,sans-serif;color:#F8F5F2;background-color:#000B29}*{-moz-box-sizing:border-box;box-sizing:border-box}a{color:#EDB83D;text-decoration:none}.date{margin-bottom:0}.slug{text-align:left;margin-bottom:2rem}.readmore{text-align:right}.readmore a{color:#F8F5F2;text-decoration:underline}.menugauche{position:fixed;max-width:100px}.menu img{max-width:20px;max-height:20px}.copyleft{display:inline-block;transform:rotate(180deg);padding-bottom:-15px}pre{white-space:pre-wrap;white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word}.toggle{background-color:#D70026;text-align:center;height:100px;width:100px;border-radius:50%;position:fixed;margin:140px;margin-left:110px;top:100px;bottom:0px;left:0px;right:0px}.toggle h2{margin-top:1.5em}.menu{background-color:#F8F5F2;height:100px;width:100px;transform:scale(0);border-radius:50%;border-style:double;border-color:#D70026;position:fixed;margin-top:140px;margin-left:110px;top:100px;bottom:0px;left:0px;right:0px;z-index:-1;transition:0.7s}.menu a{display:inline-block;position:fixed;font-size:15px;color:#000B29}.menu p{margin-top:-4px;font-size:5px}a:nth-child(1){top:3px;left:40px}a:nth-child(2){top:35px;left:7px}a:nth-child(3){top:67px;left:40px}a:nth-child(4){top:35px;left:69px}a:nth-child(6){top:15px;left:35px}.articles{margin-left:21rem;margin-top:5rem;margin-bottom:3rem;padding:0.5em;border:7px double;border-color:#F8F5F2;border-radius:10px 10px 10px 10px}.articles h1{color:#F8F5F2;text-align:center}.description{text-align:center;font-weight:200;font-style:italic;font-size:17px;padding-bottom:30px}.articles h2,h3,h4{color:#EDB83D}.pagination a{border:1px solid;border-color:#EDB83D;padding:3px;font-size:13px}.center{margin:auto;width:50%;padding:10px}.contact{text-align:center}footer{position:relative;bottom:0px;width:100%;text-align:center}@media only screen and (max-width: 768px){.articles{margin-left:3rem;position:relative}.toggle{display:none}.menugauche{max-width:unset;position:sticky;top:0px;z-index:5;width:100%}.menu{width:93%;height:5rem;border-radius:0%;border:5px double;border-color:#D70026;position:sticky;margin-top:3rem;border-radius:10px 10px 10px 10px;margin-bottom:0px;margin-left:7%;transform:none}.menu a{display:inline-block;position:absolute}.menu img{transform:scale(2)}.menu p{margin:0.3rem;font-size:13px}.menu img:hover{transform:scale(3)}a:nth-child(1){top:25px;left:20%}a:nth-child(2){top:25px;left:40%}a:nth-child(3){top:25px;left:60%}a:nth-child(4){top:25px;left:80%}}@media only screen and (max-width: 700px){.menu p{display:none}.menu{align-self:center}}.card{padding:15px;background-color:#F8F5F2;text-align:center}.card h2{color:#000B29}.grid-container{display:grid;grid-template-columns:repeat(auto-fill, minmax(500px, 1fr));grid-gap:20px}

public/js/menu.js

@@ -10,3 +10,17 @@ document.getElementById("menu").style.transform="scale(3)";
     i=0;
   }
 }
+
+var elemobfuscate = document.getElementsByClassName("obfuscate")
+for (elem of elemobfuscate) {
+    var tmp = elem.innerHTML;
+    tmp = tmp.replace("__at__", "@");
+    tmp = tmp.trim();
+    elem.innerHTML= tmp;
+    if (elem.nodeName === 'A') {
+        attr = document.createAttribute("href");
+        attr.value = "mailto:" + tmp;
+        elem.setAttributeNode(attr);
+    }
+
+}

public/les-logiciels-libres/index.html

@@ -38,19 +38,9 @@
       <p> RSS </p>
       </a>
 
-    <a href="mailto:kitoy__at__kitoy.me">
+    <a href="https:&#x2F;&#x2F;kitoy.me/contact/">
-      <img src="/img/mail.svg" alt="Mail" />
+      <img src="/img/mail.svg" alt="Contact" />
-      <p> Mail/XMPP </p>
+      <p> Me contacter </p>
-    </a>
-
-    <a href="https:&#x2F;&#x2F;mamot.fr&#x2F;@totoy">
-      <img src="/img/masto.svg" alt="Réseaux sociaux" />
-      <p> Mastodon </p>
-      </a>
-
-    <a href="https:&#x2F;&#x2F;gitlab.com&#x2F;totoy">
-      <img src="/img/gitlab.svg" alt="gitlab" />
-      <p> Coding </p>
     </a>
 
 </div>

public/plugins-firefox/index.html

@@ -38,19 +38,9 @@
       <p> RSS </p>
       </a>
 
-    <a href="mailto:kitoy__at__kitoy.me">
+    <a href="https:&#x2F;&#x2F;kitoy.me/contact/">
-      <img src="/img/mail.svg" alt="Mail" />
+      <img src="/img/mail.svg" alt="Contact" />
-      <p> Mail/XMPP </p>
+      <p> Me contacter </p>
-    </a>
-
-    <a href="https:&#x2F;&#x2F;mamot.fr&#x2F;@totoy">
-      <img src="/img/masto.svg" alt="Réseaux sociaux" />
-      <p> Mastodon </p>
-      </a>
-
-    <a href="https:&#x2F;&#x2F;gitlab.com&#x2F;totoy">
-      <img src="/img/gitlab.svg" alt="gitlab" />
-      <p> Coding </p>
     </a>
 
 </div>

public/sauvegarde-orangepi/index.html

@@ -38,19 +38,9 @@
       <p> RSS </p>
       </a>
 
-    <a href="mailto:kitoy__at__kitoy.me">
+    <a href="https:&#x2F;&#x2F;kitoy.me/contact/">
-      <img src="/img/mail.svg" alt="Mail" />
+      <img src="/img/mail.svg" alt="Contact" />
-      <p> Mail/XMPP </p>
+      <p> Me contacter </p>
-    </a>
-
-    <a href="https:&#x2F;&#x2F;mamot.fr&#x2F;@totoy">
-      <img src="/img/masto.svg" alt="Réseaux sociaux" />
-      <p> Mastodon </p>
-      </a>
-
-    <a href="https:&#x2F;&#x2F;gitlab.com&#x2F;totoy">
-      <img src="/img/gitlab.svg" alt="gitlab" />
-      <p> Coding </p>
     </a>
 
 </div>

public/sitemap.xml

@@ -13,6 +13,11 @@
             
         </url>
     
+        <url>
+            <loc>https://kitoy.me/contact/</loc>
+            
+        </url>
+    
         <url>
             <loc>https://kitoy.me/les-logiciels-libres/</loc>
             

sass/base.scss

@@ -1,298 +1,288 @@
-// kitoy <kitoy__at__kitoy.me>
+ // kitoy <kitoy__at__kitoy.me>
 
-@import "./color.scss";
+ @import "./color.scss";
 
-$font-stack:    Helvetica, sans-serif;
+ $font-stack:    Helvetica, sans-serif;
 
 
-html{
+ html{
-  height: 100%;
+   height: 100%;
-}
-
-
-body {
-    font: 100% $font-stack;
-    color: $color_lines;
-    background-color: $back;
-}
-
-* {-moz-box-sizing: border-box; box-sizing: border-box;}
-
-a {
-    color: $color_title;
-    text-decoration: none;
-}
-
-.date {
-  margin-bottom: 0;
-}
-
-.slug{
-  //margin-left: 1rem;
-  text-align: left;
-  margin-bottom: 2rem;
-}
-
-.readmore {
-  text-align: right;
-}
-
-.readmore  a {
-  color: $color_lines;
-  text-decoration: underline;
-}
-
-
-.menugauche {
-    position: fixed;
-    max-width: 100px;
-}
-
-.menu img {
-    max-width: 20px;
-    max-height: 20px;
-}
-
-.copyleft {
-  display:inline-block;
-  transform: rotate(180deg);
-  padding-bottom: -15px;
-}
-
-pre {
- white-space: pre-wrap;       /* css-3 */
- white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
- white-space: -pre-wrap;      /* Opera 4-6 */
- white-space: -o-pre-wrap;    /* Opera 7 */
- word-wrap: break-word;       /* Internet Explorer 5.5+ */
-}
-
-// By Francesca Vago
-.toggle {
-  background-color: $color_button;
-  text-align: center;
-  height: 100px;
-  width: 100px;
-  border-radius: 50%;
-  position: fixed;
-  margin: 140px;
-  margin-left: 110px;
-  top: 100px;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-}
-
-.toggle h2 {
-    margin-top : 1.5em;
-}
-
-.menu {
-  background-color: $color_lines;
-  height: 100px;
-  width: 100px;
-  transform: scale(0);
-  border-radius: 50%;
-  border-style: double;
-  border-color: $color_button;
-  position: fixed;
-  margin-top: 140px;
-  margin-left: 110px;
-  top: 100px;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  z-index: -1;
-  transition: 0.7s;
-}
-
-.menu a {
-  display: inline-block;
-  position: fixed;
-  font-size: 15px;
-  color: $back;
-}
-
-.menu p{
- margin-top: -4px;
- font-size: 5px;
-}
-
-//Blog
-a:nth-child(1){
-  top: 3px;
-  left: 43px;
-}
-
-//Musique
-a:nth-child(2){
-   top: 25px;
-   left: 69px;
-}
-
-//RSS
-a:nth-child(3){
-  top: 54px;
-  left: 65px;
-}
-
-//Mail
-a:nth-child(4){
-  top: 65px;
-  left: 35px;
-}
-
-//Masto
-a:nth-child(5){
-    top: 45px;
-    left: 7px;
-  }
-
-a:nth-child(6){
-    top: 15px;
-    left: 13px;
-  }
-
-.articles {
-  margin-left: 21rem;
-  margin-top: 5rem;
-  margin-bottom: 3rem;
-  padding:0.5em;
-  border: 7px double;
-  border-color: $color_lines;
-  border-radius: 10px 10px 10px 10px;
-}
-
-.articles h1 {
-  color: $color_lines;
-  text-align: center;
-}
-
-.description {
-  text-align: center;
-  font-weight: 200;
-  font-style: italic;
-  font-size: 17px;
-  padding-bottom: 30px;
-}
-
-
-.articles h2, h3, h4 {
-  color: $color_title;
-}
-
-.pagination a {
-  border: 1px solid;
-  border-color: $color_title;
-  padding: 3px;
-  font-size: 13px;
-}
-
-.center {
-  margin: auto;
-  width: 50%;
-  padding: 10px;
-}
-
-footer {
-  position: relative;
-  bottom:0px;
-  width: 100%;
-  text-align:center;
-}
-
-@media only screen and (max-width: 768px)
-{
-  .articles {
-    margin-left: 3rem;
-    position: relative;
-  }
-
-  .toggle {
-    display:none;
-  }
-
-  .menugauche {
-    max-width: unset;
-    position: sticky;
-    top: 0px;
-    z-index: 5;
-    width: 100%;
-  }
-
-  .menu {
-    width: 93%;
-    height: 5rem;
-    border-radius: 0%;
-    border: 5px double;
-    border-color: $color_button;
-    position: sticky;
-    margin-top: 3rem;
-    border-radius: 10px 10px 10px 10px;
-    margin-bottom: 0px;
-    margin-left: 7%;
-    transform: none;
-  }
-
-  .menu a {
-  display: inline-block;
-  position: absolute;
  }
 
-  .menu img {
+
-    transform: scale(2)
+ body {
+     font: 100% $font-stack;
+     color: $color_lines;
+     background-color: $back;
+ }
+
+
+ * {-moz-box-sizing: border-box; box-sizing: border-box;}
+
+
+ a {
+     color: $color_title;
+     text-decoration: none;
+ }
+
+ .date {
+   margin-bottom: 0;
+ }
+
+ .slug{
+   //margin-left: 1rem;
+   text-align: left;
+   margin-bottom: 2rem;
+ }
+
+ .readmore {
+   text-align: right;
+ }
+
+ .readmore  a {
+   color: $color_lines;
+   text-decoration: underline;
+ }
+
+
+ .menugauche {
+     position: fixed;
+     max-width: 100px;
+ }
+
+ .menu img {
+     max-width: 20px;
+     max-height: 20px;
+ }
+
+ .copyleft {
+   display:inline-block;
+   transform: rotate(180deg);
+   padding-bottom: -15px;
+ }
+
+ pre {
+  white-space: pre-wrap;       /* css-3 */
+  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
+  white-space: -pre-wrap;      /* Opera 4-6 */
+  white-space: -o-pre-wrap;    /* Opera 7 */
+  word-wrap: break-word;       /* Internet Explorer 5.5+ */
+ }
+
+ // By Francesca Vago
+ .toggle {
+   background-color: $color_button;
+   text-align: center;
+   height: 100px;
+   width: 100px;
+   border-radius: 50%;
+   position: fixed;
+   margin: 140px;
+   margin-left: 110px;
+   top: 100px;
+   bottom: 0px;
+   left: 0px;
+   right: 0px;
+ }
+
+ .toggle h2 {
+     margin-top : 1.5em;
+ }
+
+ .menu {
+   background-color: $color_lines;
+   height: 100px;
+   width: 100px;
+   transform: scale(0);
+   border-radius: 50%;
+   border-style: double;
+   border-color: $color_button;
+   position: fixed;
+   margin-top: 140px;
+   margin-left: 110px;
+   top: 100px;
+   bottom: 0px;
+   left: 0px;
+   right: 0px;
+   z-index: -1;
+   transition: 0.7s;
+ }
+
+ .menu a {
+   display: inline-block;
+   position: fixed;
+   font-size: 15px;
+   color: $back;
+ }
+
+ .menu p{
+  margin-top: -4px;
+  font-size: 5px;
+ }
+
+ //Blog
+ a:nth-child(1){
+   top: 3px;
+   left: 40px;
+ }
+
+ //Musique
+ a:nth-child(2){
+    top: 35px;
+    left: 7px;
+ }
+
+ //RSS
+ a:nth-child(3){
+   top: 67px;
+   left: 40px;
+ }
+
+ //contact
+ a:nth-child(4){
+   top: 35px;
+   left: 69px;
+ }
+
+
+ a:nth-child(6){
+     top: 15px;
+     left: 35px;
+   }
+
+ .articles {
+   margin-left: 21rem;
+   margin-top: 5rem;
+   margin-bottom: 3rem;
+   padding:0.5em;
+   border: 7px double;
+   border-color: $color_lines;
+   border-radius: 10px 10px 10px 10px;
+ }
+
+ .articles h1 {
+   color: $color_lines;
+   text-align: center;
+ }
+
+ .description {
+   text-align: center;
+   font-weight: 200;
+   font-style: italic;
+   font-size: 17px;
+   padding-bottom: 30px;
+ }
+
+ .articles h2, h3, h4 {
+   color: $color_title;
+ }
+
+ .pagination a {
+   border: 1px solid;
+   border-color: $color_title;
+   padding: 3px;
+   font-size: 13px;
+ }
+
+ .center {
+   margin: auto;
+   width: 50%;
+   padding: 10px;
+ }
+
+ .contact{
+     text-align:center;
+ }
+
+ footer {
+   position: relative;
+   bottom:0px;
+   width: 100%;
+   text-align:center;
+ }
+
+ @media only screen and (max-width: 768px)
+ {
+   .articles {
+     margin-left: 3rem;
+     position: relative;
+   }
+
+   .toggle {
+     display:none;
+   }
+
+   .menugauche {
+     max-width: unset;
+     position: sticky;
+     top: 0px;
+     z-index: 5;
+     width: 100%;
+   }
+
+   .menu {
+     width: 93%;
+     height: 5rem;
+     border-radius: 0%;
+     border: 5px double;
+     border-color: $color_button;
+     position: sticky;
+     margin-top: 3rem;
+     border-radius: 10px 10px 10px 10px;
+     margin-bottom: 0px;
+     margin-left: 7%;
+     transform: none;
+   }
+
+   .menu a {
+   display: inline-block;
+   position: absolute;
   }
 
-  .menu p{
+   .menu img {
-    margin:0.3rem;
+     transform: scale(2)
-    font-size: 13px
+   }
-  }
 
-  .menu img:hover{
+   .menu p {
-    transform: scale(3);
+     margin:0.3rem;
-  }
+     font-size: 13px
+   }
 
-  a:nth-child(1){
+   .menu img:hover{
-    top: 25px;
+     transform: scale(3);
-    left: 7%;
+   }
-}
 
-a:nth-child(2){
+   a:nth-child(1){
-  top: 25px;
+     top: 25px;
-  left: 24%;
+     left: 20%;
-}
+ }
 
-a:nth-child(3){
+   a:nth-child(2){
-  top: 25px;
+       top: 25px;
-  left: 41%;
+       left: 40%;
-}
+   }
 
-a:nth-child(4){
+   a:nth-child(3){
-  top: 25px;
+       top: 25px;
-  left: 58%;
+       left: 60%;
-}
+   }
 
-a:nth-child(5){
+   a:nth-child(4){
-    top: 25px;
+       top: 25px;
-    left: 75%;
+       left: 80%;
-  }
+   }
 
-a:nth-child(6){
+ }
-    top: 25px;
-    left: 90%;
-  }
-
-}
 
 
 
-@media only screen and (max-width: 700px){
+ @media only screen and (max-width: 700px){
-  .menu p{
+   .menu p{
-    display:none;
+     display:none;
-  }
+   }
 
-  .menu {
+   .menu {
-    align-self: center;
+     align-self: center;
-   // margin-right: 0rem;
+    // margin-right: 0rem;
-  }
+   }
-}
+ }

sass/color.scss

@@ -5,15 +5,14 @@ $color_button: #FBCD4B;
 $back: #282623;*/
 
 /* Hiver */
-/*
+
 $color_lines: #F8F5F2;
 $color_title: #EDB83D;
 $color_button: #D70026;
 $back: #000B29;
-*/
 /* Printemps */
 
-$color_lines: #DFE166;
+// $color_lines: #DFE166;
-$color_title: #9A9EAB;
+// $color_title: #9A9EAB;
-$color_button: #ED5752;
+// $color_button: #ED5752;
-$back: #5D535E;
+// $back: #5D535E;

static/js/menu.js

@@ -10,3 +10,17 @@ document.getElementById("menu").style.transform="scale(3)";
     i=0;
   }
 }
+
+var elemobfuscate = document.getElementsByClassName("obfuscate")
+for (elem of elemobfuscate) {
+    var tmp = elem.innerHTML;
+    tmp = tmp.replace("__at__", "@");
+    tmp = tmp.trim();
+    elem.innerHTML= tmp;
+    if (elem.nodeName === 'A') {
+        attr = document.createAttribute("href");
+        attr.value = "mailto:" + tmp;
+        elem.setAttributeNode(attr);
+    }
+
+}

templates/partials/menu.html

@@ -20,19 +20,9 @@
       <p> RSS </p>
       </a>
 
-    <a href="mailto:{{ config.extra.mail }}">
+    <a href="{{ config.base_url }}/contact/">
-      <img src="/img/mail.svg" alt="Mail" />
+      <img src="/img/mail.svg" alt="Contact" />
-      <p> Mail/XMPP </p>
+      <p> Me contacter </p>
-    </a>
-
-    <a href="{{ config.extra.mastodon }}">
-      <img src="/img/masto.svg" alt="Réseaux sociaux" />
-      <p> Mastodon </p>
-      </a>
-
-    <a href="{{ config.extra.gitlab }}">
-      <img src="/img/gitlab.svg" alt="gitlab" />
-      <p> Coding </p>
     </a>
 
 </div>