/* Everything a reader needs: the page frame, the header and the posts.
   Every page loads this file. Selectors are prefixed with `site_`, `post_` or
   `about_`, see CONVENTIONS.md. */

/* The order of the cascade; the three files may be loaded in any order. */
@layer core, forms, admin;

@layer core {
  :root {
    /* Colours */
    --color-text: #000000;
    --color-muted: #777777;
    --color-border: #aaaaaa;
    --color-error: #992a1e;
    --color-success: #1e992a;
    --color-code-background: #eeeeee;

    /* Type and page frame */
    --font-body: sans-serif;
    --page-width: 60%;
    --page-gutter: 20%;
    --page-padding: 20px;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-s: 0.5rem;
    --space-m: 1rem;
    --space-l: 1.5rem;
    --space-xl: 2rem;
  }

  * {
    margin: 0;
    padding: 0;
  }

  html {
    font-family: var(--font-body);
    width: var(--page-width);
    padding: var(--page-padding);
    padding-left: var(--page-gutter);
  }

  /* Every link is black, also after it was visited. */
  a {
    color: var(--color-text);
  }

  .site_header {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-xl);
  }

  .site_nav {
    display: flex;
    justify-content: space-between;
    gap: var(--space-m);
  }

  /* Navigation links and titles carry no underline. */
  .site_nav a,
  .site_link {
    text-decoration: none;
  }

  .site_nav-separator {
    color: var(--color-muted);
  }

  /* The logout control of the header: a form button that looks like a link. */
  .site_inline-form {
    display: inline;
  }

  .site_link-button {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--color-text);
    text-decoration: underline;
    cursor: pointer;
  }

  .site_page-title {
    padding-bottom: var(--space-l);
  }

  .about_social-icon {
    height: var(--space-m);
    width: var(--space-m);
  }

  .about_list {
    list-style: none;
  }

  .post_article {
    padding-top: var(--space-xl);
    display: flex;
  }

  .post_article-title {
    font-weight: 400;
  }

  .post_article-date {
    font-size: 0.7rem;
  }

  .post_article-body {
    padding-top: var(--space-m);
    margin-left: var(--space-xl);
  }

  @media (max-width:1080px) {
    :root {
      --page-width: 90%;
      --page-gutter: 5%;
    }
  }
}