<commit_before>/* vim: set ft=scss: */

.main-blog {
  margin: 0 auto 6rem auto;
  max-width: 1350px;

  &__header {
    background: var(--main-background-color);
    margin-bottom: 3rem;
    padding: 0.75rem;

    &.-nohero {
      @media (min-width: 700px) {
        padding: 0;
        width: 85%;
        margin-left: auto;
        margin-right: auto;
      }

      @media (min-width: 850px) {
        margin-left: 25%;
        width: 70%;
      }

      @media (min-width: 1000px) {
        margin-left: auto;
        margin-right: 15%;
        width: 60%;
      }
    }

    &.-hero {
      @media (min-width: 700px) {
        padding: 1.5rem;
      }

      @media (min-width: 700px) {
        margin-top: -3rem;
        margin-left: calc(3% + 1.5rem);
        width: 80%;
      }

      @media (min-width: 1200px) {
        width: 60%;
        margin-top: -4rem;
        margin-left: calc(10% + 1.5rem);
      }
    }
  }

  &__title {
    margin: 0;
  }

  &__hero {
    background-size: cover;
    background-repeat: no-repeat;
    height: 150px;
    width: 100%;

    @media (min-width: 700px) {
      height: 200px;
    }

    @media (min-width: 1050px) {
      margin-left: auto;<commit_msg>Added a breakout header for articles.<commit_after>/* vim: set ft=scss: */

.main-blog {
  margin: 0 auto 6rem auto;
  max-width: 1350px;

  &__header {
    background: var(--main-background-color);
    margin-bottom: 3rem;
    padding: 0.75rem;

    &.-nohero {
      @media (min-width: 700px) {
        padding: 0;
        width: 85%;
        margin-left: auto;
        margin-right: auto;
      }

      @media (min-width: 850px) {
        margin-left: 25%;
        width: 70%;
      }

      @media (min-width: 1000px) {
        margin-left: auto;
        margin-right: 15%;
        width: 60%;
      }
    }

    &.-hero {
      @media (min-width: 700px) {
        padding: 1.5rem;
      }

      @media (min-width: 700px) {
        margin-top: -3rem;
        margin-left: calc(3% + 1.5rem);
        width: 80%;
      }

      @media (min-width: 1200px) {
        width: 60%;
        margin-top: -4rem;
        margin-left: calc(10% + 1.5rem);
      }
    }
  }

  &__breakout-header {
    span {
      display: inline-block;
      position: relative;

      &:before {
        background: #eee;
        content: "";
        height: 0.5rem;
        margin-right: 1.5rem;
        position: absolute;
        right: 100%;
        top: calc(50% - 0.25rem);
        width: 1000%;
      }

      &:after {
        background: #eee;
        content: "";
        height: 0.5rem;
        margin-left: 1.5rem;
        position: absolute;
        left: 100%;
        top: calc(50% - 0.25rem);
        width: 1000%;
      }
    }
  }

  &__title {
    margin: 0;
  }

  &__hero {
    background-size: cover;
    background-repeat: no-repeat;
    height: 150px;
    width: 100%;

    @media (min-width: 700px) {
      height: 200px;
    }

    @media (min-width: 1050px) {
      margin-left: auto;
{'fraction_non_alphanumeric': 0.14958263772954924, 'fraction_numerical': 0.05943238731218698, 'mean_word_length': 1.5563139931740615, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, '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': '4109583', 'n_tokens_mistral': 1233, 'n_tokens_neox': 1056, 'n_words': 234}