<commit_before>// Sections
.intro-section {
  padding-top: 40px;
  padding-bottom: 48px;
  @media (max-width: $tablet) {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

// Collapsible caret-icon in the mobile navigation and footer
.mobile-caret-icon {
  background: fade-out($white, .97) url('../img/icons/caret.svg') no-repeat center/cover;
  opacity: 1;
  cursor: pointer;
  position: absolute;
  top: 6px;
  right: 12px; // Make icon align with hamburger menu
  width: 40px;
  height: 40px;
  @include transform(rotate(180deg));
  border-radius: 50%;
  @include transition(all .3s ease-in-out);
}

// Shared
.nobr {
  white-space:nowrap;
}

.section {
  padding: 50px 0;
  position: relative;
}

.section-divider {
  border-bottom: 2px solid #e3e3e3;
  margin: 0;
  width: 100%;
}

.content-with-fixed-header {
  margin-top: $page-top-offset;

  @media(max-width: $desktop-small) {
    margin-top: $page-top-offset-mobile;
  }
}

.toc-col,
.side-nav-col {
  -ms-flex: 0 0 $custom-side-col-width;
  flex: 0 0 $custom-side-col-width;
}

.toc-col {
  @media (max-width: $desktop-small) {
    display: none;
  }
}

.sticky-element {
  @media (min-width: $tablet-large) {
    padding: 0;
    position: relative;
    overflow: auto;
    max-height: 80%;
    -webkit-transform: translateZ(0); // Fixes jumping while scrolling

    &.sticky {
      position: fixed;
    }
  }
}

.toc {
  width: $sticky-el-width;
  padding-top: 12px;

  &.blog-toc {
    margin: 40px 0 24px;
  }

  &.initially-fixed {
    position: fixed;
  }

  &.hide-block {
    display: none !important;
  }

  @media (max-width: 1024px) {
    display: none !important;
  }

  .blog-toc-header {
    margin-bottom: 16px;
    padding-left: 12px;
    font-size: 12px;
    color: $gray-300;
    font-weight: 500;
    text-transform: uppercase;
  }

  >ul>li>a {
    display: block;
    line-height: 1.4;
    margin-bottom: 18px;
  }

  ul {
    list-style-type: none !important;
    padding-left: 12px;
    font-size: 12px;

    li {
      line-height: 1.4;
      margin-bottom: 18px;

      &.active {
         a,
         a:not([href]):not([tabindex]) { // Override Bootstrap v4 default value
           color: $mainBrandColor;
         }
       }
    }

    a,
    a:not([href]):not([tabindex]) { // Override Bootstrap v4 default value
      color: $gray-500;
      font-weight: 500;
      padding: 0;
      letter-spacing: 0.2px;
      &:hover {
        color:$black;
        background: none;
        text-decoration: none;
      }
    }
  }
}

// Tables are table-y
table,
th,
td {
  border: 1px solid lighten($textColor, 20%);
  padding: 6px
}

table {
  border-collapse: collapse;
}

// Expandable title with caret icon before
%expandable-title {
  font-size: $font-size--primary;
  line-height: 1.5;
  color: $black;
  font-weight: 500;
  @include transition(all .25s ease-in-out);

  &:before {
    content: '';
    position: absolute;
    background: url('../../img/icons/icon-caret-right.svg') no-repeat center/cover;
    width: $icon-size--s;
    height: $icon-size--s;
    margin-left: -40px;
    margin-top: -2px;
    opacity: .54;
    transform: rotate(90deg);
    @include transition(all .3s ease-in-out);
  }

  // Initial state of the title
  &.collapsed {
    color: $textColor;
    font-weight: 400;

    &:before {
      opacity: .2;
      @include transform(rotate(0));
    }
  }
}

$tooltip-color: $footerColor;
$tooltip-padding: .5rem .7rem;

// Overrides Bootstrap tooltip styles
.tooltip {
  font-size: 12px;
  line-height: 1.4;

  &.show {
    opacity: .87;
  }

  .tooltip-inner {
    background-color: $tooltip-color;
    padding: $tooltip-padding;
  }

  &.bs-tooltip-left .arrow:before {
    border-left-color: $tooltip-color;
  }

  &.bs-tooltip-right .arrow:before {
    border-right-color: $tooltip-color;
  }

  &.bs-tooltip-top .arrow:before {
    border-top-color: $tooltip-color;
  }

  &.bs-tooltip-bottom .arrow:before {
    border-bottom-color: $tooltip-color;
  }
}

$article-container-border: 1px solid $article-border-color;
$article-container-padding: 32px 56px 40px;
$article-container-padding-mobile: 0 15px;
$article-container-margin-bottom: 32px;
$article-container-border-radius: $border-radius;
$article-container-min-height: 460px;

.article-container {
  background-color: $white;
  border: $article-container-border;
  border-radius: $article-container-border-radius;
  padding: $article-container-padding;
  margin-bottom: $article-container-margin-bottom;
  min-width: 0; // Fixes a bug when `pre` code breaks flex element
  min-height: $article-container-min-height;

  @media (max-width: $phone-xlarge) {
    padding: $article-container-padding-mobile;
    border: none;
  }
}

.anchorjs-link {
  &:hover {
    text-decoration: none;
  }

  &:after {
    vertical-align: -2px;
  }
}

/* Custom checkbox styles */
$checkbox-size: 18px;
.checkbox-container {
  position: relative;
  display: block;
  cursor: pointer;
  margin-top: 12px;
  padding-left: $checkbox-size + 12px;
  line-height: 1.4;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  &:hover input ~ .checkmark {
    border-color: $mainBrandColor;
  }

  .text {
    font-size: 14px;
  }

  /* Hide the browser's default checkbox */
  input {
    position: absolute;
    cursor: pointer;
    opacity: 0;
    height: 0;
    width: 0;

    &:checked ~ .checkmark {
      background: url('../../img/icons/checkbox.svg') no-repeat center/cover;
      border: none;
    }
  }

  /* Custom checkbox */
  .checkmark {
    position: absolute;
    top: 2px;
    left: 0;
    height: $checkbox-size;
    width: $checkbox-size;
    border: 1px solid $gray-300;
    border-radius: $border-radius-s;
  }
}
<commit_msg>Adjust screen size where the `toc` column will be hidden<commit_after>// Sections
.intro-section {
  padding-top: 40px;
  padding-bottom: 48px;
  @media (max-width: $tablet) {
    padding-top: 32px;
    padding-bottom: 32px;
  }
}

// Collapsible caret-icon in the mobile navigation and footer
.mobile-caret-icon {
  background: fade-out($white, .97) url('../img/icons/caret.svg') no-repeat center/cover;
  opacity: 1;
  cursor: pointer;
  position: absolute;
  top: 6px;
  right: 12px; // Make icon align with hamburger menu
  width: 40px;
  height: 40px;
  @include transform(rotate(180deg));
  border-radius: 50%;
  @include transition(all .3s ease-in-out);
}

// Shared
.nobr {
  white-space:nowrap;
}

.section {
  padding: 50px 0;
  position: relative;
}

.section-divider {
  border-bottom: 2px solid #e3e3e3;
  margin: 0;
  width: 100%;
}

.content-with-fixed-header {
  margin-top: $page-top-offset;

  @media(max-width: $desktop-small) {
    margin-top: $page-top-offset-mobile;
  }
}

.toc-col,
.side-nav-col {
  -ms-flex: 0 0 $custom-side-col-width;
  flex: 0 0 $custom-side-col-width;
}

.toc-col {
  // Custom width is used here to have the central content column more readable.
  @media (max-width: 1140px) {
    display: none;
  }
}

.sticky-element {
  @media (min-width: $tablet-large) {
    padding: 0;
    position: relative;
    overflow: auto;
    max-height: 80%;
    -webkit-transform: translateZ(0); // Fixes jumping while scrolling

    &.sticky {
      position: fixed;
    }
  }
}

.toc {
  width: $sticky-el-width;
  padding-top: 12px;

  &.blog-toc {
    margin: 40px 0 24px;
  }

  &.initially-fixed {
    position: fixed;
  }

  &.hide-block {
    display: none !important;
  }

  @media (max-width: 1024px) {
    display: none !important;
  }

  .blog-toc-header {
    margin-bottom: 16px;
    padding-left: 12px;
    font-size: 12px;
    color: $gray-300;
    font-weight: 500;
    text-transform: uppercase;
  }

  >ul>li>a {
    display: block;
    line-height: 1.4;
    margin-bottom: 18px;
  }

  ul {
    list-style-type: none !important;
    padding-left: 12px;
    font-size: 12px;

    li {
      line-height: 1.4;
      margin-bottom: 18px;

      &.active {
         a,
         a:not([href]):not([tabindex]) { // Override Bootstrap v4 default value
           color: $mainBrandColor;
         }
       }
    }

    a,
    a:not([href]):not([tabindex]) { // Override Bootstrap v4 default value
      color: $gray-500;
      font-weight: 500;
      padding: 0;
      letter-spacing: 0.2px;
      &:hover {
        color:$black;
        background: none;
        text-decoration: none;
      }
    }
  }
}

// Tables are table-y
table,
th,
td {
  border: 1px solid lighten($textColor, 20%);
  padding: 6px
}

table {
  border-collapse: collapse;
}

// Expandable title with caret icon before
%expandable-title {
  font-size: $font-size--primary;
  line-height: 1.5;
  color: $black;
  font-weight: 500;
  @include transition(all .25s ease-in-out);

  &:before {
    content: '';
    position: absolute;
    background: url('../../img/icons/icon-caret-right.svg') no-repeat center/cover;
    width: $icon-size--s;
    height: $icon-size--s;
    margin-left: -40px;
    margin-top: -2px;
    opacity: .54;
    transform: rotate(90deg);
    @include transition(all .3s ease-in-out);
  }

  // Initial state of the title
  &.collapsed {
    color: $textColor;
    font-weight: 400;

    &:before {
      opacity: .2;
      @include transform(rotate(0));
    }
  }
}

$tooltip-color: $footerColor;
$tooltip-padding: .5rem .7rem;

// Overrides Bootstrap tooltip styles
.tooltip {
  font-size: 12px;
  line-height: 1.4;

  &.show {
    opacity: .87;
  }

  .tooltip-inner {
    background-color: $tooltip-color;
    padding: $tooltip-padding;
  }

  &.bs-tooltip-left .arrow:before {
    border-left-color: $tooltip-color;
  }

  &.bs-tooltip-right .arrow:before {
    border-right-color: $tooltip-color;
  }

  &.bs-tooltip-top .arrow:before {
    border-top-color: $tooltip-color;
  }

  &.bs-tooltip-bottom .arrow:before {
    border-bottom-color: $tooltip-color;
  }
}

$article-container-border: 1px solid $article-border-color;
$article-container-padding: 32px 56px 40px;
$article-container-padding-mobile: 0 15px;
$article-container-margin-bottom: 32px;
$article-container-border-radius: $border-radius;
$article-container-min-height: 460px;

.article-container {
  background-color: $white;
  border: $article-container-border;
  border-radius: $article-container-border-radius;
  padding: $article-container-padding;
  margin-bottom: $article-container-margin-bottom;
  min-width: 0; // Fixes a bug when `pre` code breaks flex element
  min-height: $article-container-min-height;

  @media (max-width: $phone-xlarge) {
    padding: $article-container-padding-mobile;
    border: none;
  }
}

.anchorjs-link {
  &:hover {
    text-decoration: none;
  }

  &:after {
    vertical-align: -2px;
  }
}

/* Custom checkbox styles */
$checkbox-size: 18px;
.checkbox-container {
  position: relative;
  display: block;
  cursor: pointer;
  margin-top: 12px;
  padding-left: $checkbox-size + 12px;
  line-height: 1.4;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

  &:hover input ~ .checkmark {
    border-color: $mainBrandColor;
  }

  .text {
    font-size: 14px;
  }

  /* Hide the browser's default checkbox */
  input {
    position: absolute;
    cursor: pointer;
    opacity: 0;
    height: 0;
    width: 0;

    &:checked ~ .checkmark {
      background: url('../../img/icons/checkbox.svg') no-repeat center/cover;
      border: none;
    }
  }

  /* Custom checkbox */
  .checkmark {
    position: absolute;
    top: 2px;
    left: 0;
    height: $checkbox-size;
    width: $checkbox-size;
    border: 1px solid $gray-300;
    border-radius: $border-radius-s;
  }
}

{'fraction_non_alphanumeric': 0.15194559228650137, 'fraction_numerical': 0.02737603305785124, 'mean_word_length': 2.625780274656679, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 9, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2722837', 'n_tokens_mistral': 4574, 'n_tokens_neox': 4189, 'n_words': 924}