Refactor partials, layout and sass files

This commit is contained in:
Alex Shpak 2018-09-11 16:51:27 +02:00
parent 43974d0908
commit 628a4df0df
18 changed files with 95 additions and 68 deletions

View file

@ -50,6 +50,6 @@ html, button, input, select, textarea, .pure-g [class *= "pure-u"] {
} }
&.active { &.active {
color: #1F37E6; color: $color-link;
} }
} }

View file

@ -25,12 +25,12 @@ $gray-800: #343a40;
$gray-900: #212529; $gray-900: #212529;
$black: #000; $black: #000;
// $color-link: $color-link: #1177EE;
// $color-visited-link: $color-visited-link: #7823c9;
$body-line-height: 1.75; $body-line-height: 1.75;
$body-min-width: 25rem; $body-min-width: 25rem;
$content-max-width: 64rem; $content-max-width: 64rem;
$content-min-width: $body-min-width;
$nav-menu-width: 18rem; $nav-menu-width: 18rem;
$toc-menu-width: 14rem; $toc-menu-width: 14rem;

View file

@ -17,28 +17,20 @@ body {
line-height: $body-line-height; line-height: $body-line-height;
} }
.book-content { a {
max-width: $content-max-width; text-decoration: none;
margin: 0 auto; color: $color-link;
}
.book-page {
padding: 0 $size-48;
} }
.book-brand { .book-brand {
padding: 0 $padding-16; padding: 0 $padding-16;
font-weight: 300; font-weight: 300;
a {
color: $gray-800;
text-decoration: none;
}
} }
// Navigation styles
.book-nav { .book-nav {
width: $nav-menu-width;
flex-grow: 0; flex-grow: 0;
width: $nav-menu-width;
nav { nav {
position: fixed; position: fixed;
@ -50,14 +42,54 @@ body {
font-size: $font-size-14; font-size: $font-size-14;
background: $gray-100; background: $gray-100;
}
ul {
list-style: none;
padding-left: $padding-16; padding-left: $padding-16;
} }
a {
display: block;
color: $gray-800;
padding: $padding-4 $padding-16;
text-transform: capitalize;
&[href]:hover {
color: $gray-600;
}
&.active {
color: $color-link;
}
}
// class used for sections with bookTopSection: true
.book-nav-section {
margin-bottom: $padding-16;
> a { font-weight: 600; }
> ul { padding-left: 0; }
}
} }
.book-content {
max-width: $content-max-width;
min-width: $content-min-width;
margin: 0 auto;
.book-page {
padding: $padding-16 $size-48;
}
a:visited {
color: $color-visited-link
}
}
// Table of Contents styles
.book-toc { .book-toc {
flex-grow: 0; flex-grow: 0;
width: $toc-menu-width; width: $toc-menu-width;
font-size: $font-size-12;
nav { nav {
position: fixed; position: fixed;
@ -67,6 +99,8 @@ body {
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
font-size: $font-size-12;
> ul { > ul {
margin: $size-48 0; margin: $size-48 0;
padding: 0 $padding-16; padding: 0 $padding-16;
@ -80,7 +114,6 @@ body {
} }
a { a {
text-decoration: none;
line-height: 1.25; line-height: 1.25;
padding: $padding-4 0; padding: $padding-4 0;
display: block; display: block;

View file

@ -1,25 +1,31 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
{{ partial "book-html-head" . }} {{ partial "book/html-head" . }}
<title>{{ .Site.Title }}</title> <title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
</head> </head>
<body> <body>
<div class="pure-g"> <div class="pure-g">
<div class="pure-u book-nav"> <div class="pure-u book-nav">
{{ partial "book-nav" . }} {{ partial "book/nav" . }}
</div> </div>
<div class="pure-u book-content"> <div class="pure-u book-content">
<div class="pure-g"> <div class="pure-g">
<div class="pure-u book-page markdown"> <div class="pure-u book-page markdown">
{{ block "main" . }}{{ end }} {{ block "main" . }}{{ end }}
</div> </div>
{{ if and (default true .Site.Params.BookShowTOC) (.Page.TableOfContents) }}
<div class="pure-u book-toc"> <div class="pure-u book-toc">
{{ partial "book-toc" . }} {{ partial "book/toc" . }}
</div> </div>
{{ end }}
</div> </div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

View file

@ -1,7 +0,0 @@
{{ define "title" }}
{{ .Title }} &ndash; {{ .Site.Title }}
{{ end }}
{{ define "main" }}
<div>{{ .Content }}</div>
{{ end }}

View file

@ -1,7 +1,7 @@
{{ define "title" }} {{- define "title" -}}
{{ .Title }} &ndash; {{ .Site.Title }} {{ .Site.Title }}
{{ end }} {{ end }}
{{ define "main" }} {{- define "main" -}}
<div>{{ .Content }}</div> <div>{{ .Content }}</div>
{{ end }} {{ end }}

View file

@ -1,3 +1,7 @@
{{ define "main" }} {{- define "title" -}}
{{ .Site.Title }}
{{ end }}
{{- define "main" -}}
<div>{{ .Content }}</div> <div>{{ .Content }}</div>
{{ end }} {{ end }}

View file

@ -1 +0,0 @@
{{ .Page.TableOfContents }}

View file

@ -3,7 +3,7 @@
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,600" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,600" rel="stylesheet">
<link href="/css/pure-min.css" rel="stylesheet"> <link href="/css/pure-min.css" rel="stylesheet">
<link href="/css/grids-responsive-min.css" rel="stylesheet"> <!-- <link href="/css/grids-responsive-min.css" rel="stylesheet"> -->
{{ $styles := resources.Get "styles.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }} {{ $styles := resources.Get "styles.scss" | resources.ToCSS | resources.Minify | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $styles.Permalink }}"> <link rel="stylesheet" href="{{ $styles.Permalink }}">

View file

View file

@ -12,27 +12,29 @@
{{ end }} {{ end }}
<nav role="navigation" class="pure-menu"> <nav role="navigation">
{{ partial "book-brand" . }} {{ partial "book/nav-brand" . }}
<ul class="pure-menu-list pure-menu-root"> <ul>
{{ range .Scratch.Get "BookSections" }} {{ range .Scratch.Get "BookSections" }}
{{ template "book-section" (dict "Section" . "CurrentPage" $.Permalink) }} {{ template "book-section" (dict "Section" . "CurrentPage" $.Permalink) }}
{{ end }} {{ end }}
</ul> </ul>
{{ partial "book/nav-after" . }}
</nav> </nav>
<!-- Single section of menu (recursive) --> <!-- Single section of menu (recursive) -->
{{ define "book-section" }} {{ define "book-section" }}
<li class="pure-menu-item"> <li {{ if .Section.Params.booktopsection }}class="book-nav-section"{{ end }}>
{{ template "book-heading" .Section }} {{ template "book-heading" .Section }}
<ul class="pure-menu-list"> <ul>
{{ range .Section.Sections }} {{ range .Section.Sections }}
{{ template "book-section" (dict "Section" . "CurrentPage" $.CurrentPage) }} {{ template "book-section" (dict "Section" . "CurrentPage" $.CurrentPage) }}
{{ end }} {{ end }}
{{ range .Section.Pages }} {{ range .Section.Pages }}
<li class="pure-menu-item"> <li>
<a href="{{ .RelPermalink }}" class="pure-menu-link {{ if eq $.CurrentPage .Permalink }}active{{ end }}"> <a href="{{ .RelPermalink }}" class="{{ if eq $.CurrentPage .Permalink }}active{{ end }}">
{{ default .Title (.File | humanize | title) }} {{ default .Title (.File | humanize | title) }}
</a> </a>
</li> </li>
@ -49,13 +51,13 @@
{{ $title := default .Title $title }} {{ $title := default .Title $title }}
{{ if .Content }} {{ if .Content }}
<a href="{{ .RelPermalink }}" class="pure-menu-link {{ if .IsSection }}section{{ end }}"> <a href="{{ .RelPermalink }}">
{{- $title -}} {{- $title -}}
</a> </a>
{{ else }} {{ else }}
<span class="pure-menu-heading {{ if .IsSection }}section{{ end }}"> <a>
{{- $title -}} {{- $title -}}
</span> </a>
{{ end }} {{ end }}
{{ end }} {{ end }}

View file

@ -0,0 +1,5 @@
<nav role="navigation">
{{ partial "book/nav-brand" . }}
{{ with .Site.GetPage .Site.Params.BookMenuBundle }}{{ .Content }}{{ end }}
{{ partial "book/nav-after" . }}
</nav>

View file

@ -0,0 +1,5 @@
{{ if .Site.Params.BookMenuBundle }}
{{ partial "book/nav-bundle" . }}
{{ else }}
{{ partial "book/nav-auto" . }}
{{ end }}

View file

@ -0,0 +1 @@
{{ .Page.TableOfContents }}

View file

@ -1,21 +0,0 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your page title</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/pure-min.css"> <!--[if lte IE 8]>
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-old-ie-min.css">
<![endif]-->
<!--[if gt IE 8]><!-->
<link rel="stylesheet" href="https://unpkg.com/purecss@1.0.0/build/grids-responsive-min.css">
<!--<![endif]--></head>
<body>
<!--
Your HTML goes here. Visit purecss.io/layouts/ for some sample HTML code.
-->
</body>
</html>

Binary file not shown.