offtopia.org/css/default.scss

$purple:       #424969;
$orange:       #ffac5f;
$blonde:       #f5ddbc;
$light-purple: #faf0fa;

$card-bg: #dde;

$header: $orange;
$header-height: 50px;

$max-width: 80ch;

$pfp-size: 64px;

html, body {
  min-height: 100%;
  height: 100%;
  margin: 0;

  background-color: white;

  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
}

body {
  display: flex;
  flex-direction: column;

  counter-reset: theorem figure;
}

div#header {
  background-color: $header;
  height: $header-height;

  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;

  flex-wrap: nowrap;
  overflow-x: auto;

  div#logo {
    margin: auto;
    line-height: $header-height;

    padding-left: .5em;
    padding-right: .5em;
    font-size: 18pt;

    a {
      color: black;
      text-decoration: none;
    }

    transition: background-color .2s ease-in-out;
  }

  div#logo:hover {
    background-color: darken($header, 10%);
  }
}

.column {
  list-style: none;
  display: flex;
  flex-flow: column nowrap;
}

.columns {
  display: flex;
  flex-flow: row nowrap;
  > * {
    width: 50%;
    padding: 0px;
  }
}

div#content {
  max-width: $max-width;
  margin: 0px auto 0px auto;
  flex: 1 0 auto;

  font-size: 14pt;
  line-height: 1.6;

  p {
    text-align: justify;
    letter-spacing: 1.75;

    code {
      display: inline-block;
    }

    span.qed {
      float: right;
    }

    span.theorem ::after {
      counter-increment: theorem;
      content: " " counter(theorem);
    }

    span.theorem, span.paragraph-marker {
      font-style: italic;
    }
  }

  h1 {
    font-variant: small-caps;
    max-width: 120ch;
  }

  * {
    max-width: 100%;
  }

  .person {
    margin: 5px 5px;
    padding: 0.5em;

    background-color: $card-bg;
    border: 1px solid darken($card-bg, 10%);
    border-radius: 5px;

    .header {
      display: flex;

      img.pfp {
        width: $pfp-size;
        height: $pfp-size;
        border-radius: 5px;
      }

      div.default-pfp {
        background-color: black;
        width: $pfp-size;
        height: $pfp-size;
        border-radius: 3px;
        img {
          filter: invert(1);
        }
      }

      line-height: $pfp-size;

      .name {
        padding-left: 10px;
        font-size: 18pt;
      }

      .pronouns {
        font-size: 10pt;
      }
    }
  }
}

details[open].person {
  summary::before {
    transform: rotate(90deg);
  }

  .guts {
    height: unset;
  }

  summary ~ * {
    animation: sweep .5s ease-in-out;
  }
}

@keyframes sweep {
  0%    {
    font-size: 0pt;
  }
  100%  {
    font-size: unset;
  }
}

details.person {
  > summary::before {
    content: '▸';
    margin-right: 1em;

    transition: transform 0.5s;
  }
}

.footnote-back {
  margin-left: 0.5em;
}

@media only screen and (max-width: $max-width) {
  div#content {
    margin-left: 1em;
    margin-right: 1em;
  }

  .columns {
    flex-flow: column nowrap;
    > * {
      width: unset;
    }
  }
}