/* Site-specific adjustments on top of simple.css.
   simple.css styles plain HTML elements; this file only adds the few
   things our pages need. Colours come from simple.css's variables
   (var(--accent), var(--text-light), ...) so dark mode keeps working. */

/* Site name in the page header: a link, styled like a heading. */
.site-name a {
  font-size: 1.6rem;
  font-weight: bold;
  color: var(--text);
  text-decoration: none;
}

/* The Haskell logo on the front page floats to the right of the text. */
.side-logo {
  float: right;
  max-width: 8rem;
  margin: 0 0 1rem 1rem;
}

/* Member list on the front page: several columns on wide screens.
   "auto-fill" fits as many 16rem-wide columns as there is room for. */
.member-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.25rem 2rem;
  padding-left: 0;
  list-style: none;
}

/* Member pages: position under the name, photo to the right. */
.position {
  margin-top: 0;
  color: var(--text-light);
  font-style: italic;
}

.member-photo {
  float: right;
  width: 12rem;
  height: 12rem;
  object-fit: cover;          /* crop instead of stretching */
  margin: 0 0 1rem 1.5rem;
  border-radius: var(--standard-border-radius);
}

/* On narrow (phone) screens, the photo goes above the text instead. */
@media only screen and (max-width: 720px) {
  .member-photo {
    float: none;
    display: block;
    margin: 0 0 1rem 0;
  }
}

/* Blog posts: date and author line. */
.post-meta {
  color: var(--text-light);
  font-style: italic;
}

/* Page width: simple.css centres the content in a column of at most
   45rem (about 75 characters per line). We use a column a bit wider.
   The body is a 3-column grid: flexible margin | content | flexible margin,
   and min(...) keeps the content at most 90% of the window on small screens. */
body {
  grid-template-columns: 1fr min(50rem, 90%) 1fr;
}