_content_project.scss

//
// Style Markdown content
//

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family:
    "Qanelas Soft",
    sans-serif,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
}

.td-content {
  order: 1;

  p,
  li,
  td {
    font-weight: $font-weight-body-text;
    // @include media-breakpoint-up(sm) {
    //   max-width: 100%;
    // }
  }

  >h1 {
    font-family:
      "Qanelas Soft",
      sans-serif,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      "Helvetica Neue",
      Arial,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol";
    font-weight: $font-weight-bold;
    margin-bottom: 1rem;
    color: $casper;
  }

  >h2 {
    font-family:
      "Qanelas Soft",
      sans-serif,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      "Helvetica Neue",
      Arial,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol";
    margin-bottom: 1rem;
    color: $casper;
  }

  >h2:not(:first-child) {
    margin-top: 3rem;
    color: $casper;
  }

  >h2+h3 {
    margin-top: 1rem;
  }

  >h3,
  >h4,
  >h5,
  >h6 {
    font-family:
      "Qanelas Soft",
      sans-serif,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      Roboto,
      "Helvetica Neue",
      Arial,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol";
    margin-bottom: 1rem;
    margin-top: 2rem;
    color: $lightslategray;

    & a {
      color: $primary;

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

  img {
    @extend .img-fluid;
    @extend .img-thumbnail;
    @extend .rounded;
    @extend .shadow;
    margin-bottom: $spacer;
  }

  table {
    @extend .td-table;
  }

  blockquote {
    padding: 0 0 0 1rem;
    margin-bottom: $spacer;
    color: $gray-600;
    border-left: 6px solid $secondary;
  }

  ul li,
  ol li {
    margin-bottom: 0.25rem;
  }

  strong {
    font-weight: $font-weight-bold;
  }

  .footnotes {
    :target {
      scroll-margin-top: 6rem;
    }
  }
  >.alert,
  >.highlight,
  >.lead,
  >.td-table,
  >blockquote,
  >dl dd,
  >h1,
  >h2,
  >ol,
  >p,
  >pre,
  >ul {
    @extend .td-max-width-on-larger-screens;
  }

  .alert:not(:first-child) {
    margin-top: 2 * $spacer;
    margin-bottom: 2 * $spacer;
  }

  .lead {
    margin-bottom: 1.5rem;
  }
}

.td-title {
  margin-top: 1rem;
  margin-bottom: 0.5rem;

  @include media-breakpoint-up(sm) {
    font-size: 3rem;
  }
}

/* width */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background-color: transparent;
}

/* Track */
::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: transparent;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: $primary;
  border-radius: 10px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: $secondary;
}

.td-initial table {
  display: block;
  caption-side: bottom;
  border-collapse: collapse;
  text-indent: initial;
  unicode-bidi: isolate;
  border-spacing: 2px;
  overflow-x: auto;
  width: 100%;
  margin-bottom: 1rem;
  color: #cccccc;
  vertical-align: top;
  border-color: rgba(0, 179, 159, 0.33);
}

.td-initial thead {
  display: table-header-group;
  vertical-align: bottom;
  unicode-bidi: isolate;
}

.td-initial thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: rgba(0, 179, 159, 0.33);
  border-style: solid;
  border-width: 0;
}

.td-initial tbody {
  display: table-row-group;
  unicode-bidi: isolate;
}

.td-initial tr {
  display: table-row;
  vertical-align: inherit;
  unicode-bidi: isolate;
}

.td-initial td {
  display: table-cell;
  vertical-align: inherit;
  unicode-bidi: isolate;
  max-width: 300px;
  overflow-wrap: break-word;
  padding: 0.5rem;
  background-color: #00000000;
  border-bottom-width: 1px;
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.05);
}

.td-initial th {
  display: table-cell;
  vertical-align: inherit;
  font-weight: bold;
  text-align: -internal-center;
  unicode-bidi: isolate;
  padding: 0.5rem;
  background-color: transparent;
  border-bottom-width: 1px;
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.05);
}

.table-container {
  overflow-x: auto;
  max-width: 100%;
}