/*
 * 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");

: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;
  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;
}

#feed-logo {
  float: right;
  max-width: 188px;
  max-height: 48px;
  margin: 0 0 8px 8px;
}

#feed-title {
  font: var(--font-title-40);
  margin: 0;
}

#feed-subtitle {
  font: var(--font-body-20);
  color: var(--secondary-color);
  margin: 6px 0 0 0;
}

#no-entries-hint {
  color: var(--secondary-color);
  font: var(--font-display-20);
}

#no-entries-hint,
.entry {
  clear: both;
  margin: 16px auto 0 auto;
  padding: 16px;
}

.entry {
  overflow: auto;
  max-width: 80ch;
  background: var(--entry-background);
  border-radius: 4px;
  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 {
  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;
  transition: 100ms;
}

details.entry[open] > summary {
  margin: 0 0 8px 0;
}

details.entry[open] > summary::before {
  transform: rotate(90deg);
  transition: 100ms;
}

.entry-header {
  margin: 0 0 0 8px;
}

.entry-title {
  font: var(--font-title-20);
  margin: 0 0 4px 0;
}

.entry-date {
  color: var(--secondary-color);
  font: var(--font-body-10);
  margin: 0;
}

.entry-content {
  width: 100%;
  height: 24em;
  border: var(--entry-content-border);
}

.entry-files {
  font: var(--font-body-10);
  color: var(--secondary-color);
  padding: 0 8px;
}

.entry-files-title {
  font: var(--font-title-10);
  margin: 0 0 4px 0;
}

.entry-files-list {
  margin: 0;
  padding: 0 0 0 32px;
}