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;
|
||||
|
||||
li {
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
opacity: .5;
|
||||
}
|
||||
a { display: block; }
|
||||
a:hover { opacity: .5; }
|
||||
|
||||
img {
|
||||
height: $padding-16;
|
||||
|
@ -71,14 +66,14 @@ aside.fixed nav {
|
|||
overflow: hidden auto;
|
||||
}
|
||||
|
||||
.container {
|
||||
main {
|
||||
max-width: $content-max-width;
|
||||
margin: 0 auto;
|
||||
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
|
||||
.menu nav, .page, .markdown {
|
||||
aside nav, .content, .markdown {
|
||||
transition: .2s ease-in-out;
|
||||
transition-property: transform, margin-left, opacity;
|
||||
will-change: transform, margin-left;
|
||||
|
@ -87,24 +82,19 @@ aside.fixed nav {
|
|||
.menu {
|
||||
flex: 0 0 $nav-menu-width;
|
||||
|
||||
.brand {
|
||||
margin-top: 0;
|
||||
margin-bottom: $padding-16;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: $nav-menu-width;
|
||||
padding: $padding-16;
|
||||
font-size: $font-size-14;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $nav-link-color;
|
||||
}
|
||||
|
||||
a.active {
|
||||
color: $color-link;
|
||||
}
|
||||
|
||||
.brand {
|
||||
margin-top: 0;
|
||||
margin-bottom: $padding-16;
|
||||
}
|
||||
a { color: $nav-link-color; }
|
||||
a.active { color: $color-link; }
|
||||
|
||||
.flat {
|
||||
margin-bottom: $padding-16;
|
||||
|
@ -113,16 +103,16 @@ aside.fixed nav {
|
|||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items:center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: $padding-16;
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page {
|
||||
.content {
|
||||
flex: 1 0;
|
||||
width: 0;
|
||||
min-width: $body-min-width;
|
||||
|
@ -159,16 +149,16 @@ $toc-hide-point: $menu-hide-point + $nav-menu-width;
|
|||
margin-left: -$nav-menu-width;
|
||||
}
|
||||
|
||||
.container .header {
|
||||
main header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#menu-control:checked + .container {
|
||||
.menu nav, .page {
|
||||
#menu-control:checked + main {
|
||||
.menu nav, .content {
|
||||
transform: translateX($nav-menu-width);
|
||||
}
|
||||
|
||||
.header label img {
|
||||
header label img {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
|
@ -177,7 +167,3 @@ $toc-hide-point: $menu-hide-point + $nav-menu-width;
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.muted {
|
||||
opacity: .75;
|
||||
}
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
<body>
|
||||
<input type="checkbox" style="display: none" id="menu-control" />
|
||||
<div class="container">
|
||||
<main>
|
||||
|
||||
<aside class="menu fixed">
|
||||
<nav role="navigation">
|
||||
|
@ -25,10 +25,10 @@
|
|||
</nav>
|
||||
</aside>
|
||||
|
||||
<div class="page">
|
||||
<div class="header">
|
||||
<div class="content">
|
||||
<header>
|
||||
{{ partial "docs/mobile-header" . }}
|
||||
</div>
|
||||
</header>
|
||||
<article class="markdown">
|
||||
{{- .Content -}}
|
||||
</article>
|
||||
|
@ -41,8 +41,7 @@
|
|||
</aside>
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
{{ partial "docs/inject/body" . }}
|
||||
</body>
|
||||
</html>
|
Loading…
Reference in a new issue