diff --git a/web/layouts/docs/single.html b/web/layouts/docs/single.html
index 769863d4ac73699b47f9db8553f42a38e8af61a3..1d1a451d52e86c8f368deb3f7bd00d95e196a03b 100644
--- a/web/layouts/docs/single.html
+++ b/web/layouts/docs/single.html
@@ -3,15 +3,14 @@
<div class="w-1/4">
{{ $segments := split .RelPermalink "/" }}
{{ $subsection := index $segments 2 }}
- <h3>
+ <div class="text-xs font-serif-caps">
<a href="/docs/">Docs</a> / <span class="text-orange">
{{ if eq $subsection "devguide"}}Developer Guide{{ end }}
{{ if eq $subsection "benchmarks"}}Benchmarks{{ end }}
{{ if eq $subsection "quickstart"}}Quickstart{{ end }}
{{ if eq $subsection "tools"}}Tools{{ end }}
</span>
- </h3>
- <hr>
+ </div>
<ul class="list-reset text-sm">
{{ $currentPage := . }}
{{ $currentMenu := index .Site.Menus $subsection }}
@@ -26,9 +25,13 @@
</ul>
</div>
<div class="w-3/4">
- <h1>{{ .Title }}</h1>
+ <h1 class="font-serif-caps">{{ .Title }}</h1>
{{ if or (eq $subsection "devguide") (eq $subsection "quickstart") }}
- <div id="os-selector">Select OS: <a id="btn-win"><i class="fab fa-windows"></i> Windows</a> <a id="btn-linux"><i class="fab fa-linux"></i> Linux</a> <a id="btn-mac"><i class="fab fa-apple"></i> macOS</a></div>
+ <div class="mb-4" id="os-selector">Select OS:
+ <a class="btn" id="btn-win"><i class="fab fa-windows"></i> Windows</a>
+ <a class="btn" id="btn-linux"><i class="fab fa-linux"></i> Linux</a>
+ <a class="btn" id="btn-mac"><i class="fab fa-apple"></i> macOS</a>
+ </div>
{{ end }}
{{ .Content }}
diff --git a/web/layouts/partials/footer-nav.html b/web/layouts/partials/footer-nav.html
index 38ab39181f33043b6b2e7dd884636a0f958eeab1..a29f8a609119cb3f4f606815fc187bdf042eab21 100644
--- a/web/layouts/partials/footer-nav.html
+++ b/web/layouts/partials/footer-nav.html
@@ -3,37 +3,34 @@
{{ $segments := split .RelPermalink "/" }}
{{ $subsection := index $segments 2 }}
-<div class="footer-nav">
- <div class="row between-xs">
- <div class="col-xs-6">
- {{ if .NextInSection }}
- {{ $nextSubsection := index (split .NextInSection.RelPermalink "/") 2 }}
- {{ if eq $nextSubsection $subsection }}
- <a href="{{ .NextInSection.Permalink }}" title="{{ .NextInSection.Permalink }}">
- <span>Previous</span>
- <div class="nav-title">
- {{ .NextInSection.Title }}
- </div>
+<div class="flex text-sm mb-4">
+ <div class="w-1/2">
+ {{ if .NextInSection }}
+ {{ $nextSubsection := index (split .NextInSection.RelPermalink "/") 2 }}
+ {{ if eq $nextSubsection $subsection }}
+ <a href="{{ .NextInSection.Permalink }}" title="{{ .NextInSection.Permalink }}">
+ <div class="mb-1"><i class="fas fa-arrow-left"></i> Previous</div>
+ <div class="italic">
+ {{ .NextInSection.Title }}
+ </div>
+ </a>
+ {{ end }}
+ {{ end }}
+ </div>
+ <div class="w-1/2 text-right">
+ {{ if .PrevInSection }}
+ {{ $prevSubsection := index (split .PrevInSection.RelPermalink "/") 2 }}
+ {{ if eq $prevSubsection $subsection }}
+ <span class="tr">
+ <a href="{{ .PrevInSection.Permalink }}" title="{{ .PrevInSection.Permalink }}">
+ <div class="mb-1">Next <i class="fas fa-arrow-right"></i></div>
+ <div class="italic">
+ {{ .PrevInSection.Title }}
+ </div>
</a>
+ </span>
{{ end }}
- {{ end }}
- </div>
- <div class="col-xs-6">
- {{ if .PrevInSection }}
- {{ $prevSubsection := index (split .PrevInSection.RelPermalink "/") 2 }}
- {{ if eq $prevSubsection $subsection }}
- <span class="tr">
- <a href="{{ .PrevInSection.Permalink }}" title="{{ .PrevInSection.Permalink }}">
- <div>Next</div>
- <div class="nav-titl e">
- {{ .PrevInSection.Title }}
- </div>
- </a>
- </span>
- {{ end }}
- {{ end }}
- </div>
+ {{ end }}
</div>
</div>
-<br>
{{ end }}
diff --git a/web/layouts/partials/header.html b/web/layouts/partials/header.html
index f9c75f1afb2dc614a0ef2832c5b5597ae0b2f738..e316cf4086432e1cdbe3e051d1bdce48cb6a9cb7 100644
--- a/web/layouts/partials/header.html
+++ b/web/layouts/partials/header.html
@@ -29,7 +29,7 @@
<div class="container mx-auto">
<div class="flex border-b py-4">
<div class="w-1/4">
- <a href="/" class="">{{ .Site.Title }}</a>
+ <a href="/" class="font-serif-caps">{{ .Site.Title }}</a>
</div>
{{ $currentPage := . }}
<div class="w-1/2 flex justify-center">
@@ -42,11 +42,11 @@
</div>
</div>
{{ if .Site.Params.alert }}
- <div class="text-sm flex justify-center p-2 bg-blue-lightest text-blue-darker rounded">
+ <div class="text-sm flex justify-center m-2 p-2 bg-blue-lightest text-blue-darker rounded">
<i class="fas fa-exclamation-triangle"></i>
<span class="lh-title ml3">{{ .Site.Params.alert | safeHTML }}</span>
</div>
{{ end }}
</div>
</header>
- <div class="container mx-auto bg-grey-lightest p-2">
+ <div class="container mx-auto py-2">
diff --git a/web/layouts/partials/page-info.html b/web/layouts/partials/page-info.html
index d9e3f6f75413a3fef0f225be52bd775e402491ea..f02ef52c3cfb2ac1d7b1ee112f5721e0219afe1f 100644
--- a/web/layouts/partials/page-info.html
+++ b/web/layouts/partials/page-info.html
@@ -1,6 +1,6 @@
-<div class="page-info">
+<div class="text-sm text-grey-darker">
<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> Generated with <a href="https://gohugo.com">Hugo</a> {{ .Hugo.Version }}. Last revision: {{ .Lastmod.Format "January 2, 2006" }} {{ if .IsPage }}<em>
+ Generated with <a href="https://gohugo.com">Hugo</a> {{ .Hugo.Version }}. Last revision: {{ .Lastmod.Format "January 2, 2006" }} {{ if .IsPage }}<em>
{{ with .GitInfo }}
<br>
Commit: {{ .Subject }} <a href="https://github.com/ufz/ogs/commit/{{ .AbbreviatedHash }}">{{ .AbbreviatedHash }}</a>
diff --git a/web/src/styles.css b/web/src/styles.css
index e1216ff87b2543be6e45006b41cdbdc827c13761..6b860b58845000ce60ea1e4a1f6f60878887aa2d 100644
--- a/web/src/styles.css
+++ b/web/src/styles.css
@@ -14,6 +14,7 @@ a.active {
h1, h2, h3, h4, h5, h6 {
@apply .font-serif;
+ @apply .pt-2;
@apply .mb-4;
}
@@ -25,4 +26,27 @@ p, ul, pre {
@apply .mb-4;
}
+/* ------------------------------- Components ------------------------------- */
+.btn {
+ @apply .px-2;
+ @apply .py-1;
+ @apply .border-2;
+ @apply .rounded-lg;
+}
+
+.btn.active {
+ @apply .border-orange;
+}
+
+.note {
+ @apply .bg-orange-lightest;
+ @apply .px-4;
+ @apply .py-1;
+ @apply .mb-4;
+}
+
+.note h3 {
+ @apply .text-orange;
+}
+
@tailwind utilities;