<commit_before>
/*
*	Globals
*/
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* sticky footer from https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */

html {
  height: 100%;
}

body {
  height: 100%;
  @include display(flex);
  @include flex-direction(column);
}

.navigation, .site-footer {
  @include flex(none);
}

.page-content {
  @include flex(1 0 auto);
}

ol.default {
  @extend %default-ol;
}

ul.default {
  @extend %default-ul;
}

code {
  background-color: #eee;
  display: inline-block;
  border-radius: 3px;
  padding: 0 3px;
}



/*
*	Navigation
*/


.navigation {
  position: fixed;
  z-index: 100;
  width: 100%;
  bottom: 0;
  padding: 0;
  margin: 0;
  background-color: $background-grey;
  /*
  *	Navigation Menu - http://refills.bourbon.io/unstyled/ (see "Navigation")
  */
  // Mobile view
  .navigation-menu-button {
    display: block;
    float: right;
    margin: 0;
    font-size: 1.5em;
    padding-top: 0.5em;
    padding-right: 0.5em;
    @include media ($tablet) {
      display: none;
    }
  }
  // Nav menu
  .navigation-wrapper {
    @include outer-container;
    @include clearfix;
    position: relative;
  }
  .logo {
    float: left;
    /*height: 4em;*/
    @include media ($tablet) {
      padding-left: $em-base;
    }
    img {
      max-height: 2.75em;
      margin-top: 0.25em;
      padding-right: 1em;
    }
    span {
      font-size: 1.25em;
    }
  }
  nav {
    float: none;
    padding-top: 1em;
    @include media ($tablet) {
      float: right;
      line-height: 1.5em;
    }
  }
  ul.navigation-menu {
    clear: both;
    display: none;
    margin: 0 auto;
    overflow: visible;
    padding: 0;
    width: 100%;
    @include media ($tablet) {
      display: block;
      margin: 0;
      padding: 0;
    }
    &.show {
      display: block;
    }
  }
  // Nav items
  ul li.nav-link {
    display: block;
    text-align: right;
    width: 100%;
    padding: 0.25em;
    @include media ($tablet) {
      background: transparent;
      display: inline;
      text-decoration: none;
      width: auto;
    }
  }
  li.nav-link {
    a {
      display: inline-block;
      text-transform: uppercase;
      color: $white;
      font-size: 1.5em;
      @include media ($tablet) {
        padding-right: 1.5em;
      }
    }
    &:last-child a {
      @include media ($tablet) {
        padding-right: 1em;
      }
    }
  }
}

/*
*	Body
*/
main {

  display: block;
  padding-bottom: 7em;
    
  #content-header {
    @include outer-container;
    padding: 1em;
  }

  #content {
    @include outer-container;
    padding: 0.25em;
  }
  /*
  *	index.html
  */
  .post-list {
    padding-top: 1em !important;
    @extend %default-ul;
  }
  .post-meta {
    @include outer-container;
    // padding: 1em 0;
    color: $medium-gray;
    .post-date {
      @include span-columns(6);
      text-align: left;
      font-size: 0.9em;
    }
    .post-categories {
      @include span-columns(6);
      margin-right: 0;
      text-align: right;
      font-size: 0.9em;
    }
  }
  .pagination {
    padding-top: 2em;
    text-align: center;
    color: $medium-gray;
    .page-number {
      padding: 0 1em;
    }
  }
  .site-header-container {
    color: $white;
    background-color: $highlight-color;
    .site-header{
      .title {
        font-size: modular-scale(6);
      }
      .subtitle {
        text-transform: uppercase;
        font-size: modular-scale(1);
      }
    }
  }
  img {
    display: block;
    margin: 20px;
    max-width: 90%;
  }
  /*
  *	Posts
  */
  .post {
    ul {
      margin-bottom: 1em;
    }
    .post-header-container {
      .scrim {
        padding: 2em 1em 1em 1em;
      }
    }
    .post-meta {
      padding-bottom: 1em;
    }
    .post-content {
      padding: 1em 0;
    }
    .tags {
      font-size: 0.9em;
    }
    .rss {
      margin: 1em 0 0 0;
      @include span-columns(12);
      @include media ($tablet) {
        margin: 1em 0;
        @include span-columns(6);
      }
    }
    .share {
      font-weight: bold;
      margin: 0 0 1em 0;
      @include span-columns(12);
      @include media ($tablet) {
        @include span-columns(6);
        margin: 1em 0;
        text-align: right;
      }
      a {
        width: 1em;
        padding: 0 0.25em;
        text-decoration: none;
      }
    }
    .disqus {
      @include span-columns(12);
    }
    .post-navigation {
      font-size: 0.9em;
      display: block;
      width: auto;
      .prev-post {
        display: block;
        width: 50%;
        float: left;
        margin: 1em 0;
      }
      .next-post {
        display: block;
        width: 50%;
        float: left;
        margin: 1em 0;
        text-align: right;
      }
    }
  }

}

/*
* Front page
*/

.front {
  width: 100%;
  height: 100%;
  background-image: url("../assets/front2-sm.jpg");
  background-position: 50%;
  background-size: cover;
  @include media ($tablet) {
    background-image: url("../assets/front2-lg.jpg");
  }
  .site-header {
    @include outer_container;
    h1 {
      display: none;
    }
    .subtitle {
      float: right;
      font-size: 1.6rem;
      text-align: right;
      padding: 0.5em 1em;
      background-color: rgba($background-grey, 0.7);
      border: 1px solid rgba($background-grey, 0.9);
      color: $white;
      font-family: $base-font-family;
      text-transform: uppercase;
      max-width: 7em;
      line-height: 1.4em;
      @include media($mobile) {
        font-size: 2rem;
        margin-right: 1em;
      }
    }
  }
}

/*
 * Projects page
 */
.projects-past, .projects-current {
  clear: both;
  padding-top: 1em;
}

.projects-past {
  border-top: 1px solid $light-gray;
}

.project {
  clear: both;
  margin-bottom: 1.5em;
  a {
    display: block;
    @include clearfix;
    padding: 1em;
    transition: background-color 0.5s ease;
    color: $base-font-color;
    &:hover, &:focus {
      color: $base-font-color;
      text-decoration: none;
      background-color: tint($action-color, 90%);
    }
  }
  h3 {
    margin-bottom: 0;
  }
  
  .project-date {
    font-size: 1.4em;
    font-family: $heading-font-family;
    text-transform: uppercase;
    color: $light-gray;
    text-align: right;
  }
  .project-image {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  img {
    border-radius: 5px;
    height: auto;
    box-shadow: 5px 5px 5px $light-gray;
    width: 100%;
    margin: 0 0 1em 0;
    max-width: 100%;
  }
  .project-description {
  }
  @include media($mobile) {
    .project-image {
      float: left;
      width: 40%;
      line-height: 300px;
    }

    img {
      margin: 0;
      display: inline;
      vertical-align: middle;
    }

    .project-date {
      padding-bottom: 1em;
      float: right;
    }
    .project-description {
      padding: 20px;
      /*padding-top: 2em;*/
      font-size: 1.2em;
      float: right;
      width: 60%;
      box-sizing: border-box;
    }
  }
}


/*
 * About page
 */

.about h2 {
  clear: both;
  padding-top: 1em;
}

.team-member {
  clear: both;
  img {
    margin: 20px auto;
    border-radius: 100%;

  }
  @include media($mobile) {
    img {
      margin: 0;
      float: left;
    }
    h3, p {
      margin-left: 240px;
    }

  }
}

/*
 * Contact page
 */

.contact {
  .address {
    margin: 0.5em 0;
    border-bottom: 1px solid $light-gray;
  }
}

/*
 * Individual project pages
 */
.projects {
  iframe {
    max-width: 100%;
  }
  .media {
    .image-gallery {
      img {
        border-radius: 5px;
        box-shadow: 5px 5px 5px $light-gray;
        float: left;
        margin: 5px;
        transition: box-shadow 0.5s ease;
      }
      a:hover img, a:focus img {
        box-shadow: 5px 5px 5px $highlight-color;
      }
    }
  }
  
  .date {
    font-size: 1.6em;
    font-family: $heading-font-family;
    text-transform: uppercase;
    color: $light-gray;
    text-align: right;
  }
  
  @include media($tablet) {
    #content {
      @include clearfix;
    }

    .with-media {
      box-sizing: border-box;
      width: 50%;
      float: left;
      padding-right: 20px;
    }

    .media {
      box-sizing: border-box;
      width: 50%;
      float: right;
    }

  }
}

.lb-data .lb-caption {
  font-size: inherit;
}

.lb-data .lb-number {
  font-size: 0.8em;
}


/*
 * Header images
 */
.has-cover {
  #content-header {
    width: 100%;
    max-width: 100%;
    padding: 0;
    position: relative;
    height: 400px;
    max-height: 75vh;
    background-position: 50% 20%;
    background-size: cover;
    @include media($tablet) {
      height: 800px;
    }
  }

  #page-title {
    width: 100%;
    position: absolute;
    bottom: 0;
    h1 {
      @include outer-container;
      padding: 0 20px;
      margin-bottom: 0;
      background-color: rgba(0,0,0,0.5);
      color: $white;
      font-weight: normal;
      text-transform: uppercase;
      font-size: 1.4em;
      @include media($mobile) {
        font-size: 2em;
      }
    }
  }

}

.projects {
  @extend .has-cover;

  #content-header {
    background-image: url("../assets/projects-sm.jpg");
    @include media($tablet) {
      background-image: url("../assets/projects-lg.jpg");
    }
  }

}

.about {
  @extend .has-cover;

  #content-header {
    background-image: url("../assets/about-sm.jpg");
    @include media($tablet) {
      background-image: url("../assets/about-lg.jpg");
    }
  }

}

.contact {
  @extend .has-cover;

  #content-header {
    background-image: url("../assets/contact-sm.jpg");
    @include media($tablet) {
      background-image: url("../assets/contact-lg.jpg");
    }
  }

}


/*
*	Footer
*/
.site-footer {
  $link-color: $white;
  padding: 1em 1em 2em 1em;
  background-color: $highlight-color;
  color: $white;
  a {
    color: $link-color;
    &:active,
      &:focus,
      &:hover {
      color: darken($link-color, 10%);
    }
    &:active,
      &:focus {
      outline: none;
    }
  }
  .wrapper {
    @include outer-container;
  }
  .footer-heading {

  }
  /*
  *	Site Navigation (left)
  */
  .site-navigation {
    @include span-columns(12);
    @include media ($mobile) {
      @include span-columns(6);
    }
    @include media ($tablet) {
      @include span-columns(4);
    }
    font-size: 0.9em;
    ul {
      @extend %default-ul;
    }
  }
  /*
  *	Contact Info (center)
  */
  .site-contact {
    margin-top: 1em;
    @include span-columns(12);
    @include media ($mobile) {
      @include span-columns(6);
      margin-top: 0;
      margin-right: 0;
    }
    @include media ($tablet) {
      @include span-columns(4);
      margin-top: 0;
    }
    font-size: 0.9em;
    i {
      width: 1.25em;
      text-align: center;
    }
    ul {
      @extend %default-ul;
    }
  }
  /*
  *	Site Description/Signature (right)
  */
  .site-signature {
    margin-top: 1em;
    @include span-columns(12);
    @include media ($tablet) {
      @include span-columns(4);
      margin-right: 0;
      margin-top: 0;
    }
    font-size: 0.9em;
    a {
      text-decoration: underline;
    }
  }
}<commit_msg>Fix tag used for flex - display issue in Safari / Chrome.<commit_after>
/*
*	Globals
*/
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
}

/* sticky footer from https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ */

html {
  height: 100%;
}

body {
  height: 100%;
  @include display(flex);
  @include flex-direction(column);
}

.navigation, .site-footer {
  @include flex(none);
}

main {
  @include flex(1 0 auto);
}

ol.default {
  @extend %default-ol;
}

ul.default {
  @extend %default-ul;
}

code {
  background-color: #eee;
  display: inline-block;
  border-radius: 3px;
  padding: 0 3px;
}



/*
*	Navigation
*/


.navigation {
  position: fixed;
  z-index: 100;
  width: 100%;
  bottom: 0;
  padding: 0;
  margin: 0;
  background-color: $background-grey;
  /*
  *	Navigation Menu - http://refills.bourbon.io/unstyled/ (see "Navigation")
  */
  // Mobile view
  .navigation-menu-button {
    display: block;
    float: right;
    margin: 0;
    font-size: 1.5em;
    padding-top: 0.5em;
    padding-right: 0.5em;
    @include media ($tablet) {
      display: none;
    }
  }
  // Nav menu
  .navigation-wrapper {
    @include outer-container;
    @include clearfix;
    position: relative;
  }
  .logo {
    float: left;
    /*height: 4em;*/
    @include media ($tablet) {
      padding-left: $em-base;
    }
    img {
      max-height: 2.75em;
      margin-top: 0.25em;
      padding-right: 1em;
    }
    span {
      font-size: 1.25em;
    }
  }
  nav {
    float: none;
    padding-top: 1em;
    @include media ($tablet) {
      float: right;
      line-height: 1.5em;
    }
  }
  ul.navigation-menu {
    clear: both;
    display: none;
    margin: 0 auto;
    overflow: visible;
    padding: 0;
    width: 100%;
    @include media ($tablet) {
      display: block;
      margin: 0;
      padding: 0;
    }
    &.show {
      display: block;
    }
  }
  // Nav items
  ul li.nav-link {
    display: block;
    text-align: right;
    width: 100%;
    padding: 0.25em;
    @include media ($tablet) {
      background: transparent;
      display: inline;
      text-decoration: none;
      width: auto;
    }
  }
  li.nav-link {
    a {
      display: inline-block;
      text-transform: uppercase;
      color: $white;
      font-size: 1.5em;
      @include media ($tablet) {
        padding-right: 1.5em;
      }
    }
    &:last-child a {
      @include media ($tablet) {
        padding-right: 1em;
      }
    }
  }
}

/*
*	Body
*/
main {

  display: block;
  padding-bottom: 7em;
    
  #content-header {
    @include outer-container;
    padding: 1em;
  }

  #content {
    @include outer-container;
    padding: 0.25em;
  }
  /*
  *	index.html
  */
  .post-list {
    padding-top: 1em !important;
    @extend %default-ul;
  }
  .post-meta {
    @include outer-container;
    // padding: 1em 0;
    color: $medium-gray;
    .post-date {
      @include span-columns(6);
      text-align: left;
      font-size: 0.9em;
    }
    .post-categories {
      @include span-columns(6);
      margin-right: 0;
      text-align: right;
      font-size: 0.9em;
    }
  }
  .pagination {
    padding-top: 2em;
    text-align: center;
    color: $medium-gray;
    .page-number {
      padding: 0 1em;
    }
  }
  .site-header-container {
    color: $white;
    background-color: $highlight-color;
    .site-header{
      .title {
        font-size: modular-scale(6);
      }
      .subtitle {
        text-transform: uppercase;
        font-size: modular-scale(1);
      }
    }
  }
  img {
    display: block;
    margin: 20px;
    max-width: 90%;
  }
  /*
  *	Posts
  */
  .post {
    ul {
      margin-bottom: 1em;
    }
    .post-header-container {
      .scrim {
        padding: 2em 1em 1em 1em;
      }
    }
    .post-meta {
      padding-bottom: 1em;
    }
    .post-content {
      padding: 1em 0;
    }
    .tags {
      font-size: 0.9em;
    }
    .rss {
      margin: 1em 0 0 0;
      @include span-columns(12);
      @include media ($tablet) {
        margin: 1em 0;
        @include span-columns(6);
      }
    }
    .share {
      font-weight: bold;
      margin: 0 0 1em 0;
      @include span-columns(12);
      @include media ($tablet) {
        @include span-columns(6);
        margin: 1em 0;
        text-align: right;
      }
      a {
        width: 1em;
        padding: 0 0.25em;
        text-decoration: none;
      }
    }
    .disqus {
      @include span-columns(12);
    }
    .post-navigation {
      font-size: 0.9em;
      display: block;
      width: auto;
      .prev-post {
        display: block;
        width: 50%;
        float: left;
        margin: 1em 0;
      }
      .next-post {
        display: block;
        width: 50%;
        float: left;
        margin: 1em 0;
        text-align: right;
      }
    }
  }

}

/*
* Front page
*/

.front {
  width: 100%;
  height: 100%;
  background-image: url("../assets/front2-sm.jpg");
  background-position: 50%;
  background-size: cover;
  @include media ($tablet) {
    background-image: url("../assets/front2-lg.jpg");
  }
  .site-header {
    @include outer_container;
    h1 {
      display: none;
    }
    .subtitle {
      float: right;
      font-size: 1.6rem;
      text-align: right;
      padding: 0.5em 1em;
      background-color: rgba($background-grey, 0.7);
      border: 1px solid rgba($background-grey, 0.9);
      color: $white;
      font-family: $base-font-family;
      text-transform: uppercase;
      max-width: 7em;
      line-height: 1.4em;
      @include media($mobile) {
        font-size: 2rem;
        margin-right: 1em;
      }
    }
  }
}

/*
 * Projects page
 */
.projects-past, .projects-current {
  clear: both;
  padding-top: 1em;
}

.projects-past {
  border-top: 1px solid $light-gray;
}

.project {
  clear: both;
  margin-bottom: 1.5em;
  a {
    display: block;
    @include clearfix;
    padding: 1em;
    transition: background-color 0.5s ease;
    color: $base-font-color;
    &:hover, &:focus {
      color: $base-font-color;
      text-decoration: none;
      background-color: tint($action-color, 90%);
    }
  }
  h3 {
    margin-bottom: 0;
  }
  
  .project-date {
    font-size: 1.4em;
    font-family: $heading-font-family;
    text-transform: uppercase;
    color: $light-gray;
    text-align: right;
  }
  .project-image {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  img {
    border-radius: 5px;
    height: auto;
    box-shadow: 5px 5px 5px $light-gray;
    width: 100%;
    margin: 0 0 1em 0;
    max-width: 100%;
  }
  .project-description {
  }
  @include media($mobile) {
    .project-image {
      float: left;
      width: 40%;
      line-height: 300px;
    }

    img {
      margin: 0;
      display: inline;
      vertical-align: middle;
    }

    .project-date {
      padding-bottom: 1em;
      float: right;
    }
    .project-description {
      padding: 20px;
      /*padding-top: 2em;*/
      font-size: 1.2em;
      float: right;
      width: 60%;
      box-sizing: border-box;
    }
  }
}


/*
 * About page
 */

.about h2 {
  clear: both;
  padding-top: 1em;
}

.team-member {
  clear: both;
  img {
    margin: 20px auto;
    border-radius: 100%;

  }
  @include media($mobile) {
    img {
      margin: 0;
      float: left;
    }
    h3, p {
      margin-left: 240px;
    }

  }
}

/*
 * Contact page
 */

.contact {
  .address {
    margin: 0.5em 0;
    border-bottom: 1px solid $light-gray;
  }
}

/*
 * Individual project pages
 */
.projects {
  iframe {
    max-width: 100%;
  }
  .media {
    .image-gallery {
      img {
        border-radius: 5px;
        box-shadow: 5px 5px 5px $light-gray;
        float: left;
        margin: 5px;
        transition: box-shadow 0.5s ease;
      }
      a:hover img, a:focus img {
        box-shadow: 5px 5px 5px $highlight-color;
      }
    }
  }
  
  .date {
    font-size: 1.6em;
    font-family: $heading-font-family;
    text-transform: uppercase;
    color: $light-gray;
    text-align: right;
  }
  
  @include media($tablet) {
    #content {
      @include clearfix;
    }

    .with-media {
      box-sizing: border-box;
      width: 50%;
      float: left;
      padding-right: 20px;
    }

    .media {
      box-sizing: border-box;
      width: 50%;
      float: right;
    }

  }
}

.lb-data .lb-caption {
  font-size: inherit;
}

.lb-data .lb-number {
  font-size: 0.8em;
}


/*
 * Header images
 */
.has-cover {
  #content-header {
    width: 100%;
    max-width: 100%;
    padding: 0;
    position: relative;
    height: 400px;
    max-height: 75vh;
    background-position: 50% 20%;
    background-size: cover;
    @include media($tablet) {
      height: 800px;
    }
  }

  #page-title {
    width: 100%;
    position: absolute;
    bottom: 0;
    h1 {
      @include outer-container;
      padding: 0 20px;
      margin-bottom: 0;
      background-color: rgba(0,0,0,0.5);
      color: $white;
      font-weight: normal;
      text-transform: uppercase;
      font-size: 1.4em;
      @include media($mobile) {
        font-size: 2em;
      }
    }
  }

}

.projects {
  @extend .has-cover;

  #content-header {
    background-image: url("../assets/projects-sm.jpg");
    @include media($tablet) {
      background-image: url("../assets/projects-lg.jpg");
    }
  }

}

.about {
  @extend .has-cover;

  #content-header {
    background-image: url("../assets/about-sm.jpg");
    @include media($tablet) {
      background-image: url("../assets/about-lg.jpg");
    }
  }

}

.contact {
  @extend .has-cover;

  #content-header {
    background-image: url("../assets/contact-sm.jpg");
    @include media($tablet) {
      background-image: url("../assets/contact-lg.jpg");
    }
  }

}


/*
*	Footer
*/
.site-footer {
  $link-color: $white;
  padding: 1em 1em 2em 1em;
  background-color: $highlight-color;
  color: $white;
  a {
    color: $link-color;
    &:active,
      &:focus,
      &:hover {
      color: darken($link-color, 10%);
    }
    &:active,
      &:focus {
      outline: none;
    }
  }
  .wrapper {
    @include outer-container;
  }
  .footer-heading {

  }
  /*
  *	Site Navigation (left)
  */
  .site-navigation {
    @include span-columns(12);
    @include media ($mobile) {
      @include span-columns(6);
    }
    @include media ($tablet) {
      @include span-columns(4);
    }
    font-size: 0.9em;
    ul {
      @extend %default-ul;
    }
  }
  /*
  *	Contact Info (center)
  */
  .site-contact {
    margin-top: 1em;
    @include span-columns(12);
    @include media ($mobile) {
      @include span-columns(6);
      margin-top: 0;
      margin-right: 0;
    }
    @include media ($tablet) {
      @include span-columns(4);
      margin-top: 0;
    }
    font-size: 0.9em;
    i {
      width: 1.25em;
      text-align: center;
    }
    ul {
      @extend %default-ul;
    }
  }
  /*
  *	Site Description/Signature (right)
  */
  .site-signature {
    margin-top: 1em;
    @include span-columns(12);
    @include media ($tablet) {
      @include span-columns(4);
      margin-right: 0;
      margin-top: 0;
    }
    font-size: 0.9em;
    a {
      text-decoration: underline;
    }
  }
}
{'fraction_non_alphanumeric': 0.14960061374610767, 'fraction_numerical': 0.027979601967597814, 'mean_word_length': 1.818979773565704, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 2, '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': '3347619', 'n_tokens_mistral': 8736, 'n_tokens_neox': 8141, 'n_words': 1721}