<commit_before><link rel="import" href="../catalog-package/catalog-package.html">

<dom-module id="package-tile">
  <style>
    :host {
      display: flex;
      min-width: 220px;
      transition: all 320ms cubic-bezier(0.55, 0, 0.1, 1);
      -webkit-transform: translate(0, 60px);
      opacity: 0;
    }

    :host(.active) {
      -webkit-transform: translate(0, 0);
      opacity: 1;
    }

    #content {
      display: block;
      position: relative;
      width: 100%;
      margin: 8px;
      padding: 16px;
      color: #333;
      background: #fafafa;
      border: 8px solid #fff;
      border-radius: 2px;
      box-sizing: border-box;
      overflow: hidden;
      cursor: pointer;
    }

    h2 {
      font-size: 4.2em;
      font-weight: 900;
      margin: 20px 0;
      -webkit-transform: translate(-50px, 0);
      opacity: 0;
      transition: all 500ms 320ms cubic-bezier(0.55, 0, 0.1, 1);
    }

    :host(.active) h2 {
      -webkit-transform: translate(0, 0);
      opacity: 1;
    }

    h3 {
      -webkit-transform: translate(-50px, 0);
      opacity: 0;
      transition: all 600ms 320ms cubic-bezier(0.55, 0, 0.1, 1);
    }

    :host(.active) h3 {
      -webkit-transform: translate(0, 0);
      opacity: 1;
    }

    hr {
      border: 0;
      background: #fff;
      width: 0;
      height: 1px;
      opacity: 0.2;
      margin: 0;
      transition: width 400ms 320ms cubic-bezier(0.55, 0, 0.1, 1);
    }

    :host(.active) hr {
      width: 100%;
    }

    .version {
      position: absolute;
      top: 8px;
      right: 8px;
      font-size: 12px;
      transition: all 400ms 320ms cubic-bezier(0.55, 0, 0.1, 1);
      -webkit-transform: translate(50px, 0);
      opacity: 0;
    }

    :host(.active) .version {
      -webkit-transform: translate(0, 0);
      opacity: 0.8;
    }

    .symbol {
      padding-top: 60px;
    }

    .title {
      margin-top: 0;
      font-size: 18px;
      font-weight: 600;
      line-height: 26px;
    }

    .tagline {
      margin: 15px 0 0 0;
      transition: all 700ms 320ms cubic-bezier(0.55, 0, 0.1, 1);
      -webkit-transform: translate(-50px, 0);
      opacity: 0;
    }

    :host(.active) .tagline {
      -webkit-transform: translate(0, 0);
      opacity: 1;
    }
  </style>
  <template>
    <catalog-package name="[[name]]" data="{{package}}"></catalog-package>
    <div id="content" class="vertical layout">
      <span class="version">[[package.version]]</span>
      <h2 class="symbol">[[package.symbol]]</h2>
      <h3 class="title">[[package.title]]</h3>
      <hr>
      <p class="tagline">[[package.tagline]]</p>
    </div>
  </template>
</dom-module>

<script src="/bower_components/color/one-color.js"></script>

<script>
  Polymer({
    is: 'package-tile',
    properties: {
      name: {type: String, notify: true},
      package: {type: Object}
    },
    observers: {
      package: 'updateColors'
    },
    attached: function() {
      var tiles = this.parentNode.querySelectorAll('package-tile');
      var index = Array.prototype.indexOf.call(tiles, this);
      setTimeout(function() {
        this.classList.add('active');
      }.bind(this), (index + 1) * 50);
    },
    updateColors: function() {
      if (this.package && this.package.color) {
        var lightness = one.color(this.package.color).lightness();
        var textColor = (lightness > 0.5) ? one.color(this.package.color).lightness(0.15).hex() : '#fff';
        this.$.content.style.backgroundColor = this.package.color;
        this.$.content.style.color = textColor;
        this.$.content.querySelector('hr').style.background = textColor;
      } else {
        this.$.content.style.backgroundColor = "#fff";
        this.$.content.style.color = "#333";
      }
    }
  });
</script><commit_msg>Package tile style tweak<commit_after><link rel="import" href="../catalog-package/catalog-package.html">

<dom-module id="package-tile">
  <style>
    :host {
      display: flex;
      min-width: 220px;
      transition: all 320ms cubic-bezier(0.55, 0, 0.1, 1);
      -webkit-transform: translate(0, 60px);
      opacity: 0;
    }

    :host(.active) {
      -webkit-transform: translate(0, 0);
      opacity: 1;
    }

    #content {
      display: block;
      position: relative;
      width: 100%;
      margin: 8px;
      padding: 16px;
      color: #333;
      background: #fafafa;
      border: 8px solid #fff;
      border-radius: 2px;
      box-sizing: border-box;
      overflow: hidden;
      cursor: pointer;
    }

    h2 {
      font-size: 4.2em;
      font-weight: 900;
      margin: 20px 0;
      -webkit-transform: translate(-50px, 0);
      opacity: 0;
      transition: all 500ms 320ms cubic-bezier(0.55, 0, 0.1, 1);
    }

    :host(.active) h2 {
      -webkit-transform: translate(0, 0);
      opacity: 1;
    }

    h3 {
      -webkit-transform: translate(-50px, 0);
      opacity: 0;
      transition: all 600ms 320ms cubic-bezier(0.55, 0, 0.1, 1);
    }

    :host(.active) h3 {
      -webkit-transform: translate(0, 0);
      opacity: 1;
    }

    hr {
      border: 0;
      background: #fff;
      width: 0;
      height: 1px;
      opacity: 0.2;
      margin: 0;
      transition: width 400ms 320ms cubic-bezier(0.55, 0, 0.1, 1);
    }

    :host(.active) hr {
      width: 100%;
    }

    .version {
      position: absolute;
      top: 8px;
      right: 8px;
      font-size: 12px;
      transition: all 400ms 320ms cubic-bezier(0.55, 0, 0.1, 1);
      -webkit-transform: translate(50px, 0);
      opacity: 0;
    }

    :host(.active) .version {
      -webkit-transform: translate(0, 0);
      opacity: 0.8;
    }

    .symbol {
      padding-top: 60px;
    }

    .title {
      margin-top: 0;
      font-size: 18px;
      font-weight: 600;
      line-height: 26px;
    }

    .tagline {
      margin: 15px 0 0 0;
      transition: all 700ms 320ms cubic-bezier(0.55, 0, 0.1, 1);
      -webkit-transform: translate(-50px, 0);
      opacity: 0;
    }

    :host(.active) .tagline {
      -webkit-transform: translate(0, 0);
      opacity: 1;
    }
  </style>
  <template>
    <catalog-package name="[[name]]" data="{{package}}"></catalog-package>
    <div id="content" class="vertical layout">
      <span class="version">[[package.version]]</span>
      <h2 class="symbol">[[package.symbol]]</h2>
      <h3 class="title">[[package.title]]</h3>
      <hr>
      <p class="tagline">[[package.tagline]]</p>
    </div>
  </template>
</dom-module>

<script src="/bower_components/color/one-color.js"></script>

<script>
  Polymer({
    is: 'package-tile',
    properties: {
      name: {type: String, notify: true},
      package: {type: Object}
    },
    observers: {
      package: 'updateColors'
    },
    attached: function() {
      var tiles = this.parentNode.querySelectorAll('package-tile');
      var index = Array.prototype.indexOf.call(tiles, this);
      setTimeout(function() {
        this.classList.add('active');
      }.bind(this), (index + 1) * 50);
    },
    updateColors: function() {
      if (this.package && this.package.color) {
        var lightness = one.color(this.package.color).lightness();
        var textColor = (lightness > 0.5) ? one.color(this.package.color).lightness(0.15).hex() : '#fff';
        this.$.content.style.backgroundColor = this.package.color;
        this.$.content.style.borderColor = this.package.color;
        this.$.content.style.color = textColor;
        this.$.content.querySelector('hr').style.background = textColor;
      } else {
        this.$.content.style.backgroundColor = "#fff";
        this.$.content.style.color = "#333";
      }
    }
  });
</script>
{'fraction_non_alphanumeric': 0.16391509433962265, 'fraction_numerical': 0.04716981132075472, 'mean_word_length': 2.1711674283340257, 'pattern_counts': {'":': 0, '<': 51, '<?xml version=': 0, '>': 53, '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': '6602829', 'n_tokens_mistral': 2922, 'n_tokens_neox': 2590, 'n_words': 558}