created grid system and used it for home
This commit is contained in:
@@ -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"]{
|
||||
|
||||
Reference in New Issue
Block a user