Add responsive layout
This commit is contained in:
parent
249d49aaaa
commit
4db288dc39
5 changed files with 24 additions and 13 deletions
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
);
|
||||
|
|
|
@ -5,7 +5,7 @@ code {
|
|||
left: 0.5em;
|
||||
right: 0.5em;
|
||||
}
|
||||
white-space: nowrap;
|
||||
white-space: pre-line;
|
||||
}
|
||||
|
||||
pre code {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
Loading…
Reference in a new issue