kazhnuz
/
kazhnuz.css
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

improvement: more flexible containers

This commit is contained in:
Kazhnuz Klappsthul 2021-07-30 11:47:43 +02:00
parent 048ce90daf
commit 70b5779844
8 changed files with 28 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/scss/core/_containers.scss
View File

@ -3,11 +3,9 @@
} }
.container-big { .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;
} }

2
src/scss/custom/_blog.scss
View File

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

2
src/scss/custom/_footer.scss
View File

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

2
src/scss/custom/_header.scss
View File

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

2
src/scss/custom/_personnage.scss
View File

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

2
src/scss/custom/_previews.scss
View File

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

16
src/scss/definitions/_sizing.scss
View File

@ -8,3 +8,19 @@ $lineheight_half: $lineheight/2;
$lineheight_quarter: $lineheight/4; $lineheight_quarter: $lineheight/4;
$card-header-margin: $lineheight; $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;

24
src/scss/mixins/_responsive.scss
View File

@ -1,21 +1,5 @@
// MIXINS RESPONSIVES // 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 // Small devices
@mixin sm { @mixin sm {
@media (min-width: #{$screen-sm-min}) { @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; margin:auto;
} }