diff --git a/src/scss/core/_containers.scss b/src/scss/core/_containers.scss index d709633..d36380f 100644 --- a/src/scss/core/_containers.scss +++ b/src/scss/core/_containers.scss @@ -3,11 +3,9 @@ } .container-big { - @include container-big(); + @include container($container-size-large, $lineheight); } -.container-onecolumn { - max-width:1280px; - margin: auto; - padding-bottom: $lineheight; +.container, .container-onecolumn { + @include container($container-size, $lineheight); } diff --git a/src/scss/custom/_blog.scss b/src/scss/custom/_blog.scss index 39ad03c..0815b5a 100644 --- a/src/scss/custom/_blog.scss +++ b/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; diff --git a/src/scss/custom/_footer.scss b/src/scss/custom/_footer.scss index cb4cdfe..aa580a4 100644 --- a/src/scss/custom/_footer.scss +++ b/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; diff --git a/src/scss/custom/_header.scss b/src/scss/custom/_header.scss index 8d6f4ba..b9f4bb0 100644 --- a/src/scss/custom/_header.scss +++ b/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: diff --git a/src/scss/custom/_personnage.scss b/src/scss/custom/_personnage.scss index cfb9df0..ee19568 100644 --- a/src/scss/custom/_personnage.scss +++ b/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; diff --git a/src/scss/custom/_previews.scss b/src/scss/custom/_previews.scss index c144ddd..1682d8b 100644 --- a/src/scss/custom/_previews.scss +++ b/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; diff --git a/src/scss/definitions/_sizing.scss b/src/scss/definitions/_sizing.scss index e6342b5..b26741b 100644 --- a/src/scss/definitions/_sizing.scss +++ b/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; diff --git a/src/scss/mixins/_responsive.scss b/src/scss/mixins/_responsive.scss index d711d4c..9619add 100644 --- a/src/scss/mixins/_responsive.scss +++ b/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() { - padding-left: $lineheight; - padding-right: $lineheight; - max-width: 1600px; +@mixin container($size, $padding) { + padding-left: $padding; + padding-right: $padding; + max-width: $size; margin:auto; }