From ef5483dd7edfe0d721699bd05e7519703e22bd37 Mon Sep 17 00:00:00 2001
From: Kazhnuz <kazhnuz@kobold.cafe>
Date: Mon, 10 Jun 2024 21:44:34 +0200
Subject: [PATCH] fix(css): ameliore responsive

---
 css/style.css                 | 63 ++++++++++++++++++++++-------------
 scss/core/_containers.scss    |  8 -----
 scss/custom/_global.scss      | 21 ++++++++++--
 scss/custom/_mobile.scss      | 18 +++++++---
 scss/definitions/_sizing.scss |  5 +--
 scss/mixins/_responsive.scss  |  7 ++++
 6 files changed, 81 insertions(+), 41 deletions(-)

diff --git a/css/style.css b/css/style.css
index 4ce631c..52cef6e 100755
--- a/css/style.css
+++ b/css/style.css
@@ -212,18 +212,6 @@ pre {
 #wrapper {
   background-color: #FDF7E7; }
 
-.container-big {
-  padding-left: 1.6rem;
-  padding-right: 1.6rem;
-  max-width: 1600px;
-  margin: auto; }
-
-.container, .container-onecolumn {
-  padding-left: 1.6rem;
-  padding-right: 1.6rem;
-  max-width: 1200px;
-  margin: auto; }
-
 .icon {
   display: inline-block;
   width: 1em;
@@ -1204,12 +1192,15 @@ header h1 {
   font-style: oblique;
   padding: 0rem;
   line-height: 1rem;
-  max-width: 1200px;
+  max-width: 992px;
   margin: auto;
   text-align: center; }
   @media (min-width: 1200px) {
     header h1 {
       text-align: left; } }
+  @media (min-width: 1400px) {
+    header h1 {
+      max-width: 1200px; } }
   header h1 img {
     max-width: 560px;
     height: auto;
@@ -1245,16 +1236,21 @@ header h1 {
 .dropdown-menu {
   box-shadow: 0px 1px 2px rgba(0, 0, 0, 0), inset 0px -2px 0px rgba(0, 0, 0, 0); }
 
-.container-big {
+.container, .container-big {
   padding-left: 1.6rem;
   padding-right: 1.6rem;
-  max-width: 1200px;
+  max-width: 800px;
   margin: auto; }
-
+  @media (min-width: 992px) {
+    .container, .container-big {
+      max-width: 992px; } }
+  @media (min-width: 1400px) {
+    .container, .container-big {
+      max-width: 1200px; } }
 .container-blog {
   padding-left: 1.6rem;
   padding-right: 1.6rem;
-  max-width: 1200px;
+  max-width: 800px;
   margin: auto;
   display: grid;
   grid-template-columns: 1fr;
@@ -1264,8 +1260,17 @@ header h1 {
   grid-template-areas: "main" "side"; }
   @media (min-width: 992px) {
     .container-blog {
-      grid-template-columns: auto 320px;
+      max-width: 992px; } }
+  @media (min-width: 1400px) {
+    .container-blog {
+      max-width: 1200px; } }
+  @media (min-width: 992px) {
+    .container-blog {
+      grid-template-columns: auto 280px;
       grid-template-areas: "main side"; } }
+  @media (min-width: 1600px) {
+    .container-blog {
+      grid-template-columns: auto 320px; } }
 .grid-2-elements {
   display: grid;
   grid-template-columns: 1fr;
@@ -1294,7 +1299,7 @@ ul.tag-list {
 .container-preview {
   padding-left: 1.6rem;
   padding-right: 1.6rem;
-  max-width: 1200px;
+  max-width: 800px;
   margin: auto;
   display: grid;
   grid-template-columns: 1fr;
@@ -1302,6 +1307,12 @@ ul.tag-list {
   row-gap: 1.6rem;
   column-gap: 3rem;
   grid-template-areas: "main" "side"; }
+  @media (min-width: 992px) {
+    .container-preview {
+      max-width: 992px; } }
+  @media (min-width: 1400px) {
+    .container-preview {
+      max-width: 1200px; } }
   @media (min-width: 992px) {
     .container-preview {
       grid-template-columns: 360px auto;
@@ -1697,7 +1708,10 @@ iframe {
 
 html {
   margin-left: 0; }
-  @media (min-width: 992px) {
+  @media (min-width: 1200px) {
+    html {
+      margin-left: 280px; } }
+  @media (min-width: 1600px) {
     html {
       margin-left: 320px; } }
 #searchfield {
@@ -1709,7 +1723,7 @@ html {
   position: fixed;
   top: 0;
   left: -100vw;
-  width: 320px;
+  width: 280px;
   height: 100vh;
   transition: left 0.2s;
   padding: 1rem;
@@ -1718,9 +1732,12 @@ html {
   box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.6); }
   #mobile-sidebar.shown {
     left: 0; }
-  @media (min-width: 992px) {
+  @media (min-width: 1200px) {
     #mobile-sidebar {
       left: 0; } }
+  @media (min-width: 1600px) {
+    #mobile-sidebar {
+      width: 320px; } }
 img.myavatar {
   height: 140px;
   width: auto;
@@ -1750,6 +1767,6 @@ img.myavatar {
   z-index: 12; }
   .menu-button:hover {
     background-color: #CB357D; }
-  @media (min-width: 992px) {
+  @media (min-width: 1200px) {
     .menu-button {
       display: none; } }
diff --git a/scss/core/_containers.scss b/scss/core/_containers.scss
index d36380f..d262240 100644
--- a/scss/core/_containers.scss
+++ b/scss/core/_containers.scss
@@ -1,11 +1,3 @@
 #wrapper {
     background-color: $color-background;
 }
-
-.container-big {
-    @include container($container-size-large, $lineheight);
-}
-
-.container, .container-onecolumn {
-    @include container($container-size, $lineheight);
-}
diff --git a/scss/custom/_global.scss b/scss/custom/_global.scss
index 0fbe9f4..0f96ee4 100644
--- a/scss/custom/_global.scss
+++ b/scss/custom/_global.scss
@@ -7,8 +7,15 @@
 @mixin container-big() {
     padding-left: $lineheight;
     padding-right: $lineheight;
-    max-width: $container-size;
+    max-width: 800px;
     margin:auto;
+    @include lg() {
+      max-width: $container-size;
+    }
+  
+    @include xlbis() {
+      max-width: $container-size-large;
+    }
 }
 
 .no-pills {
@@ -97,6 +104,10 @@ header h1 {
       text-align: left;
     }
 
+    @include xlbis() {
+      max-width: $container-size-large;
+    }
+
     img {
       max-width: 560px;
       height: auto;
@@ -143,7 +154,7 @@ header h1 {
     box-shadow: $narrow-shadow, $inset-shadow;
 }
 
-.container-big {
+.container, .container-big {
     @include container-big();
 }
 
@@ -160,9 +171,13 @@ header h1 {
     "side";
 
     @include lg() {
-      grid-template-columns: auto 320px;
+      grid-template-columns: auto 280px;
       grid-template-areas: "main side";
     }
+
+    @include xxl() {
+      grid-template-columns: auto 320px;
+    }
 }
 
 .grid-2-elements {
diff --git a/scss/custom/_mobile.scss b/scss/custom/_mobile.scss
index 4992fa3..d381c26 100644
--- a/scss/custom/_mobile.scss
+++ b/scss/custom/_mobile.scss
@@ -1,7 +1,11 @@
 html {
   margin-left:0;
-  @include lg() {
-    margin-left:320px;
+  @include xl() {
+    margin-left:280px;
+  }
+
+  @include xxl() {
+    margin-left: 320px;
   }
 }
 
@@ -16,7 +20,7 @@ html {
   position: fixed;
   top:0;
   left:-100vw;
-  width: 320px;
+  width: 280px;
   height:100vh;
   transition: left 0.2s;
   padding: 1rem;
@@ -25,10 +29,14 @@ html {
     left:0;
   }
 
-  @include lg() {
+  @include xl() {
     left:0;
   }
 
+  @include xxl() {
+    width: 320px;
+  }
+
   z-index:10;
   box-shadow: 0px 0px 3px 1px rgba(0,0,0,0.6);
 }
@@ -67,7 +75,7 @@ img.myavatar {
     background-color: $color-primary;
   }
 
-  @include lg() {
+  @include xl() {
     display: none;
   }
 }
\ No newline at end of file
diff --git a/scss/definitions/_sizing.scss b/scss/definitions/_sizing.scss
index 0dfe0e5..18639f3 100644
--- a/scss/definitions/_sizing.scss
+++ b/scss/definitions/_sizing.scss
@@ -28,8 +28,9 @@ $screen-sm-min: 576px;
 $screen-md-min: 768px;
 $screen-lg-min: 992px;
 $screen-xl-min: 1200px;
+$screen-xlbis-min: 1400px;
 $screen-xxl-min: 1600px;
 
 // Containers size
-$container-size: $screen-xl-min;
-$container-size-large: $screen-xxl-min;
+$container-size: $screen-lg-min;
+$container-size-large: $screen-xl-min;
\ No newline at end of file
diff --git a/scss/mixins/_responsive.scss b/scss/mixins/_responsive.scss
index 2a423a8..e65eebc 100644
--- a/scss/mixins/_responsive.scss
+++ b/scss/mixins/_responsive.scss
@@ -28,6 +28,13 @@
    }
 }
 
+// Extra large devices
+@mixin xlbis {
+   @media (min-width: #{$screen-xlbis-min}) {
+      @content;
+   }
+}
+
 // Extra large desktops
 @mixin xxl {
    @media (min-width: #{$screen-xxl-min}) {