<commit_before><!DOCTYPE html>
<html class="oy-scroll" lang="en" style="font-size: 62.5%;">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="https://cloud.typography.com/6135554/7605572/css/fonts.css">
    <title>Twitter</title>
  </head>
  <body class="ff-whitney bc-gray200 color-gray900">
    <header class="AppBar bc-white">
      <div class="Container">
        <div class="display-flex">
          <a class="Tab is-active" href="#">
            <div class="mr-1">
              <svg class="va-middle" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
              </svg>
            </div>
            Home
          </a>
          <a class="Tab" href="#">
            <div class="mr-1">
              <svg class="va-middle" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
              </svg>
            </div>
            Moments
          </a>
          <a class="Tab" href="#">
            <div class="mr-1">
              <svg class="va-middle" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
              </svg>
            </div>
            Notifications
          </a>
          <a class="Tab" href="#">
            <div class="mr-1">
              <svg class="va-middle" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <circle cx="11" cy="11" r="8"></circle>
                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
              </svg>
            </div>
            Messages
          </a>
        </div>
      </div>
    </header>

    <div class="pt-8">
      <div class="Container">
        <div class="display-flex">
          <aside class="width-25">
            <div class="mb-2">
              <div class="Card">
                <a href="#">
                  <div class="overflow-hidden" style="height: 100px;">
                    <img class="Image va-middle" src="https://images.unsplash.com/photo-1494122353634-c310f45a6d3c?ixlib=rb-0.3.5&s=6452bc223bf69d3450ceec588528134e&auto=format&fit=crop&w=1650&q=80" style="max-width: 100%;" />
                  </div>
                </a>
                <div class="display-flex pl-2 pr-2">
                  <div class="pr-2" style="margin-top: -32px;">
                    <div class="Avatar size6" style="border: 2px solid white">
                      <img class="Image va-middle" src="https://pbs.twimg.com/profile_images/864164353771229187/Catw6Nmh_bigger.jpg" style="max-width: 100%; border-radius: 50%; width: 100%;" />
                    </div>
                  </div>
                  <div class="pt-2 pb-2">
                    <div class="mb-1">
                      <span class="Text size4 fw-6 display-block">Colm Tuite</span>
                    </div>
                    <span class="Text size2 color-gray500 display-block">@colmtuite</span>
                  </div>
                </div>
                <div class="display-flex padding-2">
                  <div class="pr-4">
                    <div class="mb-1">
                      <span class="Text size1 color-gray500 fw-6 display-block">Tweets</span>
                    </div>
                    <span class="Text size4 tt-uppercase color-blue600 fw-6 display-block">3504</span>
                  </div>
                  <div class="pr-4">
                    <div class="mb-1">
                      <span class="Text size1 color-gray500 fw-6 display-block">Following</span>
                    </div>
                    <span class="Text size4 tt-uppercase color-blue600 fw-6 display-block">429</span>
                  </div>
                  <div class="pr-4">
                    <div class="mb-1">
                      <span class="Text size1 color-gray500 fw-6 display-block">Followers</span>
                    </div>
                    <span class="Text size4 tt-uppercase color-blue600 fw-6 display-block">1600</span>
                  </div>
                </div>
              </div>
            </div>
            <div class="">
              <div class="Card">
                <div class="padding-2">
                  <div class="display-flex ai-baseline jc-spaceBetween mb-1">
                    <div class="">
                      <h3 class="Heading size2">Trends for you</h3>
                    </div>
                    <div class="display-flex ai-center">
                      <div class="pl-1">
                        <a class="Link blue Text size1 color-blue600" href="#">
                          Change
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </aside>
          <main class="fg-1 pl-2 pr-2">
            <div class="Card">
              <div class="padding-2 bc-blue200">
                <div class="display-flex pl-2">
                  <div class="pr-2">
                    <div class="Avatar">
                      <img class="Image va-middle" src="https://pbs.twimg.com/profile_images/864164353771229187/Catw6Nmh_bigger.jpg" style="max-width: 100%; border-radius: 50%; width: 100%;" />
                    </div>
                  </div>
                  <div class="fg-1">
                    <input class="Input" type="text" placeholder="What's happening?">
                  </div>
                </div>
              </div>
            </div>
          </main>
          <aside class="width-25">
            <div class="mb-2">
              <div class="Card">
                <div class="padding-2">
                  <div class="display-flex ai-baseline jc-spaceBetween mb-1">
                    <div class="">
                      <h3 class="Heading size2">Who to follow</h3>
                    </div>
                    <div class="display-flex ai-center">
                      <div class="pl-1">
                        <a class="Link blue Text size1 color-blue600" href="#">
                          Refresh
                        </a>
                      </div>
                      <div class="pl-1">
                        <span class="Text size1 color-gray500">&middot;</span>
                      </div>
                      <div class="pl-1">
                        <a class="Link blue Text size1 color-blue600" href="#">
                          Refresh
                        </a>
                      </div>
                    </div>
                  </div>
                  <ul class="List">
                    <li class="ListItem">
                      <div class="display-flex ai-center">
                        <div class="">
                          <div class="Avatar size4">
                            <img class="va-middle" src="${require('assets/img/michael-dick.jpg')}" style="max-width: 100%;" alt="<NAME>" />
                          </div>
                        </div>
                        <div class="ml-1">
                          <div class="display-flex ai-baseline mb-1">
                            <span class="Text size2 fw-6"><NAME></span>
                            <span class="Text size1 color-gray500">@michaeldick</span>
                          </div>
                          <button class="Button size1" type="button">Follow</button>
                        </div>
                      </div>
                    </li>
                    <li class="ListItem">
                      <div class="display-flex ai-center">
                        <div class="">
                          <div class="Avatar size4">
                            <img class="va-middle" src="${require('assets/img/michael-dick.jpg')}" style="max-width: 100%;" alt="<NAME>" />
                          </div>
                        </div>
                        <div class="ml-1">
                          <div class="display-flex ai-baseline mb-1">
                            <span class="Text size2 fw-6"><NAME></span>
                            <span class="Text size1 color-gray500">@michaeldick</span>
                          </div>
                          <button class="Button size1" type="button">Follow</button>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="">
              <div class="Card">
                <div class="padding-2">
                  <span class="Text color-gray500">&copy; Modulz 2018</span>
                </div>
              </div>
            </div><commit_msg>More progress on Twitter demo<commit_after><!DOCTYPE html>
<html class="oy-scroll" lang="en" style="font-size: 62.5%;">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="https://cloud.typography.com/6135554/7605572/css/fonts.css">
    <title>Twitter</title>
  </head>
  <body class="ff-whitney bc-gray200 color-gray900">
    <header class="AppBar bc-white padding-0">
      <div class="Container">
        <div class="display-flex">
          <div class="">
            <div class="display-flex">
              <a class="Tab is-active" href="#">
                <div class="mr-1">
                  <svg class="va-middle" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                    <polyline points="9 22 9 12 15 12 15 22"/>
                  </svg>
                </div>
                Home
              </a>
              <a class="Tab" href="#">
                <div class="mr-1">
                  <svg class="va-middle" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                    <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>
                  </svg>
                </div>
                Moments
              </a>
              <a class="Tab" href="#">
                <div class="mr-1">
                  <svg class="va-middle" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/>
                  </svg>
                </div>
                Notifications
              </a>
              <a class="Tab" href="#">
                <div class="mr-1">
                  <svg class="va-middle" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"/>
                    <polyline points="22,6 12,13 2,6"/>
                  </svg>
                </div>
                Messages
              </a>
            </div>
          </div>
          <div class="display-flex">
            <div class="">
              <input class="Input" type="search" placeholder="Search">
            </div>
            <div class="pl-2">
              <div class="ContextContainer">
                <div class="Avatar">
                  <img class="Image va-middle" src="https://pbs.twimg.com/profile_images/864164353771229187/Catw6Nmh_bigger.jpg" style="max-width: 100%; border-radius: 50%; width: 100%;" />
                </div>
                <div class="Context">
                  few
                </div>
              </div>
            </div>
            <div class="pl-2">
              <button class="PillButton blue size1" type="button">
                Tweet
              </button>
            </div>
          </div>
        </div>
      </div>
    </header>

    <div class="pt-7">
      <div class="Container">
        <div class="display-flex">
          <aside class="width-25">
            <div class="mb-2">
              <div class="Card">
                <a href="#">
                  <div class="overflow-hidden" style="height: 100px;">
                    <img class="Image va-middle" src="https://images.unsplash.com/photo-1494122353634-c310f45a6d3c?ixlib=rb-0.3.5&s=6452bc223bf69d3450ceec588528134e&auto=format&fit=crop&w=1650&q=80" style="max-width: 100%;" />
                  </div>
                </a>
                <div class="display-flex pl-2 pr-2">
                  <div class="pr-2" style="margin-top: -32px;">
                    <div class="Avatar size6" style="border: 2px solid white">
                      <img class="Image va-middle" src="https://pbs.twimg.com/profile_images/864164353771229187/Catw6Nmh_bigger.jpg" style="max-width: 100%; border-radius: 50%; width: 100%;" />
                    </div>
                  </div>
                  <div class="pt-2">
                    <div class="mb-1">
                      <span class="Text size4 fw-6 display-block">Colm Tuite</span>
                    </div>
                    <span class="Text size2 color-gray500 display-block">@colmtuite</span>
                  </div>
                </div>
                <div class="display-flex padding-2">
                  <div class="fg-1">
                    <a href="#">
                      <div class="mb-1">
                        <span class="Text size1 color-gray500 fw-6 display-block">Tweets</span>
                      </div>
                      <span class="Text size4 tt-uppercase color-blue600 fw-6 display-block">3504</span>
                    </a>
                  </div>
                  <div class="fg-1">
                    <a href="#">
                      <div class="mb-1">
                        <span class="Text size1 color-gray500 fw-6 display-block">Following</span>
                      </div>
                      <span class="Text size4 tt-uppercase color-blue600 fw-6 display-block">429</span>
                    </a>
                  </div>
                  <div class="fg-1">
                    <a href="#">
                      <div class="mb-1">
                        <span class="Text size1 color-gray500 fw-6 display-block">Followers</span>
                      </div>
                      <span class="Text size4 tt-uppercase color-blue600 fw-6 display-block">1600</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
            <div class="">
              <div class="Card">
                <div class="padding-2">
                  <div class="display-flex ai-baseline jc-spaceBetween mb-1">
                    <div class="">
                      <h3 class="Heading size2">Trends for you</h3>
                    </div>
                    <div class="display-flex ai-center">
                      <div class="pl-1">
                        <a class="Link blue Text size1 color-blue600" href="#">
                          Change
                        </a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </aside>
          <main class="fg-1 pl-2 pr-2">
            <div class="Card">
              <div class="padding-2 bc-blue200">
                <div class="display-flex pl-2">
                  <div class="pr-2">
                    <div class="Avatar">
                      <img class="Image va-middle" src="https://pbs.twimg.com/profile_images/864164353771229187/Catw6Nmh_bigger.jpg" style="max-width: 100%; border-radius: 50%; width: 100%;" />
                    </div>
                  </div>
                  <div class="fg-1">
                    <input class="Input" type="text" placeholder="What's happening?">
                  </div>
                </div>
              </div>
              <div class="">
                <button class="Button" type="button">Show 10 new Tweets</button>
              </div>
            </div>
          </main>
          <aside class="width-25">
            <div class="mb-2">
              <div class="Card">
                <div class="padding-2">
                  <div class="display-flex ai-baseline jc-spaceBetween mb-1">
                    <div class="">
                      <h3 class="Heading size2">Who to follow</h3>
                    </div>
                    <div class="display-flex ai-center">
                      <div class="pl-1">
                        <a class="Link blue Text size1 color-blue600" href="#">
                          Refresh
                        </a>
                      </div>
                      <div class="pl-1">
                        <span class="Text size1 color-gray500">&middot;</span>
                      </div>
                      <div class="pl-1">
                        <a class="Link blue Text size1 color-blue600" href="#">
                          Refresh
                        </a>
                      </div>
                    </div>
                  </div>
                  <ul class="List">
                    <li class="ListItem">
                      <div class="display-flex ai-center">
                        <div class="">
                          <div class="Avatar size4">
                            <img class="Image va-middle" src="https://pbs.twimg.com/profile_images/864164353771229187/Catw6Nmh_bigger.jpg" style="max-width: 100%; border-radius: 50%; width: 100%;" />
                          </div>
                        </div>
                        <div class="ml-1">
                          <div class="display-flex ai-baseline mb-1">
                            <span class="Text size2 fw-6"><NAME></span>
                            <span class="Text size1 color-gray500">@michaeldick</span>
                          </div>
                          <button class="Button size1 primary" type="button">Follow</button>
                        </div>
                      </div>
                    </li>
                    <li class="ListItem">
                      <div class="display-flex ai-center">
                        <div class="">
                          <div class="Avatar size4">
                            <img class="Image va-middle" src="https://pbs.twimg.com/profile_images/864164353771229187/Catw6Nmh_bigger.jpg" style="max-width: 100%; border-radius: 50%; width: 100%;" />
                          </div>
                        </div>
                        <div class="ml-1">
                          <div class="display-flex ai-baseline mb-1">
                            <span class="Text size2 fw-6"><NAME></span>
                            <span class="Text size1 color-gray500">@michaeldick</span>
                          </div>
                          <button class="Button size1 primary" type="button">Follow</button>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
            <div class="">
              <div class="Card">
                <div class="padding-2">
                  <span class="Text color-gray500">&copy; Modulz 2018</span>
                </div>
              </div>
            </div>
{'fraction_non_alphanumeric': 0.1499175477737899, 'fraction_numerical': 0.04922882917838781, 'mean_word_length': 1.2057124518613607, 'pattern_counts': {'":': 0, '<': 473, '<?xml version=': 0, '>': 473, 'https://': 11, 'lorem ipsum': 0, 'www.': 8, 'xml': 8}, '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': '5302534', 'n_tokens_mistral': 6523, 'n_tokens_neox': 5647, 'n_words': 1203}