ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Make use of grid-template-areas for layouts.

Browse source
This commit is contained in:
Fredrik Jonsson 2017-08-01 14:12:10 +02:00
commit 2fddcb499f
1 changed files with 87 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

132
sass/layouts/_layouts.scss
View file

@ -1,7 +1,12 @@
.layout { .layout {
&__page { &__page {
max-width: $max-content-width; max-width: $max-content-width;
@include respond-to(s) {
margin: 0 auto;
min-height: 100vh;
} }
}
&__header, &__header,
&__footer, &__footer,
@ -12,11 +17,18 @@
&__page-top, &__page-top,
&__page-bottom { &__page-bottom {
padding: 0 $zen-gutters / 2; padding: 0 $zen-gutters / 2;
min-width: 0; // With display grid defaults to auto making <pre> overflow.
@include respond-to(s) { @include respond-to(s) {
padding: 0 $zen-gutters; padding: 0 $zen-gutters;
} }
} }
&__grid-notice {
margin: $zen-gutters/2;
padding: $zen-gutters/2;
border: 2px dashed color('red');
}
} }
@supports (display: grid) { @supports (display: grid) {
@ -24,70 +36,100 @@
.layout { .layout {
&__page { &__page {
display: grid; display: grid;
grid-template-columns: [first-start] 1fr [last-end]; grid-template-areas: 'head'
'nav'
'top'
'main'
'side1'
'side2'
'bottom'
'foot';
grid-template-rows: auto
auto
auto
1fr
auto
auto
auto
auto;
grid-template-columns: 1fr;
} }
@include respond-to(s) { @include respond-to(xl) {
&__page { &__page {
grid-template-rows: [head-start] auto grid-template-rows: auto
[nav-start] auto auto
[page-top-start] auto auto
[main-start] 1fr 1fr
[page-bottom-start] auto auto
[footer-start] auto; auto;
min-height: 100vh;
margin: 0 auto;
} }
&__sidebar-first { &__sidebar-first {
grid-template-columns: [first-start] 1fr grid-template-areas: 'head head'
[last-start] 2fr [last-end]; 'nav nav'
'side1 top'
'side2 main'
'side2 bottom'
'foot foot';
grid-template-columns: 1fr
2fr;
} }
&__sidebar-second { &__sidebar-second {
grid-template-columns: [first-start] 2fr grid-template-areas: 'head head'
[last-start] 1fr [last-end]; 'nav nav'
'top side2'
'main side2'
'bottom side2'
'foot foot';
grid-template-columns: 2fr
1fr;
} }
&__sidebar-two { &__sidebar-two {
grid-template-columns: [first-start] 1fr grid-template-areas: 'head head head'
[middle-start] 2fr 'nav nav nav'
[last-start] 1fr [last-end]; 'side1 top side2'
'side1 main side2'
'side1 bottom side2'
'foot foot foot';
grid-template-columns: 1fr
2fr
1fr;
} }
}
&__full { &__header {
grid-column: first-start / last-end; grid-area: head;
} }
&__first-sidebar { &__navigation {
grid-column: first-start; grid-area: nav;
} }
&__header { &__page-top {
grid-row: head-start; grid-area: top;
} }
&__navigation { &__content {
grid-row: nav-start; grid-area: main;
} }
&__page-top { &__first-sidebar {
grid-row: page-top-start; grid-area: side1;
} }
&__content, &__second-sidebar {
&__first-sidebar, grid-area: side2;
&__second-sidebar { }
grid-row: main-start;
}
&__page-bottom { &__page-bottom {
grid-row: page-bottom-start; grid-area: bottom;
} }
&__footer { &__footer {
grid-row: footer-start; grid-area: foot;
}
} }
} }