<commit_before><style>

.modal-overlay {
  background: slategray;
  height: 100%;
  left: 0;
  display: flex;
  overflow: auto;
  position: fixed;
  top: 0;
  transition: opacity .2s;
  width: 100%;
  height: 100%;
  z-index: -1;
  text-align: center;
}

.modal-overlay[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
}

.modal-overlay[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  z-index: 3;
}


/*
  Modal Content Area
*/
.modal-content {
  background:slategray;
  margin: auto;
  overflow: auto;
  overflow-x: hidden;
  padding: 1.5em;
  box-sizing: border-box;
  position: relative;
  transform: scale(.8);
  transition: transform .3s;
  width: 80%;
  height: 80%;
  color:#fdfdfd;
  border:none;
}

.modal-overlay[aria-hidden="false"] .modal-content {
  transform: scale(1);
}

#modal_title {
  margin-top: 0;
  font-weight: 900;
  text-transform: uppercase;
  color:#BBC7CC;
}

.btn-close {
  color:#fdfdfd;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 5em;
  font-weight: 400;
  line-height: .5em;
  padding: 0;
  position: absolute;
  right: 0;
  top:0;
  z-index: 2;
}


/* Hamburger Menu Icon */
.open-menu,
.open-menu:hover,
.btn-close,
.btn-close:hover{
  background: none;
  border:none;
  box-shadow: none;
}

.open-menu {
  position: absolute;
  top:.5rem;
  right:.5em;
  padding: 0;
}

.post-template .open-menu,
.author-template .open-menu{
  top:.5rem;
}

.open-menu svg #menu-icon {
  fill: #dd4814;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}

.open-menu svg:hover #menu-icon {
  fill: orange;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}

/* Navigation styles in Menu */
  .menu li{
    list-style-type:none;
    font-family: Source Sans Pro;
    font-weight: 900;
  }
  .menu a{
    text-decoration: none;
    border-bottom: 1px dotted #fdfdfd;
    color:#fdfdfd;
  }

  .menu a:hover{
    color:white;
    border-bottom: 1px solid #fff;
  }

  .flex-container{
    display: flex;
  }

  .flex-container--center{
    align-items: center;
    justify-content: center;
  }

  .flex-child{
    align-self:center;
  }

</style>

    <button class="open-menu" type="button" id="modal_open">
      <svg version="1.1" id="menu-icon-svg" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="21px"
      height="21px" viewBox="0 0 20 19" enable-background="new 0 0 21 21"
      xml:space="preserve">
      <path fill="none" d="z"/>
      <g id="menu-icon">
        <rect width="21" height="3"/>
        <rect y="7" width="21" height="3"/>
        <rect y="14" width="21" height="3"/>
      </g>
      <path fill="none" d="z"/>
      </svg>

    </button>

    <div class="menu modal-overlay" id="modal_window"
             aria-hidden="true" role="dialog"
             aria-labelledby="Menu popup">
      <div class="modal-content flex-container flex-container--center" id="modal_holder" role="document">

        <div class="flex-child">
          <h1 class="beta" id="modal_title">Menu</h1>
          ***

          <nav role="navigation" class="beta">
            <li><a href="{{@blog.url}}">Home</a></li>
            <li><a href="{{@blog.url}}/about">About</a></li>
            <li><a href="{{@blog.url}}/contact">Contact</a></li>
          </nav>
        </div>

        <button class="btn-close" id="modal_close" type="button" aria-label="close">
          &times;
        </button>

      </div> <!-- end .modal-content -->
    </div> <!-- end .modal-overlay -->




<script>
// helper function to place modal window as the first child
// of the #page node
var m = document.getElementById('modal_window'),
    p = document.getElementById('body');

function swap () {
  p.parentNode.insertBefore(m, p);
}

swap();

// modal window
(function() {

  'use strict';

  // list out the vars
  var mOverlay = getId('modal_window'),
      mOpen = getId('modal_open'),
      mClose = getId('modal_close'),
      modal = getId('modal_holder'),
      allNodes = document.querySelectorAll("*"),
      modalOpen = false,
      lastFocus,<commit_msg>Fixed close button<commit_after><style>
.modal-overlay {
  background: slategray;
  height: 100%;
  left: 0;
  display: flex;
  overflow: auto;
  position: fixed;
  top: 0;
  transition: opacity .2s;
  width: 100%;
  height: 100%;
  z-index: -1;
  text-align: center;
}

.modal-overlay[aria-hidden="true"] {
  opacity: 0;
  visibility: hidden;
}

.modal-overlay[aria-hidden="false"] {
  opacity: 1;
  visibility: visible;
  z-index: 3;
}


/*
  Modal Content Area
*/
.modal-content {
  background:slategray;
  margin: auto;
  overflow: auto;
  overflow-x: hidden;
  padding: 1.5em;
  box-sizing: border-box;
  position: relative;
  transform: scale(.8);
  transition: transform .3s;
  width: 80%;
  height: 80%;
  color:#fdfdfd;
  border:none;
}

.modal-overlay[aria-hidden="false"] .modal-content {
  transform: scale(1);
}

#modal_title {
  margin-top: 0;
  font-weight: 900;
  text-transform: uppercase;
  color:#BBC7CC;
}

.btn-close {
  color:#fdfdfd;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 4em;
  font-weight: 400;
  line-height: 0;
  padding: 0;
  position: absolute;
  right:.3em;
  top:0;
  z-index: 2;
  cursor: pointer;
}


/* Hamburger Menu Icon */
.open-menu,
.open-menu:hover,
.btn-close,
.btn-close:hover{
  background: none;
  border:none;
  box-shadow: none;
}

.open-menu {
  position: absolute;
  top:.5rem;
  right:.5em;
  padding: 0;
}

.post-template .open-menu,
.author-template .open-menu{
  top:.5rem;
}

.open-menu svg #menu-icon {
  fill: #dd4814;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}

.open-menu svg:hover #menu-icon {
  fill: orange;
  -webkit-transition: .3s;
  -o-transition: .3s;
  transition: .3s;
}

/* Navigation styles in Menu */
  .menu li{
    list-style-type:none;
    font-family: Source Sans Pro;
    font-weight: 900;
  }
  .menu a{
    text-decoration: none;
    border-bottom: 1px dotted #fdfdfd;
    color:#fdfdfd;
  }

  .menu a:hover{
    color:white;
    border-bottom: 1px solid #fff;
  }

  .flex-container{
    display: flex;
  }

  .flex-container--center{
    align-items: center;
    justify-content: center;
  }

  .flex-child{
    align-self:center;
  }

</style>

    <button class="open-menu" type="button" id="modal_open">
      <svg version="1.1" id="menu-icon-svg" xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="21px"
      height="21px" viewBox="0 0 20 19" enable-background="new 0 0 21 21"
      xml:space="preserve">
      <path fill="none" d="z"/>
      <g id="menu-icon">
        <rect width="21" height="3"/>
        <rect y="7" width="21" height="3"/>
        <rect y="14" width="21" height="3"/>
      </g>
      <path fill="none" d="z"/>
      </svg>

    </button>

    <div class="menu modal-overlay" id="modal_window"
             aria-hidden="true" role="dialog"
             aria-labelledby="Menu popup">
      <div class="modal-content flex-container flex-container--center" id="modal_holder" role="document">

        <div class="flex-child">
          <h1 class="beta" id="modal_title">Menu</h1>
          ***

          <nav role="navigation" class="beta">
            <li><a href="{{@blog.url}}">Home</a></li>
            <li><a href="{{@blog.url}}/about">About</a></li>
            <li><a href="{{@blog.url}}/contact">Contact</a></li>
          </nav>
        </div>



      </div> <!-- end .modal-content -->
      <button class="btn-close" id="modal_close" type="button" aria-label="close">
          &times;
        </button>
    </div> <!-- end .modal-overlay -->




<script>
// helper function to place modal window as the first child
// of the #page node
var m = document.getElementById('modal_window'),
    p = document.getElementById('body');

function swap () {
  p.parentNode.insertBefore(m, p);
}

swap();

// modal window
(function() {

  'use strict';

  // list out the vars
  var mOverlay = getId('modal_window'),
      mOpen = getId('modal_open'),
      mClose = getId('modal_close'),
      modal = getId('modal_holder'),
      allNodes = document.querySelectorAll("*"),
      modalOpen = false,
      lastFocus,
{'fraction_non_alphanumeric': 0.17828987265009097, 'fraction_numerical': 0.024742268041237112, 'mean_word_length': 2.751592356687898, 'pattern_counts': {'":': 0, '<': 83, '<?xml version=': 0, '>': 83, 'https://': 0, 'lorem ipsum': 0, 'www.': 4, 'xml': 6}, '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': '7084315', 'n_tokens_mistral': 3181, 'n_tokens_neox': 2980, 'n_words': 650}