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 {
color: #1F37E6;
color: $color-link;
}
}

View file

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

View file

@ -17,28 +17,20 @@ body {
line-height: $body-line-height;
}
.book-content {
max-width: $content-max-width;
margin: 0 auto;
}
.book-page {
padding: 0 $size-48;
a {
text-decoration: none;
color: $color-link;
}
.book-brand {
padding: 0 $padding-16;
font-weight: 300;
a {
color: $gray-800;
text-decoration: none;
}
}
// Navigation styles
.book-nav {
width: $nav-menu-width;
flex-grow: 0;
width: $nav-menu-width;
nav {
position: fixed;
@ -50,14 +42,54 @@ body {
font-size: $font-size-14;
background: $gray-100;
}
ul {
list-style: none;
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 {
flex-grow: 0;
width: $toc-menu-width;
font-size: $font-size-12;
nav {
position: fixed;
@ -67,6 +99,8 @@ body {
overflow-x: hidden;
overflow-y: auto;
font-size: $font-size-12;
> ul {
margin: $size-48 0;
padding: 0 $padding-16;
@ -80,7 +114,6 @@ body {
}
a {
text-decoration: none;
line-height: 1.25;
padding: $padding-4 0;
display: block;

View file

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

View file

@ -1,3 +1,7 @@
{{ define "main" }}
{{- define "title" -}}
{{ .Site.Title }}
{{ end }}
{{- define "main" -}}
<div>{{ .Content }}</div>
{{ 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="/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 }}
<link rel="stylesheet" href="{{ $styles.Permalink }}">

View file

View file

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