🎨 more style, links fix

templates/styles_src/style_general.scss

@@ -57,23 +57,24 @@ body {
 }
 
 /*  Improve media defaults */
-.content{
+.content {
   font-size: 1.2rem;
 
-    img,
-    picture,
-    video,
-    canvas,
-    svg {
-      display: block;
-      margin-top: 1rem;
-      margin-bottom: 1rem;
-      max-width: 100%;
-      width: 100%;
-    }
+  img,
+  picture,
+  video,
+  canvas,
+  svg {
+    width: 75ch;
+    display: block;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    max-width: 100%;
+  }
 }
-pre, .sourceCode{
-  overflow:auto;
+pre,
+.sourceCode {
+  overflow: auto;
 }
 
 // ancres
@@ -89,14 +90,27 @@ a {
     color: #dedede;
   }
 
-
   .nav &,
-  .page__index &{
-      padding: 0.55rem 2rem;
-      display:block;
-      margin-right: 1rem;
-      margin-bottom: 1rem;
-      }
+  
+  .page__index & {
+    padding: 0.55rem 2rem;
+    display: block;
+    margin-right: 1rem;
+    margin-bottom: 1rem;
+  }
+  .site-footer &{
+    margin: 0 1rem;
+    text-decoration: underline;
+  }
+
+}
+a img{
+  transition: 0.25s box-shadow ease-out;
+  &:hover{
+
+    box-shadow: 0 0 1rem #ccc;
+    transition: 0.25s all ease-in;
+  }
 }
 
 input,
@@ -106,7 +120,7 @@ select {
   font: inherit;
 }
 p {
-    overflow-wrap: break-word;
+  overflow-wrap: break-word;
   text-wrap: pretty;
   margin-top: 1.5rem;
   margin-bottom: 1rem;
@@ -134,7 +148,7 @@ h3,
 h4,
 h5,
 h6 {
-    overflow-wrap: break-word;
+  overflow-wrap: break-word;
   text-wrap: balance;
   line-height: 1.3em;
 }
@@ -159,36 +173,49 @@ ul {
 li {
   margin-bottom: 1em;
   #tags_page & {
-      display:inline;
-      }
-  a{
-      display:inline-block;
-      margin-right: 1em;
-      }
+    display: inline;
+  }
+  a {
+    display: inline-block;
+    margin-right: 1em;
+  }
 }
 
 // balise crée par pandoc
 #title-block-header {
   display: none;
 }
-.navbar-brand{
-    display:blog;
-    text-align: left;
-    }
-.navbar-start{
-> .navbar-item{
-
-    float:left;
-
-    }
-    }
+.navbar-brand {
+  visibility: hidden;
+  text-align: left;
+}
+.navbar-start {
+  > .navbar-item {
+    float: left;
+  }
+}
 .navbar-menu {
   img {
-
     width: 2rem;
     height: 2rem;
     margin-right: 1rem;
   }
+  a {
+    margin: 0 1rem;
+    text-decoration: underline;
+  }
+}
+#recherche{
+
+  margin-top: 1.5rem;
+  margin-bottom: 1.5rem;
+  float: right;
+  input{
+    background: transparent;
+    padding: 0.5rem;
+    border: solid 1px #555;
+    border-radius: 0.5rem;
+  }
 }
 
 #masthead {
@@ -201,44 +228,64 @@ li {
     padding: 1rem;
   }
 }
-.header-image{
+.header-image {
   padding: 1rem;
+  background-position: center;
+  background-size: cover;
 }
 .blog-title,
 .blog-subtitle {
   margin: 1rem;
+  color: #fff;
+  text-shadow: 0 0 1rem #555;
 }
 
+#page {
+  background: #f4f4f4;
+}
 
-#page{
-    background: #CCC;
-    }
-
-.body-wrap{
-    background: #FFF;
-    padding: 5% 6%;
-    margin-bottom: 5%;
-    margin-top:1rem;
-    }
+.body-wrap {
+  background: #fff;
+  padding: 5% 6%;
+  margin-bottom: 5%;
+  margin-top: 1rem;
+  border-radius: 1rem;
+  margin-top: 7rem;
+}
 
 .content {
-  min-height: 50rem;
+  min-height: 15rem;
+  
+}
+.after-article{
+  border-top: 1px solid #dedede;
+  padding: 1rem;
 }
 
-.site-footer{
+
+.site-footer {
   min-height: 20vh;
   padding: 2rem;
   background: #aaa;
   color: #dedede;
 }
 
-.body-wrap{
-  .site-header{
-    display:none;
+.body-wrap {
+  .site-header {
+    display: none;
+  }
+}
+
+#tags_page {
+  li {
+    margin-right: 2ch;
+    a {
+      margin-right: 1ch;
+    }
   }
 }
 @media (max-width: 75ch) {
-  body{
+  body {
     padding: 0;
   }
   main {