msfjarvis.dev/themes/codex/assets/scss/pages/post.scss

@import "../main";
@import "../partials/github-syntax-highlighting";
@import "../partials/colors";

$tocBreakpoint: 1024px;

/* Aligns ToC content */
.flex-wrapper {
  display: flex;
}

.post__container {
  flex-grow: 1;
}

.post {
  width: 100%;
  max-width: 34rem;
  margin: 0 auto;

  h2,
  h3 {
    position: relative;
    padding-top: 10px;

    .anchor {
      text-decoration: none;
      position: absolute;
      left: -1rem;
      color: $grey;
      font-size: 1.2rem;
      font-weight: 400;
    }

    .anchor:hover {
      color: $darkGrey;
    }
  }

  blockquote {
    width: 95%;
    margin: 0 auto;
    font-size: 1rem;

    a {
      color: $darkGrey;
      text-decoration: underline;
    }
  }

  img {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    display: block;
  }
}

#post__title {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.post__date {
  color: $grey;
  font-size: 0.8rem;
}

.post__footer {
  padding-top: 3rem;
}

.toc-container {
  position: sticky;
  align-self: start;
  top: 3rem;
  max-width: 350px;

  @media screen and (max-width: $tocBreakpoint) {
    visibility: hidden;
    width: 0;
    margin: 0;
  }
}

.toc-post-title {
  font-size: 0.9rem;
  margin-bottom: 0.8rem;
}

#TableOfContents {
  ul {
    list-style: none;
    margin: 0;
  }

  a {
    text-decoration: none;
    color: #9b9b9b;
    font-size: 0.9rem;
  }

  a.active {
    color: rgb(51, 51, 51);
  }
}

.tags__list {
  padding-right: 1.5rem;
  margin: 1.5rem 0 0;
  list-style: none;
  display: flex;
  justify-content: flex-end;
}

.tag__item {
  margin-right: 1rem;
  display: inline-block;

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

.tag__link {
  display: inline-block;
  text-decoration: none;
  padding: 0.2em 0.4em;
  border-radius: 3px;
  background: lighten($primary, 41%);
  color: $primary;
  font-size: 0.8rem;

  &:hover {
    background: lighten($primary, 38%);
  }
}

.gif {
  margin-top: 1.5rem;

  img {
    max-width: 375px;
  }
}

.pagination {
  display: flex;
  flex-direction: column;
  margin-top: 1.5rem;

  @media screen and (min-width: 600px) {
    flex-direction: row;
    justify-content: space-between;
  }
}

.pagination__item {
  text-decoration: none;
  display: flex;
  flex-direction: column;

  &:nth-child(2) {
    margin-top: 1.5rem;
  }

  @media screen and (min-width: 600px) {
    width: 275px;
    padding: 15px;
    border-radius: 4px;
    &:first-of-type {
      padding-right: 15px;
    }
    &:last-of-type {
      margin-top: 0;
    }
    &:hover {
      background-color: #f6f9fc;
    }
  }
}

.pagination__label {
  color: $grey;
  font-size: 0.8rem;
}

.pagination__title {
  color: $black;
  font-weight: 700;
  margin-top: 0.25rem;
}

footer {
  text-align: center;
  padding: 0 1.5rem;
  background: #ffffff;

  p {
    margin-top: 1rem; // reduce margin top due to social icons' padding
    color: $grey;
    font-size: 0.65rem;
  }
}

/* overrides */
.post__content {
  ul {
    list-style: none;

    li {
      margin-bottom: 0.5rem;

      &::before {
        content: "-";
        color: $darkGrey;
        position: absolute;
        margin-left: -15px;
      }
    }
  }
}

.twitter-tweet.twitter-tweet-rendered {
  margin: 1.5rem auto !important;
  width: 375px !important;
}

table {
  max-width: 100%;
  border-spacing: 0;

  thead {
    background: $lightGrey;
  }

  th,
  td {
    padding: 0.5em 1em;
    border: 1px double $greyTableBorder;
  }
}