diff --git a/web/layouts/docs/single.html b/web/layouts/docs/single.html
index 56c64830b20c82321a1854349f3d93080ef13c51..8065a1d1595ef022cc4edf203ebb76bca811bdff 100644
--- a/web/layouts/docs/single.html
+++ b/web/layouts/docs/single.html
@@ -2,17 +2,20 @@
<div class="col-xs-3">
{{ $segments := split .RelPermalink "/" }}
{{ $subsection := index $segments 2 }}
- <ul>
- {{ range .Site.Pages.ByWeight }}
- {{ if eq .Type "docs"}}
- {{ $localSegments := split .RelPermalink "/" }}
- {{ $localSubsection := index $localSegments 2 }}
- {{ if eq $localSubsection $subsection }}
- <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
+ <h3>Developer Guide</h3>
+ <hr>
+ <ul class="sidenav">
+ {{ $currentPage := . }}
+ {{ $currentMenu := index .Site.Menus $subsection }}
+ {{ range $currentMenu }}
+ {{ if .HasChildren }}
+ <li class="category">{{ .Name }}</li>
+ {{ range .Children }}
+ <li><a href="{{ .URL }}"{{if $currentPage.IsMenuCurrent $subsection . }} class="active"{{end}}>{{ .Name }}</a></li>
+ {{ end }}
{{ end }}
{{ end }}
- {{ end }}
- <ul>
+ </ul>
</div>
<div class="col-xs-9">
<h1>{{ .Title }}</h1>
@@ -20,22 +23,8 @@
{{ .Content }}
<hr>
- <div class="row between-xs">
- <div class="col-xs-4">
- {{ if isset .Params "back" }}
- <a href='{{ relref . .Params.back }}'>Back: {{ .Params.back }}</a>
- {{ end }}
- </div>
-
- <div class="col-xs-4" style="text-align: right">
- {{ if isset .Params "next" }}
- <a href='{{ relref . .Params.next }}'>Next: {{ .Params.next }}</a>
- {{ end }}
- </div>
- </div>
+ {{ partial "footer-nav.html" . }}
- <p>This article was written by {{ .Params.Author }}. If you are missing something or you find an error please <a href="mailto:ogs-devs@googlegroups.com">let us know</a>.</p>
</div>
-
-
+{{ partial "page-info" . }}
{{ partial "footer.html" . }}
diff --git a/web/layouts/partials/footer-nav.html b/web/layouts/partials/footer-nav.html
new file mode 100644
index 0000000000000000000000000000000000000000..d231c0241a3630d230ff4a1b3cc9db51b909a6e8
--- /dev/null
+++ b/web/layouts/partials/footer-nav.html
@@ -0,0 +1,28 @@
+{{ if .Prev | or .Next }}
+<div class="footer-nav">
+ <div class="row between-xs">
+ <div class="col-xs-6">
+ {{ if .Prev }}
+ <a href="{{ .Prev.Permalink }}" title="{{ .Prev.Permalink }}">
+ <span>Previous</span>
+ <div class="nav-title">
+ {{ .Prev.Title }}
+ </div>
+ </a>
+ {{ end }}
+ </div>
+ <div class="col-xs-6">
+ {{ if .Next }}
+ <span class="tr">
+ <a href="{{ .Next.Permalink }}" title="{{ .Next.Permalink }}">
+ <div>Next</div>
+ <div class="nav-title">
+ {{ .Next.Title }}
+ </div>
+ </a>
+ </span>
+ {{ end }}
+ </div>
+ </div>
+</div>
+{{ end }}
diff --git a/web/layouts/partials/footer.html b/web/layouts/partials/footer.html
index b421d5313a7ba5c7e2f13572390013151f51494c..e88706a756b878a9619080a21036e4c1babaedf1 100644
--- a/web/layouts/partials/footer.html
+++ b/web/layouts/partials/footer.html
@@ -1,5 +1,4 @@
<!-- <script src="js/scripts.js"></script> -->
- <p>Last revision: {{ .Lastmod.Format "January 2, 2006" }}{{ if .IsPage }}<em>{{ with .GitInfo }}| {{ .Subject }} | <a href="https://github.com/ufz/ogs/commit/{{ .AbbreviatedHash }}">{{ .AbbreviatedHash }}</a>{{end }}</em>{{ end }}
</div> <!-- row -->
</div> <!-- container -->
</body>
diff --git a/web/layouts/partials/header.html b/web/layouts/partials/header.html
index 5e3d8841f0e8415ad3b9ef245b96274e1af96fc8..52b0b32fd7ef337969436f9a6b3ddc26756908c6 100644
--- a/web/layouts/partials/header.html
+++ b/web/layouts/partials/header.html
@@ -25,7 +25,11 @@
<body>
<div class="container">
- <div class="row">
- <div class="nav"><a href="/">Home</a> | <a href="/news">News</a> | <a href="/about">About</a> | <a href="/docs">Docs</a></div>
- </div>
+ <nav>
+ <a href="/" class="black b">opengeosys.org</a>
+ {{ $currentPage := . }}
+ {{ range .Site.Menus.main }}
+ <a href="{{ .URL }}" {{if $currentPage.IsMenuCurrent "main" . }} class="active"{{end}}>{{ .Name }}</a>
+ {{ end }}
+ </nav>
<div class="row">
diff --git a/web/layouts/partials/page-info.html b/web/layouts/partials/page-info.html
new file mode 100644
index 0000000000000000000000000000000000000000..22acb8af6a783095fa7dbb570bdd8cdb09ff1894
--- /dev/null
+++ b/web/layouts/partials/page-info.html
@@ -0,0 +1,4 @@
+<div class="page-info">
+ <p>This article was written by {{ .Params.Author }}. If you are missing something or you find an error please <a href="mailto:ogs-devs@googlegroups.com">let us know</a>. <br>
+ Last revision: {{ .Lastmod.Format "January 2, 2006" }}{{ if .IsPage }}<em>{{ with .GitInfo }}| {{ .Subject }} | <a href="https://github.com/ufz/ogs/commit/{{ .AbbreviatedHash }}">{{ .AbbreviatedHash }}</a>{{end }}</em>{{ end }}</p>
+</div>
diff --git a/web/layouts/section/docs.html b/web/layouts/section/docs.html
index 5d45a266121c6519039d52bc992726ebe73965df..952240ca18637ac33b1c3c01355ba6e20c23677c 100644
--- a/web/layouts/section/docs.html
+++ b/web/layouts/section/docs.html
@@ -3,10 +3,13 @@
<h1>OpenGeoSys Documentation</h1>
<div class="row">
{{ range .Params.sections }}
- <div class="col-xs-4">
- <h3><a href="/docs/{{ .slug }}">{{ .name }}</a></h3>
- <p>{{ .text }}</p>
- </div>
+ <article class="fl w-33 ma2 bg-white br3 pa4 pa4-ns mv3 ba b--black-10">
+ <div class="tc">
+ <h1 class="f4"><a href="/docs/{{ .slug }}">{{ .name }}</a></h1>
+ <hr class="mw3 bb bw1 b--black-10">
+ </div>
+ <p class="1h-copy measure center f6 black-70">{{ .text }}</p>
+ </article>
{{ end }}
</div>
diff --git a/web/src/scss/main.scss b/web/src/scss/main.scss
index 048668b88aa197ddc75e19e3acd892b058696a05..c35f218fdefad171d4f3b9c340a0eae248f0a183 100644
--- a/web/src/scss/main.scss
+++ b/web/src/scss/main.scss
@@ -3,3 +3,91 @@
max-width: 100%;
height: auto;
}
+
+@import "node_modules/tachyons-sass/tachyons.scss";
+
+// Fonts
+h1, h2, h3, h4, h5, h6 { @extend .athelas; }
+p, li { @extend .avenir; }
+code, pre { @extend .code }
+
+// Header
+h1 { @extend .f2; }
+h2 { @extend .f3; }
+h3 { @extend .f4; }
+
+// Text
+a {
+ @extend .link;
+ @extend .hover-orange;
+}
+
+p, li {
+ @extend .measure-wide;
+ @extend .lh-copy;
+ @extend .f5;
+}
+
+// Code
+code, pre {
+ @extend .lh-solid;
+}
+
+// Nav
+.nav-a-style {
+ @extend .gray;
+ @extend .dim;
+ @extend .dib;
+}
+nav {
+ @extend .pa3;
+ @extend .pa4-ns;
+
+ a {
+ @extend .nav-a-style;
+ @extend .f6;
+ @extend .f5-ns;
+ @extend .mr3;
+
+
+ }
+ a.active {
+ @extend .orange;
+ }
+}
+
+// Docs
+
+// Side nav
+ul.sidenav {
+ @extend .list;
+ @extend .pl0;
+ li {
+ @extend .f5;
+ }
+ li.category {
+ @extend .athelas;
+ @extend .small-caps;
+ }
+ a {
+ @extend .nav-a-style;
+ @extend .f6;
+ }
+ a.active {
+ @extend .orange;
+ }
+}
+
+// Footer nav-a-style
+.footer-nav {
+ a {
+ @extend .f6;
+ }
+}
+
+.page-info {
+ p {
+ @extend .f6;
+ max-width: 100%;
+ }
+}