adoralaura/hugo-book-theme
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Improve sass styles

Browse source
This commit is contained in:
Alex Shpak 2018-09-28 01:12:07 +02:00
parent cce17bcc99
commit 78bd5938a3
9 changed files with 70 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
README.md
View file

@ -90,8 +90,8 @@ type: docs
# Set page weight to re-arrange items in file-tree menu (if BookMenuBundle not set) # Set page weight to re-arrange items in file-tree menu (if BookMenuBundle not set)
weight: 10 weight: 10
# (Optional) Set to mark page as top level section in file-tree menu (if BookMenuBundle not set) # (Optional) Set to mark page as flat section in file-tree menu (if BookMenuBundle not set)
bookRootSection: true bookFlatSection: true
# (Optional) Set to hide table of contents, overrides global value # (Optional) Set to hide table of contents, overrides global value
bookShowToC: false bookShowToC: false
@ -105,8 +105,8 @@ There are few empty partials you can override in `layouts/partials/`
| -- | -- | | -- | -- |
| `layouts/partials/docs/inject/head.html` | Before closing `<head>` tag | | `layouts/partials/docs/inject/head.html` | Before closing `<head>` tag |
| `layouts/partials/docs/inject/body.html` | Before closing `<body>` 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/menu-before.html` | At the beginning of `<nav>` menu block |
| `layouts/partials/docs/inject/nav-after.html` | At the end of `<nav>` menu block | | `layouts/partials/docs/inject/menu-after.html` | At the end of `<nav>` menu block |
## Contributing ## Contributing

2
assets/_markdown.scss
View file

@ -3,7 +3,7 @@
$block-border-radius: 0.15rem; $block-border-radius: 0.15rem;
.markdown { .markdown {
line-height: 1.5; line-height: 1.7;
:first-child { :first-child {
margin-top: 0; margin-top: 0;

4
assets/_variables.scss
View file

@ -21,8 +21,8 @@ $gray-800: #343a40;
$gray-900: #212529; $gray-900: #212529;
$black: #000; $black: #000;
$color-link: #1177EE; $color-link: #4092f1;
$color-visited-link: #7823c9; $color-visited-link: #8440f1;
$body-background: white; $body-background: white;
$body-font-color: $gray-800; $body-font-color: $gray-800;

73
assets/styles.scss
View file

@ -23,6 +23,10 @@ body {
} }
} }
h1, h2, h3, h4, h5 {
font-weight: 400;
}
a { a {
text-decoration: none; text-decoration: none;
color: $color-link; color: $color-link;
@ -32,12 +36,12 @@ a {
} }
} }
nav { aside {
ul { ul {
margin: 0; margin: 0;
padding-left: $padding-16; padding-left: $padding-16;
list-style: none; list-style: none;
line-height: $padding-16 * 2; line-height: 2em;
li { li {
a { a {
@ -54,20 +58,20 @@ nav {
} }
} }
&> ul { // start padding on second level
// padding start with second level nav > ul {
padding-left: 0; padding-left: 0;
} }
} }
.header { aside.fixed nav {
display: none; position: fixed;
align-items: center; top: 0;
justify-content: space-between; bottom: 0;
margin-bottom: $padding-16; overflow: hidden auto;
} }
.content { .container {
max-width: $content-max-width; max-width: $content-max-width;
margin: 0 auto; margin: 0 auto;
@ -84,11 +88,7 @@ nav {
flex: 0 0 $nav-menu-width; flex: 0 0 $nav-menu-width;
nav { nav {
position: fixed;
height: 100%;
width: $nav-menu-width; width: $nav-menu-width;
overflow: hidden auto;
padding: $padding-16; padding: $padding-16;
font-size: $font-size-14; font-size: $font-size-14;
} }
@ -97,13 +97,31 @@ nav {
color: $nav-link-color; color: $nav-link-color;
} }
.section { a.active {
color: $color-link;
}
.brand {
margin-top: 0;
margin-bottom: $padding-16;
}
.flat {
margin-bottom: $padding-16; margin-bottom: $padding-16;
> a { font-weight: 700; } > a { font-weight: 700; }
> ul { padding-left: 0; } > ul { padding-left: 0; }
} }
} }
.header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: $padding-16;
display: none;
}
.page { .page {
flex: 1 0; flex: 1 0;
width: 0; width: 0;
@ -112,23 +130,19 @@ nav {
} }
.toc { .toc {
flex: 0 0 $nav-menu-width; flex: 0 0 $toc-menu-width;
nav { nav {
width: $toc-menu-width;
padding: $padding-16; padding: $padding-16;
font-size: $font-size-12; font-size: $font-size-12;
> ul { ul ul {
border-left: $padding-1 solid $gray-200;
}
}
ul {
line-height: $padding-16 * 1.5;
padding-left: $padding-8; padding-left: $padding-8;
} }
} }
} }
}
// Responsive styles // Responsive styles
$menu-hide-point: $nav-menu-width + $body-min-width; $menu-hide-point: $nav-menu-width + $body-min-width;
@ -136,7 +150,6 @@ $toc-hide-point: $menu-hide-point + $nav-menu-width;
@media screen and (max-width: $toc-hide-point) { @media screen and (max-width: $toc-hide-point) {
.toc { .toc {
// margin-right: -$nav-menu-width;
display: none; display: none;
} }
} }
@ -146,20 +159,16 @@ $toc-hide-point: $menu-hide-point + $nav-menu-width;
margin-left: -$nav-menu-width; margin-left: -$nav-menu-width;
} }
.header { .container .header {
display: flex; display: flex;
} }
#menu-control:checked + .content { #menu-control:checked + .container {
.menu nav { .menu nav, .page {
transform: translateX($nav-menu-width); transform: translateX($nav-menu-width);
} }
.page { .header label img {
transform: translateX($nav-menu-width);
}
.header label {
transform: rotate(90deg); transform: rotate(90deg);
} }

23
layouts/docs/baseof.html
View file

@ -8,11 +8,14 @@
<body> <body>
<input type="checkbox" style="display: none" id="menu-control" /> <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"> <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 }} {{ if .Site.Params.BookMenuBundle }}
{{ partial "docs/menu-bundle" . }} {{ partial "docs/menu-bundle" . }}
@ -20,24 +23,24 @@
{{ partial "docs/menu-filetree" . }} {{ partial "docs/menu-filetree" . }}
{{ end }} {{ end }}
{{ partial "docs/inject/nav-after" . }} {{ partial "docs/inject/menu-after" . }}
</nav> </nav>
</div> </aside>
<div class="page"> <div class="page">
<div class="header"> <div class="header">
<label for="menu-control"><img src="/svg/menu.svg" /></label> {{ partial "docs/mobile-header" . }}
</div> </div>
<div class="markdown"> <article class="markdown">
{{- .Content -}} {{- .Content -}}
</div> </article>
</div> </div>
{{ $showToC := default (default true .Site.Params.BookShowToC) .Params.bookshowtoc }} {{ $showToC := default (default true .Site.Params.BookShowToC) .Params.bookshowtoc }}
{{ if and ($showToC) (.Page.TableOfContents) }} {{ if and ($showToC) (.Page.TableOfContents) }}
<div class="toc"> <aside class="toc fixed">
{{ partial "docs/toc" . }} {{ partial "docs/toc" . }}
</div> </aside>
{{ end }} {{ end }}
</div> </div>

0
layouts/partials/docs/inject/nav-after.html → layouts/partials/docs/inject/menu-after.html
View file

0
layouts/partials/docs/inject/nav-before.html → layouts/partials/docs/inject/menu-before.html
View file

2
layouts/partials/docs/menu-filetree.html
View file

@ -8,7 +8,7 @@
{{ define "book-section" }} <!-- Single section of menu (recursive) --> {{ define "book-section" }} <!-- Single section of menu (recursive) -->
<ul> <ul>
{{ range .Section.Sections }} {{ range .Section.Sections }}
<li {{- if .Params.bookrootsection}} class="section" {{ end }}> <li {{- if .Params.bookflatsection}} class="flat" {{ end }}>
{{- if .Content -}} {{- if .Content -}}
{{ template "book-page-link" (dict "Page" . "CurrentPage" $.CurrentPage) }} {{ template "book-page-link" (dict "Page" . "CurrentPage" $.CurrentPage) }}
{{- else -}} {{- else -}}

4
layouts/partials/docs/mobile-header.html Normal file
View file

@ -0,0 +1,4 @@
<label for="menu-control">
<img src="/svg/menu.svg" />
</label>
<strong>{{- template "title" . }}</strong>