itsdrike.com/static/src/scss/style.scss

$primary: #E85537;
$body-bg: #17181C;
$footer-height: 110px;
$font-size-base: 1.2rem;
$headings-margin-bottom: 1.5rem;
$paragraph-margin-bottom: $headings-margin-bottom * 0.85;

@import "node_modules/bootstrap/scss/bootstrap";

$navbar-height: 40px;
$body-color: $gray-300;

html, body {
  color: $body-color;
}

.navbar {
  background-color: $black;
  padding-top: 0;
  padding-bottom: 0;

  .navbar-brand {
    font-size: $font-size-base;
  }

  .nav-link {
    padding-right: $font-size-base !important;
    padding-left: $font-size-base !important;
  }

  .nav-link code, .navbar-brand code {
    background-color: inherit;
    font-size: 90%;
  }
}

footer {
  background-color: $black;
  width: 100%;
  height: $footer-height;
  color: lighten($black, 50);

  a {
    color: inherit;

    &:hover {
      color: lighten($black, 75);
    }
  }
}

#TableOfContents {
  font-size: $font-size-base;

  ul {
    list-style-type: none;
  }

  & > ul {
    margin-bottom: 0;
    padding-left: $spacer;

    li {
      text-indent: -5px;

      &::before {
        margin-right: 5px;
        content: "-";
      }
    }
  }
}

#main {
  margin-top: $spacer * 5;

  // screen height - top padding - navbar height - footer margin
  min-height: calc(100vh - #{$spacer * 5} - #{$navbar-height} - #{$spacer * 3});
}

a {
  color: $primary;

  &:hover {
    transition: color 0.5s;
    color: $body-color;
  }

  &.colour-invert {
    color: $body-color;

    &:hover {
      color: $primary;
    }
  }
}

a.no-color-change {
  &, &:hover {
    text-decoration: none;
    color: inherit;
  }
}

pre.chroma {
  margin-bottom: $paragraph-margin-bottom;
  padding: $spacer;

  .highlight & {
    margin-top: 0;
  }
}

p, li, h1, h2, h3, h4, h5, h6 {
  code {
    @extend .chroma;
    padding: $spacer * 0.25;
    color: inherit;
  }
}

h1, h2, h3, h4, h5, h6 {
  .anchor {
    font-weight: lighter;
  }
}

ul ul, ol ol {
  padding-left: $spacer * 1.5;
}

.content-detail {
  text-indent: 2em;
}


table td {
  vertical-align: middle;
}

.table-dark {
  color: $body-color;
}

.content {
  table {
    @extend .table, .table-dark, .table-striped;
    margin: 0 auto;
    margin-bottom: $paragraph-margin-bottom;
    width: 66%;
    text-align: center;
  }
}