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 {
@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);
}

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

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

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

@ -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;

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

@ -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:

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

@ -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;

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

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

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

@ -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;

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

@ -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;
}