Small fixes in tags and css

This commit is contained in:
Alex Shpak 2018-09-30 01:22:39 +02:00
parent 830fa91359
commit 7a6ab6d724
2 changed files with 23 additions and 38 deletions

View file

@ -44,13 +44,8 @@ aside {
line-height: 2em; line-height: 2em;
li { li {
a { a { display: block; }
display: block; a:hover { opacity: .5; }
}
a:hover {
opacity: .5;
}
img { img {
height: $padding-16; height: $padding-16;
@ -71,14 +66,14 @@ aside.fixed nav {
overflow: hidden auto; overflow: hidden auto;
} }
.container { main {
max-width: $content-max-width; max-width: $content-max-width;
margin: 0 auto; margin: 0 auto;
display: flex; display: flex;
flex-flow: row; flex-flow: row;
.menu nav, .page, .markdown { aside nav, .content, .markdown {
transition: .2s ease-in-out; transition: .2s ease-in-out;
transition-property: transform, margin-left, opacity; transition-property: transform, margin-left, opacity;
will-change: transform, margin-left; will-change: transform, margin-left;
@ -87,24 +82,19 @@ aside.fixed nav {
.menu { .menu {
flex: 0 0 $nav-menu-width; flex: 0 0 $nav-menu-width;
.brand {
margin-top: 0;
margin-bottom: $padding-16;
}
nav { nav {
width: $nav-menu-width; width: $nav-menu-width;
padding: $padding-16; padding: $padding-16;
font-size: $font-size-14; font-size: $font-size-14;
} }
a { a { color: $nav-link-color; }
color: $nav-link-color; a.active { color: $color-link; }
}
a.active {
color: $color-link;
}
.brand {
margin-top: 0;
margin-bottom: $padding-16;
}
.flat { .flat {
margin-bottom: $padding-16; margin-bottom: $padding-16;
@ -113,16 +103,16 @@ aside.fixed nav {
} }
} }
.header { header {
display: flex; display: flex;
align-items: center; align-items:center;
justify-content: space-between; justify-content: space-between;
margin-bottom: $padding-16; margin-bottom: $padding-16;
display: none; display: none;
} }
.page { .content {
flex: 1 0; flex: 1 0;
width: 0; width: 0;
min-width: $body-min-width; min-width: $body-min-width;
@ -159,16 +149,16 @@ $toc-hide-point: $menu-hide-point + $nav-menu-width;
margin-left: -$nav-menu-width; margin-left: -$nav-menu-width;
} }
.container .header { main header {
display: flex; display: flex;
} }
#menu-control:checked + .container { #menu-control:checked + main {
.menu nav, .page { .menu nav, .content {
transform: translateX($nav-menu-width); transform: translateX($nav-menu-width);
} }
.header label img { header label img {
transform: rotate(90deg); transform: rotate(90deg);
} }
@ -177,7 +167,3 @@ $toc-hide-point: $menu-hide-point + $nav-menu-width;
} }
} }
} }
.muted {
opacity: .75;
}

View file

@ -8,7 +8,7 @@
<body> <body>
<input type="checkbox" style="display: none" id="menu-control" /> <input type="checkbox" style="display: none" id="menu-control" />
<div class="container"> <main>
<aside class="menu fixed"> <aside class="menu fixed">
<nav role="navigation"> <nav role="navigation">
@ -25,10 +25,10 @@
</nav> </nav>
</aside> </aside>
<div class="page"> <div class="content">
<div class="header"> <header>
{{ partial "docs/mobile-header" . }} {{ partial "docs/mobile-header" . }}
</div> </header>
<article class="markdown"> <article class="markdown">
{{- .Content -}} {{- .Content -}}
</article> </article>
@ -41,8 +41,7 @@
</aside> </aside>
{{ end }} {{ end }}
</div> </main>
{{ partial "docs/inject/body" . }} {{ partial "docs/inject/body" . }}
</body> </body>
</html> </html>