@import 'user-settings';
@import 'settings';
@import 'grid';
@import 'highlight';

* {
  box-sizing: border-box;
}

html {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: $color-background;
}

body {
  font-family: $font-family;
  font-size: $font-size;
  -webkit-font-smoothing: antialiased;
  padding: $size-unit * 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  color: $color-font;
}

p {
  margin-top: 0;
  margin-bottom: $size-unit;
}

h1, h2, h3, h4 {
  font-size: $font-size;
  font-weight: normal;
  margin-top: 0;
  position: relative;
  z-index: -1;

  a { text-decoration: none; }
  &:before {
    color: $color-heading-hash;
    font-style: italic;
  }
}

main {
  h2,
  h3,
  h4 {
    margin: $size-unit 0;
    border-bottom: 1px solid $color-border;
    padding-right: $size-unit;
    display: inline-block;
  }

  h2:after,
  h3:after,
  h4:after { display: block }
}

main ul,
main ol {
  padding-left: $size-unit;

  li {
    margin-bottom: $size-unit;
  }
}

main blockquote {
  margin: 0;
  padding-left: $size-unit;
  border-left: 1px solid $color-border;
}

a,
a:hover,
a:visited,
a:active {
  color: $color-font;
  text-decoration: none;

  main & {
    background: $color-link-background;
  }

}

main {
  max-width: $size-unit * 25;
  flex: 1;
  line-height: 1.9;

  table {
    width: 100%;
    display: block;
    overflow-x: scroll;
  }

}

time,
author {
  opacity: 0.3;
}

ul {
  margin-top: 0;
}

pre {
  background: $color-code;
  overflow-x: scroll;
  padding: $size-unit;
}

code {
  font-family: $font-family-code;
}

h1,
h2,
p,
li {
  code { background: $color-code; }
}

table {
  background: $color-code;

  th {
    text-align: left;
  }

  tr td,
  tr th {
    border-bottom: 1px solid $color-border;
    padding: $size-unit $size-unit/2;
  }

}
