added privacy policy

.gitignore

@@ -10,3 +10,4 @@ deploy.sh
 
 # not ignored directories
 !/content/errorpages/
+!/content/privacy/

assets/_default/list.scss

@@ -3,10 +3,16 @@
 @import '../partials/footer';
 
 header {
+  align-items: center;
+  background: rgb(60, 60, 90);
+  border-radius: 5px;
+  display: flex;
+  height: 200px;
+  margin: 40px 0;
   text-align: center;
-  margin: 100px 0;
   h1 {
     font-size: 2em;
+    margin: auto;
   }
 }
 

assets/_default/single.scss

@@ -6,7 +6,7 @@
     margin: 80px auto;
     max-width: 720px;
     .meta {
-      color: rgb(180, 180, 220);
+      color: rgb(215, 215, 235);
     }
     .title {
       font-size: 2em;
@@ -19,32 +19,37 @@
       max-width: 100%;
     }
     a {
-      background: rgb(60, 60, 90);
+      border-bottom: 1px solid;
-      border-radius: 5px;
+      color: rgb(245, 245, 255);
-      color: rgb(240, 240, 250);
+      margin: -5px;
-      margin: -5px 0;
+      padding: 5px;
-      padding: 5px 5px;
+      transition: border .2s, color .2s;
-      transition: background .2s, color .2s;
       &:hover {
-        background: rgb(255, 130, 130);
+        color: rgb(255, 130, 130);
-        color: rgb(255, 255, 255);
         text-decoration: none;
       }
     }
+    h2 {
+      font-size: .6em;
+    }
     aside {
       margin-top: 80px;
       .tags {
         display: flex;
         list-style: none;
-        margin-left: -10px;
+        margin-left: -15px;
         padding: 0;
         li {
           a {
-            color: rgb(180, 180, 220);
+            background: rgb(60, 60, 90);
-            margin-left: 10px;
+            border: 0;
+            border-radius: 5px;
+            color: rgb(215, 215, 225);
+            margin-left: 15px;
             padding: 10px;
             &:hover {
-              background: rgb(70, 70, 105);
+              background: rgb(50, 50, 75);
+              color: rgb(255, 255, 255);
             }
           }
         }
@@ -57,34 +62,54 @@
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   grid-gap: 1rem;
-  margin: 20px auto -50px auto;
+  margin: 20px auto 0 auto;
   max-width: 720px;
+  white-space: nowrap;
   &::after {
     background: rgb(50, 50, 75);
     content: '';
-    height: 210px;
+    height: 200px;
     left: 0;
     position: absolute;
     width: 100vw;
     z-index: -10;
   }
   article {
-    border-radius: 5px;
-    color: rgb(255, 255, 255);
     display: flex;
     flex-flow: column;
     height: max-content;
     margin: 20px 0;
-    transition: background .2s;
     a {
-      margin: 10px 0;
+      border-bottom: 1px solid transparent;
+      color: rgb(215, 215, 225);
+      transition: border .2s, color .2s;
       &:hover {
-        text-decoration: underline;
+        border-bottom: 1px solid;
+        color: rgb(255, 130, 130);
+        text-decoration: none;
       }
     }
   }
+  .next-article {
+    margin-right: auto;
+  }
   .previous-article {
-    text-align: right;
+    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/index.scss

@@ -2,17 +2,31 @@
 @import 'partials/nav';
 
 header {
-  margin: 100px 0;
+  align-items: center;
+  background: rgb(60, 60, 90);
+  border-radius: 5px;
+  display: flex;
+  height: 200px;
+  margin: 40px 0;
   text-align: center;
   h1 {
     font-size: 2em;
+    margin: auto;
   }
 }
 
-h1 {
+.section-header {
-  a:hover {
+  color: rgb(215, 215, 225);
-    text-decoration: none;
+  font-size: 1.5em;
+  a {
     border-bottom: 2px solid;
+    color: rgb(245, 245, 255);
+    font-weight: bold;
+    transition: border .2s, color .2s;
+    &:hover {
+      color: rgb(255, 130, 130);
+      text-decoration: none;
+    }
   }
 }
 

assets/partials/_footer.scss

@@ -1,6 +1,6 @@
 footer {
   background: rgb(30, 30, 45);
-  color: rgb(200, 200, 230);
+  color: rgb(215, 215, 235);
   margin-top: 100px;
   overflow-x: auto;
   overflow-y: hidden;
@@ -21,17 +21,21 @@ footer {
       margin-left: auto;
       ul {
         display: flex;
-        padding: 0;
-      }
-      li {
         list-style-type: none;
-        padding: 4px 0 4px 30px;
+        padding: 0;
-      }
+        li {
-      a {
+          margin-left: 30px;
-        color: rgb(200, 200, 230);
+          a {
-        &:hover {
+            border-bottom: 1px solid transparent;
-          text-decoration: none;
+            color: rgb(215, 215, 235);
-          border-bottom: 1px solid;
+            padding: 5px 0;
+            transition: border .2s, color .2s;
+            &:hover {
+              border-bottom: 1px solid;
+              color: rgb(255, 130, 130);
+              text-decoration: none;
+            }
+          }
         }
       }
     }

assets/partials/_main.scss

@@ -9,7 +9,7 @@ html {
 }
 body {
   background: rgb(40, 40, 60);
-  color: rgb(240, 240, 255);
+  color: rgb(245, 245, 255);
   display: grid;
   font-family: monospace, 'Lucida Console', 'Monaco';
   line-height: 1.8;
@@ -22,6 +22,22 @@ a {
     text-decoration: underline;
   }
 }
+h1 {
+  font-size: 1.5em;
+}
+h2 {
+  font-size: 1.3em;
+}
+h3 {
+  font-size: 1.1em;
+}
+h4 {
+  font-size: .9em;
+}
+hr {
+  color: rgb(60, 60, 90);
+  margin: 50px 20px;
+}
 
 .container {
   margin: 0 auto;

assets/partials/_nav.scss

@@ -17,9 +17,15 @@ nav {
         &:hover {
           background: rgb(50, 50, 75);
         }
+        &.active {
+          border-bottom: 2px solid rgb(215,215,225);
+          border-top: 2px solid transparent;
+          padding: 16px 30px;
+        }
       }
     }
     .seperator {
+      cursor: default;
       display: block;
       padding: 20px;
     }
@@ -30,6 +36,11 @@ nav {
         padding: 0;
         li {
           list-style-type: none;
+          &.active a {
+            border-bottom: 2px solid rgb(215,215,225);
+            border-top: 4px solid transparent;
+            padding: 16px 30px;
+          }
           a {
             color: rgb(245, 245, 245);
             display: block;
@@ -85,8 +96,8 @@ nav {
         ul {
           li {
             a {
-              color: rgb(215, 215, 225);
               background: rgb(50, 50, 75);
+              color: rgb(215, 215, 225);
               &:hover {
                 background: rgb(40, 40, 60);
               }

assets/projects/list.scss

@@ -2,17 +2,23 @@
 @import '../partials/nav';
 
 header {
-  margin: 100px 0;
+  align-items: center;
+  background: rgb(60, 60, 90);
+  border-radius: 5px;
+  display: flex;
+  height: 200px;
+  margin: 40px 0;
   text-align: center;
   h1 {
     font-size: 2em;
+    margin: auto;
   }
 }
 
 .section-articles {
   display: grid;
   grid-gap: 1rem;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(2, 1fr);
   margin: 20px 0;
   a {
     color: rgb(255, 255, 255);
@@ -36,7 +42,7 @@ header {
       background: rgb(80, 80, 120);
       border-radius: 5px 5px 0px 0px;
       margin: -20px -20px 20px -20px;
-      max-height: 170px;
+      max-height: 250px;
       max-width: calc(100% + 40px);
       object-fit: cover;
       order: -1;

config.yaml

@@ -5,16 +5,22 @@ enableRobotsTXT: true
 params:
   menuname: vrifox.cc
 menu:
+  name:
+  - identifier: vrifox.cc
+    name: vrifox.cc
+    title: vrifox.cc
+    url: /
+    weight: 1
   main:
   - identifier: blog
     name: blog
     title: blog
-    url: /blog
+    url: /blog/
     weight: 1
   - identifier: projects
     name: projects
     title: projects
-    url: /projects
+    url: /projects/
     weight: 2
   externallinks:
   - identifier: mastodon
@@ -28,13 +34,18 @@ menu:
     url: https://git.vrifox.cc/vrifox
     weight: 2
   footer:
+  - identifier: privacy
+    name: privacy
+    title: privacy
+    url: https://vrifox.cc/privacy
+    weight: 1
   - identifier: feed
     name: feed (rss)
     title: rss-feed
     url: https://vrifox.cc/blog/index.xml
-    weight: 1
+    weight: 2
   - identifier: sourcecode
     name: source code
     title: source code
     url: https://git.vrifox.cc/vrifox/vrifox.cc
-    weight: 2
+    weight: 3

content/privacy/_index.md

@@ -0,0 +1,33 @@
+---
+title: privacy policy
+---
+
+#### last updated: 2020-10-04
+
+# Websites
+
+This privacy policy applies to:
+ - vrifox.cc
+ - git.vrifox.cc
+
+# What data do I store and process?
+
+  - browser type and version
+  - operating system
+  - requested url
+  - downloaded / accessed files
+  - referrer url
+  - ip address
+  - time of request
+
+The data will not be given to third party and deleted after three (3) days.
+
+## Cookies
+
+Cookies will not be set on these websites.
+
+I configured [nginx](https://nginx.org) to drop the header »Set-Cookie«.
+
+---
+
+This privacy policy was inspired by [Natenoms Datenschutz[-erklärung]](https://blog.natenom.com/datenschutz/).

layouts/_default/baseof.html

@@ -1,6 +1,6 @@
 <!doctype html>
 
-<html>
+<html lang="en">
   <head>
     <title>{{ with .Title }} {{ . }} – {{ end }}{{ .Site.Title }}</title>
     

layouts/_default/list.html

@@ -3,32 +3,42 @@
 {{ end }}
 
 {{ define "main" }}
-<main class="container">
+<main>
-  <section>
+  <div class="container">
-    <header>
+    <section>
-      <h1>{{ .Params.heading }}</h1>
+      <header>
-      <span class="subtitle">{{.Params.subheading}}</span>
-    </header>
-    {{ .Content }}
-  </section>
-  <section class="section-articles">
-  {{ range .Pages }}
-    <a href="{{ .Permalink }}">
-      <article>
         <h1>{{ .Title }}</h1>
-        <p class="meta" title="{{ .Date.Format "2 Jan 2006, 15:04 MST" }}">
+        <span class="subtitle">{{.Params.subheading}}</span>
-          <span class="date">{{ .Date.Format "2 January 2006" }}</span>
+      </header>
-          <span class="author">{{ with .Params.author }}by {{ end }}{{ .Params.author }}</span>
+      {{ .Content }}
-        </p>
+    </section>
-        {{ with .Description }}
+    <section class="section-articles">
-        <p>{{ . }}</p>
+    {{ range .Pages }}
-        {{ end }}
+      <a href="{{ .Permalink }}">
-        {{ with .Params.featured_image }}
+        <article>
-        <img src="{{ . | relURL }}" loading="lazy">
+          <h1>{{ .Title }}</h1>
-        {{ end }}
+          {{ if eq .Params.type "project" }}
-      </article>
+          <p class="" title="last change: {{ .Date.Format "2 Jan 2006" }}">
-    </a>
+            {{ with .Params.activetime }}<span class="date">{{ . }}</span>{{ end }}
-  {{ end }}
+            {{ with .Params.status }}<span class="status">{{ . }}</span>{{ end }}
-  </section>
+          </p>
+          {{ end }}
+          {{ if ne .Params.type "project" }}
+          <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 {{ .Params.author }}</span>{{ end }}
+          </p>
+          {{ end }}
+          {{ with .Description }}
+          <p>{{ . }}</p>
+          {{ end }}
+          {{ with .Params.featured_image }}
+          <img src="{{ . | relURL }}" loading="lazy" alt="">
+          {{ end }}
+        </article>
+      </a>
+    {{ end }}
+    </section>
+  </div>
 </main>
 {{ end }} 

layouts/_default/single.html

@@ -14,21 +14,26 @@
         </p>
         <h1 class="title">{{ .Title }}</h1>
         {{ with .Params.featured_image }}
-        <img src="{{ . | relURL }}" loading="lazy">
+        <img src="{{ . | relURL }}" loading="lazy" alt="">
         {{ end }}
         {{ .Content }}
         <aside class="meta">
         {{ with .Params.topics }}
           <ul class="topics">
             {{ range . }}
-              <li><a href="{{ "topics" | relURL}}/{{ . | urlize }}">{{ . }}</a> </li>
+            <li>
+              <a href="{{ "topics" | relURL}}/{{ . | urlize }}">{{ . }}</a>
+            </li>
             {{ end }}
           </ul>
           {{ end }}
           {{ with .Params.tags }}
+          <h3>tags</h3>
           <ul class="tags">
             {{ range . }}
-              <li> <a href="{{ "tags" | relURL }}/{{ . | urlize }}">{{ . }}</a> </li>
+            <li>
+              <a href="{{ "tags" | relURL }}/{{ . | urlize }}">{{ . }}</a>
+            </li>
             {{ end }}
           </ul>
           {{ end }}
@@ -37,12 +42,20 @@
     </section>
     <section class="section-articles">
       <article class="next-article">
-        {{ with .NextInSection }}<span>{{ if eq .Params.type "project" }}next project{{ end }}{{ if ne .Params.type "project" }}next article{{ end }}</span>
+        {{ with .NextInSection }}
-        <a href="{{ .Permalink }}">{{ .Title }}</a>{{ end }}
+        <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>{{ if eq .Params.type "project" }}previous project{{ end }}{{ if ne .Params.type "project" }}previous article{{ end }}</span>
+        {{ with .PrevInSection }}<span></span>
-        <a href="{{ .Permalink }}">{{ .Title }}</a>{{ end }}
+        <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>
   </div>

layouts/index.html

@@ -12,7 +12,9 @@
       </header>
       {{.Content}}
     </section>
-    <h1>latest <a href="{{ "/blog" | relURL }}">posts</a></h1>
+    <span class="section-header">latest
+      <a href="{{ "/blog" | relURL }}">posts</a>
+    </span>
     <section class="section-articles">
       {{ range first 2 (where .Site.RegularPages "Type" "post") }}
       <a href="{{ .Permalink }}">
@@ -26,13 +28,15 @@
           <p>{{ . }}</p>
           {{ end }}
           {{ with .Params.featured_image }}
-          <img src="{{ . | relURL }}">
+          <img src="{{ . | relURL }}" alt="">
           {{ end }}
         </article>
       </a>
       {{ end }}
     </section>
-    <h1>latest <a href="{{ "/projects" | relURL }}">projects</a></h1>
+    <span class="section-header">latest
+      <a href="{{ "/projects" | relURL }}">projects</a>
+    </span>
     <section class="section-projects">
       {{ range first 3 (where .Site.RegularPages "Type" "project") }}
       <a href="{{ .Permalink }}">
@@ -40,7 +44,7 @@
           <h1>{{ .Title }}</h1>
           <p class="meta" title="last change: {{ .Date.Format "2 Jan 2006" }}">{{ with .Params.activetime }}<span class="date">{{ . }}</span>{{ end }} {{ with .Params.status }}<span class="status">{{ . }}</span>{{ end }}</p>
           {{ with .Description }}<p>{{ . }}</p>{{ end }}
-          <img {{ with .Params.featured_image }}src="{{ . | relURL }}"{{ end }}>
+          <img {{ with .Params.featured_image }}src="{{ . | relURL }}"{{ end }} alt="">
         </article>
       </a>
       {{ end }}

layouts/partials/nav.html

@@ -1,19 +1,33 @@
+{{ $currentPage := . }}
+
 <nav>
   <div class="container">
     <section class="website-name">
-      <a href="{{ .Site.BaseURL }}">{{ .Site.Params.menuname }}</a>
+      {{ range .Site.Menus.name }}
+        {{ if $currentPage.IsMenuCurrent "name" . }}
+        <a href="{{ .URL }}" class="active">{{ .Name }}</a>
+        {{ else }}
+        <a href="{{ .URL }}">{{ .Name }}</a>
+        {{ end }}
+      {{ end }}
     </section>
     <span class="seperator">/</span>
     <section class="website-mainmenu">
       <ul>
-        {{ $currentPage := . }}
         {{ range .Site.Menus.main }}
-        <li>
+          {{ if $currentPage.IsMenuCurrent "main" . }}
-          <a href="{{ .URL }}">
+          <li class="active">
-            {{ .Pre }}
+            <a href="{{ .URL }}">
-            <span>{{ .Name }}</span>
+              <span>{{ .Name }}</span>
-          </a>
+            </a>
-        </li>
+          </li>
+          {{ else }}
+          <li>
+            <a href="{{ .URL }}">
+              <span>{{ .Name }}</span>
+            </a>
+          </li>
+          {{ end }}
         {{ end }}
       </ul>
     </section>

layouts/projects/list.html

@@ -3,25 +3,30 @@
 {{ end }}
 
 {{ define "main" }}
-<main class="container">
+<main>
-  <section>
+  <div class="container">
-    <header>
+    <section>
-      <h1>{{ .Params.heading }}</h1>
+      <header>
-      <span class="subtitle">{{.Params.subheading}}</span>
+        <h1>{{ .Params.heading }}</h1>
-    </header>
+        <span class="subtitle">{{.Params.subheading}}</span>
-    {{ .Content }}
+      </header>
-  </section>
+      {{ .Content }}
-  <section class="section-articles">
+    </section>
-  {{ range .Pages }}
+    <section class="section-articles">
-    <a href="{{ .Permalink }}">
+    {{ range .Pages }}
-      <article>
+      <a href="{{ .Permalink }}">
-        <h1>{{ .Title }}</h1>
+        <article>
-        <p class="" title="last change: {{ .Date.Format "2 Jan 2006" }}">{{ with .Params.activetime }}<span class="date">{{ . }}</span>{{ end }} {{ with .Params.status }}<span class="status">{{ . }}</span>{{ end }}</p>
+          <h1>{{ .Title }}</h1>
-        {{ with .Description }}<p>{{ . }}</p>{{ end }}
+          <p class="" title="last change: {{ .Date.Format "2 Jan 2006" }}">
-        <img {{ with .Params.featured_image }}src="{{ . | relURL }}"{{ end }} loading="lazy">
+            {{ with .Params.activetime }}<span class="date">{{ . }}</span>{{ end }}
-      </article>
+            {{ with .Params.status }}<span class="status">{{ . }}</span>{{ end }}
-    </a>
+          </p>
-  {{ end }}
+          {{ with .Description }}<p>{{ . }}</p>{{ end }}
-  </section>
+          <img {{ with .Params.featured_image }}src="{{ . | relURL }}"{{ end }} loading="lazy" alt="">
+        </article>
+      </a>
+    {{ end }}
+    </section>
+  </div>
 </main>
 {{ end }}