Add animated logo

Dockerfile

@@ -1,6 +1,6 @@
 FROM alpine:3.12
 
-RUN apk add --no-cache hugo
+RUN apk add --no-cache hugo git
 
 WORKDIR /var/www/html
 VOLUME /var/www/html

assets/_colors.scss

@@ -1,4 +1,5 @@
 $background: #100e23;
+$fill-color: #eeeeee;
 $text-color: #ffffff;
 
 $highlight: #05b9ec;

assets/style.scss

@@ -20,7 +20,6 @@ body {
 }
 
 header {
-	margin-bottom: 1em;
 }
 
 main {
@@ -51,8 +50,12 @@ footer {
 }
 
 h1, h2, h3, h4, h5, h6, p, ul {
-	margin-bottom: 0.5em;
+	margin-top: 0.5em;
 	padding: 0 0.5rem;
+
+	&:last-child {
+		margin-bottom: 0.5em;
+	}
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -64,12 +67,21 @@ h1 {
 }
 
 figure {
-	margin-bottom: 1rem;
+	margin: 1rem 0;
 
 	img {
 		max-width: 100%;
 		display: block;
 		margin: 0 auto;
+
+		&.invert {
+			filter: invert(100%);
+		}
+
+		&.fill {
+			background: $fill-color;
+			padding: 0.5em;
+		}
 	}
 
 	figcaption {

content/_index.md

@@ -4,8 +4,7 @@ menu:
   main:
     weight: 1
 ---
-
+{{<video mp4=`/franconia_animated.mp4` webm=`/franconia_animated.webm` alt=`A router labelled "franconian.net" with a "window" to the world of rC3 and the hackspaces backspace, Hackzogtum, and Nerd2Nerd connected to it.`>}}
-{{<image src="/header.png" alt=`A router labelled "franconian.net" with a "window" to the world of rC3 and the hackspaces backspace, Hackzogtum, and Nerd2Nerd connected to it.`>}}
 
 ## cat content/*
 

content/about.md

@@ -15,8 +15,8 @@ The Franconian Cluster is a network of franconian hackspaces that organised the
 
 ### Hackzogtum
 
-{{<image src="/hackzogtum.svg" alt="Logo of Hackzogtum">}}
+{{<image class="invert" src="/hackzogtum.svg" alt="Logo of Hackzogtum">}}
 
 ### Nerd2Nerd
 
-{{<image src="/n2n.svg" alt="Logo of Nerd2Nerd">}}
+{{<image class="fill" src="/n2n.svg" alt="Logo of Nerd2Nerd">}}

layouts/shortcodes/image.html

@@ -1,4 +1,4 @@
 <figure>
-	<img src="{{ .Get "src" }}" alt="{{ .Get "alt" }}">
+	<img{{ with .Get "class" }} class="{{ . }}"{{ end }} src="{{ .Get "src" }}" alt="{{ .Get "alt" }}">
 	<figcaption>{{ .Get "alt" }}</figcaption>
 </figure>

layouts/shortcodes/raw.html

@@ -0,0 +1 @@
+{{.Inner}}

layouts/shortcodes/video.html

@@ -0,0 +1,7 @@
+<figure>
+  <video muted autoplay loop>
+    <source src="{{ .Get "mp4" }}" type="video/mp4">
+    <source src="{{ .Get "webm" }}" type="video/webm">
+  </video>
+  <figcaption>{{ .Get "alt" }}</figcaption>
+</figure>