assets/_animations.scss

@@ -1,64 +1 @@
-@import 'colors';
-
-@keyframes cycle-link-background {
-	0% {
-		background-image: linear-gradient(
-				to right,
-				$highlight-3 0%, $highlight-3 10%,
-				$highlight-1 10%, $highlight-1 20%,
-				$highlight-2 20%, $highlight-2 30%,
-				$highlight-3 30%, $highlight-3 40%,
-				$highlight-2 40%, $highlight-2 50%,
-				$highlight-3 50%, $highlight-3 60%,
-				$highlight-1 60%, $highlight-1 70%,
-				$highlight-3 70%, $highlight-3 80%,
-				$highlight-1 80%, $highlight-1 90%,
-				$highlight-2 90%,
-		);
-	}
-	25% {
-		background-image: linear-gradient(
-				to right,
-				$highlight-2 0%, $highlight-2 10%,
-				$highlight-3 10%, $highlight-3 20%,
-				$highlight-1 20%, $highlight-1 30%,
-				$highlight-2 30%, $highlight-2 40%,
-				$highlight-3 40%, $highlight-3 50%,
-				$highlight-1 50%, $highlight-1 60%,
-				$highlight-2 60%, $highlight-2 70%,
-				$highlight-1 70%, $highlight-1 80%,
-				$highlight-3 80%, $highlight-3 90%,
-				$highlight-1 90%
-		);
-	}
-	50% {
-		background-image: linear-gradient(
-				to right,
-				$highlight-3 0%, $highlight-3 10%,
-				$highlight-2 10%, $highlight-2 20%,
-				$highlight-3 20%, $highlight-3 30%,
-				$highlight-1 30%, $highlight-1 40%,
-				$highlight-2 40%, $highlight-2 50%,
-				$highlight-3 50%, $highlight-3 60%,
-				$highlight-1 60%, $highlight-1 70%,
-				$highlight-2 70%, $highlight-2 80%,
-				$highlight-1 80%, $highlight-1 90%,
-				$highlight-3 90%
-		);
-	}
-	75% {
-		background-image: linear-gradient(
-				to right,
-				$highlight-1 0%, $highlight-1 10%,
-				$highlight-3 10%, $highlight-3 20%,
-				$highlight-2 20%, $highlight-2 30%,
-				$highlight-1 30%, $highlight-1 40%,
-				$highlight-3 40%, $highlight-3 50%,
-				$highlight-1 50%, $highlight-1 60%,
-				$highlight-2 60%, $highlight-2 70%,
-				$highlight-1 70%, $highlight-1 80%,
-				$highlight-2 80%, $highlight-2 90%,
-				$highlight-3 90%
-		);
-	}
-}
+@import 'variables';

assets/_colors.scss

@@ -1,20 +0,0 @@
-$background: #100e23;
-$fill-color: #eeeeee;
-$text-color: #ffffff;
-$text-darker: #aaaaaa;
-
-$primary-1: #b239ff;
-$primary-2: #670295;
-$primary-3: #440069;
-$primary-4: #240038;
-
-$secondary-1: #6800e7;
-$secondary-2: #41008b;
-$secondary-3: #2a005e;
-$secondary-4: #14002f;
-
-$highlight-1: #05b9ec;
-$highlight-2: #0076a9;
-$highlight-3: #025d84;
-$highlight-4: #002a3a;
-

assets/_fonts.scss

@@ -1,9 +1,59 @@
+/* space-mono-regular - latin */
 @font-face {
-	font-family: Montserrat;
-	src: url(Montserrat/Montserrat-Regular.ttf);
+	font-family: 'Space Mono';
+	font-style: normal;
+	font-weight: 400;
+	src: local(''),
+	url('fonts/space-mono-v6-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+	url('fonts/space-mono-v6-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }
 
+/* space-mono-italic - latin */
 @font-face {
-	font-family: Orbitron;
-	src: url(Orbitron-VariableFont_wght.ttf);
+	font-family: 'Space Mono';
+	font-style: italic;
+	font-weight: 400;
+	src: local(''),
+	url('fonts/space-mono-v6-latin-italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+	url('fonts/space-mono-v6-latin-italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* space-mono-700 - latin */
+@font-face {
+	font-family: 'Space Mono';
+	font-style: normal;
+	font-weight: 700;
+	src: local(''),
+	url('fonts/space-mono-v6-latin-700.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+	url('fonts/space-mono-v6-latin-700.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* space-mono-700italic - latin */
+@font-face {
+	font-family: 'Space Mono';
+	font-style: italic;
+	font-weight: 700;
+	src: local(''),
+	url('fonts/space-mono-v6-latin-700italic.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+	url('fonts/space-mono-v6-latin-700italic.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* changa-500 - latin */
+@font-face {
+	font-family: 'Changa';
+	font-style: normal;
+	font-weight: 500;
+	src: local(''),
+	url('../fonts/changa-v14-latin-500.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+	url('../fonts/changa-v14-latin-500.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* changa-600 - latin */
+@font-face {
+	font-family: 'Changa';
+	font-style: normal;
+	font-weight: 600;
+	src: local(''),
+	url('../fonts/changa-v14-latin-600.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+	url('../fonts/changa-v14-latin-600.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
 }

assets/_mixins.scss

@@ -1,23 +1,9 @@
 @mixin heading {
-	font-family: Orbitron, sans-serif;
-	font-weight: 900;
-	text-transform: uppercase;
-	color: $primary-1;
+	font-family: Changa, sans-serif;
+	font-weight: 600;
+	text-transform: lowercase;
 }
 
-@mixin hline($width, $height, $c1, $c2, $c3) {
-	background: repeat-x center bottom / $width $height;
-	background-image: linear-gradient(
-			to right,
-			$c3 0%, $c3 10%,
-			$c1 10%, $c1 20%,
-			$c2 20%, $c2 30%,
-			$c3 30%, $c3 40%,
-			$c2 40%, $c2 50%,
-			$c3 50%, $c3 60%,
-			$c1 60%, $c1 70%,
-			$c3 70%, $c3 80%,
-			$c1 80%, $c1 90%,
-			$c2 90%, $c2 100%
-	);
+@mixin aberration($offset, $blur: 0) {
+	filter: drop-shadow(-$offset 0 $blur $color-aberration-red) drop-shadow($offset 0 $blur $color-aberration-cyan);
 }

assets/_variables.scss

@@ -0,0 +1,22 @@
+$color-background: #000;
+$color-fill: #eee;
+$color-text: #fff;
+$color-text-darker: #aaa;
+$color-box-frame: #fff;
+$color-box-header: #4c4c4c;
+$color-box-background: rgba(0, 0, 0, 0.5);
+
+$color-aberration-red: rgba(255, 0, 0, 0.8);
+$color-aberration-cyan: rgba(0, 255, 255, 0.8);
+
+$color-gradient-ccc-start: #4d7ffa;
+$color-gradient-ccc-end: #f035e8;
+$color-gradient-info-start: #0079fe;
+$color-gradient-info-end: #1cff58;
+$color-gradient-community-start: #00d5ff;
+$color-gradient-community-end: #b2ff01;
+$color-gradient-world-start: #ffb319;
+$color-gradient-world-end: #5f24f8;
+
+$gap-horizontal: 17px;
+$gap-vertical: 14px;

assets/style.scss

@@ -1,71 +1,133 @@
 @import 'animations';
 @import 'breakpoints';
-@import 'colors';
+@import 'variables';
 @import 'fonts';
 @import 'mixins';
 
-* {
-	font-family: Montserrat, sans-serif;
+html {
+	font-family: 'Space Mono', sans-serif;
 	box-sizing: border-box;
 	margin: 0;
 	padding: 0;
 }
 
+*, *::before, *::after {
+	box-sizing: inherit;
+}
+
+.testus {
+}
+
 body {
-	background: $background;
-	color: $text-color;
+	background: $color-background;
+	background-image:
+		url('layout/bg_pixels.gif'),
+		url('layout/grid.png'),
+		linear-gradient(-45deg, $color-gradient-community-start, $color-gradient-community-end),
+		url('layout/background_mobile_01.jpg');
+	background-blend-mode:
+		normal,
+		normal,
+		multiply,
+		normal;
+	background-attachment:
+		scroll,
+		fixed,
+		scroll,
+		fixed;
+	background-size:
+		cover,
+		cover,
+		100% 100%,
+		cover;
+	background-repeat: no-repeat;
+	background-position: center;
+	color: $color-text;
 	display: flex;
 	flex-direction: column;
 	min-height: 100vh;
+	align-items: center;
+	margin: 0;
+
+	&::after {
+		content: '';
+		display: block;
+		position: fixed;
+		top: 0;
+		left: 0;
+		height: 100%;
+		width: 100%;
+		pointer-events: none;
+		background-image:
+			url('layout/vcr_overlay.png'),
+			radial-gradient(transparent, transparent, rgba(0, 0, 0, 0.5));
+	}
+
+	@media (min-width: $small) {
+		background-image:
+			url('layout/bg_pixels.gif'),
+			url('layout/grid.png'),
+			linear-gradient(-45deg, $color-gradient-community-start, $color-gradient-community-end)
+			url('layout/background_desktop_01.jpg');
+	}
 }
 
 h1, h2, h3, h4, h5, h6, p, ul {
-	margin-top: 0.5em;
-	padding: 0 0.5rem;
-
-	&:last-child {
-		margin-bottom: 0.5em;
-	}
+	margin-bottom: 1em;
+	margin-top: 1em;
 }
 
 h1, h2, h3, h4, h5, h6 {
 	@include heading;
 }
 
-h1, footer {
-	padding-bottom: 0.2em;
-	@include hline(250px, 4px, $primary-1, $primary-2, $primary-3);
+h1 {
+	font-size: 3em;
+	text-align: center;
 }
 
-a:not(.nav-logo) {
-	text-decoration: none;
-	color: $highlight-1;
-	text-shadow: -1px 1px 0 $background, 0 1px 0 $background, 1px 1px 0 $background;
-	@include hline(10em, 2px, $highlight-1, $highlight-2, $highlight-3);
+a {
+	text-decoration: underline;
+	color: inherit;
+	transition: filter 0.2s ease 0s;
 
 	&:hover, &:focus {
-		animation: cycle-link-background 2s steps(4) infinite 0ms;
+		@include aberration(0.05em, 0.001em)
 	}
 }
 
+.nav-logo {
+	text-decoration: none;
+}
+
+.block-link {
+	display: block;
+}
+
+.read-more-link {
+	font-size: 1.2em;
+	font-weight: bold;
+	text-transform: lowercase;
+}
+
+header {
+	width: 100%;
+	padding: $gap-vertical $gap-horizontal;
+	max-width: $large;
+}
+
 main {
 	width: 100%;
+	padding: $gap-vertical $gap-horizontal;
 	max-width: $large;
-	margin: 0 auto;
-
 	flex-grow: 1;
 }
 
 footer {
-	background-position: right top;
 	font-size: 0.9em;
-	color: $text-darker;
-
 	width: 100%;
 	max-width: $large;
-	margin: 0 auto;
-	padding: 0.5em;
-
+	padding: $gap-vertical $gap-horizontal;
 	display: flex;
 	align-items: center;
 	flex-direction: column;
@@ -97,7 +159,7 @@ figure {
 		}
 
 		&.fill {
-			background: $fill-color;
+			background: $color-fill;
 			padding: 0.5em;
 		}
 	}
@@ -141,11 +203,10 @@ table {
 	}
 
 	thead tr, {
-		@include hline(10em, 2px, $primary-1, $primary-2, $primary-3)
 	}
 
 	tr:not(:last-child) {
-		border-bottom: 1px solid $primary-3;
+		border-bottom: 1px solid currentColor;
 	}
 
 	td, th {
@@ -159,12 +220,6 @@ table {
 	flex-flow: column wrap;
 	justify-content: flex-end;
 
-	&.nav-main {
-		max-width: $large;
-		margin: 0 auto;
-		padding: 0.5em;
-	}
-
 	hr {
 		margin: 0.5em 40%;
 	}
@@ -172,7 +227,7 @@ table {
 	.nav-logo {
 		@include heading;
 		text-decoration: none;
-		color: $text-color;
+		color: currentColor;
 
 		margin: 0 auto;
 
@@ -192,12 +247,13 @@ table {
 		align-self: center;
 		margin: 0 0.5em;
 		padding: 0.5em 0;
-		background-position: center bottom 0.4em;
-		color: $text-color;
-		font-family: Orbitron,Montserrat,sans-serif;
+		font-weight: bold;
+		font-size: 1.2em;
+		text-decoration: none;
+		text-transform: lowercase;
 
 		&.nav-link-active {
-			color: $highlight-1;
+			@include aberration(0.05em, 0.001em)
 		}
 	}
 
@@ -211,6 +267,50 @@ table {
 	}
 }
 
+.box {
+	margin: 0;
+	padding: 0;
+	border: 1px solid $color-box-frame;
+	background: $color-box-background;
+	display: flex;
+	flex-direction: column;
+
+	.box-header {
+		font-size: 1.2em;
+		margin: 0;
+		padding: 0 $gap-horizontal;
+		text-align: center;
+		background: $color-box-frame;
+		color: $color-box-header;
+
+		a {
+			text-decoration: none;
+		}
+	}
+
+	.box-content {
+		padding: $gap-vertical $gap-horizontal;
+		flex-grow: 1;
+	}
+	.box-footer {
+		padding: ($gap-vertical / 2) $gap-horizontal;
+	}
+}
+
+.box-grid {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+	grid-gap: $gap-vertical $gap-horizontal;
+
+	.box {
+		max-width: 100%;
+		min-width: 0;
+	}
+}
+
 .date {
 	font-style: italic;
 }

content/news/rc3-franconian-net-infos.de.md

@@ -6,8 +6,6 @@ menu:
     parent: News
 ---
 
-## rC3 franconian.net Infos
-
 Hi,
 
 heute beginnt die remote Chaos Experience (rC3) und wir bei franconian.net freuen uns, dass du ein Teil davon bist!

i18n/de.toml

@@ -1,2 +1,4 @@
 [last_change]
 other = "Zuletzt geändert"
+[read_more]
+other = "Weiterlesen"

i18n/en.toml

@@ -1,2 +1,4 @@
 [last_change]
 other = "Last update"
+[read_more]
+other = "Read more"

layouts/_default/baseof.html

@@ -26,6 +26,7 @@
 			{{ end }}
 		</nav>
 	</header>
+	<div class="testus"></div>
 	{{ block "main" . }}
 	{{ end }}
 	<footer>

layouts/_default/section.html

@@ -3,10 +3,15 @@
 	<h1>{{ .Title }}</h1>
 	{{ .Content }}
 
-	<ul>
+	<ul class="box-grid">
 		{{ range .Pages }}
-		<li>
-			<a href="{{ .Permalink }}">{{ with .Date }}{{ .Format "2006-01-02 15:04" }} | {{ end }}{{ .Title }}</a>
+		<li class="box">
+			<h2 class="box-header"><a href="{{ .Permalink }}" class="block-link">{{ .Title }}</a></h2>
+			<div class="box-content">
+				{{ with .Date }}<p class="date">{{ .Format "2006-01-02 15:04" }}</p>{{ end }}
+				{{ .Content | truncate 150 }}
+			</div>
+			<div class="box-footer"><a href="{{ .Permalink }}" class="read-more-link">{{ i18n "read_more" }}</a></div>
 		</li>
 		{{ end }}
 	</ul>

layouts/_default/single.html

@@ -1,6 +1,11 @@
 {{ define "main" }}
 <main>
 	<h1>{{ .Title }}</h1>
+	<div class="box">
+		<h2 class="box-header">{{ .Title }}</h2>
+		<div class="box-content">
 			{{ .Content }}
+		</div>
+	</div>
 </main>
 {{ end }}

layouts/news/single.html

@@ -1,7 +1,12 @@
 {{ define "main" }}
 <main>
-	<h1>{{ .Title }}</h1>
+	<h1>News</h1>
+	<div class="box">
+		<h2 class="box-header">{{ .Title }}</h2>
+		<div class="box-content">
 			<p class="date">{{ .Date.Format "2006-01-02 15:04" }}</p>
 			{{ .Content }}
+		</div>
+	</div>
 </main>
 {{ end }}

layouts/shortcodes/latest.html

@@ -1,7 +1,11 @@
 {{ with .Site.GetPage (.Get "in") }}
 	{{ range first 1 .Pages }}
-	<a href="{{ .Permalink }}"><h2>{{ .Title }}</h2></a>
+	<div class="box">
+		<h2 class="box-header"><a href="{{ .Permalink }}" class="block-link">{{ .Title }}</a></h2>
+		<div class="box-content">
 			<p class="date">{{ .Date.Format "2006-01-02 15:04" }}</p>
 			{{ .Content }}
+		</div>
+	</div>
 	{{ end }}
 {{ end }}

static/Montserrat/OFL.txt

@@ -1,93 +0,0 @@
-Copyright 2011 The Montserrat Project Authors (https://github.com/JulietaUla/Montserrat)
-
-This Font Software is licensed under the SIL Open Font License, Version 1.1.
-This license is copied below, and is also available with a FAQ at:
-http://scripts.sil.org/OFL
-
-
------------------------------------------------------------
-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
------------------------------------------------------------
-
-PREAMBLE
-The goals of the Open Font License (OFL) are to stimulate worldwide
-development of collaborative font projects, to support the font creation
-efforts of academic and linguistic communities, and to provide a free and
-open framework in which fonts may be shared and improved in partnership
-with others.
-
-The OFL allows the licensed fonts to be used, studied, modified and
-redistributed freely as long as they are not sold by themselves. The
-fonts, including any derivative works, can be bundled, embedded, 
-redistributed and/or sold with any software provided that any reserved
-names are not used by derivative works. The fonts and derivatives,
-however, cannot be released under any other type of license. The
-requirement for fonts to remain under this license does not apply
-to any document created using the fonts or their derivatives.
-
-DEFINITIONS
-"Font Software" refers to the set of files released by the Copyright
-Holder(s) under this license and clearly marked as such. This may
-include source files, build scripts and documentation.
-
-"Reserved Font Name" refers to any names specified as such after the
-copyright statement(s).
-
-"Original Version" refers to the collection of Font Software components as
-distributed by the Copyright Holder(s).
-
-"Modified Version" refers to any derivative made by adding to, deleting,
-or substituting -- in part or in whole -- any of the components of the
-Original Version, by changing formats or by porting the Font Software to a
-new environment.
-
-"Author" refers to any designer, engineer, programmer, technical
-writer or other person who contributed to the Font Software.
-
-PERMISSION & CONDITIONS
-Permission is hereby granted, free of charge, to any person obtaining
-a copy of the Font Software, to use, study, copy, merge, embed, modify,
-redistribute, and sell modified and unmodified copies of the Font
-Software, subject to the following conditions:
-
-1) Neither the Font Software nor any of its individual components,
-in Original or Modified Versions, may be sold by itself.
-
-2) Original or Modified Versions of the Font Software may be bundled,
-redistributed and/or sold with any software, provided that each copy
-contains the above copyright notice and this license. These can be
-included either as stand-alone text files, human-readable headers or
-in the appropriate machine-readable metadata fields within text or
-binary files as long as those fields can be easily viewed by the user.
-
-3) No Modified Version of the Font Software may use the Reserved Font
-Name(s) unless explicit written permission is granted by the corresponding
-Copyright Holder. This restriction only applies to the primary font name as
-presented to the users.
-
-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
-Software shall not be used to promote, endorse or advertise any
-Modified Version, except to acknowledge the contribution(s) of the
-Copyright Holder(s) and the Author(s) or with their explicit written
-permission.
-
-5) The Font Software, modified or unmodified, in part or in whole,
-must be distributed entirely under this license, and must not be
-distributed under any other license. The requirement for fonts to
-remain under this license does not apply to any document created
-using the Font Software.
-
-TERMINATION
-This license becomes null and void if any of the above conditions are
-not met.
-
-DISCLAIMER
-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
-OTHER DEALINGS IN THE FONT SOFTWARE.

static/bauchbinde/assets/Orbitron-VariableFont_wght.ttf

@@ -1 +0,0 @@
-../../Orbitron-VariableFont_wght.ttf