assets/scss/blog.scss

@@ -11,7 +11,6 @@
 // partials
 @import "partials/sidebar";
 @import "partials/footer";
-@import "partials/moreposts";
 @import "partials/helpers/icons.scss";
 
 #blog-header {

assets/scss/home.scss

@@ -5,6 +5,9 @@
 // fonts
 @import "fonts/playfair";
 
+// shortcodes
+@import "shortcodes/verticalposts";
+
 // partials
 @import "partials/sidebar";
 @import "partials/footer";
@@ -71,3 +74,25 @@ main > p {
         margin-bottom: 8rem;
     }
 }
+
+section {
+    position: relative;
+    h2 {
+        .more{
+            font-size: .75em;
+            font-weight: normal;
+            hyphens: none;
+            &::after {
+                content: "\27F6";
+                margin-left: .25em;
+                transition: margin .5s;
+            }
+            &:hover::after {
+                margin-left: .5em !important;
+            }
+        }
+        &:hover .more::after {
+            margin-left: .35em;
+        }
+    }
+}

assets/scss/shortcodes/verticalposts.scss

@@ -1,23 +1,7 @@
-.moreposts {
+.verticalposts {
     hyphens: auto;
     margin-top: 4em;
-    .more{
+    .verticalposts-wrapper {
-        font-size: .75em;
-        font-weight: normal;
-        hyphens: none;
-        &::after {
-            content: "\27F6";
-            margin-left: .25em;
-            transition: margin .5s;
-        }
-        &:hover::after {
-            margin-left: .5em !important;
-        }
-    }
-    &:hover .more::after {
-        margin-left: .35em;
-    }
-    .moreposts-wrapper {
         border-radius: .5em;
         display: flex;
         flex-direction: row;

content/_index.de.md

@@ -4,3 +4,5 @@ title: "Hola 🖖"
 Ich erstelle Websites und Grafiken
 
 Zudem betreibe und betreue ich [Cozy Town](https://cozy.town)
+
+{{< verticalposts header="latest-posts-heading" >}}

content/_index.en.md

@@ -4,3 +4,5 @@ title: "Hola 🖖"
 I create Websites and Graphics
 
 Additinaly I host and maintain [Cozy Town](https://cozy.town)
+
+{{< verticalposts header="latest-posts-heading" >}}

content/portfolio/_index.html

@@ -0,0 +1 @@
+Test

content/singlepage/datenschutz/_index.md

@@ -0,0 +1,51 @@
+---
+date: 2021-05-15T11:45:00+02:00
+title: "Privacy Policy"
+type: singlepage
+---
+
+This privacy policy applies to [vrifox.cc](//vrifox.cc).
+
+# What data do I store and process?
+
+  - ip address ([anonymized](#anonymized-ips))
+  - time of request
+  - requested url
+  - accessed file
+
+This data is collected by nginx in log files. The data will not be given to any third party and deleted after three (3) days automatically.
+
+## Anonymized IPs
+
+Taken from [Ascraues Privacy Policy](https://ascraeus.org/page/privacy/) and modified:
+
+```
+  map $remote_addr $anon_remote_addr {
+    ~(?P<ip>\d+\.\d+)\.         $ip.0.0;
+    ~(?P<ip>[^:]+:[^:]+):       $ip::;
+    default                     0.0.0.0;
+  }
+
+  log_format privacy '$anon_remote_addr [$time_local] '
+                     '"$request" $status $bytes_sent ';
+
+  access_log  /var/log/nginx/access.log privacy;
+```
+
+## No User Agent and Referrer
+
+At least for now I don't need it for debugging purposes. This may change in the future. 
+
+I used a custom [log_format](#anonymized-ips) to achieve this. 
+
+## No Cookies
+
+Cookies will not be set on these sites. I configured [nginx](https://nginx.org) to drop the header „Set-Cookie“ `proxy_hide_header Set-Cookie;`.
+
+## No Tracking and Analytics
+
+I don't track you, I don't collect data for analytics, I have no use for it. And I don't want to be tracked or analyzed either.
+
+# Credits
+
+This privacy policy was inspired by [Natenoms Datenschutz[-erklärung]](https://blog.natenom.com/datenschutz/).

content/singlepage/kenntnisse/index.md

@@ -0,0 +1,22 @@
+---
+title: Kenntnisse
+---
+
+## Grafik
+- Inkscape
+
+## Webgestaltung/-entwicklung
+- HTML
+- CSS
+- hugo
+
+## Serverbetrieb
+- Debian
+- Arch (Zuhause)
+- Matrix Synapse
+- nginx
+- tt-rss
+- Gitea
+
+## Netzwerk
+- Freifunk

content/singlepage/projectsold/_draft/_index.md

@@ -0,0 +1,5 @@
+---
+title: "projects"
+heading: "projects"
+subheading: ""
+---

content/singlepage/projectsold/_draft/cozy.town.md

@@ -0,0 +1,15 @@
+---
+title: "cozy.town"
+date: 2021-01-06T12:00:00+02:00
+activetime: "2021"
+categories:
+tags: 
+
+draft: false
+type: "project"
+status: "in progress"
+description: "Where I am hosting some services. For now mostly alone."
+--- 
+To make my hosted services more independent from myself I created [cozy.town](https://cozy.town).
+
+The source code can be found on [code.cozy.town](https://code.cozy.town/cozy.town/).

content/singlepage/projectsold/_draft/cursors.md

@@ -0,0 +1,20 @@
+---
+title: "cursors"
+date: 2013-07-06T12:00:00+02:00
+activetime: "2013"
+categories:
+tags: 
+ - graphics
+ - cursor
+
+draft: false
+type: "project"
+status: "archived"
+description: "„cursors“ is an OSX-inspired cursor-set."
+--- 
+
+„cursors“ is an OSX-inspired cursor-set.
+
+[How they look](/upload/2020-09-23%20cursors%202013-0706.png)
+
+The source code can be found on [code.cozy.town](https://code.cozy.town/vrifox/cursors).

content/singlepage/projectsold/_draft/gitea-theme-2018.md

@@ -0,0 +1,16 @@
+---
+title: "gitea theme 2018"
+date: 2019-06-09T12:00:00+02:00
+activetime: "2018 - 2019"
+featured_image: "/upload/2020/01/gitea-theme_720x.png"
+categories:
+tags: 
+  - git
+  - theme
+
+draft: true
+type: "project"
+status: "archived"
+description: "My old gitea theme."
+--- 
+My old gitea theme. 

content/singlepage/projectsold/_draft/gitea-theme.md

@@ -0,0 +1,23 @@
+---
+title: "gitea theme"
+date: 2020-09-30T12:00:00+02:00
+activetime: "2020 - now"
+categories:
+tags: 
+  - git
+  - theme
+
+draft: false
+type: "project"
+status: "in progress"
+description: "Gitea theme(s) I've created."
+--- 
+My current gitea theme. Work in progress.
+
+[A screenshot of git.vrifox.cc from september 29th 2020](/upload/2020-09-29%20git.vrifox.cc%202020-09.jpg)
+
+The source code can be found on [code.cozy.town](https://code.cozy.town/vrifox/gitea-theme).
+
+# 2018
+
+I've created a gitea theme before in 2018. It's still available on my git if you're interested: [gitea theme 2018](https://code.cozy.town/vrifox/gitea-theme/src/branch/main/_legacy/2019-06-09%20gitea-theme-by-vrifox).

content/singlepage/projectsold/_draft/mmm-dark.md

@@ -0,0 +1,15 @@
+---
+title: "mmm dark"
+date: 2017-01-01T12:00:00+02:00
+activetime: "2017"
+featured_image: "/upload/2020/01/mmm-dark-mumble-theme_720x.png"
+categories:
+tags: 
+ - theme
+ - mumble
+
+draft: true
+type: "project"
+status: "archived"
+description: ""
+--- 

content/singlepage/projectsold/_draft/mumble-theme-supidark.md

@@ -0,0 +1,15 @@
+---
+title: "Mumble Theme Supidark"
+date: 2019-10-18T12:00:00+02:00
+activetime: "2018 - 2019"
+featured_image: 
+categories:
+tags: 
+ - theme
+ - mumble
+
+draft: true
+type: "project"
+status: "active"
+description: ""
+--- 

content/singlepage/projectsold/_draft/my-website.md

@@ -0,0 +1,19 @@
+---
+title: "my website"
+date: 2020-10-01T00:00:00+02:00
+activetime: "2008 - now"
+categories:
+tags: 
+  - website
+
+draft: false
+type: "project"
+status: "in progress"
+link: 
+description: "My website – the thing you're looking at this very moment."
+--- 
+My website; currently made with [hugo](https://gohugo.io/).
+
+[How this website looked in september 2020](/upload/2020-09-23%20vrifox.cc%202020-09.jpg)
+
+The source code can be found on [code.cozy.town](https://code.cozy.town/vrifox/vrifox.cc).

content/singlepage/projectsold/_draft/natenom.md

@@ -0,0 +1,38 @@
+---
+title: "natenom"
+date: 2020-08-20T12:00:00+02:00
+activetime: "2015 - now"
+description: 
+categories:
+tags: 
+  - website
+  - blog
+  - graphics
+  - logo
+
+draft: false
+type: "project"
+status: "in progress"
+link: 
+description: "I do serveral stuff for and with Natenom."
+--- 
+
+# logo and graphics
+
+In 2015 I created a [new logo](https://blog.natenom.com/2015/05/neues-logo-fuer-natenom/) for Natenom.
+
+And since than I do some random [graphics](https://blog.natenom.com/pixelart_icons/).
+
+# blog
+
+Also since 2015 I'm responsible for the design of [Natenoms blog](https://blog.natenom.com). I fix bugs related to wordpress themes and also changed the general design to a dark scheme.
+
+Other than that I also check the spelling and understandability.
+
+# global header
+
+On every page is a »global header« where you can reach the most important links – I created and maintain it.
+
+# source
+
+The source code can be found on [code.cozy.town](https://code.cozy.town/vrifox/natenom-websites)

content/singlepage/projectsold/_draft/omega-for-mumble.md

@@ -0,0 +1,20 @@
+---
+title: "omega for mumble"
+date: 2016-05-24T12:00:00+02:00
+activetime: "2014 - 2016"
+categories:
+tags: 
+ - theme
+ - mumble
+
+draft: false
+type: "project"
+status: "archived"
+description: "A simple & beautified theme for mumble."
+--- 
+
+„omega-for-mumble“ is a simple & beautified skin / theme designed for the open-source and high quality voice-chat software mumble.
+
+[A screenshot of omega-for-mumble](/upload/2020-09-23%20omega-for-mumble%20theme.jpg)
+
+The source code can be found on [code.cozy.town](https://code.cozy.town/vrifox/omega-for-mumble).

content/singlepage/projectsold/_draft/simpleblog.md

@@ -0,0 +1,16 @@
+---
+title: "simpleblog"
+date: 2015-09-29T12:00:00+02:00
+activetime: "2015"
+featured_image: "/upload/2020/09/simpleblog.png"
+description: 
+categories:
+tags: 
+
+draft: true
+type: "project"
+status: "archived"
+link: 
+description: "A never finished idea."
+--- 
+A never finished idea.

content/singlepage/projekte/_index.md

@@ -0,0 +1,67 @@
+---
+title: "Projekte"
+translationKey: "projects"
+date: 2021-03-07T12:13:56+02:00
+type: singlepage
+---
+
+Einige der Projekte, die ich über die letzten Jahre begonnen habe.
+
+## Meine Seite
+Jahrelang **(circa seit 2008)** habe ich ausschließlich HTML und CSS für die Erstellung meiner Webseiten genutzt, da ich es als Betrug meiner Selbst ansah etwas anderes zu verwenden. Doch **2020** habe ich realisiert, dass ich sogar noch einiges lernen und mehr erreichen kann, wenn ich einen sogenannten Static Site Generator verwende. Also habe ich meine Webseite mithilfe von [Hugo](https://gohugo.io) neu geschrieben.
+
+Im **März 2021** habe ich meine Seite abermals überarbeitet, um sie minimalistischer und letztlich kompatibel zu [Gemini](https://gemini.circumlunar.space/) machen.
+
+Aktuell **(März 2021)** denke ich darüber nach, meine Seite nochmal neu zu schreiben aber diesmal mit einem eigenen Static Site Generator. Das wird aber noch eine ganze Weile dauern, da ich erstmal Python lernen muss. :)
+
+[Wie diese Webseite im September 2020 aussah](/upload/2020-09-23%20vrifox.cc%202020-09.jpg).
+
+[Der Quellcode dieser Seite liegt auf code.cozy.town](https://code.cozy.town/vrifox/vrifox.cc).
+
+**Verwendete Programme:** [Hugo](https://gohugo.io/)
+
+## gitea theme
+I use dark themes daily and gitea has one, but the contrast is pretty low, which makes reading texts very hard. So I started to create my own dark theme in **late september 2020**.
+
+The last time I modified it was on the last day of 2020, because I read so many interesting and inspiring articles about minimalism in tech. One of my next projects will be to find a suitable alternative and then – well – use it! :)
+
+I've created a gitea theme before, back in **2018**. It's [still available on code.cozy.town](https://code.cozy.town/vrifox/gitea-theme/src/branch/main/_legacy/2019-06-09%20gitea-theme-by-vrifox) if you're interested.
+
+[A screenshot of git.vrifox.cc from 29 september 2020](/upload/2020-09-29%20git.vrifox.cc%202020-09.jpg)
+
+[The source code can be found on code.cozy.town](https://code.cozy.town/vrifox/gitea-theme).
+
+**Tools used:** SCSS
+
+## Dinge für Natenom
+In **2015** I created a [new logo](https://blog.natenom.com/2015/05/neues-logo-fuer-natenom/) for Natenom. And since than I do some random [graphics](https://blog.natenom.com/pixelart_icons/).
+
+Also since **2015** I'm responsible for the design of [Natenoms blog](https://blog.natenom.com). I fix bugs related to wordpress themes and also changed the general design to a dark scheme. Other than that I also check the spelling and understandability.
+
+On every page is a so called *„global top bar“* where you can reach the most important links – I created and maintain it.
+
+In **2020** I helped natenom with his [new static website](https://www.natenom.com/).
+
+[The source code can be found on code.cozy.town](https://code.cozy.town/vrifox/natenom-websites).
+
+**Tools used:** HTML, Inkscape,  SCSS
+
+## omega-for-mumble
+*„omega-for-mumble“ is a simple & beautified skin / theme designed for the open-source and high quality voice-chat software mumble.*
+
+I have created it in **2015**. It was neither my first nor last mumble theme to be honest.
+
+[A screenshot of omega-for-mumble](/upload/2020-09-23%20omega-for-mumble%20theme.jpg).
+
+[The source code can be found on code.cozy.town](https://code.cozy.town/vrifox/omega-for-mumble).
+
+**Tools used:** SCSS and some QT tools.
+
+## cursors
+„cursors“ is an OSX inspired cursor set I've created in **2013**.
+
+[How the cursors actually look like](/upload/2020-09-23%20cursors%202013-0706.png).
+
+[The source can be found on code.cozy.town](https://code.cozy.town/vrifox/cursors).
+
+**Tools used:** I don't remember actually

content/singlepage/über/_index.md

@@ -0,0 +1,25 @@
+---
+title: "Über Vri"
+---
+
+Hola, ich bin Vri 🙂
+
+Ich liebe es **Vektorgrafiken** zu entwerfen, **Pixelgrafiken** bis ins letzte Detail auszuklügeln und **Webseiten** zu erschaffen und zu optimieren.
+Außerdem habe ich schon seit ich mich erinnern kann eine Faszination für **Bewegtbild**, speziell handgemachte **Animationen**, die ich schon viel zu lange vernachlässigt habe.
+
+Zusammen mit ein paar Freunden administriere ich [Cozy Town](//cozy.town) und lerne so Tag für Tag ein wenig mehr.
+
+## Kontakt
+
+**Pronomen:** sie/ihr (dey/demm)
+
+|               |                                                                      |
+| ------------: | -------------------------------------------------------------------- |
+| **Matrix**    | [@vri:cozy.town](//matrix.to/#/@vri:cozy.town)                       |
+| **XMPP**      | [vri@cozy.town](xmpp:vri@cozy.town)                                  |
+| **E-Mail**    | [vrifox@vrifox.cc](mailto:vrifox@vrifox.cc) · [gpg](/gpg)            |
+| **Fedi**      | <a rel="me" href="//soc.zom.bi/@Vrifox">@vrifox@soc.zom.bi</a>       |
+
+---
+
+<center>Mit <span title="Freude">&#127752;</span> und <a href="//gohugo.io/">hugo</a> erstellt.</center>

content/wiki/_index.md

@@ -0,0 +1,4 @@
+---
+title: Wiki
+type: wiki
+---

content/wiki/bibliothek.de.md

@@ -0,0 +1,17 @@
+---
+title: "Bibliothek"
+translationKey: "library"
+date: 2021-03-07T16:13:00+02:00
+type: wiki
+aliases:
+  - /de/library/
+---
+
+Artikel oder Bücher, die ich gelesen habe und empfehlen kann habe ich in folgender Liste chronologisch niedergeschrieben. Natürlich wird nicht jeder Text den ich lese in dieser Liste verewigt (auch, weil ich es manchmal vergesse). Inspiriert von [simbly.me](https://simbly.me/books/).
+
+## Artikel
+- [The Tyranny of the Faceless Other](https://sarvasvkulpati.com/blog/the-faceless-other) *11.06.2021, 19:15 Uhr*
+- [The right tag for the job: why you should use semantic HTML](https://localghost.dev/2021/06/the-right-tag-for-the-job-why-you-should-use-semantic-html/) *09.06.2021*
+- [A Hacker Got All My Texts for $16](https://www.vice.com/en/article/y3g8wb/hacker-got-my-texts-16-dollars-sakari-netnumber) *17.03.2021*
+- [The small web is beautiful](https://benhoyt.com/writings/the-small-web-is-beautiful/) *04.03.2021*
+- [The computer built to last 50 years](https://ploum.net/the-computer-built-to-last-50-years/) *unbekannt*

content/wiki/library.en.md

@@ -0,0 +1,17 @@
+---
+title: "Library"
+translationKey: "library"
+date: 2021-03-07T16:13:00+02:00
+type: wiki
+aliases: 
+  - /library/
+---
+
+Some articles or books I've read and recommend. Obviously I don't put everything I've read onto this list, but when I do so, then it's in chronological order. Inspired by [simbly.me](https://simbly.me/books/).
+
+## Articles
+- [The Tyranny of the Faceless Other](https://sarvasvkulpati.com/blog/the-faceless-other) *2021-06-11, 19:15*
+- [The right tag for the job: why you should use semantic HTML](https://localghost.dev/2021/06/the-right-tag-for-the-job-why-you-should-use-semantic-html/) *2021-06-09*
+- [A Hacker Got All My Texts for $16](https://www.vice.com/en/article/y3g8wb/hacker-got-my-texts-16-dollars-sakari-netnumber) *2021-03-17*
+- [The small web is beautiful](https://benhoyt.com/writings/the-small-web-is-beautiful/) *2021-03-04*
+- [The computer built to last 50 years](https://ploum.net/the-computer-built-to-last-50-years/) *unknown*

content/wiki/rezepte/_index.md

@@ -0,0 +1,5 @@
+---
+title: "Vri’s schnelle Küche"
+aliases:
+  - /rezepte/
+---

content/wiki/rezepte/brokkoli-porree-pfanne.md

@@ -0,0 +1,32 @@
+---
+title: "Brokkoli-Porree-Pfanne"
+author: ""
+date: 2021-05-24T19:47:53+02:00
+categories:
+tags:
+
+draft: false
+type: "post"
+description: ""
+lang: "de"
+---
+
+Für drei Personen.\
+Zubereitungszeit ca. 25 Minuten
+
+**Zutaten:**
+- einen Brokkoli
+- zwei Stangen Porree
+- Gemüsebrühe
+- 160 g Couscous
+- 100 ml passierte Tomaten
+- Salz
+
+Brokkoli waschen, in Röschen schneiden und blanchieren.
+
+*Das Wasser nicht wegschütten!*
+
+Porree waschen und in Ringe schneiden. Anschließend den Porree anbraten und etwas später den Brokkoli hinzugeben.
+Aus dem Brokkoliwasser eine Gemüsebrühe machen, das Couscous und die passierten Tomaten hinzugeben und fünf Minuten ziehen lassen.
+
+Sobald Brokkoli und Porree die gewünschte Konsistenz (wahrscheinlich bissfest) haben, kann das Couscous inklusive der Gemüsebrühe darüber geschüttet werden.

content/wiki/rezepte/selleriepfanne.md

@@ -0,0 +1,28 @@
+---
+title: "Selleriepfanne"
+author: ""
+date: 2021-05-30T19:38:48+02:00
+categories:
+tags:
+
+draft: false
+type: wiki
+description: ""
+lang: "de"
+---
+
+Für drei Personen.\
+Zubereitungszeit 30 Minuten
+
+**Zutaten:**
+- ein Sellerie
+- drei Zwiebeln
+- 150 ml Gemüsebrühe
+- Semmelbrösel
+- Zitrone
+
+Zwiebeln und Sellerie würfeln. Zwiebeln und – unter stetiger Zugabe – die Selleriewürfel goldbraun anschwitzen. Gemüsebrühe hinzugeben und alles dünsten lassen. 
+
+Währenddessen Semmelbrösel anrösten. Sobald die Selleriewürfel weich genug (je nach Wunsch) sind, kann das Paniermehl darübergegeben werden.
+
+Zum Abschluss nach Belieben zur Verfeinerung noch Zitrone darüber träufeln.

i18n/de.yaml

@@ -17,10 +17,8 @@ sourcecode:
 made-with: 
     other: "Erstellt mit "
 
-# MorePosts
+# Shortcodes
-moreposts-heading:
+verticalposts-more:
-    other: Aus meinem Blog
-moreposts-more:
     other: mehr
 
 # Home
@@ -29,6 +27,9 @@ introduction-heading:
 introduction-sub:
     other: und Informatik ist meine Leidenschaft.
 
+latest-posts-heading:
+    other: Aus meinem Blog
+
 # Blog
 blog-heading:
     other: Artikel

i18n/en.yaml

@@ -17,10 +17,8 @@ sourcecode:
 made-with: 
     other: "Made with "
 
-# MorePosts
+# Shortcodes
-moreposts-heading:
+verticalposts-more:
-    other: From my Blog
-moreposts-more:
     other: more
 
 # Content
@@ -29,6 +27,9 @@ introduction-heading:
 introduction-sub:
     other: and Computer Science is my passion.
 
+latest-posts-heading:
+    other: From my Blog
+
 # Blog
 blog-heading:
     other: Articles

layouts/blog/single.html

@@ -4,28 +4,17 @@
 {{- end -}}
 
 {{- define "header" }}
-    <header id="blog-header">
+<header id="blog-header">
-        <h1 class="title">{{ .Title }}</h1>
+    <h1 class="title">{{ .Title }}</h1>
-        <p>
+    <p>
-            <span
+        <span id="blog-post-published" title="{{ i18n "blog-post-published" }} {{ .Date | time.Format "2. January 2006, 15:04 MST" }}">{{ .Date | time.Format "2. January 2006" }}</span>
-                id="blog-post-published"
+        <span id="blog-post-updated" title="{{ i18n "blog-post-updated" }} {{ .Lastmod | time.Format "2. January 2006, 15:04 MST" }}">{{ i18n "blog-post-updated" }} {{ .Lastmod | time.Format "2. January 2006" }}</span>
-                title="{{ i18n "blog-post-published" }} {{ .Date | time.Format "2. January 2006, 15:04 MST" }}"
+    </p>
-            >
+</header>
-                {{ .Date | time.Format "2. January 2006" }}
-            </span>
-            <span
-                id="blog-post-updated"
-                title="{{ i18n "blog-post-updated" }} {{ .Lastmod | time.Format "2. January 2006, 15:04 MST" }}"
-            >
-                {{ i18n "blog-post-updated" }} {{ .Lastmod | time.Format "2. January 2006" }}
-            </span>
-        </p>
-    </header>
 {{ end }}
 
 {{- define "main" }}
     <main>
         {{ .Content -}}
-        {{ partial "moreposts.html" . }}
     </main>
 {{- end }} 

layouts/partials/moreposts.html

@@ -1,21 +0,0 @@
-<section class="moreposts">
-    <h2>{{ i18n "moreposts-heading" }}
-        <a href="blog/"class="more">{{ i18n "moreposts-more" }}</a>
-    </h2>
-    <div class="moreposts-wrapper">
-        {{ range first 10 (where .Site.RegularPages "Section" "blog") }}
-            <a href="{{ .Permalink }}" class="post-group">
-                <p class="title">{{ .Title }}</p>
-                <aside class="meta" title="{{ .Date | time.Format "2 Jan 2006, 15:04 MST" }}">
-                    <span class="date">{{ .Date | time.Format "2. January 2006" }}</span>
-                    <span class="author">
-                        {{ with .Params.author }}
-                            by 
-                        {{ end }}
-                        {{ .Params.author }}
-                    </span>
-                </aside>
-            </a>
-        {{ end }}
-    </div>
-</section>

layouts/shortcodes/verticalposts.html

@@ -0,0 +1,14 @@
+<section class="verticalposts">
+    {{ with .Get "header" }}<h2>{{ i18n . }} <a href="blog/"class="more">{{ i18n "verticalposts-more" }}</a></h2>{{ end }}
+    <div class="verticalposts-wrapper">
+{{ range first 3 (where .Site.RegularPages "Section" "blog") }}
+        <a href="{{ .Permalink }}" class="post-group">
+            <p class="title">{{ .Title }}</p>
+            <aside class="meta" title="{{ .Date | time.Format "2 Jan 2006, 15:04 MST" }}">
+                <span class="date">{{ .Date | time.Format "2. January 2006" }}</span>
+                <span class="author">{{ with .Params.author }}by {{ end }}{{ .Params.author }}</span>
+            </aside>
+        </a>
+{{ end }}
+    </div>
+</section>