@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: 'Inconsolata', sans-serif;
  font-size: $font-size;
  -webkit-font-smoothing: antialiased;
  padding: $size-unit * 3;
  flex: 1;
  display: flex;
  flex-direction: column;
  color: $color-font;
}

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

  table {
    width: 100%;
    display: block;
    overflow-x: scroll;
    box-shadow: -3px -0px 5px -3px $color-dark inset;
  }

}

p {
  line-height: 1.7;
  margin-bottom: $size-unit;
}

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

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

h2:before { content: '## ' }
h3:before { content: '### ' }

main h2 {
  margin-top: $size-unit * 2;
}

date {
  opacity: 0.3;
}

ul {
  margin-top: 0;
}

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

  main & {
    border-bottom: 1px solid $color-border;
  }

}


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

pre {
  background: #f6f6f6;
  overflow-x: scroll;
  padding: $size-unit;
}

code {
  font-size: 85%;
  line-height: 1.4;
}

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

table {
  tr td {
    border-bottom: 1px solid $color-border;
    padding: $size-unit
  }
}