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