/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
  margin: 0;
}

h1,
h2,
h3,
h4 {
  font-size: 1rem;
}

/* Structure elements */
:root {
  color-scheme: light;
  --color-bg: rgb(240, 240, 240);
  --color-fg: rgb(20, 20, 20);
  --color-grey1: rgb(180, 180, 180);
  --color-grey2: rgb(140, 140, 140);
  --color-link: rgb(0, 100, 150);
}

html {
  min-height: 100lvh;
  color: var(--color-fg);
  background: url('assets/background.jpg');
  line-height: 1.35;
  font-size: 13px;
  font-weight: 400;
  font-family: 'Open Sans';
  text-rendering: optimizeLegibility;
}

top-banner {
  align-items: end;
  background-color: black;
  background-repeat: no-repeat;
  background-size: contain;
  border-bottom: 0.2rem solid black;
  color: var(--color-bg);
  display: block;
  display: flex;
  font-size: 1.5rem;
  height: 8rem;
  padding: 0 0 1rem 16rem;
  width: 100%;

  &::before {
    content: 'bradan.ca';
  }

  span {
    &::before {
      content: '\00a0::\00a0';
    }
  }

  &[bookshelf] {
    background-image: url('assets/banner-bookshelf.jpg');
  }

  &[circuit] {
    background-image: url('assets/banner-circuit.jpg');
  }

  &[desire] {
    background-image: url('assets/banner-desire.jpg');
  }

  &[face] {
    background-image: url('assets/banner-face.jpg');
  }

  &[ladybug] {
    background-image: url('assets/banner-ladybug.jpg');
    background-color: #192506;
  }

  &[notebook] {
    background-image: url('assets/banner-notebook.jpg');
  }

  &[staracres] {
    background-image: url('assets/banner-staracres.jpg');
    background-color: #0e3200;
  }

  &[salmon] {
    background-image: url('assets/banner-salmon.jpg');
  }

  &[soda] {
    background-image: url('assets/banner-soda.jpg');
    background-color: #151109;
  }

  &[software] {
    background-image: url('assets/banner-software.jpg');
  }

  &[workshop] {
    background-image: url('assets/banner-workshop.jpg');
    background-color: #a18464;
    color: var(--color-fg);
  }
}

main {
  padding: 1rem;
  max-width: 72rem;
  display: grid;
  grid-template-columns: auto 1fr;

  img {
    max-width: 100%;
  }

  nav {
    grid-column: 1;
  }

  div {
    grid-column: 2;
  }

  footer {
    grid-column: 1 / span 2;
  }
}

nav {
  border: 1px solid var(--color-grey1);
  margin-right: 1.5rem;
  padding: 0.5rem 0.75rem;
  width: 14rem;
  display: flex;
  flex-flow: column;
  flex-grow: 0;
  flex-shrink: 0;
  justify-content: space-between;

  div {
    margin-bottom: 1rem;

    &:last-of-type {
      margin-bottom: 0;
    }
  }
}

footer {
  margin-top: 2rem;
  display: flex;
  flex-flow: row;
  border-top: 1px solid var(--color-fg);
  color: var(--color-fg);
  line-height: 2;
}

/* Butcher the layout for mobile devices */
@media (max-width: 800px) {
  main {
    grid-template-columns: 1fr;
  }
  nav {
    width: inherit;
    margin-right: 0;
  }
  main > div {
    grid-column: 1;
    margin-top: 1.5rem;
  }
  top-banner {
    padding: 1rem;
    background-image: none !important;
    height: unset;
  }
}

/* Content elements */
h1,
h2,
h3,
h4,
ul,
p {
  margin-bottom: 1rem;

  &:last-child {
    margin-bottom: 0;
  }
}

h1 {
  font-size: 1.8rem;
}

h2 {
  font-size: 1.2rem;
}

a {
  color: var(--color-link);

  &:hover {
    color: color-mix(in oklab, var(--color-link), var(--color-fg) 25%);
    text-decoration: none;
  }

  &[href*="wikipedia.org"]::after {
    content: '';
    display: inline-block;
    height: 1em;
    width: 1em;
    margin-left: 2px;
    background-size: contain;
    background-repeat: no-repeat;
    background-image: url(assets/link-wikipedia.png);
    filter: brightness(0.9);
  }
}

ul,
ol {
  padding-left: 1rem;
}

.section {
  margin-bottom: 1rem;
  display: block;

  &:last-child {
    margin-bottom: 0;
  }
}

author-credit {
  &::before {
    content: 'by ';
  }

  display: block;
  margin-top: -1rem;
  margin-bottom: 1rem;
}

figure-box {
  border: 1px solid var(--color-grey2);
  background: #ddd;
  margin: 1rem 0;
  max-width: fit-content;

  & pre {
    margin: 0;
    overflow-x: scroll;
    & code {
      width: fit-content;
    }
  }
  & figcaption {
    margin: 0.25rem 0.5rem;
    font-weight: bold;
  }
  & fig-description {
    margin: 0.25rem 0.5rem;
  }

  --columns: attr(columns type(<integer>), 1);
  &[columns-2] {
    /* Workaround for Gecko and WebKit not supporting typed CSS attributes */
    --columns: 2;
  }

  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  & figcaption, & fig-description {
    grid-column: 1 / span var(--columns);
  }
  & img {
    max-height: 20rem;
  }
}

code {
  display: block;
  background: #112;
  color: #ddd;
  font-family: 'Liberation Mono', monospace;
  padding: 0.5rem;
  font-size: 0.9rem;
}