diff web_resources/style/feed-preview.css @ 0:bc5cc170163c

Initial revision
author Guido Berhoerster <guido+feed-preview@berhoerster.name>
date Wed, 03 Oct 2018 23:40:57 +0200
parents
children 1c31f4102408
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/web_resources/style/feed-preview.css	Wed Oct 03 23:40:57 2018 +0200
@@ -0,0 +1,100 @@
+@import url("common.css");
+
+html,
+body {
+  padding: 16px 32px;
+  background: var(--grey-10);
+}
+
+#feed-header {
+  max-width: 80ch;
+  margin: 0 auto;
+}
+
+#feed-logo {
+  float: right;
+  max-width: 188px;
+  max-height: 48px;
+  margin: 0 0 8px 8px;
+}
+
+#feed-title {
+  font-size: 1.777em;
+  margin: 0 0 4px 0;
+}
+
+#feed-subtitle {
+  color: var(--grey-50);
+  margin: 0 0 16px 0;
+}
+
+.entry {
+  clear: both;
+  margin: 16px auto;
+  padding: 16px;
+  max-width: 80ch;
+  background: var(--white-100);
+  border-radius: 4px;
+  box-shadow: 0 1px 2px var(--grey-90-a40);
+}
+
+details.entry > summary {
+  display: flex;
+  align-items: center;
+  list-style-type: none;
+  padding: 0 8px;
+}
+
+details.entry > summary:focus {
+  outline: none;
+}
+
+details.entry > summary::before {
+  content: url('../images/arrow.svg');
+  width: 16px;
+  height: 16px;
+  flex: 0 0 16px;
+}
+
+details.entry[open] > summary {
+  margin: 0 0 8px 0;
+}
+
+details.entry[open] > summary::before {
+  transform: rotate(90deg);
+}
+
+.entry-header {
+  margin: 0 0 0 8px;
+}
+
+.entry-title {
+  font-size: 1.333em;
+  margin: 0 0 4px 0;
+}
+
+.entry-date {
+  color: var(--grey-50);
+  margin: 0;
+}
+
+.entry-content {
+  width: 100%;
+  height: 24em;
+  border: 1px solid var(--grey-90-a10);
+}
+
+.entry-files {
+  padding: 0 8px;
+}
+
+.entry-files-title {
+  font-size: 1em;
+  margin: 0 0 4px 0;
+}
+
+.entry-files-list {
+  margin: 0;
+  padding: 0 0 0 32px;
+  color: var(--grey-50);
+}