improvement: more flexible containers

src/scss/core/_containers.scss

@@ -3,11 +3,9 @@
 }
 
 .container-big {
-    @include container-big();
+    @include container($container-size-large, $lineheight);
 }
 
-.container-onecolumn {
+.container, .container-onecolumn {
-    max-width:1280px;
+    @include container($container-size, $lineheight);
-    margin: auto;
-    padding-bottom: $lineheight;
 }

src/scss/custom/_blog.scss

@@ -5,7 +5,7 @@
 /** Layout **/
 
 .container-blog {
-    @include container-big();
+    @include container($container-size-large, $lineheight);
 
     display: grid;
     grid-template-columns: 1fr;

src/scss/custom/_footer.scss

@@ -18,7 +18,7 @@ footer {
     padding-bottom:$lineheight;
 
     .footer-collumns {
-      @include container-big();
+      @include container($container-size-large, $lineheight);
       display: grid;
       grid-template-columns: 1fr;
       grid-template-rows: auto;

src/scss/custom/_header.scss

@@ -9,7 +9,7 @@
     padding-bottom:$lineheight*2;
 
     .header-collumns {
-      @include container-big();
+      @include container($container-size-large, $lineheight);
       display: grid;
       grid-template-columns: 1fr;
       grid-template-areas:

src/scss/custom/_personnage.scss

@@ -3,7 +3,7 @@
 **/
 
 .container-personnage {
-    @include container-big();
+    @include container($container-size-large, $lineheight);
     display: grid;
     grid-template-columns: repeat(6, 1fr);
     grid-template-rows: auto;

src/scss/custom/_previews.scss

@@ -3,7 +3,7 @@
 **/
 
 .container-preview {
-    @include container-big();
+    @include container($container-size-large, $lineheight);
 
     display: grid;
     grid-template-columns: 1fr;

src/scss/definitions/_sizing.scss

@@ -8,3 +8,19 @@ $lineheight_half: $lineheight/2;
 $lineheight_quarter: $lineheight/4;
 
 $card-header-margin: $lineheight;
+
+// Responsives sizes
+// - sm : Small tablets and large smartphones (landscape view)
+// - md : Small tablets (portrait view)
+// - lg : Tablets and small desktops
+// - xl : Large tablets and desktops
+// - xxl : Very large desktops
+$screen-sm-min: 576px;
+$screen-md-min: 768px;
+$screen-lg-min: 992px;
+$screen-xl-min: 1200px;
+$screen-xxl-min: 1600px;
+
+// Containers size
+$container-size: $screen-xl-min;
+$container-size-large: $screen-xxl-min;

src/scss/mixins/_responsive.scss

@@ -1,21 +1,5 @@
 // MIXINS RESPONSIVES
 
-// Small tablets and large smartphones (landscape view)
-$screen-sm-min: 576px;
-
-// Small tablets (portrait view)
-$screen-md-min: 768px;
-
-// Tablets and small desktops
-$screen-lg-min: 992px;
-
-// Large tablets and desktops
-$screen-xl-min: 1200px;
-
-// Very large desktops
-$screen-xxl-min: 1600px;
-
-
 // Small devices
 @mixin sm {
    @media (min-width: #{$screen-sm-min}) {
@@ -58,9 +42,9 @@ $screen-xxl-min: 1600px;
    }
 }
 
-@mixin container-big() {
+@mixin container($size, $padding) {
-    padding-left: $lineheight;
+    padding-left: $padding;
-    padding-right: $lineheight;
+    padding-right: $padding;
-    max-width: 1600px;
+    max-width: $size;
     margin:auto;
 }