Add responsive layout

This commit is contained in:
Daniel Siepmann 2019-12-13 16:29:34 +01:00
parent 249d49aaaa
commit 4db288dc39
5 changed files with 24 additions and 13 deletions

View file

@ -10,13 +10,12 @@
</header> </header>
<main> <main>
<section>
{f:render(section: 'Content', arguments: _all)}
</section>
<aside> <aside>
{f:render(section: 'Aside', arguments: _all)} {f:render(section: 'Aside', arguments: _all)}
</aside> </aside>
<section>
{f:render(section: 'Content', arguments: _all)}
</section>
</main> </main>
<footer> <footer>

View file

@ -59,8 +59,15 @@ $link-hover-color: $blue;
$link-hover-decoration: underline; $link-hover-decoration: underline;
$container-max-widths: ( $container-max-widths: (
sm: 40rem, sm: 1023px,
md: 50rem, md: 1024px,
lg: 70rem, lg: 1200px,
xl: 100rem xl: 1440px
);
$grid-breakpoints: (
xs: 0,
sm: 576px,
md: 768px,
lg: 1200px,
xl: 1440px
); );

View file

@ -5,7 +5,7 @@ code {
left: 0.5em; left: 0.5em;
right: 0.5em; right: 0.5em;
} }
white-space: nowrap; white-space: pre-line;
} }
pre code { pre code {

View file

@ -2,11 +2,14 @@ body > main {
@extend .row; @extend .row;
& > section { & > section {
@extend .col-md-8; @extend .col-xl-8;
@extend .col-12;
} }
& > aside { & > aside {
@extend .col-md-4; @extend .col-xl-4;
@extend .col-12;
@extend .order-xl-2;
} }
} }

View file

@ -4,7 +4,8 @@ body > header {
padding-bottom: $spacer * 4; padding-bottom: $spacer * 4;
& > div { & > div {
@extend .col-8; @extend .col-12;
@extend .col-sm-8;
a { a {
font-size: $h1-font-size; font-size: $h1-font-size;
@ -13,7 +14,8 @@ body > header {
} }
nav { nav {
@extend .col-4; @extend .col-12;
@extend .col-sm-4;
padding-top: $spacer; padding-top: $spacer;