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
@@ -14,6 +14,9 @@
$('.os-scroll').overlayScrollbars({
overflowBehavior:{x:'h',y:'scroll'}
});
// $('.row .col>*', 'main[role="main"]').overlayScrollbars({
// overflowBehavior:{x:'h',y:'scroll'}
// });
};
function initAjaxLinks(){
@@ -11,6 +11,877 @@ a, a:focus, a:active {
a:focus {
-moz-outline-style: none; }
.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12, .col-1-offset-1, .col-1-offset-2, .col-1-offset-3, .col-1-offset-4, .col-1-offset-5, .col-1-offset-6, .col-1-offset-7, .col-1-offset-8, .col-1-offset-9, .col-1-offset-10, .col-1-offset-11, .col-2-offset-1, .col-2-offset-2, .col-2-offset-3, .col-2-offset-4, .col-2-offset-5, .col-2-offset-6, .col-2-offset-7, .col-2-offset-8, .col-2-offset-9, .col-2-offset-10, .col-3-offset-1, .col-3-offset-2, .col-3-offset-3, .col-3-offset-4, .col-3-offset-5, .col-3-offset-6, .col-3-offset-7, .col-3-offset-8, .col-3-offset-9, .col-4-offset-1, .col-4-offset-2, .col-4-offset-3, .col-4-offset-4, .col-4-offset-5, .col-4-offset-6, .col-4-offset-7, .col-4-offset-8, .col-5-offset-1, .col-5-offset-2, .col-5-offset-3, .col-5-offset-4, .col-5-offset-5, .col-5-offset-6, .col-5-offset-7, .col-6-offset-1, .col-6-offset-2, .col-6-offset-3, .col-6-offset-4, .col-6-offset-5, .col-6-offset-6, .col-7-offset-1, .col-7-offset-2, .col-7-offset-3, .col-7-offset-4, .col-7-offset-5, .col-8-offset-1, .col-8-offset-2, .col-8-offset-3, .col-8-offset-4, .col-9-offset-1, .col-9-offset-2, .col-9-offset-3, .col-10-offset-1, .col-10-offset-2, .col-11-offset-1 {
width: 100%;
display: inline-block;
font-size: 16px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
white-space: normal; }
.row {
font-size: 0;
white-space: nowrap;
position: relative; }
.col-1 {
padding-left: 0em;
padding-right: 1em;
margin-left: 0%; }
.col-1:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-1 {
width: 8.33333%;
vertical-align: top; } }
.col-2 {
padding-left: 0em;
padding-right: 1em;
margin-left: 0%; }
.col-2:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-2 {
width: 16.66667%;
vertical-align: top; } }
.col-3 {
padding-left: 0em;
padding-right: 1em;
margin-left: 0%; }
.col-3:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-3 {
width: 25%;
vertical-align: top; } }
.col-4 {
padding-left: 0em;
padding-right: 1em;
margin-left: 0%; }
.col-4:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-4 {
width: 33.33333%;
vertical-align: top; } }
.col-5 {
padding-left: 0em;
padding-right: 1em;
margin-left: 0%; }
.col-5:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-5 {
width: 41.66667%;
vertical-align: top; } }
.col-6 {
padding-left: 0em;
padding-right: 1em;
margin-left: 0%; }
.col-6:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-6 {
width: 50%;
vertical-align: top; } }
.col-7 {
padding-left: 0em;
padding-right: 1em;
margin-left: 0%; }
.col-7:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-7 {
width: 58.33333%;
vertical-align: top; } }
.col-8 {
padding-left: 0em;
padding-right: 1em;
margin-left: 0%; }
.col-8:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-8 {
width: 66.66667%;
vertical-align: top; } }
.col-9 {
padding-left: 0em;
padding-right: 1em;
margin-left: 0%; }
.col-9:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-9 {
width: 75%;
vertical-align: top; } }
.col-10 {
padding-left: 0em;
padding-right: 1em;
margin-left: 0%; }
.col-10:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-10 {
width: 83.33333%;
vertical-align: top; } }
.col-11 {
padding-left: 0em;
padding-right: 1em;
margin-left: 0%; }
.col-11:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-11 {
width: 91.66667%;
vertical-align: top; } }
.col-12 {
padding-left: 0em;
padding-right: 1em;
margin-left: 0%; }
.col-12:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-12 {
width: 100%;
vertical-align: top; } }
.col-1-offset-1 {
padding-left: 1em;
padding-right: 1em;
margin-left: 8.33333%; }
.col-1-offset-1:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-1-offset-1 {
width: 8.33333%;
vertical-align: top; } }
.col-1-offset-2 {
padding-left: 2em;
padding-right: 1em;
margin-left: 16.66667%; }
.col-1-offset-2:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-1-offset-2 {
width: 8.33333%;
vertical-align: top; } }
.col-1-offset-3 {
padding-left: 3em;
padding-right: 1em;
margin-left: 25%; }
.col-1-offset-3:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-1-offset-3 {
width: 8.33333%;
vertical-align: top; } }
.col-1-offset-4 {
padding-left: 4em;
padding-right: 1em;
margin-left: 33.33333%; }
.col-1-offset-4:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-1-offset-4 {
width: 8.33333%;
vertical-align: top; } }
.col-1-offset-5 {
padding-left: 5em;
padding-right: 1em;
margin-left: 41.66667%; }
.col-1-offset-5:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-1-offset-5 {
width: 8.33333%;
vertical-align: top; } }
.col-1-offset-6 {
padding-left: 6em;
padding-right: 1em;
margin-left: 50%; }
.col-1-offset-6:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-1-offset-6 {
width: 8.33333%;
vertical-align: top; } }
.col-1-offset-7 {
padding-left: 7em;
padding-right: 1em;
margin-left: 58.33333%; }
.col-1-offset-7:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-1-offset-7 {
width: 8.33333%;
vertical-align: top; } }
.col-1-offset-8 {
padding-left: 8em;
padding-right: 1em;
margin-left: 66.66667%; }
.col-1-offset-8:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-1-offset-8 {
width: 8.33333%;
vertical-align: top; } }
.col-1-offset-9 {
padding-left: 9em;
padding-right: 1em;
margin-left: 75%; }
.col-1-offset-9:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-1-offset-9 {
width: 8.33333%;
vertical-align: top; } }
.col-1-offset-10 {
padding-left: 10em;
padding-right: 1em;
margin-left: 83.33333%; }
.col-1-offset-10:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-1-offset-10 {
width: 8.33333%;
vertical-align: top; } }
.col-1-offset-11 {
padding-left: 11em;
padding-right: 1em;
margin-left: 91.66667%; }
.col-1-offset-11:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-1-offset-11 {
width: 8.33333%;
vertical-align: top; } }
.col-2-offset-1 {
padding-left: 1em;
padding-right: 1em;
margin-left: 16.66667%; }
.col-2-offset-1:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-2-offset-1 {
width: 16.66667%;
vertical-align: top; } }
.col-2-offset-2 {
padding-left: 2em;
padding-right: 1em;
margin-left: 33.33333%; }
.col-2-offset-2:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-2-offset-2 {
width: 16.66667%;
vertical-align: top; } }
.col-2-offset-3 {
padding-left: 3em;
padding-right: 1em;
margin-left: 50%; }
.col-2-offset-3:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-2-offset-3 {
width: 16.66667%;
vertical-align: top; } }
.col-2-offset-4 {
padding-left: 4em;
padding-right: 1em;
margin-left: 66.66667%; }
.col-2-offset-4:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-2-offset-4 {
width: 16.66667%;
vertical-align: top; } }
.col-2-offset-5 {
padding-left: 5em;
padding-right: 1em;
margin-left: 83.33333%; }
.col-2-offset-5:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-2-offset-5 {
width: 16.66667%;
vertical-align: top; } }
.col-2-offset-6 {
padding-left: 6em;
padding-right: 1em;
margin-left: 100%; }
.col-2-offset-6:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-2-offset-6 {
width: 16.66667%;
vertical-align: top; } }
.col-2-offset-7 {
padding-left: 7em;
padding-right: 1em;
margin-left: 116.66667%; }
.col-2-offset-7:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-2-offset-7 {
width: 16.66667%;
vertical-align: top; } }
.col-2-offset-8 {
padding-left: 8em;
padding-right: 1em;
margin-left: 133.33333%; }
.col-2-offset-8:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-2-offset-8 {
width: 16.66667%;
vertical-align: top; } }
.col-2-offset-9 {
padding-left: 9em;
padding-right: 1em;
margin-left: 150%; }
.col-2-offset-9:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-2-offset-9 {
width: 16.66667%;
vertical-align: top; } }
.col-2-offset-10 {
padding-left: 10em;
padding-right: 1em;
margin-left: 166.66667%; }
.col-2-offset-10:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-2-offset-10 {
width: 16.66667%;
vertical-align: top; } }
.col-3-offset-1 {
padding-left: 1em;
padding-right: 1em;
margin-left: 25%; }
.col-3-offset-1:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-3-offset-1 {
width: 25%;
vertical-align: top; } }
.col-3-offset-2 {
padding-left: 2em;
padding-right: 1em;
margin-left: 50%; }
.col-3-offset-2:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-3-offset-2 {
width: 25%;
vertical-align: top; } }
.col-3-offset-3 {
padding-left: 3em;
padding-right: 1em;
margin-left: 75%; }
.col-3-offset-3:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-3-offset-3 {
width: 25%;
vertical-align: top; } }
.col-3-offset-4 {
padding-left: 4em;
padding-right: 1em;
margin-left: 100%; }
.col-3-offset-4:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-3-offset-4 {
width: 25%;
vertical-align: top; } }
.col-3-offset-5 {
padding-left: 5em;
padding-right: 1em;
margin-left: 125%; }
.col-3-offset-5:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-3-offset-5 {
width: 25%;
vertical-align: top; } }
.col-3-offset-6 {
padding-left: 6em;
padding-right: 1em;
margin-left: 150%; }
.col-3-offset-6:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-3-offset-6 {
width: 25%;
vertical-align: top; } }
.col-3-offset-7 {
padding-left: 7em;
padding-right: 1em;
margin-left: 175%; }
.col-3-offset-7:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-3-offset-7 {
width: 25%;
vertical-align: top; } }
.col-3-offset-8 {
padding-left: 8em;
padding-right: 1em;
margin-left: 200%; }
.col-3-offset-8:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-3-offset-8 {
width: 25%;
vertical-align: top; } }
.col-3-offset-9 {
padding-left: 9em;
padding-right: 1em;
margin-left: 225%; }
.col-3-offset-9:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-3-offset-9 {
width: 25%;
vertical-align: top; } }
.col-4-offset-1 {
padding-left: 1em;
padding-right: 1em;
margin-left: 33.33333%; }
.col-4-offset-1:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-4-offset-1 {
width: 33.33333%;
vertical-align: top; } }
.col-4-offset-2 {
padding-left: 2em;
padding-right: 1em;
margin-left: 66.66667%; }
.col-4-offset-2:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-4-offset-2 {
width: 33.33333%;
vertical-align: top; } }
.col-4-offset-3 {
padding-left: 3em;
padding-right: 1em;
margin-left: 100%; }
.col-4-offset-3:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-4-offset-3 {
width: 33.33333%;
vertical-align: top; } }
.col-4-offset-4 {
padding-left: 4em;
padding-right: 1em;
margin-left: 133.33333%; }
.col-4-offset-4:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-4-offset-4 {
width: 33.33333%;
vertical-align: top; } }
.col-4-offset-5 {
padding-left: 5em;
padding-right: 1em;
margin-left: 166.66667%; }
.col-4-offset-5:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-4-offset-5 {
width: 33.33333%;
vertical-align: top; } }
.col-4-offset-6 {
padding-left: 6em;
padding-right: 1em;
margin-left: 200%; }
.col-4-offset-6:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-4-offset-6 {
width: 33.33333%;
vertical-align: top; } }
.col-4-offset-7 {
padding-left: 7em;
padding-right: 1em;
margin-left: 233.33333%; }
.col-4-offset-7:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-4-offset-7 {
width: 33.33333%;
vertical-align: top; } }
.col-4-offset-8 {
padding-left: 8em;
padding-right: 1em;
margin-left: 266.66667%; }
.col-4-offset-8:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-4-offset-8 {
width: 33.33333%;
vertical-align: top; } }
.col-5-offset-1 {
padding-left: 1em;
padding-right: 1em;
margin-left: 41.66667%; }
.col-5-offset-1:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-5-offset-1 {
width: 41.66667%;
vertical-align: top; } }
.col-5-offset-2 {
padding-left: 2em;
padding-right: 1em;
margin-left: 83.33333%; }
.col-5-offset-2:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-5-offset-2 {
width: 41.66667%;
vertical-align: top; } }
.col-5-offset-3 {
padding-left: 3em;
padding-right: 1em;
margin-left: 125%; }
.col-5-offset-3:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-5-offset-3 {
width: 41.66667%;
vertical-align: top; } }
.col-5-offset-4 {
padding-left: 4em;
padding-right: 1em;
margin-left: 166.66667%; }
.col-5-offset-4:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-5-offset-4 {
width: 41.66667%;
vertical-align: top; } }
.col-5-offset-5 {
padding-left: 5em;
padding-right: 1em;
margin-left: 208.33333%; }
.col-5-offset-5:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-5-offset-5 {
width: 41.66667%;
vertical-align: top; } }
.col-5-offset-6 {
padding-left: 6em;
padding-right: 1em;
margin-left: 250%; }
.col-5-offset-6:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-5-offset-6 {
width: 41.66667%;
vertical-align: top; } }
.col-5-offset-7 {
padding-left: 7em;
padding-right: 1em;
margin-left: 291.66667%; }
.col-5-offset-7:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-5-offset-7 {
width: 41.66667%;
vertical-align: top; } }
.col-6-offset-1 {
padding-left: 1em;
padding-right: 1em;
margin-left: 50%; }
.col-6-offset-1:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-6-offset-1 {
width: 50%;
vertical-align: top; } }
.col-6-offset-2 {
padding-left: 2em;
padding-right: 1em;
margin-left: 100%; }
.col-6-offset-2:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-6-offset-2 {
width: 50%;
vertical-align: top; } }
.col-6-offset-3 {
padding-left: 3em;
padding-right: 1em;
margin-left: 150%; }
.col-6-offset-3:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-6-offset-3 {
width: 50%;
vertical-align: top; } }
.col-6-offset-4 {
padding-left: 4em;
padding-right: 1em;
margin-left: 200%; }
.col-6-offset-4:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-6-offset-4 {
width: 50%;
vertical-align: top; } }
.col-6-offset-5 {
padding-left: 5em;
padding-right: 1em;
margin-left: 250%; }
.col-6-offset-5:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-6-offset-5 {
width: 50%;
vertical-align: top; } }
.col-6-offset-6 {
padding-left: 6em;
padding-right: 1em;
margin-left: 300%; }
.col-6-offset-6:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-6-offset-6 {
width: 50%;
vertical-align: top; } }
.col-7-offset-1 {
padding-left: 1em;
padding-right: 1em;
margin-left: 58.33333%; }
.col-7-offset-1:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-7-offset-1 {
width: 58.33333%;
vertical-align: top; } }
.col-7-offset-2 {
padding-left: 2em;
padding-right: 1em;
margin-left: 116.66667%; }
.col-7-offset-2:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-7-offset-2 {
width: 58.33333%;
vertical-align: top; } }
.col-7-offset-3 {
padding-left: 3em;
padding-right: 1em;
margin-left: 175%; }
.col-7-offset-3:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-7-offset-3 {
width: 58.33333%;
vertical-align: top; } }
.col-7-offset-4 {
padding-left: 4em;
padding-right: 1em;
margin-left: 233.33333%; }
.col-7-offset-4:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-7-offset-4 {
width: 58.33333%;
vertical-align: top; } }
.col-7-offset-5 {
padding-left: 5em;
padding-right: 1em;
margin-left: 291.66667%; }
.col-7-offset-5:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-7-offset-5 {
width: 58.33333%;
vertical-align: top; } }
.col-8-offset-1 {
padding-left: 1em;
padding-right: 1em;
margin-left: 66.66667%; }
.col-8-offset-1:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-8-offset-1 {
width: 66.66667%;
vertical-align: top; } }
.col-8-offset-2 {
padding-left: 2em;
padding-right: 1em;
margin-left: 133.33333%; }
.col-8-offset-2:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-8-offset-2 {
width: 66.66667%;
vertical-align: top; } }
.col-8-offset-3 {
padding-left: 3em;
padding-right: 1em;
margin-left: 200%; }
.col-8-offset-3:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-8-offset-3 {
width: 66.66667%;
vertical-align: top; } }
.col-8-offset-4 {
padding-left: 4em;
padding-right: 1em;
margin-left: 266.66667%; }
.col-8-offset-4:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-8-offset-4 {
width: 66.66667%;
vertical-align: top; } }
.col-9-offset-1 {
padding-left: 1em;
padding-right: 1em;
margin-left: 75%; }
.col-9-offset-1:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-9-offset-1 {
width: 75%;
vertical-align: top; } }
.col-9-offset-2 {
padding-left: 2em;
padding-right: 1em;
margin-left: 150%; }
.col-9-offset-2:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-9-offset-2 {
width: 75%;
vertical-align: top; } }
.col-9-offset-3 {
padding-left: 3em;
padding-right: 1em;
margin-left: 225%; }
.col-9-offset-3:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-9-offset-3 {
width: 75%;
vertical-align: top; } }
.col-10-offset-1 {
padding-left: 1em;
padding-right: 1em;
margin-left: 83.33333%; }
.col-10-offset-1:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-10-offset-1 {
width: 83.33333%;
vertical-align: top; } }
.col-10-offset-2 {
padding-left: 2em;
padding-right: 1em;
margin-left: 166.66667%; }
.col-10-offset-2:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-10-offset-2 {
width: 83.33333%;
vertical-align: top; } }
.col-11-offset-1 {
padding-left: 1em;
padding-right: 1em;
margin-left: 91.66667%; }
.col-11-offset-1:last-child {
padding-right: 0; }
@media only screen and (min-width: 768px) {
.col-11-offset-1 {
width: 91.66667%;
vertical-align: top; } }
body, html {
position: relative;
width: 100%;
@@ -40,12 +911,12 @@ main[role="main"] {
width: 100%;
height: 100%;
overflow: hidden; }
main[role="main"] .layout-content > * {
pointer-events: auto; }
main[role="main"] .layout-content, main[role="main"] .region-content, main[role="main"] #block-edlptheme-content {
main[role="main"] .layout-content {
width: 100%;
height: 100%;
overflow: hidden; }
main[role="main"] .layout-content > * {
pointer-events: auto; }
footer[role="contentinfo"] {
position: fixed;
@@ -124,6 +995,18 @@ header[role="banner"] {
border-color: red;
background-color: red; }
main[role="main"] .layout-content .row {
height: 100%;
overflow: hidden; }
main[role="main"] .layout-content .row .col {
max-height: 100%;
position: relative; }
main[role="main"] .layout-content .row .col > * {
border-top: 1px solid red;
border-bottom: 1px solid red;
background-color: rgba(255, 255, 255, 0.9);
max-height: 100%; }
#agenda {
pointer-events: auto;
background-color: rgba(255, 255, 255, 0.9);
@@ -14,6 +14,9 @@
$('.os-scroll').overlayScrollbars({
overflowBehavior:{x:'h',y:'scroll'}
});
// $('.row .col>*', 'main[role="main"]').overlayScrollbars({
// overflowBehavior:{x:'h',y:'scroll'}
// });
};
function initAjaxLinks(){
@@ -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"]{
@@ -0,0 +1,3 @@
{% block content %}
{{ content }}
{% endblock %}
@@ -0,0 +1 @@
{{ content }}