Improve sass styles
This commit is contained in:
Alex Shpak
parent
cce17bcc99
commit
78bd5938a3
9 changed files with 70 additions and 54 deletions
16
README.md
16
README.md
|
|
@ -90,8 +90,8 @@ type: docs
|
|||
# Set page weight to re-arrange items in file-tree menu (if BookMenuBundle not set)
|
||||
weight: 10
|
||||
|
||||
# (Optional) Set to mark page as top level section in file-tree menu (if BookMenuBundle not set)
|
||||
bookRootSection: true
|
||||
# (Optional) Set to mark page as flat section in file-tree menu (if BookMenuBundle not set)
|
||||
bookFlatSection: true
|
||||
|
||||
# (Optional) Set to hide table of contents, overrides global value
|
||||
bookShowToC: false
|
||||
|
|
@ -101,12 +101,12 @@ bookShowToC: false
|
|||
### Partials
|
||||
There are few empty partials you can override in `layouts/partials/`
|
||||
|
||||
| Partial | Placement |
|
||||
| -- | -- |
|
||||
| `layouts/partials/docs/inject/head.html` | Before closing `<head>` tag |
|
||||
| `layouts/partials/docs/inject/body.html` | Before closing `<body>` tag |
|
||||
| `layouts/partials/docs/inject/nav-before.html` | At the beginning of `<nav>` menu block |
|
||||
| `layouts/partials/docs/inject/nav-after.html` | At the end of `<nav>` menu block |
|
||||
| Partial | Placement |
|
||||
| -- | -- |
|
||||
| `layouts/partials/docs/inject/head.html` | Before closing `<head>` tag |
|
||||
| `layouts/partials/docs/inject/body.html` | Before closing `<body>` tag |
|
||||
| `layouts/partials/docs/inject/menu-before.html` | At the beginning of `<nav>` menu block |
|
||||
| `layouts/partials/docs/inject/menu-after.html` | At the end of `<nav>` menu block |
|
||||
|
||||
|
||||
## Contributing
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
$block-border-radius: 0.15rem;
|
||||
|
||||
.markdown {
|
||||
line-height: 1.5;
|
||||
line-height: 1.7;
|
||||
|
||||
:first-child {
|
||||
margin-top: 0;
|
||||
|
|
|
|||
|
|
@ -21,8 +21,8 @@ $gray-800: #343a40;
|
|||
$gray-900: #212529;
|
||||
$black: #000;
|
||||
|
||||
$color-link: #1177EE;
|
||||
$color-visited-link: #7823c9;
|
||||
$color-link: #4092f1;
|
||||
$color-visited-link: #8440f1;
|
||||
|
||||
$body-background: white;
|
||||
$body-font-color: $gray-800;
|
||||
|
|
|
|||
|
|
@ -23,6 +23,10 @@ body {
|
|||
}
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5 {
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: $color-link;
|
||||
|
|
@ -32,12 +36,12 @@ a {
|
|||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
aside {
|
||||
ul {
|
||||
margin: 0;
|
||||
padding-left: $padding-16;
|
||||
list-style: none;
|
||||
line-height: $padding-16 * 2;
|
||||
line-height: 2em;
|
||||
|
||||
li {
|
||||
a {
|
||||
|
|
@ -54,20 +58,20 @@ nav {
|
|||
}
|
||||
}
|
||||
|
||||
&> ul {
|
||||
// padding start with second level
|
||||
// start padding on second level
|
||||
nav > ul {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: $padding-16;
|
||||
aside.fixed nav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden auto;
|
||||
}
|
||||
|
||||
.content {
|
||||
.container {
|
||||
max-width: $content-max-width;
|
||||
margin: 0 auto;
|
||||
|
||||
|
|
@ -84,11 +88,7 @@ nav {
|
|||
flex: 0 0 $nav-menu-width;
|
||||
|
||||
nav {
|
||||
position: fixed;
|
||||
height: 100%;
|
||||
width: $nav-menu-width;
|
||||
overflow: hidden auto;
|
||||
|
||||
padding: $padding-16;
|
||||
font-size: $font-size-14;
|
||||
}
|
||||
|
|
@ -97,13 +97,31 @@ nav {
|
|||
color: $nav-link-color;
|
||||
}
|
||||
|
||||
.section {
|
||||
a.active {
|
||||
color: $color-link;
|
||||
}
|
||||
|
||||
.brand {
|
||||
margin-top: 0;
|
||||
margin-bottom: $padding-16;
|
||||
}
|
||||
|
||||
.flat {
|
||||
margin-bottom: $padding-16;
|
||||
> a { font-weight: 700; }
|
||||
> ul { padding-left: 0; }
|
||||
}
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: $padding-16;
|
||||
|
||||
display: none;
|
||||
}
|
||||
|
||||
.page {
|
||||
flex: 1 0;
|
||||
width: 0;
|
||||
|
|
@ -112,21 +130,17 @@ nav {
|
|||
}
|
||||
|
||||
.toc {
|
||||
flex: 0 0 $nav-menu-width;
|
||||
flex: 0 0 $toc-menu-width;
|
||||
|
||||
nav {
|
||||
width: $toc-menu-width;
|
||||
padding: $padding-16;
|
||||
font-size: $font-size-12;
|
||||
|
||||
> ul {
|
||||
border-left: $padding-1 solid $gray-200;
|
||||
ul ul {
|
||||
padding-left: $padding-8;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
line-height: $padding-16 * 1.5;
|
||||
padding-left: $padding-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -136,7 +150,6 @@ $toc-hide-point: $menu-hide-point + $nav-menu-width;
|
|||
|
||||
@media screen and (max-width: $toc-hide-point) {
|
||||
.toc {
|
||||
// margin-right: -$nav-menu-width;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -146,20 +159,16 @@ $toc-hide-point: $menu-hide-point + $nav-menu-width;
|
|||
margin-left: -$nav-menu-width;
|
||||
}
|
||||
|
||||
.header {
|
||||
.container .header {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#menu-control:checked + .content {
|
||||
.menu nav {
|
||||
#menu-control:checked + .container {
|
||||
.menu nav, .page {
|
||||
transform: translateX($nav-menu-width);
|
||||
}
|
||||
|
||||
.page {
|
||||
transform: translateX($nav-menu-width);
|
||||
}
|
||||
|
||||
.header label {
|
||||
.header label img {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,11 +8,14 @@
|
|||
|
||||
<body>
|
||||
<input type="checkbox" style="display: none" id="menu-control" />
|
||||
<div class="content">
|
||||
<div class="container">
|
||||
|
||||
<div class="menu">
|
||||
<aside class="menu fixed">
|
||||
<nav role="navigation">
|
||||
{{ partial "docs/inject/nav-before" . }}
|
||||
<h2 class="brand">
|
||||
<a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a>
|
||||
</h2>
|
||||
{{ partial "docs/inject/menu-before" . }}
|
||||
|
||||
{{ if .Site.Params.BookMenuBundle }}
|
||||
{{ partial "docs/menu-bundle" . }}
|
||||
|
|
@ -20,24 +23,24 @@
|
|||
{{ partial "docs/menu-filetree" . }}
|
||||
{{ end }}
|
||||
|
||||
{{ partial "docs/inject/nav-after" . }}
|
||||
{{ partial "docs/inject/menu-after" . }}
|
||||
</nav>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div class="page">
|
||||
<div class="header">
|
||||
<label for="menu-control"><img src="/svg/menu.svg" /></label>
|
||||
{{ partial "docs/mobile-header" . }}
|
||||
</div>
|
||||
<div class="markdown">
|
||||
<article class="markdown">
|
||||
{{- .Content -}}
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
||||
{{ $showToC := default (default true .Site.Params.BookShowToC) .Params.bookshowtoc }}
|
||||
{{ if and ($showToC) (.Page.TableOfContents) }}
|
||||
<div class="toc">
|
||||
<aside class="toc fixed">
|
||||
{{ partial "docs/toc" . }}
|
||||
</div>
|
||||
</aside>
|
||||
{{ end }}
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
{{ define "book-section" }} <!-- Single section of menu (recursive) -->
|
||||
<ul>
|
||||
{{ range .Section.Sections }}
|
||||
<li {{- if .Params.bookrootsection}} class="section" {{ end }}>
|
||||
<li {{- if .Params.bookflatsection}} class="flat" {{ end }}>
|
||||
{{- if .Content -}}
|
||||
{{ template "book-page-link" (dict "Page" . "CurrentPage" $.CurrentPage) }}
|
||||
{{- else -}}
|
||||
|
|
|
|||
4
layouts/partials/docs/mobile-header.html
Normal file
4
layouts/partials/docs/mobile-header.html
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
<label for="menu-control">
|
||||
<img src="/svg/menu.svg" />
|
||||
</label>
|
||||
<strong>{{- template "title" . }}</strong>
|
||||
Loading…
Reference in a new issue