<commit_before><link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-layout/helpers/helpers.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">

<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Source+Sans+Pro:400,600" rel="stylesheet">

<link rel="import" href="catalog-search-box.html">
<link rel="import" href="catalog-styles.html">
<link rel="import" href="lazy-block.html">
<link rel="import" href="progress-bar.html">
<link rel="import" href="syntax-highlighter.html">

<dom-module id="catalog-app">
  <template>
    <style include="catalog-styles"></style>
    <style>
      :host {
        display: block;
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 16px;
        line-height: 24px;
        word-wrap: break-word;
        padding-top: 160px;
        color: var(--theme-font-color);
        --bg-gradient: linear-gradient(to bottom, #F3F4F5 160px, white 50vh);
        background: var(--bg-gradient);

        --theme-font: 'Source Sans Pro', sans-serif;
        --monospace-font: 'Source Code Pro', monospace;

        --theme-font-color: #383F46; /* AAA */
        --theme-yellow: #E6F616;
        --theme-green: #8EDB69;
        --theme-navy: #226392;
        --theme-blue: #37A0CE; /* 3.0 AA (large) as background */
        --theme-blue-small: #027cb1; /* 4.5 AA text */
        --theme-blue-grey: #697785; /** 4.6 AA on white */
        --theme-black: #2D2F31;

        /* Deprecated colors */
        --theme-accent-1: #6dc38f;
        --theme-blue-dark: #1f9bb9;

        /* Based on Atom/one-dark-syntax theme https://github.com/atom/one-dark-syntax */
        --syntax-hue:          220;
        --syntax-saturation:   13%;
        --syntax-brightness:   18%;

        /* Monochrome */
        --mono-1: hsl(var(--syntax-hue), 14%, 90%); /* AAA - default text */
        --mono-2: hsl(var(--syntax-hue), 9%, 59%); /* AA */
        --mono-3: hsl(var(--syntax-hue), 6%, 58%);

        /* Colors */
        --hue-1:   hsl(187, 47%, 55%); /* cyan - AA */
        --hue-2:   hsl(207, 82%, 66%); /* blue - AA */
        --hue-3:   hsl(286, 60%, 67%); /* purple - AA */
        --hue-4:   hsl( 95, 38%, 62%); /* green - AA */

        --hue-5:   hsl(355, 65%, 66%); /* red 1 - AA */
        --hue-5-2: hsl(  5, 80%, 65%); /* red 2 - AA */

        --hue-6:   hsl( 29, 54%, 61%); /* orange 1 - AA */
        --hue-6-2: hsl( 39, 67%, 69%); /* orange 2 - AAA */

        /* Base colors*/
        --syntax-fg:     var(--mono-1);
        --syntax-bg:     hsl(var(--syntax-hue), var(--syntax-saturation), var(--syntax-brightness));
        --syntax-selection: hsl(var(--syntax-hue), var(--syntax-saturation), 28%);
        --syntax-corrected-selection: hsl(var(--syntax-hue), 7%, 62%);
        --syntax-accent: hsl(var(--syntax-hue), 100%, 67%); /* AA */
        --syntax-gutter: hsl(var(--syntax-hue), 14%, 45%);
        --syntax-guide: hsla(var(--syntax-hue), 14%, 71%, 0.85);
      }

      :host[page=home] {
        background: linear-gradient(168deg, transparent 80vh, #F3F4F5 80vh, white 100vh),
                    var(--bg-gradient), white;
      }

      #pages, #footer-content, #toolbar-search-container, #toolbar-nav-container {
        max-width: 1080px;
        margin: 0 auto;
        width: 100%;
      }

      #pages {
        margin: 32px auto 64px;
        min-height: calc(100vh - 160px - 16px);
      }

      #progress {
        position: absolute;
        top: 160px;
        left: 0px;
        width: 100vw;
        --paper-progress-active-color: var(--theme-blue);
        --paper-progress-indeterminate-cycle-duration: 3s;
        --paper-progress-transition-transition-delay: 250ms;
        height: 2px;
        margin-top: 1px;
      }

      app-header {
        @apply(--layout-fixed-top);
        z-index: 100;
        height: calc(2 * 80px);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
      }

      app-toolbar {
        height: 80px;
        padding: 0 32px;
        display: flex;
        justify-content: center;
      }

      /* Top toolbar */

      #toolbar-nav {
        background: white;
      }

      #toolbar-nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      #domain-title {
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 1.88;
        text-transform: uppercase;
      }

      #tag-line {
        font-size: 20px;
        color: var(--theme-blue-grey);
        font-weight: normal;
        margin-left: 20px;
        margin-top: -3px;
      }

      #toolbar-header #logo {
        width: 64px;
        height: 64px;
        margin-right: 20px;
        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR<KEY>ZXQ9IjAlIi8+<KEY>');
        background-size: 64px 64px;
        background-repeat: no-repeat;
        background-position: center;
      }

      #toolbar-header, #toolbar-header > div {
        color: inherit;
        display: flex;
        align-items: center;
      }

      .cta-button {
        background: var(--theme-blue);
        color: white;
        border-radius: 5px;<commit_msg>Fix stretched logo on Firefox (#663)<commit_after><link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-layout/helpers/helpers.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">

<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro|Source+Sans+Pro:400,600" rel="stylesheet">

<link rel="import" href="catalog-search-box.html">
<link rel="import" href="catalog-styles.html">
<link rel="import" href="lazy-block.html">
<link rel="import" href="progress-bar.html">
<link rel="import" href="syntax-highlighter.html">

<dom-module id="catalog-app">
  <template>
    <style include="catalog-styles"></style>
    <style>
      :host {
        display: block;
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 16px;
        line-height: 24px;
        word-wrap: break-word;
        padding-top: 160px;
        color: var(--theme-font-color);
        --bg-gradient: linear-gradient(to bottom, #F3F4F5 160px, white 50vh);
        background: var(--bg-gradient);

        --theme-font: 'Source Sans Pro', sans-serif;
        --monospace-font: 'Source Code Pro', monospace;

        --theme-font-color: #383F46; /* AAA */
        --theme-yellow: #E6F616;
        --theme-green: #8EDB69;
        --theme-navy: #226392;
        --theme-blue: #37A0CE; /* 3.0 AA (large) as background */
        --theme-blue-small: #027cb1; /* 4.5 AA text */
        --theme-blue-grey: #697785; /** 4.6 AA on white */
        --theme-black: #2D2F31;

        /* Deprecated colors */
        --theme-accent-1: #6dc38f;
        --theme-blue-dark: #1f9bb9;

        /* Based on Atom/one-dark-syntax theme https://github.com/atom/one-dark-syntax */
        --syntax-hue:          220;
        --syntax-saturation:   13%;
        --syntax-brightness:   18%;

        /* Monochrome */
        --mono-1: hsl(var(--syntax-hue), 14%, 90%); /* AAA - default text */
        --mono-2: hsl(var(--syntax-hue), 9%, 59%); /* AA */
        --mono-3: hsl(var(--syntax-hue), 6%, 58%);

        /* Colors */
        --hue-1:   hsl(187, 47%, 55%); /* cyan - AA */
        --hue-2:   hsl(207, 82%, 66%); /* blue - AA */
        --hue-3:   hsl(286, 60%, 67%); /* purple - AA */
        --hue-4:   hsl( 95, 38%, 62%); /* green - AA */

        --hue-5:   hsl(355, 65%, 66%); /* red 1 - AA */
        --hue-5-2: hsl(  5, 80%, 65%); /* red 2 - AA */

        --hue-6:   hsl( 29, 54%, 61%); /* orange 1 - AA */
        --hue-6-2: hsl( 39, 67%, 69%); /* orange 2 - AAA */

        /* Base colors*/
        --syntax-fg:     var(--mono-1);
        --syntax-bg:     hsl(var(--syntax-hue), var(--syntax-saturation), var(--syntax-brightness));
        --syntax-selection: hsl(var(--syntax-hue), var(--syntax-saturation), 28%);
        --syntax-corrected-selection: hsl(var(--syntax-hue), 7%, 62%);
        --syntax-accent: hsl(var(--syntax-hue), 100%, 67%); /* AA */
        --syntax-gutter: hsl(var(--syntax-hue), 14%, 45%);
        --syntax-guide: hsla(var(--syntax-hue), 14%, 71%, 0.85);
      }

      :host[page=home] {
        background: linear-gradient(168deg, transparent 80vh, #F3F4F5 80vh, white 100vh),
                    var(--bg-gradient), white;
      }

      #pages, #footer-content, #toolbar-search-container, #toolbar-nav-container {
        max-width: 1080px;
        margin: 0 auto;
        width: 100%;
      }

      #pages {
        margin: 32px auto 64px;
        min-height: calc(100vh - 160px - 16px);
      }

      #progress {
        position: absolute;
        top: 160px;
        left: 0px;
        width: 100vw;
        --paper-progress-active-color: var(--theme-blue);
        --paper-progress-indeterminate-cycle-duration: 3s;
        --paper-progress-transition-transition-delay: 250ms;
        height: 2px;
        margin-top: 1px;
      }

      app-header {
        @apply(--layout-fixed-top);
        z-index: 100;
        height: calc(2 * 80px);
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
      }

      app-toolbar {
        height: 80px;
        padding: 0 32px;
        display: flex;
        justify-content: center;
      }

      /* Top toolbar */

      #toolbar-nav {
        background: white;
      }

      #toolbar-nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      #domain-title {
        margin: 0;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 1.88;
        text-transform: uppercase;
      }

      #tag-line {
        font-size: 20px;
        color: var(--theme-blue-grey);
        font-weight: normal;
        margin-left: 20px;
        margin-top: -3px;
      }

      #toolbar-header #logo {
        width: 64px;
        height: 64px;
        margin-right: 20px;
        background-image: url('data:image/svg+xml;base64,<KEY>');
        background-size: 64px auto;
        background-repeat: no-repeat;
        background-position: center;
      }

      #toolbar-header, #toolbar-header > div {
        color: inherit;
        display: flex;
        align-items: center;
      }

      .cta-button {
        background: var(--theme-blue);
        color: white;
        border-radius: 5px;
{'fraction_non_alphanumeric': 0.17992645080276257, 'fraction_numerical': 0.04798636649026818, 'mean_word_length': 1.928046218487395, 'pattern_counts': {'":': 0, '<': 42, '<?xml version=': 0, '>': 44, 'https://': 4, 'lorem ipsum': 0, 'www.': 0, 'xml': 2}, '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': '1331862', 'n_tokens_mistral': 4342, 'n_tokens_neox': 3744, 'n_words': 752}