simplified everything, partially half the size loaded, despite the unified css file :); added colour scheme support; added blogroll and about pages

assets/_default/list.scss

@@ -1,9 +0,0 @@
-@import '../import/colors.scss';
-@import '../import/main.scss';
-@import '../import/nav.scss';
-@import '../import/footer.scss';
-@import '../import/include.scss';
-
-main {
-  @include posts;
-}

assets/_default/single.scss

@@ -1,108 +0,0 @@
-@import '../import/colors.scss';
-@import '../import/syntax.scss';
-@import '../import/main.scss';
-@import '../import/nav.scss';
-@import '../import/footer.scss';
-@import '../import/include.scss';
-
-.section-article {
-  article {
-    margin: 0 auto;
-    max-width: 720px;
-    .meta {
-      color: $white-dark;
-    }
-    .title {
-      font-size: 2em;
-      margin-top: 20px;
-    }
-    img {
-      border-radius: 5px;
-      box-shadow: 0 0 40px 10px rgb(30, 30, 45);
-      margin-bottom: 15px;
-      width: 100%;
-    }
-    @include a-underlined;
-    h2 {
-      font-size: .6em;
-    }
-    aside {
-      margin-top: 80px;
-      .tags {
-        display: flex;
-        list-style: none;
-        margin-left: -15px;
-        padding: 0;
-        li {
-          a {
-            background: $bg60;
-            border: 0;
-            border-radius: 5px;
-            color: $white-dark;
-            margin-left: 15px;
-            padding: 10px;
-            &:hover {
-              background: $bg50;
-              color: $white-light;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-.section-articles {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  grid-gap: 1rem;
-  margin: 20px auto 0 auto;
-  max-width: 720px;
-  white-space: nowrap;
-  &::after {
-    background: $bg50;
-    content: '';
-    height: 200px;
-    left: 0;
-    position: absolute;
-    width: 100vw;
-    z-index: -10;
-  }
-  article {
-    display: flex;
-    flex-flow: column;
-    height: max-content;
-    margin: 20px 0;
-    a {
-      border-bottom: 1px solid transparent;
-      color: $white-dark;
-      transition: border .2s, color .2s;
-      &:hover {
-        border-bottom: 1px solid;
-        color: $red;
-        text-decoration: none;
-      }
-    }
-  }
-  .next-article {
-    margin-right: auto;
-  }
-  .previous-article {
-    margin-left: auto;
-  }
-}
-
-@media (max-width: 400px) {
-  .section-articles {
-    grid-template-columns: repeat(1, 1fr);
-    &::after {
-      height: 250px;
-    }
-    .next-article {
-      margin: 20px auto 0 auto;
-    }
-    .previous-article {
-      margin: 0 auto;
-    }
-  }
-}

assets/errorpages.scss

@@ -1,13 +0,0 @@
-@import 'import/colors.scss';
-@import 'import/main.scss';
-@import 'import/nav.scss';
-@import 'import/footer.scss';
-@import 'import/include.scss';
-
-header {
-  margin: 150px 0;
-  text-align: center;
-  h2 {
-    font-size: 2em;
-  }
-}

assets/import/colors.scss

@@ -1,17 +0,0 @@
-$green: rgb(100, 200, 130);
-$green-dark: rgb(80, 180, 110);
-$green-light: rgb(100, 220, 150);
-$red: rgb(255, 130, 130);
-$red-dark: rgb(235, 110, 110);
-$red-light: rgb(255, 150, 150);
-$white: rgb(245, 245, 255);
-$white-dark: rgb(215, 215, 225);
-$white-light: rgb(255, 255, 255);
-$white-disabled: rgb(150, 150, 160);
-
-$bg30: rgb(30, 30, 45);
-$bg40: rgb(40, 40, 60);
-$bg50: rgb(50, 50, 75);
-$bg60: rgb(60, 60, 90);
-$bg70: rgb(70, 70, 105);
-$bg80: rgb(80, 80, 120);

assets/import/footer.scss

@@ -1,60 +0,0 @@
-footer {
-  background: $bg30;
-  color: $white-dark;
-  margin-top: 100px;
-  overflow-x: auto;
-  overflow-y: hidden;
-  white-space: nowrap;
-  &::after {
-    background: $bg30;
-    content: '';
-    height: 10000px;
-    overflow: hidden;
-    position: fixed;
-    width: 100vw;
-  }
-  .container {
-    align-items: center;
-    display: flex;
-    height: 64px;
-    .website-subnav {
-      margin-left: auto;
-      ul {
-        display: flex;
-        list-style-type: none;
-        padding: 0;
-        li {
-          margin-left: 30px;
-          a {
-            border-bottom: 1px solid transparent;
-            color: $white-dark;
-            padding: 5px 0;
-            transition: border .2s, color .2s;
-            &:hover {
-              border-bottom: 1px solid;
-              color: $red;
-              text-decoration: none;
-            }
-          }
-        }
-      }
-    }
-  }
-}
-
-@media (max-width: 600px) {
-  footer {
-    .container {
-      max-width: none;
-      .website-version {
-        order: 2;
-        padding: 10px 20px;
-      }
-      .website-subnav {
-        li {
-          padding: 4px 30px 4px 0;
-        }
-      }
-    }
-  }
-}

assets/import/include.scss

@@ -1,70 +0,0 @@
-@mixin a-underlined {
-  a {
-    border-bottom: 1px solid;
-    color: $white;
-    margin: -2px 0;
-    padding: 2px 0;
-    transition: border .2s, color .2s;
-    &:hover {
-      color: $red;
-      text-decoration: none;
-    }
-  }
-}
-
-@mixin posts {
-  .section.posts {
-    .inner {
-      display: grid;
-      grid-gap: 1rem;
-      grid-template-columns: repeat(2, 1fr);
-      margin: 40px 0;
-      a {
-        color: $white-light;
-        text-decoration: none;
-      }
-      article {
-        background: $bg60;
-        border-radius: 5px;
-        color: $white;
-        display: flex;
-        flex-flow: column;
-        height: 100%;
-        padding: 20px 40px;
-        transition: background .2s;
-        &:hover {
-          background: $bg50;
-        }
-        h2 {
-          color: $white;
-          display: flex;
-          font-size: 18px;
-          font-weight: 400;
-          margin: 0 0 10px 0;
-          min-height: 65px;
-          text-align: center;
-          span {
-            margin: auto;
-          }
-        }
-        p.description {
-          color: $white-dark;
-          flex: 1;
-          font-size: 16px;
-          margin: 20px 0;
-        }
-        p.meta {
-          color: $white-dark;
-          font-size: 14px;
-          margin: 0;
-          text-align: center;
-        }
-      }
-    }
-  }
-  @media (max-width: 900px) {
-    .section.posts .inner {
-      grid-template-columns: repeat(1, 1fr);
-    }
-  }
-}

assets/import/main.scss

@@ -1,59 +0,0 @@
-* {
-  box-sizing: border-box;
-  scrollbar-color: $red $bg60;
-  scrollbar-width: thin;
-  &::-webkit-scrollbar {
-    background: $bg60;
-    width: 6px;
-  }
-  &::-webkit-scrollbar-thumb {
-    background: $red;
-  }
-}
-html {
-  overflow-x: hidden;
-  overflow-y: scroll;
-}
-body {
-  background: $bg40;
-  color: $white;
-  display: grid;
-  font-family: 'Lucida Console', monospace;
-  line-height: 1.8;
-  margin: 0;
-}
-a {
-  color: $red;
-  text-decoration: none;
-  &:hover {
-    text-decoration: underline;
-  }
-}
-h1 {
-  font-size: 1.5em;
-}
-h2 {
-  font-size: 1.3em;
-}
-h3 {
-  font-size: 1.1em;
-}
-h4 {
-  font-size: .9em;
-}
-hr {
-  border-color: $bg60;
-  color: $bg60;
-  margin: 60px 0;
-}
-
-.container {
-  margin: 0 auto;
-  max-width: 1140px;
-  width: calc(100% - 40px);
-}
-
-main {
-  width: 100vw;
-  margin: 60px 0 0 0;
-}

assets/import/nav.scss

@@ -1,28 +0,0 @@
-header.main {
-  align-items: center;
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0 auto;
-  max-width: 1140px;
-  min-height: 64px;
-  width: 100%;
-  a {
-    color: $white;
-    padding: 17.6px 15px;
-    text-decoration: none;
-    text-underline-offset: 6px;
-    margin: 0 15px;
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-  h1 {
-    display: flex;
-    font-size: 16px;
-    margin: 0;
-  }
-  nav {
-    display: flex;
-    flex-wrap: wrap;
-  }
-}

assets/import/syntax.scss

@@ -1,7 +0,0 @@
- .chroma { // background
-  background: $bg30;
-  border-radius: 5px;
-  color: $white;
-  padding: 10px;
- }
-

assets/index.scss

@@ -1,134 +0,0 @@
-@import 'import/colors.scss';
-@import 'import/main.scss';
-@import 'import/nav.scss';
-@import 'import/footer.scss';
-@import 'import/include.scss';
-
-.section.header {
-  background: $bg60;
-  @include a-underlined;
-  header {
-    margin: 60px auto;
-    max-width: 600px;
-    text-align: center;
-    h2 {
-      font-size: 2.5em;
-      margin: auto;
-    }
-  }
-  .section.contact {
-    background: $bg70;
-    border-radius: 5px;
-    display: flex;
-    padding: 20px;
-    margin: 60px auto;
-    max-width: 500px;
-    .table.contact {
-      margin: 0 auto;
-      white-space: nowrap;
-      tr {
-        td {
-          &:first-of-type {
-            padding: 5px 30px 5px 0;
-            text-align: right;
-          }
-        }
-      }
-    }
-  }
-}
-
-main {
-  .latest {
-    color: $white-dark;
-    display: block;
-    font-size: 1.5em;
-    text-align: center;
-    margin: -7px;
-    a {
-      color: $white;
-      font-weight: bold;
-      transition: border .2s, color .2s;
-      &:hover {
-        color: $red;
-        text-decoration: none;
-      }
-    }
-  }
-  .section.projects {
-    .inner {
-      display: grid;
-      grid-gap: 1rem;
-      grid-template-columns: repeat(4, 1fr);
-      margin: 40px 0;
-      a {
-        color: $white-light;
-        text-decoration: none;
-      }
-      article {
-        background: $bg60;
-        border-radius: 5px;
-        color: $white;
-        display: flex;
-        flex-flow: column;
-        height: 100%;
-        padding: 20px 40px;
-        transition: background .2s;
-        &:hover {
-          background: $bg50;
-        }
-        h2 {
-          color: $white;
-          font-size: 18px;
-          font-weight: 400;
-          margin: 0;
-          text-align: center;
-        }
-        p.meta {
-          color: $white-dark;
-          font-size: 14px;
-          margin: 0;
-          text-align: center;
-        }
-      }
-    }
-  }
-  @include posts;
-}
-
-
-@media (max-width: 900px) {
-  main {
-    .section.projects.inner {
-      grid-template-columns: repeat(2, 1fr);
-    }
-  }
-}
-@media (max-width: 600px) {
-  .section.header {
-    .section.contact {
-      border-radius: 0;
-      padding: 10px;
-      margin: 60px -20px;
-      max-width: none;
-      overflow-x: auto;
-      width: 100vw;
-      .table.contact {
-        margin: 0 auto;
-        white-space: nowrap;
-        tr {
-          td {
-            &:first-of-type {
-              padding: 5px 20px 5px 0;
-            }
-          }
-        }
-      }
-    }
-  }
-  main {
-    .section.projects.inner {
-      grid-template-columns: repeat(1, 1fr);
-    }
-  }
-}

assets/style.scss

@@ -0,0 +1,112 @@
+:root {
+  --background: rgb(10, 10, 10);
+  --border: rgb(40, 40, 40);
+  --text: rgb(255, 255, 255);
+  --vrifox-red: rgb(255, 130, 130);
+}
+@media (prefers-color-scheme: light) {
+  :root {
+    --background: rgb(255, 255, 255);
+    --border: rgb(215, 215, 215);
+    --text: rgb(0, 0, 0);
+  }
+}
+
+* {
+  box-sizing: border-box;
+  scrollbar-color: var(--vrifox-red) var(--background);
+  scrollbar-width: thin;
+  &::-webkit-scrollbar {
+    background: var(--background);
+    width: 6px;
+  }
+  &::-webkit-scrollbar-thumb { background: var(--vrifox-red); }
+}
+
+html {
+  overflow-x: hidden;
+  overflow-y: scroll;
+}
+body {
+  background: var(--background);
+  color: var(--text);
+  display: grid;
+  font-family: system-ui, sans-serif;
+  font-size: 1.2em;
+  line-height: 1.8;
+  margin: 0;
+}
+
+a {
+  color: var(--text);
+  text-decoration: underline;
+  text-underline-offset: 6px;
+  text-decoration-color: var(--vrifox-red);
+  &:hover { text-decoration: underline; }
+}
+
+h1 { font-size: 1.5em; }
+h2 { font-size: 1.3em; }
+h3 { font-size: 1.1em; }
+h4 { font-size: 0.9em; }
+
+hr {
+  border-color: var(--text);
+  color: var(--text);
+  margin: 60px 0;
+}
+
+// ------------------------
+// - header / nav; footer -
+// ------------------------
+header, footer {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 auto;
+  max-width: 1140px;
+  min-height: 64px;
+  width: 100%;
+  a {
+    color: var(--text);
+    padding: 17.6px 15px;
+    text-decoration-color: var(--background);
+    text-decoration-thickness: 2px !important;
+    transition: text-decoration-color .2s;
+    margin: 0 15px;
+    &:hover { text-decoration-color: var(--vrifox-red); }
+    &.active { text-decoration-color: var(--text); }
+  }
+}
+header {
+  border-bottom: 1px solid var(--border);
+  h1 {
+    display: flex;
+    font-size: 1em;
+    margin: 0;
+  }
+  nav {
+    display: flex;
+    flex-wrap: wrap;
+  }
+}
+footer {
+  border-top: 1px solid var(--border);
+  color: var(--text);
+  a { color: var(--text); }
+  span {
+    padding: 17.6px 30px;
+    margin-right: auto;
+  }
+}
+
+// --------
+// - main -
+// --------
+main {
+  margin: 60px auto;
+  max-width: 720px;
+  padding: 30px;
+  width: 100%;
+  span { font-size: .8em; }
+}

config.yaml

@@ -12,16 +12,26 @@ menu:
     url: /
     weight: 1
   main:
+  - identifier: about
+    name: About
+    title: about
+    url: /about/
+    weight: 1
   - identifier: blog
-    name: blog
+    name: Blog
     title: blog
     url: /blog/
-    weight: 1
+    weight: 2
+  - identifier: blogroll
+    name: Blogroll
+    title: blogroll
+    url: /blogroll/
+    weight: 3
   - identifier: projects
-    name: projects
+    name: Projects
     title: projects
     url: /projects/
-    weight: 2
+    weight: 4
   externallinks:
   - identifier: git
     name: git

layouts/_default/baseof.html

@@ -2,13 +2,14 @@
 <html lang="en">
   <head>
     <title>{{ with .Title }} {{ . }} – {{ end }}{{ .Site.Title }}</title>
+    {{- $style := resources.Get "/style.scss" | resources.ToCSS (dict "outputStyle" "compressed") }}
+    <link rel="preload stylesheet" as="style" href="{{ $style.Permalink }}" type="text/css" media="screen" />
     <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    {{ block "stylesheet" . }}{{ end }}
   </head>
   <body>
     {{ partial "nav.html" . }}
-    {{ block "main" . }}{{ end }}
+    {{- block "main" . }}{{ end }}
     {{ partial "footer.html" . }}
   </body>
 </html>

layouts/_default/list.html

@@ -5,31 +5,11 @@
 {{- end -}}
 
 {{- define "main" }}
+
     <main>
-      <div class="container">
-        <section class="section posts">
-          <div class="section posts inner">
     {{- range .Pages }}
-            <a href="{{ .Permalink }}">
+      <p> <a href="{{ .Permalink }}">{{ .Title }}</a> <span>{{ .Date.Format "2 January 2006" }}</span> </p>
-              <article>
-                <h2><span>{{ .Title }}</span></h2>
-                {{ with .Description }}<p class="description">{{ . }}</p>{{ end }}
-                {{- if eq .Params.type "post" }}
-                <p class="meta" title="{{ .Date.Format "2 Jan 2006, 15:04 MST" }}">
-                  <span class="date">{{ .Date.Format "2 January 2006" }}</span>
-                  {{- with .Params.author }}<span class="author">by {{ . }}</span>{{ end }}
-                {{ end }}
-                {{- if eq .Params.type "project" }}
-                <p class="meta">
-                  {{ with .Params.activetime }}<span class="date">{{ . }}</span><br />{{ end }}
-                  {{ with .Params.status }}<span class="status">{{ . }}</span>{{ end }}
     {{- end }}
-                </p>
-              </article>
-            </a>
-            {{- end }}
-          </div>
-        </section>
-      </div>
     </main>
+
 {{- end }} 

layouts/_default/single.html

@@ -1,27 +1,11 @@
-{{- define "stylesheet" -}}
+{{- define "main" }}
-  {{- $scss := resources.Get "/_default/single.scss" -}}
-  {{- $style := $scss | resources.ToCSS -}}
-  <link rel="preload stylesheet" as="style" href="{{ $style.Permalink }}" type="text/css" media="screen" />
-{{- end -}}
-
-    {{- define "main" -}}
     <main>
-      <div class="container">
-        <section class="section-article">
-          <article>
-            <p class="meta">
-              {{ if eq .Params.type "post" }}<span title="{{ .Date.Format "2. January 2006, 15:04 MST" }}">{{ .Date.Format "2. January 2006" }}</span>{{ end }}
-              {{- if eq .Params.type "singlepage" }}<span title="{{ .Date.Format "2. January 2006" }}">version: {{ .Date.Format "2006-01-02" }}</span>{{ end }}
-              {{- with .Params.author }}<span>by {{ . }}</span>{{ end }}
-            </p>
       <h1 class="title">{{ .Title }}</h1>
-            {{ with .Params.featured_image }}<img src="{{ . | relURL }}" loading="lazy" alt="">{{ end }}
+      {{- if eq .Params.type "post" }}
-            
+      <p title="{{ .Date.Format "2. January 2006, 15:04 MST" }}">{{ .Date.Format "2. January 2006" }}</p>
-            {{ printf "<!-- content -->" | safeHTML }}
+      {{- end }}
-            {{ .Content }}
+      {{ .Content -}}
-            {{- printf "<!-- content END -->" | safeHTML }}
+      <aside>
-            
-            <aside class="meta">
       {{- with .Params.topics }}
         <ul class="topics">
           {{- range . }}
@@ -32,38 +16,11 @@
         </ul>
       {{- end }}
       {{- with .Params.tags }}
-              <h3>tags</h3>
+        tags
-              <ul class="tags">
         {{- range . }}
-                <li>
         <a href="{{ "tags" | relURL }}/{{ . | urlize }}">{{ . }}</a>
-                </li>
         {{- end }}
-              </ul>
       {{- end }}
       </aside>
-          </article>
-        </section>
-        {{- if ne .Params.type "singlepage" }}
-        <section class="section-articles">
-          <article class="next-article">
-            {{- with .NextInSection }}
-            <a href="{{ .Permalink }}">
-              {{ if eq .Params.type "project" }}&leftarrow; next project{{ end }}
-              {{ if ne .Params.type "project" }}&leftarrow; next article{{ end }}
-            </a>
-            {{- end }}
-          </article>
-          <article class="previous-article">
-            {{- with .PrevInSection }}<span></span>
-            <a href="{{ .Permalink }}">
-              {{- if eq .Params.type "project" }}previous project &rightarrow;{{ end -}}
-              {{- if ne .Params.type "project" }}previous article &rightarrow;{{ end -}}
-            </a>
-            {{- end }}
-          </article>
-        </section>
-        {{- end }}
-      </div>
     </main>
 {{- end }} 

layouts/errorpages/list.html

@@ -1,18 +1,6 @@
-{{ define "stylesheet" }}{{ $sass := resources.Get "/errorpages.scss" }}{{ $style := $sass | resources.ToCSS }}
+{{- define "main" }}
-    <link rel="preload stylesheet" as="style" href="{{ $style.Permalink }}" type="text/css" media="screen" />
-{{ end }}
-
-{{ define "main" }}
     <main>
-  <div class="container">
-    <section>
-      <header>
       <h2>{{ .Params.heading }}</h2>
-        <span class="subtitle">{{.Params.subheading}}</span>
+      <p>{{ .Params.subheading}}</p>
-      </header>
-      {{.Content}}
-    </section>
-  </div>
     </main>
-{{ end }}
+{{- end }}
- 

layouts/errorpages/single.html

@@ -1,17 +1,6 @@
-{{ define "stylesheet" }}{{ $sass := resources.Get "/errorpages.scss" }}{{ $style := $sass | resources.ToCSS }}
+{{- define "main" }}
-    <link rel="preload stylesheet" as="style" href="{{ $style.Permalink }}" type="text/css" media="screen" />
-{{ end }}
-
-{{ define "main" }}
     <main>
-  <div class="container">
-    <section>
-      <header>
       <h2>{{ .Params.heading }}</h2>
-        <span class="subtitle">{{.Params.subheading}}</span>
+      <p>{{ .Params.subheading}}</p>
-      </header>
-      {{.Content}}
-    </section>
-  </div>
     </main>
-{{ end }}
+{{- end }}

layouts/index.html

@@ -1,73 +1,7 @@
-{{- define "stylesheet" -}}
+{{- define "main" }}
-  {{- $scss := resources.Get "/index.scss" -}}
-  {{- $style := $scss | resources.ToCSS -}}
-  <link rel="preload stylesheet" as="style" href="{{ $style.Permalink }}" type="text/css" media="screen" />
-{{- end -}}
-
-    {{- define "main" -}}
-    <section class="section header">
-      <div class="container">
-        <header>
-          <h2>{{ .Params.heading }}</h2>
-          <span class="subtitle">{{.Params.subheading}}</span>
-        </header>
-        <section class="section contact">
-          <table class="table contact">
-          {{- range sort .Params.contact "weight" "asc" }}
-            <tr>
-              <td>{{ .name }}</td>
-              <td>
-              {{- with .url }}<a href="{{ . }}">{{ end -}}
-                {{ .handle }}
-              {{- with .url }}</a>{{ end }} {{ with .hint }}<a href="{{ .url }}">{{ .name }}</a>{{ end -}}
-              </td>
-            </tr>
-          {{- end }}
-          </table>
-        </section>
-      </div>
-    </section>
-
     <main>
-      <div class="container">
+    {{- range first 8 (where .Site.RegularPages "Type" "post") }}
-        <section class="section projects">
+      <p> <a href="{{ .Permalink }}">{{ .Title }}</a> <span>{{ .Date.Format "2 January 2006" }}</span> </p>
-          <span class="latest">
-            latest <a href="{{ "/projects" | relURL }}">projects</a>
-          </span>
-          <div class="section projects inner">
-          {{- range first 4 (where .Site.RegularPages "Type" "project") }}
-            <a href="{{ .Permalink }}">
-              <article>
-                <h2>{{ .Title }}</h2>
-                <p class="meta">
-                  {{ with .Params.activetime }}<span class="date">{{ . }}</span><br />{{ end }}
-                  {{ with .Params.status }}<span class="status">{{ . }}</span>{{ end }}
-                </p>
-              </article>
-            </a>
     {{- end }}
-          </div>
-        </section>
-        <hr>
-        <section class="section posts">
-          <span class="latest">
-            latest <a href="{{ "/blog" | relURL }}">posts</a>
-          </span>
-          <div class="section posts inner">
-            {{- range first 4 (where .Site.RegularPages "Type" "post") }}
-            <a href="{{ .Permalink }}">
-              <article>
-                <h2><span>{{ .Title }}</span></h2>
-                {{ with .Description }}<p class="description">{{ . }}</p>{{ end }}
-                <p class="meta" title="{{ .Date.Format "2 Jan 2006, 15:04 MST" }}">
-                  <span class="date">{{ .Date.Format "2 January 2006" }}</span>
-                  <span class="author">{{ with .Params.author }}by {{ end }}{{ .Params.author }}</span>
-                </p>
-              </article>
-            </a>
-            {{- end }}
-          </div>
-        </section>
-      </div>
     </main>
 {{- end }}

layouts/partials/footer.html

@@ -1,21 +1,7 @@
 
      <footer>
-      <div class="container">
-        <section class="website-version">
       <span title="{{ now.Format "2. January 2006, 15:04 MST" }}">version {{ now.Format "2006-01-02" }}</span>
-        </section>
-        <section class="website-subnav">
-          <ul>
-            {{- $currentPage := . }}
       {{- range .Site.Menus.footer }}
-            <li>
+      <a href="{{ .URL }}">{{ .Name }}</a>
-              <a href="{{ .URL }}">
-                {{- .Pre }}
-                <span>{{ .Name }}</span>
-              </a>
-            </li>
       {{- end }}
-          </ul>
-        </section>
-      </div>
     </footer>

layouts/partials/nav.html

@@ -1,11 +1,19 @@
-    {{- $currentPage := . -}}
+    {{- $currentPage := . }}
-    <header class="main">
+    <header>
     {{- range .Site.Menus.name }}
+      {{- if $currentPage.IsMenuCurrent "name" . }}
+      <h1> <a href="{{ .URL }}" class="active">{{ .Name }}</a> </h1>
+      {{- else }}
       <h1> <a href="{{ .URL }}">{{ .Name }}</a> </h1>
       {{- end }}
+    {{- end }}
       <nav>
       {{- range .Site.Menus.main }}
+        {{- if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) -}}
+        <a href="{{ .URL }}" class="active">{{ .Name }}</a>
+        {{- else }}
         <a href="{{ .URL }}">{{ .Name }}</a>
         {{- end}}
+      {{- end }}
       </nav>
     </header>