Small fixes in tags and css
This commit is contained in:
parent
830fa91359
commit
7a6ab6d724
2 changed files with 23 additions and 38 deletions
|
@ -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,7 +103,7 @@ aside.fixed nav {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items:center;
|
align-items:center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
@ -122,7 +112,7 @@ aside.fixed nav {
|
||||||
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;
|
|
||||||
}
|
|
|
@ -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>
|
Loading…
Reference in a new issue