fix: responsives fixes

Fixes #13

_includes/layouts/parent.njk

@@ -36,13 +36,12 @@
 					class="myavatar" />
 			</picture>
 			<h1 class="align-center text-light sr-only">Menu du site</h1>
-			<div class="mb-1">
+			<div class="mb-half">
 				<div>
 					<label for="search-input" class="sr-only">Formulaire de recherche</label>
 					<input class="form-control" id="search-input" type="search" placeholder="Rechercher sur le blog" aria-label="Rechercher sur le blog" value="" name="s" id="s" />
 				</div>
 			</div>
-			<h2 class="sr-only">Menu principal</h2>
 			<ul>
 				<li>
 					<a href="/" class="menu-item">

public/css/index.css

@@ -32,7 +32,9 @@ html {
   font-weight: 400;
   box-sizing: border-box;
   -webkit-text-size-adjust: 100%; }
-
+  @media (max-width: 1366px) and (max-height: 768px) {
+    html {
+      font-size: 4.25mm; } }
 body {
   margin: 0;
   overflow-x: hidden;
@@ -1205,7 +1207,7 @@ header h1 {
   max-width: 1200px;
   margin: auto;
   text-align: center; }
-  @media (min-width: 992px) {
+  @media (min-width: 1200px) {
     header h1 {
       text-align: left; } }
   header h1 img {
@@ -1214,10 +1216,10 @@ header h1 {
     margin-top: 0rem;
     width: 100%;
     z-index: 0; }
-    @media (min-width: 992px) {
+    @media (min-width: 1200px) {
       header h1 img {
         position: relative;
-        left: -6rem; } }
+        left: -4rem; } }
   header h1 a, header h1 a:visited, header h1 a:hover {
     background-color: transparent;
     outline-color: white;
@@ -1711,7 +1713,7 @@ html {
   height: 100vh;
   transition: left 0.2s;
   padding: 1rem;
-  overflow: scroll;
+  overflow: hidden;
   z-index: 10;
   box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.6); }
   #mobile-sidebar.shown {
@@ -1727,7 +1729,10 @@ img.myavatar {
   border: 3px solid #FDF7E7;
   box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.5);
   border-radius: 8px; }
-
+  @media (max-width: 1366px) and (max-height: 768px) {
+    img.myavatar {
+      height: 128px;
+      margin: 0.25rem auto 1rem auto; } }
 .menu-button {
   position: fixed;
   bottom: 24px;

scss/core/_bases.scss

@@ -9,6 +9,9 @@ html {
   font-family: $basefont;
   text-align: left;
   font-size: $fontsize;
+  @include old() {
+    font-size: $fontsize-small;
+  }
   line-height: $lineheight;
   font-weight: $fontweight_base;
 

scss/custom/_global.scss

@@ -93,7 +93,7 @@ header h1 {
     margin: auto;
     text-align:center;
 
-    @include lg() {
+    @include xl() {
       text-align: left;
     }
 
@@ -103,9 +103,9 @@ header h1 {
       margin-top:0rem;
       width: 100%;
 
-      @include lg() {
+      @include xl() {
         position: relative;
-        left:-6rem;
+        left:-4rem;
       }
       z-index:0;
     }

scss/custom/_mobile.scss

@@ -20,7 +20,7 @@ html {
   height:100vh;
   transition: left 0.2s;
   padding: 1rem;
-  overflow: scroll;
+  overflow: hidden;
   &.shown {
     left:0;
   }
@@ -41,6 +41,10 @@ img.myavatar {
   border: 3px solid $color-background;
   box-shadow: 0px 2px 3px 1px rgba(0, 0, 0, 0.5);
   border-radius: 8px;
+  @include old() {
+    height: 128px;
+    margin: 0.25rem auto 1rem auto;
+  }
 }
 
 .menu-button {

scss/definitions/_fonts.scss

@@ -2,6 +2,7 @@
 // Define how looks the text
 
 $fontsize: 4.5mm;
+$fontsize-small:4.25mm;
 
 $fontweight_big: 300;
 $fontweight_base: 400;

scss/mixins/_responsive.scss

@@ -35,6 +35,13 @@
    }
 }
 
+// Old desktop
+@mixin old {
+   @media (max-width: 1366px) and (max-height: 768px) {
+      @content;
+   }
+}
+
 // Custom devices
 @mixin rwd($screen) {
    @media (min-width: $screen+'px' ) {