--- a/web_resources/style/feed-preview.css	Tue Nov 27 10:47:26 2018 +0100
+++ b/web_resources/style/feed-preview.css	Tue Nov 27 11:11:15 2018 +0100
@@ -1,13 +1,67 @@
+/*
+ * Copyright (C) 2018 Guido Berhoerster <guido+feed-preview@berhoerster.name>
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+
 @import url("common.css");
 
-html,
+:root {
+  --default-background: var(--grey-10);
+  --entry-background: var(--white-100);
+  --secondary-color: var(--grey-50);
+  --entry-content-border: 1px solid var(--grey-90-a10);
+  --font-family-default: "Segoe UI", "San Fancisco", "Ubuntu", sans-serif;
+  --font-display-20: 300 36px var(--font-family-default);
+  --font-title-40: 300 28px var(--font-family-default);
+  --font-title-30: 300 22px var(--font-family-default);
+  --font-title-20: 500 17px var(--font-family-default);
+  --font-title-10: 500 13px var(--font-family-default);
+  --font-body-20: 400 15px var(--font-family-default);
+  --font-body-10: 400 13px var(--font-family-default);
+  --entry-shadow: 0 1px 4px var(--grey-90-a10);
+  --entry-outline: var(--entry-shadow), 0 0 0 5px var(--grey-30);
+}
+
 body {
-  padding: 16px 32px;
-  background: var(--grey-10);
+  padding: 16px;
+  background-color: var(--default-background);
+  background-image: none;
+  background-repeat: no-repeat;
+  background-origin: padding-box;
+  background-position: bottom 0 left 0;
+  background-attachment: fixed;
+  height: 100%;
+  font: var(--font-body-20);
+}
+
+@media (width > calc(80ch + 2 * 200px)) and (height > calc(200px * 3)) {
+  /* minimum background image size is 200px */
+  body {
+    background-image: url('../images/feed.svg');
+    background-size: calc((100vw - 80ch) / 2);
+  }
+}
+
+@media (width > calc(80ch + 2 * 200px)) and (height > calc(200px * 3)) and
+    (width > calc(80ch + 33vh)) {
+  /*
+   * the background image should not be higher than three times the viewport
+   * height
+   */
+  body {
+    background-image: url('../images/feed.svg');
+    background-size: 33vh 33vh;
+  }
 }
 
 #feed-header {
+  width: 100%;
   max-width: 80ch;
+  min-width: 40ch;
+  padding: 16px;
   margin: 0 auto;
 }
 
@@ -19,28 +73,46 @@
 }
 
 #feed-title {
-  font-size: 1.777em;
-  margin: 0 0 4px 0;
+  font: var(--font-title-40);
+  margin: 0;
 }
 
 #feed-subtitle {
-  color: var(--grey-50);
-  margin: 0 0 16px 0;
+  font: var(--font-body-20);
+  color: var(--secondary-color);
+  margin: 6px 0 0 0;
 }
 
 #no-entries-hint {
-  color: var(--grey-50);
+  color: var(--secondary-color);
+  font: var(--font-display-20);
 }
 
 #no-entries-hint,
 .entry {
   clear: both;
-  margin: 16px auto;
+  margin: 16px auto 0 auto;
   padding: 16px;
+}
+
+.entry {
+  overflow: auto;
   max-width: 80ch;
-  background: var(--white-100);
+  background: var(--entry-background);
   border-radius: 4px;
-  box-shadow: 0 1px 2px var(--grey-90-a40);
+  box-shadow: var(--entry-shadow);
+}
+
+#feed-header + article .entry {
+  margin-top: 16px;
+}
+
+.entry + .entry {
+  margin-top: 8px;
+}
+
+.entry:hover {
+  box-shadow: var(--entry-outline);
 }
 
 details.entry > summary {
@@ -59,6 +131,7 @@
   width: 16px;
   height: 16px;
   flex: 0 0 16px;
+  transition: 100ms;
 }
 
 details.entry[open] > summary {
@@ -67,6 +140,7 @@
 
 details.entry[open] > summary::before {
   transform: rotate(90deg);
+  transition: 100ms;
 }
 
 .entry-header {
@@ -74,32 +148,34 @@
 }
 
 .entry-title {
-  font-size: 1.333em;
+  font: var(--font-title-20);
   margin: 0 0 4px 0;
 }
 
 .entry-date {
-  color: var(--grey-50);
+  color: var(--secondary-color);
+  font: var(--font-body-10);
   margin: 0;
 }
 
 .entry-content {
   width: 100%;
   height: 24em;
-  border: 1px solid var(--grey-90-a10);
+  border: var(--entry-content-border);
 }
 
 .entry-files {
+  font: var(--font-body-10);
+  color: var(--secondary-color);
   padding: 0 8px;
 }
 
 .entry-files-title {
-  font-size: 1em;
+  font: var(--font-title-10);
   margin: 0 0 4px 0;
 }
 
 .entry-files-list {
   margin: 0;
   padding: 0 0 0 32px;
-  color: var(--grey-50);
 }