<commit_before>!!!
%html
  %head
    %meta{charset: 'utf-8'}
    %title LOL League Schedule

    %meta{name: 'HandheldFriendly', content: 'true'}
    %meta{name: 'viewport', content: 'width=device-width, height=device-height, user-scalable=no'}

    :css
      #{data.flat_map { |(league_name, league)| league['teams'].map { |(name, team)| ".#{league_name.gsub(' ', '-')}-#{name} { background-image: url(\"http://am-a.akamaihd.net/image/?f=#{team['logo']}&resize=50:50\"); }" } }.join("\n")}

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        padding: 8px;
      }

      body, button {
        font-family: 'Open Sans', Helvetica, Arial, sans-serif;
        line-height: 1.4;
      }

      html, body, #page-wrapper, #leagues-wrapper, .leagues {
        height: 100%;
      }

      #menu {
        height: 50px;
      }

      #menu button {
        margin-right: 10px;
        font-size: 18px;
      }

      #menu button:last-child {
        margin-right: 0;
      }

      #leagues-wrapper {
        padding-top: 50px;
        margin-top: -50px;
      }

      #leagues-wrapper:after {
        content: " ";
        display: table;
        clear: both;
      }

      .leagues {
        display: flex;
        flex-direction: column;
        float: left;
        margin-right: 4px;
        margin-bottom: 8px;
        border: 1px solid #999;
      }

      #leagues-wrapper .leagues:last-child {
        margin-right: 0;
      }

      .matches {
        flex: 2;
        overflow: auto;
        width: 194px;
      }

      .header, .match {
        border-bottom: 2px solid #ddd;
        padding: 10px;
      }

      .header {
        flex: 0 1 auto;
        min-height: 50px;
        font-size: 30px;
        font-weight: bold;
        line-height: 50px;
        text-align: center;
        border-bottom: 2px solid #888;
      }

      .matches {
        background-color: #111;
        color: #fff;
      }

      .match {
        padding: 16px 6px;
        display: none;
      }

      .matches .match:last-child {
        border-bottom: none;
      }

      body.select-current-week .match.current-week {
        display: block;
      }

      body.select-current-week #select-current-week {
        font-weight: bold;
      }

      body.select-future .match.future {
        display: block;
      }

      body.select-future #select-future {
        font-weight: bold;
      }

      body.select-all .match {
        display: block;
      }

      body.select-all #select-all {
        font-weight: bold;
      }

      .match.past .time {
        color: #888;
      }

      .match.current {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100 */
        background: #45484d;
        background: linear-gradient(135deg,  #45484d 0%,#000000 100%);
      }

      .match.current .time {
        font-weight: bold;
      }

      .time {
        font-size: 18px;
        text-align: center;
        padding-bottom: 10px;
      }

      .vs {
        font-size: 20px;
        white-space: nowrap;
        text-align: center;
      }

      .match.games {
        cursor: pointer;
      }

      .match.games .side, .match.games .middle {
        text-decoration: underline;
      }

      .vs .side {
        display: inline-block;
        vertical-align: middle;
        font-weight: bold;
      }

      .vs .side:first-child {
        text-align: right;
      }

      .vs .middle {
        display: inline-block;
        width: 18px;
        text-align: center;
        font-size: 14px;
        vertical-align: middle;
      }

      .logo {
        display: inline-block;
        background-size: cover;
        width: 26px;
        height: 26px;
        vertical-align: middle;
      }

      #modal {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 250px;
        height: 200px;
        margin-left: -125px;
        margin-top: -100px;
        border: 1px solid #000000;
        background-color: #ffffff;
        padding: 16px;
        display: none;
      }

      #modal-close {
        float: right;
        margin-bottom: 10px;
      }

      #modal-body {
        text-align: center;
        font-size: 18px;
      }

      #modal-body:before {
        content: " ";
        display: table;<commit_msg>Show modal in center of viewport<commit_after>!!!
%html
  %head
    %meta{charset: 'utf-8'}
    %title LOL League Schedule

    %meta{name: 'HandheldFriendly', content: 'true'}
    %meta{name: 'viewport', content: 'width=device-width, height=device-height, user-scalable=no'}

    :css
      #{data.flat_map { |(league_name, league)| league['teams'].map { |(name, team)| ".#{league_name.gsub(' ', '-')}-#{name} { background-image: url(\"http://am-a.akamaihd.net/image/?f=#{team['logo']}&resize=50:50\"); }" } }.join("\n")}

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        padding: 8px;
      }

      body, button {
        font-family: 'Open Sans', Helvetica, Arial, sans-serif;
        line-height: 1.4;
      }

      html, body, #page-wrapper, #leagues-wrapper, .leagues {
        height: 100%;
      }

      #menu {
        height: 50px;
      }

      #menu button {
        margin-right: 10px;
        font-size: 18px;
      }

      #menu button:last-child {
        margin-right: 0;
      }

      #leagues-wrapper {
        padding-top: 50px;
        margin-top: -50px;
      }

      #leagues-wrapper:after {
        content: " ";
        display: table;
        clear: both;
      }

      .leagues {
        display: flex;
        flex-direction: column;
        float: left;
        margin-right: 4px;
        margin-bottom: 8px;
        border: 1px solid #999;
      }

      #leagues-wrapper .leagues:last-child {
        margin-right: 0;
      }

      .matches {
        flex: 2;
        overflow: auto;
        width: 194px;
      }

      .header, .match {
        border-bottom: 2px solid #ddd;
        padding: 10px;
      }

      .header {
        flex: 0 1 auto;
        min-height: 50px;
        font-size: 30px;
        font-weight: bold;
        line-height: 50px;
        text-align: center;
        border-bottom: 2px solid #888;
      }

      .matches {
        background-color: #111;
        color: #fff;
      }

      .match {
        padding: 16px 6px;
        display: none;
      }

      .matches .match:last-child {
        border-bottom: none;
      }

      body.select-current-week .match.current-week {
        display: block;
      }

      body.select-current-week #select-current-week {
        font-weight: bold;
      }

      body.select-future .match.future {
        display: block;
      }

      body.select-future #select-future {
        font-weight: bold;
      }

      body.select-all .match {
        display: block;
      }

      body.select-all #select-all {
        font-weight: bold;
      }

      .match.past .time {
        color: #888;
      }

      .match.current {
        /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100 */
        background: #45484d;
        background: linear-gradient(135deg,  #45484d 0%,#000000 100%);
      }

      .match.current .time {
        font-weight: bold;
      }

      .time {
        font-size: 18px;
        text-align: center;
        padding-bottom: 10px;
      }

      .vs {
        font-size: 20px;
        white-space: nowrap;
        text-align: center;
      }

      .match.games {
        cursor: pointer;
      }

      .match.games .side, .match.games .middle {
        text-decoration: underline;
      }

      .vs .side {
        display: inline-block;
        vertical-align: middle;
        font-weight: bold;
      }

      .vs .side:first-child {
        text-align: right;
      }

      .vs .middle {
        display: inline-block;
        width: 18px;
        text-align: center;
        font-size: 14px;
        vertical-align: middle;
      }

      .logo {
        display: inline-block;
        background-size: cover;
        width: 26px;
        height: 26px;
        vertical-align: middle;
      }

      #modal {
        position: fixed;
        top: 50%;
        left: 50%;
        width: 250px;
        height: 200px;
        margin-left: -125px;
        margin-top: -100px;
        border: 1px solid #000000;
        background-color: #ffffff;
        padding: 16px;
        display: none;
      }

      #modal-close {
        float: right;
        margin-bottom: 10px;
      }

      #modal-body {
        text-align: center;
        font-size: 18px;
      }

      #modal-body:before {
        content: " ";
        display: table;
{'fraction_non_alphanumeric': 0.13205391820881882, 'fraction_numerical': 0.03175691112634224, 'mean_word_length': 1.467587373167982, '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': '2514572', 'n_tokens_mistral': 3113, 'n_tokens_neox': 2773, 'n_words': 590}