<commit_before>// bower:scss
// endbower
//@import url(http://fonts.googleapis.com/css?family=Copse);


$animation-init-percentage: -100%;
$animation-normal-percentage: 0%;
$animation-end-percentage: 100%;

$animation-init-point: 0.7;
$animation-normal-point: 1;
$animation-end-point: 1.3;

$animation-speed: .7s;
$animation-easing: ease;


@mixin zero-margin-padding {
  margin: 0;
  padding: 0;
}

html, body {
  @include zero-margin-padding();
  height: 100%;
}

body {
  min-height: 100%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #000;
}

.wf-active {
  .view-wrap {
    opacity: 1;
  }
}

#app {
  perspective: 1200px;
  transform-style: preserve-3d;
  overflow: hidden;

}

#app, .view-wrap {
  height: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.view-wrap {
  background: #e74c3c;
  opacity: 0;
  overflow: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;

  &.show-next {
    animation: nextInAnimation $animation-speed $animation-easing both;
  }
  &.show-prev {
    animation: prevInAnimation $animation-speed $animation-easing both;
  }
  &.hide-next {
    animation: nextOutAnimation $animation-speed $animation-easing both;
  }
  &.hide-prev {
    animation: prevOutAnimation $animation-speed $animation-easing both;
  }

  .font-view {
    justify-content: self;
    font-family: Copse, serif;

    h1 {
      @include zero-margin-padding();
      font-size: 5.5em;
      font-weight: 200;
      color: #FFF;
    }
  }
}

.browsehappy {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}


@keyframes nextOutAnimation {
  from {
    opacity: 1;
    transform: translateX($animation-normal-percentage) scale($animation-normal-point);
  }
  to {
    opacity: 0;
    transform: translateX($animation-init-percentage) scale($animation-init-point);
  }
}

@keyframes nextInAnimation {
  from {
    opacity: 0;
    transform: translateX($animation-end-percentage) scale($animation-end-point);
  }
  to {
    opacity: 1;
    transform: translateX($animation-normal-percentage) scale($animation-normal-point);
  }
}

@keyframes prevOutAnimation {

  from {
    opacity: 1;
    transform: translateX($animation-normal-percentage) scale($animation-normal-point);
  }
  to {
    opacity: 0;
    transform: translateX($animation-end-percentage) scale($animation-end-point);
  }
}

@keyframes prevInAnimation {
  from {
    opacity: 0;
    transform: translateX($animation-init-percentage) scale($animation-init-point);
  }
  to {
    opacity: 1;
    transform: translateX($animation-normal-percentage) scale($animation-normal-point);
  }
}<commit_msg>Added styles for landing screen<commit_after>// bower:scss
// endbower
//@import url(http://fonts.googleapis.com/css?family=Droid+Sans);

$animation-init-percentage: -100%;
$animation-normal-percentage: 0%;
$animation-end-percentage: 100%;

$animation-init-point: 0.85;
$animation-normal-point: 1;
$animation-end-point: 1.15;

$animation-speed: .5s;
$animation-easing: ease-in;

@mixin zero-margin-padding {
  margin: 0;
  padding: 0;
}

html, body {
  @include zero-margin-padding();
  height: 100%;
  overflow: hidden;
}

body {
  min-height: 100%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  background: #000;
}

#hello {
  position: absolute;
  z-index: 10;
  color: #333;
  background: #FFF;
  font-family: Droid Sans, Arial, sans-serif;
}

#app {
  perspective: 1200px;
  transform-style: preserve-3d;
  overflow: hidden;
}

#view {
  position: absolute;
  z-index: 10;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  box-sizing: border-box;
  &.white {
    background: #FFF;
    border: 10px solid #000;
    color: #000;

  }
  &.black {
    background: #000;
    border: 10px solid #FFF;
    color: #FFF;

  }
  font-family: 'Droid Serif', serif;

  overflow-y: auto;
  .row {
    &:first-child {
      text-align: center;
    }
  }
}

#hello, #app, .view-wrap {

  height: 100%;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  &.show {
      animation: InAnimation $animation-speed $animation-easing both;
  }
  &.hide {
      animation: OutAnimation $animation-speed $animation-easing both;
  }
}

.view-wrap {
  background: #e74c3c;
  opacity: 0;
  overflow: hidden;
  backface-visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;

  &.show-next {
    animation: nextInAnimation $animation-speed $animation-easing both;
  }
  &.show-prev {
    animation: prevInAnimation $animation-speed $animation-easing both;
  }
  &.hide-next {
    animation: nextOutAnimation $animation-speed $animation-easing both;
  }
  &.hide-prev {
    animation: prevOutAnimation $animation-speed $animation-easing both;
  }

  &.view {

  }
  .font-view {
    justify-content: self;
    font-family: Copse, serif;

    h1 {
      @include zero-margin-padding();
      font-size: 5.5em;
      font-weight: 200;
      color: #FFF;
    }
  }
}

.browsehappy {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

@keyframes nextOutAnimation {
  from {
    opacity: 1;
    transform: translateX($animation-normal-percentage) scale($animation-normal-point);
  }
  to {
    opacity: 0;
    transform: translateX($animation-init-percentage) scale($animation-init-point);
  }
}

@keyframes nextInAnimation {
  from {
    opacity: 0;
    transform: translateX($animation-end-percentage) scale($animation-end-point);
  }
  to {
    opacity: 1;
    transform: translateX($animation-normal-percentage) scale($animation-normal-point);
  }
}

@keyframes prevOutAnimation {

  from {
    opacity: 1;
    transform: translateX($animation-normal-percentage) scale($animation-normal-point);
  }
  to {
    opacity: 0;
    transform: translateX($animation-end-percentage) scale($animation-end-point);
  }
}

@keyframes prevInAnimation {
  from {
    opacity: 0;
    transform: translateX($animation-init-percentage) scale($animation-init-point);
  }
  to {
    opacity: 1;
    transform: translateX($animation-normal-percentage) scale($animation-normal-point);
  }
}

@keyframes InAnimation {
  from {
    opacity: 0;
    transform: translateY($animation-end-percentage) scale($animation-init-point);
  }
  to {
    opacity: 1;
    transform: translateY($animation-normal-percentage) scale($animation-normal-point);
  }
}

@keyframes OutAnimation {

  from {
    opacity: 1;
    transform: translateY($animation-normal-percentage) scale($animation-normal-point);
  }
  to {
    opacity: 0;
    transform: translateY($animation-init-percentage) scale($animation-end-point);
  }
}
{'fraction_non_alphanumeric': 0.14580221093516582, 'fraction_numerical': 0.024947714371078577, 'mean_word_length': 3.3530559167750327, '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': '6470014', 'n_tokens_mistral': 2521, 'n_tokens_neox': 2352, 'n_words': 485}