created grid system and used it for home

This commit is contained in:
Bachir Soussi Chiadmi
2018-01-07 19:11:27 +01:00
parent 898b06f049
commit 74f5373096
8 changed files with 969 additions and 14 deletions
@@ -8,6 +8,7 @@
@import 'base/reset';
@import 'base/colors';
@import 'base/grid';
@import 'base/layout';
// header
@@ -93,13 +94,25 @@ header[role="banner"]{
}
// main
// main[role="main"]{
// .layout-content{
// p{
// white-space:normal;
// }
// }
// }
main[role="main"]{
.layout-content{
.row{
height:100%;
overflow: hidden;
.col{
max-height: 100%;
position: relative;
}
.col>*{
border-top: 1px solid red;
border-bottom: 1px solid red;
background-color: $transparent-bg;
max-height: 100%;
}
}
}
}
#agenda{
pointer-events: auto;
@@ -0,0 +1,49 @@
// http://www.thesassway.com/intermediate/simple-grid-mixins
$default_gap: 1em;
$default_sum: 12;
@mixin row() {
font-size: 0;
white-space: nowrap;
position: relative;
}
%col-reset {
width: 100%;
display: inline-block;
font-size: 16px;
box-sizing: border-box;
white-space:normal;
}
@mixin col($col, $offset: 0, $sum: $default_sum, $gap: $default_gap, $align: top) {
@extend %col-reset;
padding-left: $gap*$offset;
padding-right: $gap;
&:last-child{padding-right: 0;}
margin-left: percentage(($col/$sum)*$offset);
@media only screen and (min-width: 768px) {
width: percentage($col/$sum);
vertical-align: $align;
}
}
.row{
@include row;
}
@for $c from 1 through $default_sum {
.col-#{$c} {
@include col($c);
}
}
@for $c from 1 through $default_sum - 1 {
@for $o from 1 through $default_sum - $c {
.col-#{$c}-offset-#{$o} {
@include col($c, $o);
}
}
}
@@ -32,13 +32,13 @@ main[role="main"]{
padding:7em 2em 9em;
width:100%; height:100%;
overflow: hidden;
.layout-content>*{
pointer-events: auto;
}
.layout-content, .region-content, #block-edlptheme-content{
.layout-content{
width: 100%; height:100%;
overflow:hidden;
}
.layout-content>*{
pointer-events: auto;
}
}
footer[role="contentinfo"]{