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>
<main>
<section>
{f:render(section: 'Content', arguments: _all)}
</section>
<aside>
{f:render(section: 'Aside', arguments: _all)}
</aside>
<section>
{f:render(section: 'Content', arguments: _all)}
</section>
</main>
<footer>

View file

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

View file

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

View file

@ -2,11 +2,14 @@ body > main {
@extend .row;
& > section {
@extend .col-md-8;
@extend .col-xl-8;
@extend .col-12;
}
& > 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;
& > div {
@extend .col-8;
@extend .col-12;
@extend .col-sm-8;
a {
font-size: $h1-font-size;
@ -13,7 +14,8 @@ body > header {
}
nav {
@extend .col-4;
@extend .col-12;
@extend .col-sm-4;
padding-top: $spacer;