<commit_before>@import 'hp-styles/settings';
@import 'hp-styles/mixins';

.template-home {
  position: relative;

  @include breakpoint(large) {
    background-image: url('../img/tree-desktop.svg');
    background-repeat: no-repeat;
    background-size: 75vw;
    background-position: 0 10vmin;

    @media (min-aspect-ratio: 3/2) {
      background-size: 60vw;
      background-position: 0 20vmin;
    }
  }

  #mlh-trust-badge {
    display: block;
    max-width: 65px;
    min-width: 50px;
    position: absolute;
    right: 20px;
    top: 0;
    width: 10%;

    @include breakpoint(medium) {
      right: 30px;
    }

    img {
      width: 100%;
    }
  }

  section {
    padding-top: 3.5em;

    .title {
      color: $hp-brown-2;
      font-size: 2em;

      @include breakpoint(medium) {
        font-size: 2.5em;
        text-align: left;
      }
    }

    p {
      @include breakpoint(small only) {
        text-align: justify;
      }
    }
  }

  .section-top {
    background-image: url('../img/tree-mobile.svg');
    background-position: 0 calc(15% + #{$topbar-height});
    background-repeat: no-repeat;
    background-size: 95vw;
    position: relative;
    padding-top: 0;
    padding-bottom: 0;

    @include breakpoint(medium down) {
      @include breakpoint(landscape) {
        background-image: none;
      }
    }

    @include breakpoint(medium) {
      background-size: 75vw;
      background-position-y: calc(10% + #{$topbar-height});
    }

    @include breakpoint(large) {
      background: none;
    }

    @include breakpoint(xxlarge) {
      margin: 0;
      max-width: none;
    }

    .inner {
      height: calc(100vh - #{$topbar-height});
      position: relative;

      @include breakpoint(medium) {
        @include breakpoint(portrait) {
          min-height: 80vh;
        }
      }
    }

    .main-text {
      color: $hp-brown-1;
      position: absolute;
      top: 60%;

      @include breakpoint(medium) {
        text-align: right;
        top: calc(10% + 55vw);
        right: rem-calc(30); // align with mlh badge
      }

      @include breakpoint(large) {
        top: auto;
        bottom: 0;

        @include breakpoint(portrait) {
          top: calc(10% + 55vw);<commit_msg>implement ghosting for landscape views<commit_after>@import 'hp-styles/settings';
@import 'hp-styles/mixins';

.template-home {
  position: relative;

  @include breakpoint(large) {
    background-image: url('../img/tree-desktop.svg');
    background-repeat: no-repeat;
    background-size: 75vw;
    background-position: 0 10vmin;

    @media (min-aspect-ratio: 3/2) {
      background-size: 60vw;
      background-position: 0 20vmin;
    }
  }

  #mlh-trust-badge {
    display: block;
    max-width: 65px;
    min-width: 50px;
    position: absolute;
    right: 20px;
    top: 0;
    width: 10%;

    @include breakpoint(medium) {
      right: 30px;
    }

    img {
      width: 100%;
    }
  }

  section {
    padding-top: 3.5em;

    .title {
      color: $hp-brown-2;
      font-size: 2em;

      @include breakpoint(medium) {
        font-size: 2.5em;
        text-align: left;
      }
    }

    p {
      @include breakpoint(small only) {
        text-align: justify;
      }
    }
  }

  .section-top {
    padding-top: 0;

    &:before {
      content: '';
      background-image: url('../img/tree-mobile.svg');
      background-position: 0 calc(12.5% + #{$topbar-height});
      background-repeat: no-repeat;
      background-size: 95vw;
      height: 100vh;
      position: absolute;
      padding-top: 0;
      padding-bottom: 0;
      width: 100vw;

      @include breakpoint(medium down) {
        @include breakpoint(landscape) {
          opacity: 0.15;
        }
      }

      @include breakpoint(medium) {
        background-size: 75vw;
        background-position-y: calc(10% + #{$topbar-height});
      }

      @include breakpoint(large) {
        background: none;
      }
    }



    @include breakpoint(xxlarge) {
      margin: 0;
      max-width: none;
    }

    .inner {
      height: calc(100vh - #{$topbar-height});
      position: relative;

      @include breakpoint(medium) {
        @include breakpoint(portrait) {
          min-height: 80vh;
        }
      }
    }

    .main-text {
      color: $hp-brown-1;
      position: absolute;
      top: 60%;

      @include breakpoint(medium) {
        text-align: right;
        top: calc(10% + 50vw);
        right: rem-calc(30); // align with mlh badge
      }

      @include breakpoint(large) {
        top: auto;
        bottom: 0;

        @include breakpoint(portrait) {
          top: calc(10% + 50vw);
{'fraction_non_alphanumeric': 0.13736501079913607, 'fraction_numerical': 0.02958963282937365, 'mean_word_length': 1.9328689043698544, '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': '2707145', 'n_tokens_mistral': 1712, 'n_tokens_neox': 1543, 'n_words': 315}