@import "variables.less";

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 300;
  line-height: 1.1em;
}

h1{
  font-size: 2.4em
}

h2 {
  font-size: 2em
}

h3 {
  font-size: 1.6em
}

h4 {
  font-size: 1.36em
}

h5 {
  font-size: 1.2em
}

h6 {
  font-size: 1.1em
}

@font-face {
  font-family: Biolinum;
  src: url('/theme/fonts/biolinum/LinBiolinum_R.ttf');
}

svg.icon {
  display: inline;
  width: 1.5em;
  height: 1.5em;
  fill: #ffffff;
  margin: 0.2em;
  vertical-align: middle;
}

body {
  margin: 0;
  padding: 0;
  background-color: @body-bg;
  color: @text-color;
  font-family: Biolinum;
  font-size: 16pt;
  line-height: 1.6em;
  flex-flow: vertical wrap;
  justify-content: center;
  display: flex;
}

:focus {
  box-shadow: 0 0 0.2em 0.2em @focus-color;
}

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

a:hover {
  color: @link-hover-color;
}

hr {
  color: @light-grey;
  background-color: @light-grey;
  height: 0.1em;
  border: none;
  margin-top: 1em;
  margin-bottom: 1em;
}

img {
  max-width: 100%;
}

body > header {
  display: flex;
  width: 100vw;
  background-color: @header-bg;
  color: @header-text-color;
  align-items: center;
  flex-flow: row wrap;
  padding-top: 0.3em;
  box-shadow: 0 0.3em @header-border-color, 0 0 0.3em 0.4em @header-bg;
  z-index: 1000;

  a {
    color: @header-link-color;
  }

  a:hover {
    color: @header-link-hover-color;
  }

  margin: 0;

  img {
    border-radius: 50%;
    max-width: 7em;
  }

  > h1 {
    margin: 0.3em 0 0.3em 0;
    flex-grow: 1;
  }

  p {
    margin: 0 0 1em 0;
  }

  > nav {
    flex-grow: 1;
    flex-flow: row wrap;
    ul {
      display: flex;
      flex-flow: row wrap;
      justify-content: center;
      li {
        display: flex;
        line-height: 1.6em;
        font-size: 1.28em;
        padding: 0.5em;
      }
    }
  }
}

main {
  a, input {
    word-break: none;
    hyphens: none;
    -webkit-hyphens: none;
    -ms-hyphens: none;
  }

  nav {
    text-align: center;
    text-transform: uppercase;
    font-size: .72em;
    padding: 1em 0 1em 0;
    border-bottom: @nav-border-color 0.1em solid;

    a {
      padding: 0 0.5em 0 0.5em;
      border-right: @nav-border-color 0.1em solid;
    }

    :first-child {
      border-left: @nav-border-color 0.1em solid;
    }
  }

  .pagination {
    margin: 4% 8% 2% 8%;
    height: 1em;
  }

  .social-share {
    p {
      font-size: .8em;
    }
  }

  article {
    margin: 0 8% 2% 8%;

    header {
      h1, h2 {
        margin-bottom: 0;
        margin-top: 0;
      }

      p {
        color: @article-header-text-color;
        font-size: 0.86em;
        text-indent: 0;
      }
    }

    p {
      text-indent: 1.2em;
      line-height: 1.8em;
      margin: 0 0 0.5em 0;
      max-width: 80ex;
    }

    code, kbd, samp, pre {
      font-family: @mono;
    }

    blockquote, pre {
      background-color: rgba(128,128,128,0.05);
      border-top-right-radius: 0.3em;
      border-bottom-right-radius: 0.3em;
      border-left: 8px solid rgba(128,128,128,0.075);
      border-left-width: 0.5em;
    }

    blockquote {
      padding: 0.5em 1em;
      font-weight: 300;
      font-size: 1.1em;
    }

    pre {
      padding: 0.3em;
      font-size: .9em;
      overflow-x: auto;
    }

    samp {
      white-space: pre;
      display: block;
      overflow-x: auto;
    }

    kbd {
      padding: .1em .6em;
      border: 0.1em solid rgba(63,63,63,0.25);
      box-shadow: 0 0.1em 0 rgba(63,63,63,0.25);
      background-color: #fff;
      color: #333;
      border-radius: 0.3em;
      display: inline-block;
      margin: 0 .1em;
      white-space: nowrap;
      font-size: .78em;
    }

    code {
      font-size: .8em;
      white-space: nowrap;
      color: #c25;
      padding: 0.1em 0.3em;
      background-color: #f7f7f9;
      border: 0.1em solid #e1e1e8;
      border-radius: 0.3em;
    }

    .comment-count {
      font-size: .8em;
    }

    table {
      border-collapse: collapse;
      border-spacing: 0;

      thead:first-child tr:first-child th {
         border-top: 0;
      }

      th, td {
        padding: 0.5em;
        line-height: eem;
        vertical-align: top;
        border-top: 0.1em solid #ddd;
      }
    }
  }

  word-break: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  box-shadow: 0 0 0.2em 0.2em @med-grey;
  max-width: 180ex;
  min-width: 50vw;
  margin: 0 10vw 0 10vw;
  padding: 2em;
  z-index: 10;
}

body > footer {
  padding-top: 0.3em;
  box-shadow: 0 -0.3em @footer-border-color, 0 0 0.3em 0.4em @footer-bg;
  background-color: @footer-bg;
  color: @footer-text-color;
  text-align: center;
  width: 100vw;
  z-index: 100;

  a {
    color: @footer-link-color;
  }

  a:hover {
    color: @footer-link-hover-color;
  }

  p {
    margin: 0.2em;
    text-align: center;
    text-indent: 0;
    padding: 0 2em 0 2em;
    color: @footer-text-color;
  }
}

.tag-cloud {
  a {
    background-color: @tag-bg;
    padding: .2em .6em .2em;
    font-size: .74em;
    line-height: 0.1em;
    color: @tag-text-color;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25em;
  }

  a:hover {
    background-color: @tag-hover-color;
  }
}

a.btn {
  background-color: @btn-bg;
  padding: .6em .6em;
  font-size: .8em;
  line-height: 0.1em;
  color: @btn-text-color;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25em;
}

a.btn:hover {
  background-color: @btn-hover-color;
}

.center, .text-center {
  text-align: center;
}

.img-center {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

.float-right {
  float: right;
}

div.related-posts {
  margin: 1em 0 1em 0;
  padding-bottom: 1em;
  border-top: @rel-post-border-color 0.1em solid;
  border-bottom: @rel-post-border-color 0.1em solid;

  h4 {
    margin: 1em 0 1em 0;
  }

  ul {
    font-size: 1.1em;
    padding-left: 12px;

    li {
      padding: 0.5em 0 0.5em 0;
    }
  }
}

nav.language-selector {
  display: flex;
  flex-flow: row;
  align-items: center;
}

ul.list, ul.social, ul.related-posts, nav.language-selector ul {
  list-style-type: none;
  margin: 0.3em;
  padding: 0;
}

ul.list, nav.language-selector ul {
  padding: 1em 0 1em 0;

  li {
    padding: 0.5em;
  }
}

ul.social {
  font-size: 0.9em;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;

  li {
    margin: 0.5em;
  }

  a:hover {
    z-index: 2;
    -webkit-transform: translateY(-0.5em);
    transform: translateY(-0.5em);
    color: white;
  }

  a {
    display: inline-block;
    height: 2em;
    border-radius: 2em;
    text-align: center;
    line-height: 2em;
    padding-left: 0.5em;
    padding-right: 0.5em;
    color: white;
  }

  a.sc-facebook {
    border: 0.2em solid @facebook-bg-color;
    svg.icon {
        fill: @facebook-bg-color;
    }
  }

  a.sc-google {
    border: 0.2em solid @google-bg-color;
    svg.icon {
        fill: @google-bg-color;
    }
  }

  a.sc-pinterest {
    border: 0.2em solid @pinterest-bg-color;
    svg.icon {
        fill: @pinterest-bg-color;
    }
  }

  a.sc-linkedin {
    border: 0.2em solid @linkedin-bg-color;
    svg.icon {
        fill: @linkedin-bg-color;
    }
  }

  a.sc-rss {
    border: 0.2em solid @rss-bg-color;
    svg.icon {
        fill: @rss-bg-color;
    }
  }

  a.sc-stack-overflow {
    border: 0.2em solid @stack-overflow-bg-color;
    svg.icon {
        fill: @stack-overflow-bg-color;
    }
  }

  a.sc-mastodon {
    border: 0.2em solid @mastodon-bg-color;
    svg.icon {
        fill: @mastodon-bg-color;
    }
  }

  a.sc-diaspora {
    border: 0.2em solid @diaspora-bg-color;
    svg.icon {
        fill: @diaspora-bg-color;
    }
  }

  a.sc-twitter {
    border: 0.2em solid @twitter-bg-color;
    svg.icon {
        fill: @twitter-bg-color;
    }
  }

  a.sc-youtube {
    border: 0.2em solid @youtube-bg-color;
    svg.icon {
        fill: @youtube-bg-color;
    }
  }

  a.sc-git, a.sc-git-alt {
    border: 0.2em solid @github-bg-color;
    svg.icon {
        fill: @github-bg-color;
    }
  }

  a.sc-github, a.sc-github-alt {
    border: 0.2em solid @github-bg-color;
    svg.icon {
        fill: @github-bg-color;
    }
  }

  a.sc-email {
    border: 0.2em solid @email-bg-color;
    svg.icon {
        fill: @email-bg-color;
    }
  }

  a.sc-reddit {
    border: 0.2em solid @reddit-bg-color;
    svg.icon {
        fill: @reddit-bg-color;
    }
  }

  a.sc-soundcloud {
    border: 0.2em solid @soundcloud-bg-color;
    svg.icon {
        fill: @soundcloud-bg-color;
    }
  }
}

main ul.social a {
  color: @text-color;
  &:hover {
    color: @text-color;
  }
}

.ads-header {
  display: inline-block;
  width: 70%;
}