<commit_before>@import (inline) "../../../node_modules/normalize.css/normalize.css";
@import (inline) "../../../node_modules/basscss/css/basscss.css";
@import (inline) "../../../node_modules/basscss-btn/css/btn.css";
@import (inline) "../../../node_modules/basscss-btn-outline/css/btn-outline.css";
@import (inline) "../../../node_modules/prismjs/themes/prism.css";
@import (inline) "../../../node_modules/prism-treeview/prism-treeview.css";

@import url('https://fonts.googleapis.com/css?family=Archivo+Black');

@dark: #202024;
@light: #fafaf8;
@brand: #ff331f;
@brand-blue: #00b290;
@keyline: #e0e0e0;

.max-width-4{
  max-width: 1180px;
}

body {
  font-family: Roboto, serif;
  color: @dark;
  background: @light;
  line-height: 1.3em;
}

header{
  .nav-bar{
    height: 53px;
    background: #f4f4f4;

    nav{
      font-size: 0.9em;
      a {
        display: inline-block;
        &> img {
          display: block;
        }
      }

      ul >li {
        display: inline-block;
        a.btn{
          font-weight: lighter;

          &.btn-link{
            text-decoration: underline;
          }
        }
      }
    }
  }

  .breadcrumbs{
    background: @brand-blue;
    color: @light;

    ul{
      margin:1rem;
      padding: 0;
      li{
        display: inline-block;
        list-style: none;
        padding:0;
        margin:0 1rem 0 0;

        &:not(:last-child):after{
          content: "→";
          margin-left: 1rem;
        }
      }
    }
  }

  .hero{
    height: 489px;
    background: @dark url('../img/hero.jpg') no-repeat right;

    h1,h2{
      font-family: 'Archivo Black', sans-serif;
    }

    h1{
      line-height: 1.2em;
      margin: 110px 0 0 0;
      color: @light;
      span{
        color: @brand;
      }
    }

    h2{
      color: @light;
      line-height: 1.4em;
      font-size: 1.1em;
    }

    hr{
      width: 40px;
      height: 4px;
      background: @brand;
      border: none;
      display: block;
      margin: 30px 0 15px 0;
    }
  }
}

section.dual-color{
  background: #FFF;
  padding: 4rem 0;
  height: 425px;
  position: relative;
  overflow: hidden;
  font-size: 0.95em;

  &:before{
    content: "";
    display: block;
    background: @brand-blue;
    width: 64%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }

  &:after{
    content: "";
    display: block;
    background: #FFF;
    width: 72%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    transform: skew(0deg,-55deg);
  }

  & > div{
    z-index: 2;
    position: relative;
  }

  h3{
    font-weight: normal;
  }

}

section.red{
  color:@light;
  background: @brand;

  hr{
    width: 70px;
    height: 4px;
    background: @light;
    border: none;
    display: block;
    margin: 30px 0 15px 0;
  }

  p a, h2 span{
    color: #040032;
  }

  p a:hover{
    color: @light;
  }

}

section.documentation-menu{
  background: #f4f4f4;

  ul{
    list-style: none;
    margin: 0;

    li{
      margin-bottom: 0.5em;

      ul{
        padding-left: 1em;
        margin-top:1em;

        li:last-child{
          margin-bottom:1em;
        }
      }

      &.current{
        font-weight: bold;
      }

    }
  }

}

article{
  line-height: 1.8rem;

  hr {
    height: 2px;
    background: @dark;
    border: none;
    margin: 2rem auto;
    width: 5rem;
  }

  h1,h2,h3,h4,h5,h5{
    a{
      position: relative;
      &:before{
        content: '';
        position: absolute;
        top: 0;
        left: -1.25em;
        height: 100%;
        width: 1em;
        background: no-repeat 50% 50% / contain;
        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyIiB2aWV3Qm94PSIwIDAgMTc5MiAxNzkyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik0xNDA4IDI1NmgtMTAyNHYxMjQybDQyMy00MDYgODktODUgODkgODUgNDIzIDQwNnYtMTI0MnptMTItMTI4cTIzIDAgNDQgOSAzMyAxMyA1Mi41IDQxdDE5LjUgNjJ2MTI4OXEwIDM0LTE5LjUgNjJ0LTUyLjUgNDFxLTE5IDgtNDQgOC00OCAwLTgzLTMybC00NDEtNDI0LTQ0MSA0MjRxLTM2IDMzLTgzIDMzLTIzIDAtNDQtOS0zMy0xMy01Mi41LTQxdC0xOS41LTYydi0xMjg5cTAtMzQgMTkuNS02MnQ1Mi41LTQxcTIxLTkgNDQtOWgxMDQ4eiIvPjwvc3ZnPg==');
        opacity: .3;
        transition-duration: 200ms;
      }
      &:hover:before{
        opacity: 1;
      }
    }
  }

  h5{
    font-size: 1em;
  }
}

article h2 + ul {
  padding: 0;
  li {
    list-style: none;
    font-weight: bold;

    &:before {
      content: "# ";
      margin-right: .25em;
      color: @brand;
      opacity: .3;
    }

    &:hover:before {
      opacity: 1;
    }

    li {
      font-weight: normal;
    }

    a {
      text-decoration: none;
      color: @brand;
    }
  }
}

.notice{
  border: 1px solid @brand;
  border-left-width: 8px;
  background: #FFF;
  padding: 0.5rem 1rem;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);

  &.blue{
    border-color: @brand-blue;
  }
}

.small{
  font-size: 0.9em;
}

.code-box{
  width: 100%;
  box-shadow: 0 0 10px 0 rgba(7, 16, 19, 0.58);
  border: 1px solid #0072c6;
  position: relative;
  padding-top:31px;
  &:before{
    color: @dark;
    content: "Terminal";
    font-size: 0.8rem;
    padding: 6px;
    position: absolute;
    width: ~"calc(100% - 12px)";
    height: 18px;
    left: 0;
    top: 0;
    background: white url(../img/topbar.gif) top right no-repeat;
    border-bottom: 1px solid #d4d4d4;
  }

  pre[class*="language-"].mono{
    font-family: "Roboto Mono", monospace;
    padding: 10px;
    color: @keyline;
    background: #0D0106;
    margin: 0;
    border-radius: 0;
    font-size: 1em;
    line-height: 1em;

    code[class*="language-"]{
      text-shadow: none;
      color: @light;

      .token.operator{
        background: none;
      }
    }
  }
}

.mono{
  font-family: "Roboto Mono", monospace;
  font-size: 0.8rem;
  padding: 10px;
  color: @keyline;
  background: #0D0106;

  span{
    color: @brand;
  }
}


.btn.brand{
  background: @brand;
  color: @light;
  font-weight: lighter;
  font-size: 0.9em;

  &:hover, &:visited:hover{
    color: @light;
    background: darken(@brand, 18%)
  }
}

.brand{
  color: @brand;
}

.light{
  color: @light;
}

.justify{
  text-align: justify;
  text-align-last: left;
}

a{
  transition-duration: 300ms;
}

p{
  font-size: 1em;
  line-height: 1.4em;

  &.large{
    font-size: 1.1rem;
    line-height: 1.7rem;
  }
}

a, a:visited{
  color: @brand;

  &:hover{
    color: @dark;
  }
}

table{
  border-collapse: collapse;

  thead tr th{
    padding: 4px 8px;
    border-bottom: 2px solid @keyline;
  }

  tbody{
    tr td{
      padding: 4px 8px;
    }
    tr:nth-child(even) td{
      background-color: @keyline;
    }
  }

}

code {
  font-family: "Roboto Mono", monospace;
  font-size: 0.8em;
  line-height: 1.3rem;
  hyphens: none;
  tab-size: 4;
  text-shadow: 0 1px #fff;
  text-align: left;
}

:not(pre)>code{
  background: #f0f2f1;
  font-size: 0.8em;
  color: @brand;
  padding: 1px 5px;
  border-radius: 3px;
  display: inline-block;
  box-shadow: 0 1px 1px rgba(0,0,0,.325);
  vertical-align: middle;
}

pre[class*="language-treeview"]{
  line-height: 1rem;
}

code[class*="language-"], pre[class*="language-"] {
  color: #464646;
}

:not(pre) > code[class*="language-"], pre[class*="language-"] {
  background-color: #e4e4e4;
  border-radius: .3rem;
}

.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string {
  background: transparent;
}

.token.regex, .token.important, .token.variable {
  color: #9c7e0c;
}

footer{
  background: @dark;
  color: @light;

  p a:hover, p a:visited:hover{
    color: @light;
  }
}

/*
@foreground: #738fa6;
@background: #fff0d5;
@hover: #466277;

@dark: #071013;
@brand: #FF331F;
@light: #fafaf8;
@keyline: #e0e0e0;

.code-box{
  width: 100%;
  box-shadow: 0 0 10px 0 rgba(7, 16, 19, 0.58);
  border: 1px solid #0072c6;
  position: relative;
  padding-top:31px;
  &:before{
    content: "Terminal";
    font-size: 0.8rem;
    padding: 6px;
    position: absolute;
    width: ~"calc(100% - 12px)";
    height: 18px;
    left: 0;
    top: 0;
    background: url(../img/topbar.gif) top right no-repeat;
    border-bottom: 1px solid #d4d4d4;
  }
}

.mono{
  font-family: "Roboto Mono", monospace;
  font-size: 0.8rem;
  padding: 10px;
  color: @keyline;
  background: #0D0106;

  span{
    color: @brand;
  }
}

body {
  font-family: Roboto, serif;
  color: @dark;
  background: @light;
  line-height: 1.3em;
}

a {
  color: @brand;
  &:hover {
    color: @dark;
  }
}

.btn{
  color: @brand;
}

table{
  border-collapse: collapse;

  thead tr th{
    padding: 4px 8px;
    border-bottom: 2px solid @keyline;
  }

  tbody{
    tr td{
      padding: 4px 8px;
    }
    tr:nth-child(even) td{
      background-color: @keyline;
    }
  }

}

code {
  font-family: "Roboto Mono", monospace;
  font-size: 0.8em;
  line-height: 1.3rem;
  hyphens: none;
  tab-size: 4;
  text-shadow: 0 1px #fff;
  text-align: left;
}

:not(pre)>code{
  background: #f0f2f1;
  color: @brand;
  padding: 1px 5px;
  border-radius: 3px;
  display: inline-block;
  box-shadow: 0 1px 1px rgba(0,0,0,.325);
  vertical-align: middle;
}

pre[class*="language-treeview"]{
  line-height: 1rem;
}

code[class*="language-"], pre[class*="language-"] {
  color: #464646;
}

:not(pre) > code[class*="language-"], pre[class*="language-"] {
  background-color: #e4e4e4;
  border-radius: .3rem;
}

.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string {
  background: transparent;
}

.token.regex, .token.important, .token.variable {
  color: #9c7e0c;
}

hr {
  height: 1px;
  background: @hover;
  border: none;
  margin: 2rem auto;
  width: 3rem;
}

.list-inline li {
  display: inline;
}

.notice{
  border: 1px solid @brand;
  border-left-width: 8px;
  background: #FFF;
  padding: 0.5rem 1rem;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);

  &.red{
    border-color: @brand;
  }
  &.blue{
    border-color: #2f5a8c;
  }
}

header.main {
  background: #FFF;
  border-top: 10px solid @brand;
  border-bottom: 1px solid @keyline;

  .code-container{
    height:200px;
  }

  .code-box{
    width: 500px;
  }

  .mono{
    font-size: 1rem;
  }

  .brand{
    text-align: center;
    width: 200px;
    padding: 1.6rem 0;
    h1{
      margin: 0;
    }
    a{
      text-decoration: none;
      font-weight: bold;
    }
    small{
      font-size: 60%;
      text-transform: uppercase;
    }
  }
}

footer.main{
  background: @dark;
  color: @keyline;

  a:hover{
    color: @keyline;
  }
}

nav.main {
  background: @foreground;
  color: @background;

  a {
    color: @background;
    text-decoration: none;
  }
}

article{
  line-height: 1.8rem;

  h1,h2,h3,h4,h5,h5{
    a{
      position: relative;
      &:before{
        content: '';
        position: absolute;
        top: 0;
        left: -1.25em;
        height: 100%;
        width: 1em;
        background: no-repeat 50% 50% / contain;
        background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTc5MiIgaGVpZ2h0PSIxNzkyI<KEY>PSIwID<KEY>LTQxcTIxLTkgNDQtOWgxMDQ4eiIvPjwvc3ZnPg==');
        opacity: .3;
        transition-duration: 200ms;
      }
      &:hover:before{
        opacity: 1;
      }
    }
  }

  h5{
    font-size: 1em;
  }
}

article h2 + ul {
  padding: 0;
  li {
    list-style: none;
    font-weight: bold;

    &:before {
      content: "# ";
      margin-right: .25em;
      color: @brand;
      opacity: .3;
    }

    &:hover:before {
      opacity: 1;
    }

    li {
      font-weight: normal;
    }

    a {
      text-decoration: none;
      color: @brand;
    }
  }
}

.nav {
  border-right: 1px solid #d5dee4;
  ul {
    padding: 0;
    margin-right: 2rem;

    ul {
      padding: 0;
    }
    li {
      list-style: none;
    }

    li {
      margin-bottom: 1rem;
      span {
        display: block;
        border-bottom: 1px dashed #ccc;
        margin-bottom: 1rem;
        padding-bottom: 0.4rem;
      }

      li {
        padding-left: 2rem;
        border: none;
      }
    }
  }
}
*/<commit_msg>Issue27 design for large screens (#29)<commit_after>@import (inline) "../../../node_modules/normalize.css/normalize.css";
@import (inline) "../../../node_modules/basscss/css/basscss.css";
@import (inline) "../../../node_modules/basscss-btn/css/btn.css";
@import (inline) "../../../node_modules/basscss-btn-outline/css/btn-outline.css";
@import (inline) "../../../node_modules/prismjs/themes/prism.css";
@import (inline) "../../../node_modules/prism-treeview/prism-treeview.css";

@import url('https://fonts.googleapis.com/css?family=Archivo+Black');

@dark: #202024;
@light: #fafaf8;
@brand: #ff331f;
@brand-blue: #00b290;
@keyline: #e0e0e0;

.max-width-4{
  max-width: 1180px;
}

body {
  font-family: Roboto, serif;
  color: @dark;
  background: @light;
  line-height: 1.3em;
}

header{
  .nav-bar{
    height: 53px;
    background: #f4f4f4;

    nav{
      font-size: 0.9em;
      a {
        display: inline-block;
        &> img {
          display: block;
        }
      }

      ul >li {
        display: inline-block;
        a.btn{
          font-weight: lighter;

          &.btn-link{
            text-decoration: underline;
          }
        }
      }
    }
  }

  .breadcrumbs{
    background: @brand-blue;
    color: @light;

    ul{
      margin:1rem;
      padding: 0;
      li{
        display: inline-block;
        list-style: none;
        padding:0;
        margin:0 1rem 0 0;

        &:not(:last-child):after{
          content: "→";
          margin-left: 1rem;
        }
      }
    }
  }

  .hero{
    height: 489px;
    background: @dark url('../img/hero.jpg') no-repeat right;

    h1,h2{
      font-family: 'Archivo Black', sans-serif;
    }

    h1{
      line-height: 1.2em;
      margin: 110px 0 0 0;
      color: @light;
      span{
        color: @brand;
      }
    }

    h2{
      color: @light;
      line-height: 1.4em;
      font-size: 1.1em;
    }

    hr{
      width: 40px;
      height: 4px;
      background: @brand;
      border: none;
      display: block;
      margin: 30px 0 15px 0;
    }
  }
}

section.dual-color{
  background: #FFF;
  padding: 4rem 0;
  height: 425px;
  position: relative;
  overflow: hidden;
  font-size: 0.95em;

  &:before{
    content: "";
    display: block;
    background: @brand-blue;
    width: 64%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
  }

  &:after{
    content: "";
    display: block;
    background: #FFF;
    width: 72%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
    transform: skew(0deg,-55deg);
  }

  & > div{
    z-index: 2;
    position: relative;
  }

  h3{
    font-weight: normal;
  }

}

section.red{
  color:@light;
  background: @brand;

  hr{
    width: 70px;
    height: 4px;
    background: @light;
    border: none;
    display: block;
    margin: 30px 0 15px 0;
  }

  p a, h2 span{
    color: #040032;
  }

  p a:hover{
    color: @light;
  }

}

section.documentation-menu{
  background: #f4f4f4;

  ul{
    list-style: none;
    margin: 0;

    li{
      margin-bottom: 0.5em;

      ul{
        padding-left: 1em;
        margin-top:1em;

        li:last-child{
          margin-bottom:1em;
        }
      }

      &.current{
        font-weight: bold;
      }

    }
  }

}

article{
  line-height: 1.8rem;

  hr {
    height: 2px;
    background: @dark;
    border: none;
    margin: 2rem auto;
    width: 5rem;
  }

  h1,h2,h3,h4,h5,h5{
    a{
      position: relative;
      &:before{
        content: '';
        position: absolute;
        top: 0;
        left: -1.25em;
        height: 100%;
        width: 1em;
        background: no-repeat 50% 50% / contain;
        background-image: url('data:image/svg+xml;base64,<KEY>');
        opacity: .3;
        transition-duration: 200ms;
      }
      &:hover:before{
        opacity: 1;
      }
    }
  }

  h5{
    font-size: 1em;
  }
}

article h2 + ul {
  padding: 0;
  li {
    list-style: none;
    font-weight: bold;

    &:before {
      content: "# ";
      margin-right: .25em;
      color: @brand;
      opacity: .3;
    }

    &:hover:before {
      opacity: 1;
    }

    li {
      font-weight: normal;
    }

    a {
      text-decoration: none;
      color: @brand;
    }
  }
}

.notice{
  border: 1px solid @brand;
  border-left-width: 8px;
  background: #FFF;
  padding: 0.5rem 1rem;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125);

  &.blue{
    border-color: @brand-blue;
  }
}

.small{
  font-size: 0.9em;
}

.code-box{
  width: 100%;
  box-shadow: 0 0 10px 0 rgba(7, 16, 19, 0.58);
  border: 1px solid #0072c6;
  position: relative;
  padding-top:31px;
  &:before{
    color: @dark;
    content: "Terminal";
    font-size: 0.8rem;
    padding: 6px;
    position: absolute;
    width: ~"calc(100% - 12px)";
    height: 18px;
    left: 0;
    top: 0;
    background: white url(../img/topbar.gif) top right no-repeat;
    border-bottom: 1px solid #d4d4d4;
  }

  pre[class*="language-"].mono{
    font-family: "Roboto Mono", monospace;
    padding: 10px;
    color: @keyline;
    background: #0D0106;
    margin: 0;
    border-radius: 0;
    font-size: 1em;
    line-height: 1em;

    code[class*="language-"]{
      text-shadow: none;
      color: @light;

      .token.operator{
        background: none;
      }
    }
  }
}

.mono{
  font-family: "Roboto Mono", monospace;
  font-size: 0.8rem;
  padding: 10px;
  color: @keyline;
  background: #0D0106;

  span{
    color: @brand;
  }
}


.btn.brand{
  background: @brand;
  color: @light;
  font-weight: lighter;
  font-size: 0.9em;

  &:hover, &:visited:hover{
    color: @light;
    background: darken(@brand, 18%)
  }
}

.brand{
  color: @brand;
}

.light{
  color: @light;
}

.justify{
  text-align: justify;
  text-align-last: left;
}

a{
  transition-duration: 300ms;
}

p{
  font-size: 1em;
  line-height: 1.4em;

  &.large{
    font-size: 1.1rem;
    line-height: 1.7rem;
  }
}

a, a:visited{
  color: @brand;

  &:hover{
    color: @dark;
  }
}

table{
  border-collapse: collapse;

  thead tr th{
    padding: 4px 8px;
    border-bottom: 2px solid @keyline;
  }

  tbody{
    tr td{
      padding: 4px 8px;
    }
    tr:nth-child(even) td{
      background-color: @keyline;
    }
  }

}

code {
  font-family: "Roboto Mono", monospace;
  font-size: 0.8em;
  line-height: 1.3rem;
  hyphens: none;
  tab-size: 4;
  text-shadow: 0 1px #fff;
  text-align: left;
}

:not(pre)>code{
  background: #f0f2f1;
  font-size: 0.8em;
  color: @brand;
  padding: 1px 5px;
  border-radius: 3px;
  display: inline-block;
  box-shadow: 0 1px 1px rgba(0,0,0,.325);
  vertical-align: middle;
}

pre[class*="language-treeview"]{
  line-height: 1rem;
}

code[class*="language-"], pre[class*="language-"] {
  color: #464646;
}

:not(pre) > code[class*="language-"], pre[class*="language-"] {
  background-color: #e4e4e4;
  border-radius: .3rem;
}

.token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string {
  background: transparent;
}

.token.regex, .token.important, .token.variable {
  color: #9c7e0c;
}

footer{
  background: @dark;
  color: @light;

  p a:hover, p a:visited:hover{
    color: @light;
  }
}

@media screen and (min-width : 1940px){
  header{
    section.hero{
      max-width: 1940px;
      margin: 0 auto;
    }
  }
}
{'fraction_non_alphanumeric': 0.15636005800704372, 'fraction_numerical': 0.045576962916925624, 'mean_word_length': 2.191570247933884, 'pattern_counts': {'":': 0, '<': 6, '<?xml version=': 0, '>': 18, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 3}, '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': '7123942', 'n_tokens_mistral': 8569, 'n_tokens_neox': 7845, 'n_words': 1591}