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>
|
</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>
|
||||||
|
|
|
@ -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
|
||||||
);
|
);
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue