<commit_before>@import "values";
@import "flexbox";

//defensive coding
* {
  //border-box, you're the best
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;

  //Safari, you're the worst
  -webkit-tap-highlight-color: transparent;
}

//elements
body {
  color: @df-off-black;
  font-family: @df-serif;
  font-size: @df-text-base;
  line-height: @df-line-base;
  padding: 0;
  margin: 0;
  //remove 300ms click delay in Safari, AKA still the worst
  touch-action: manipulation;
}

main {
  display: block;

  &.interactive {
    padding: 20px 10px;
    margin: 20px auto;
    border-top: 1px solid @df-light-gray;
    border-bottom: 1px solid @df-light-gray;
    font-family: @df-sans;
  }
}

a {
  color: @df-blue;
  text-decoration: none;
  &:hover {
    color: @df-navy;
  }
  img {
    border: none;
  }
}

img, video, embed, object, iframe {
  max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  color: @df-off-black;
  margin: @df-line-base 0 (@df-line-base/2) 0;
}

h1 {
  font-size: 28px;
  line-height: 30 / 28;
  letter-spacing: -0.5px;

  @media @tablet {
    font-size: 42px;
    line-height: 46 / 42;
    letter-spacing: -1px;
  }
}
h2 {
  font-size: 24px;
  line-height: @df-line-base;
}
h3 {
  font-size: 22px;
  line-height: 23 / 22;
}
h4 {
  font-size: 16px;
  font-weight: 600;
  line-height: 24 / 16;
  margin: @df-line-base/2 0 0 0;
}

//header and menu
nav.main-nav {
  background: white;
  border-bottom: 1px solid @df-light-gray;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .1);
  position: relative;
  line-height: 1;

  .wrapper {
    max-width: 1020px;
    margin: auto;
    position: relative;
    padding: 10px;

    @media @mobile {
      padding: 6px;
    }
  }

  .logo {
    display: block;
    vertical-align: middle;

    img {
      // width: 310px;
      height: 24px;
      max-height: 100%;

      @media @mobile {
        height: 18px;
      }
    }
  }

  .share.top {
    position: absolute;
    top: 10px;
    right: 10px;

    @media @tablet {
      right: 4px;
      width: auto !important;
    }

    label {
      background: white !important;
    }

    @media @mobile {
      top: 6px;

      label {
        span {
          display: none;
        }
      }

      .left {
        margin-left: -275px !important;
      }
    }
  }
}

.ad {
  text-align: center;
  margin: 16px auto;

  &.pending {
    &[data-type="banner"],
    &[data-type="bannerBottom"] {
      max-width: 728px;
      padding-bottom: percentage(90 / 728);
    }

    &[data-type="tall"] {
      max-width: 300px;
      padding-bottom: percentage(600 / 300);
    }

    &[data-type="square"] {
      max-width: 300px;
      padding-bottom: percentage(250 / 300);
    }
  }
}

.show-comments {
  border: 1px solid @df-blue;
  padding: 20px;<commit_msg>Better pending ad placeholder sizes<commit_after>@import "values";
@import "flexbox";

//defensive coding
* {
  //border-box, you're the best
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;

  //Safari, you're the worst
  -webkit-tap-highlight-color: transparent;
}

//elements
body {
  color: @df-off-black;
  font-family: @df-serif;
  font-size: @df-text-base;
  line-height: @df-line-base;
  padding: 0;
  margin: 0;
  //remove 300ms click delay in Safari, AKA still the worst
  touch-action: manipulation;
}

main {
  display: block;

  &.interactive {
    padding: 20px 10px;
    margin: 20px auto;
    border-top: 1px solid @df-light-gray;
    border-bottom: 1px solid @df-light-gray;
    font-family: @df-sans;
  }
}

a {
  color: @df-blue;
  text-decoration: none;
  &:hover {
    color: @df-navy;
  }
  img {
    border: none;
  }
}

img, video, embed, object, iframe {
  max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
  color: @df-off-black;
  margin: @df-line-base 0 (@df-line-base/2) 0;
}

h1 {
  font-size: 28px;
  line-height: 30 / 28;
  letter-spacing: -0.5px;

  @media @tablet {
    font-size: 42px;
    line-height: 46 / 42;
    letter-spacing: -1px;
  }
}
h2 {
  font-size: 24px;
  line-height: @df-line-base;
}
h3 {
  font-size: 22px;
  line-height: 23 / 22;
}
h4 {
  font-size: 16px;
  font-weight: 600;
  line-height: 24 / 16;
  margin: @df-line-base/2 0 0 0;
}

//header and menu
nav.main-nav {
  background: white;
  border-bottom: 1px solid @df-light-gray;
  box-shadow: 0 2px 7px rgba(0, 0, 0, .1);
  position: relative;
  line-height: 1;

  .wrapper {
    max-width: 1020px;
    margin: auto;
    position: relative;
    padding: 10px;

    @media @mobile {
      padding: 6px;
    }
  }

  .logo {
    display: block;
    vertical-align: middle;

    img {
      // width: 310px;
      height: 24px;
      max-height: 100%;

      @media @mobile {
        height: 18px;
      }
    }
  }

  .share.top {
    position: absolute;
    top: 10px;
    right: 10px;

    @media @tablet {
      right: 4px;
      width: auto !important;
    }

    label {
      background: white !important;
    }

    @media @mobile {
      top: 6px;

      label {
        span {
          display: none;
        }
      }

      .left {
        margin-left: -275px !important;
      }
    }
  }
}

.ad {
  text-align: center;
  margin: 16px auto;

  &.pending {
    &::before {
      display: block;
      content: "";
    }

    &[data-type="banner"],
    &[data-type="bannerBottom"]{
      max-width: 728px;
      &::before {
        padding-bottom: percentage(90 / 728);
      }
    }

    &[data-type="tall"] {
      max-width: 300px;
      &::before {
        padding-bottom: percentage(600 / 300);
      }
    }

    &[data-type="square"] {
      max-width: 300px;
      &::before {
        padding-bottom: percentage(250 / 300);
      }
    }
  }
}

.show-comments {
  border: 1px solid @df-blue;
  padding: 20px;
{'fraction_non_alphanumeric': 0.15474352376050782, 'fraction_numerical': 0.04494767541602333, 'mean_word_length': 2.089560148383678, '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': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1660662', 'n_tokens_mistral': 2554, 'n_tokens_neox': 2272, 'n_words': 522}