style.css

/* Utility styles */
* {
  box-sizing: border-box;
}
.row:after, .group:after {
  content: "";
  display: table;
  clear: both;
}

/* PureDrawer responsive menu */
html,body{height: 100%;}.pure-container{position:relative;height:100%;-webkit-overflow-scrolling:touch}.pure-toggle{left:-9999px;position:absolute;top:-9999px}.pure-toggle:focus~.pure-toggle-label{color:#fff}.pure-toggle-label{cursor:pointer;display:block;position:fixed;top:15px;z-index:99;color:#fff;font-size:2rem;width:58px;padding:5px;line-height:44px;text-align:center;font-weight:300;transition:all 200ms ease-in-out;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);text-rendering:geometricPrecision;background:rgba(0,0,0,0.5)}.pure-toggle-label:hover{color:#fff;background:rgba(0,0,0,0.7)}.pure-toggle-label:active{-webkit-tap-highlight-color:rgba(0,0,0,0)}.pure-toggle-label[data-toggle-label=left]{left:15px;right:auto}.pure-toggle-label[data-toggle-label=right]{right:28px;left:auto}.pure-toggle-label[data-toggle-label=top]{}.pure-toggle[data-toggle=left]:checked~.pure-toggle-label:not([data-toggle-label=left]),.pure-toggle[data-toggle=right]:checked~.pure-toggle-label:not([data-toggle-label=right]),.pure-toggle[data-toggle=top]:checked~.pure-toggle-label:not([data-toggle-label=top]){opacity:0;z-index:-1}.pure-toggle[data-toggle=left]:checked~.pure-toggle-label[data-toggle-label=left]{}.pure-toggle[data-toggle=right]:checked~.pure-toggle-label[data-toggle-label=right]{}.pure-toggle[data-toggle=top]:checked~.pure-toggle-label[data-toggle-label=top]{}.pure-drawer{position:fixed;top:0;left:0;z-index:1;height:100%;padding:4rem 0.5rem 1rem;background-color:#10100F;color:#fff;transition:all .5s;visibility:hidden;width:100%;overflow-y:auto;}@media only screen and (min-width:40.063rem){.pure-drawer{width:300px}}@media only screen and (min-width:64.063rem){.pure-drawer{width:300px}}.pure-drawer[data-position=right]{left:auto;right:0}.pure-drawer[data-position=top]{height:100%;width:100%}@media only screen and (min-width:40.063rem){.pure-drawer[data-position=top]{height:100%}}@media only screen and (min-width:64.063rem){.pure-drawer[data-position=top]{height:100px}}.pure-pusher-container{position:relative;height:100%;overflow:hidden}.pure-pusher{position:relative;height:100%;overflow-y:auto;left:0;z-index:2;transition:-webkit-transform .5s;transition:transform .5s}.pure-overlay{position:fixed;top:0;bottom:0;right:0;width:0;height:0;opacity:0;background-color:rgba(0,0,0,.4);transition:opacity .5s .3s}.pure-toggle[data-toggle=left]:checked~.pure-overlay[data-overlay=left]{left:100%}@media only screen and (min-width:40.063rem){.pure-toggle[data-toggle=left]:checked~.pure-overlay[data-overlay=left]{left:300px}}@media only screen and (min-width:64.063rem){.pure-toggle[data-toggle=left]:checked~.pure-overlay[data-overlay=left]{left:300px}}.pure-toggle[data-toggle=right]:checked~.pure-overlay[data-overlay=right]{right:100%}@media only screen and (min-width:40.063rem){.pure-toggle[data-toggle=right]:checked~.pure-overlay[data-overlay=right]{right:300px}}@media only screen and (min-width:64.063rem){.pure-toggle[data-toggle=right]:checked~.pure-overlay[data-overlay=right]{right:300px}}.pure-toggle[data-toggle=top]:checked~.pure-overlay[data-overlay=top]{top:100%}@media only screen and (min-width:40.063rem){.pure-toggle[data-toggle=top]:checked~.pure-overlay[data-overlay=top]{top:100%}}@media only screen and (min-width:64.063rem){.pure-toggle[data-toggle=top]:checked~.pure-overlay[data-overlay=top]{top:100px}}.pure-toggle[data-toggle=left]:checked~.pure-overlay[data-overlay=left],.pure-toggle[data-toggle=right]:checked~.pure-overlay[data-overlay=right],.pure-toggle[data-toggle=top]:checked~.pure-overlay[data-overlay=top]{width:100%;height:100%;opacity:1;z-index:2;transition:opacity .5s .3s}.no-csstransforms3d .pure-toggle[data-toggle=left]:checked~.pure-pusher-container .pure-pusher{left:100%}@media only screen and (min-width:40.063rem){.no-csstransforms3d .pure-toggle[data-toggle=left]:checked~.pure-pusher-container .pure-pusher{left:300px}}@media only screen and (min-width:64.063rem){.no-csstransforms3d .pure-toggle[data-toggle=left]:checked~.pure-pusher-container .pure-pusher{left:300px}}.no-csstransforms3d .pure-toggle[data-toggle=right]:checked~.pure-pusher-container .pure-pusher{left:-100%}@media only screen and (min-width:40.063rem){.no-csstransforms3d .pure-toggle[data-toggle=right]:checked~.pure-pusher-container .pure-pusher{left:-300px}}@media only screen and (min-width:64.063rem){.no-csstransforms3d .pure-toggle[data-toggle=right]:checked~.pure-pusher-container .pure-pusher{left:-300px}}.no-csstransforms3d .pure-toggle[data-toggle=top]:checked~.pure-pusher-container .pure-pusher{top:100%}@media only screen and (min-width:40.063rem){.no-csstransforms3d .pure-toggle[data-toggle=top]:checked~.pure-pusher-container .pure-pusher{top:100%}}@media only screen and (min-width:64.063rem){.no-csstransforms3d .pure-toggle[data-toggle=top]:checked~.pure-pusher-container .pure-pusher{top:100px}}[data-effect=pure-effect-3] .pure-drawer[data-position=left]{-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0)}[data-effect=pure-effect-3] .pure-drawer[data-position=right]{-webkit-transform:translate3d(50%,0,0);transform:translate3d(50%,0,0)}[data-effect=pure-effect-3] .pure-drawer[data-position=top]{-webkit-transform:translate3d(0,-50%,0);transform:translate3d(0,-50%,0)}[data-effect=pure-effect-3] .pure-toggle[data-toggle=left]:checked~.pure-drawer[data-position=left],[data-effect=pure-effect-3] .pure-toggle[data-toggle=right]:checked~.pure-drawer[data-position=right],[data-effect=pure-effect-3] .pure-toggle[data-toggle=top]:checked~.pure-drawer[data-position=top]{visibility:visible;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}[data-effect=pure-effect-3] .pure-toggle[data-toggle=left]:checked~.pure-pusher-container .pure-pusher{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}@media only screen and (min-width:40.063rem){[data-effect=pure-effect-3] .pure-toggle[data-toggle=left]:checked~.pure-pusher-container .pure-pusher{-webkit-transform:translate3d(300px,0,0);transform:translate3d(300px,0,0)}}@media only screen and (min-width:64.063rem){[data-effect=pure-effect-3] .pure-toggle[data-toggle=left]:checked~.pure-pusher-container .pure-pusher{-webkit-transform:translate3d(300px,0,0);transform:translate3d(300px,0,0)}}[data-effect=pure-effect-3] .pure-toggle[data-toggle=right]:checked~.pure-pusher-container .pure-pusher{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}@media only screen and (min-width:40.063rem){[data-effect=pure-effect-3] .pure-toggle[data-toggle=right]:checked~.pure-pusher-container .pure-pusher{-webkit-transform:translate3d(-300px,0,0);transform:translate3d(-300px,0,0)}}@media only screen and (min-width:64.063rem){[data-effect=pure-effect-3] .pure-toggle[data-toggle=right]:checked~.pure-pusher-container .pure-pusher{-webkit-transform:translate3d(-300px,0,0);transform:translate3d(-300px,0,0)}}[data-effect=pure-effect-3] .pure-toggle[data-toggle=top]:checked~.pure-pusher-container .pure-pusher{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}@media only screen and (min-width:40.063rem){[data-effect=pure-effect-3] .pure-toggle[data-toggle=top]:checked~.pure-pusher-container .pure-pusher{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@media only screen and (min-width:64.063rem){[data-effect=pure-effect-3] .pure-toggle[data-toggle=top]:checked~.pure-pusher-container .pure-pusher{-webkit-transform:translate3d(0,100px,0);transform:translate3d(0,100px,0)}}
/* PureDrawer responsive menu end */

/* Grid */
/*!
 * Gridpak Beta CSS
 *
 * Generator - http://gridpak.com/
 * Created by @erskinedesign
 */

 /* Reusable column setup */
 .col {
  border:0px solid rgba(0,0,0,0);
  float:left;
  box-sizing:border-box;
  background-clip:padding-box !important;
}

/* 1. 4 Column Grid 0px - 499px */

.col {
  margin-left:0%;
  padding:0 3.125%;
}

.row .col:first-child {
  margin-left:0;
}

.span_1 {
  width:25.0%;
}
.span_2, .comments-link, .share {
  width:50.0%;
}
.span_3 {
  width:75.0%;
}
.span_4, .main, .post-icon {
  margin-left:0;
  width:100%;
}

.col.share {
  padding-left: 0;
}

.content > .row {
  margin-top: 0.5rem;
}

.pure-drawer {
  padding: 4rem 1rem 1rem 1rem;
}
#search-form {
  position: relative;
  margin: 0 0 2.5rem;
}

/* 2. 12 Column Grid 850px - 1499px */

@media screen and (min-width: 850px) {

  .col, header, .content, .post-icon, .main, .col.share {
    margin-left:0%;
    padding:0 0.9%;
  }

  header, .content, .post-icon, .main {
    border:0px solid rgba(0,0,0,0);
    float:left;
    box-sizing:border-box;
    background-clip:padding-box !important;
  }

  .pagination.row, .footer.row {
    margin-left: 44.76%;
  }

  .row .pagination.row {
    margin-left: 0;
  }

  .row .col:first-child {
    margin-left:0;
  }

  .span_1 {
    width:8.33333333333%;
  }
  .span_2, .post-icon {
    width:16.6666666667%;
  }
  .span_3 {
    width:25.0%;
  }
  .span_4, header{
    width:33.3333333333%;
  }
  .span_5 {
    width:41.6666666667%;
  }
  .span_6 {
    width:50.0%;
  }
  .span_7 {
    width:58.3333333333%;
  }
  .span_8, .content, .main {
    width:66.6666666667%;
  }
  .span_9 {
    width:75.0%;
  }
  .span_10 {
    width:83.3333333333%;
  }
  .span_11 {
    width:91.6666666667%;
  }
  .span_12, article {
    margin-left:0;
    width:100%;
  }

  .pagination .main, .footer .main {
    width:78%;
  }
  .row .pagination .main {
    width: 100%;
  }

  .content {
    margin-left: 33%;
  }

  .content > .row {
    margin-top: 8rem;
  }
}

/* 3. 12 Column Grid 1500px - Infinity */

@media screen and (min-width: 1500px) {

  .col, .content, .post-icon, .main, .col.share {
    padding:0 0.8%;
  }
  .col, .post-icon, .main, .col.share {
    margin-left:0%;
  }
  .main {
    width: 73%;
  }
  .post-icon {
    width: 14.25%;
  }
  header {
    top: 0;
    left: 20%;
  }
  .content {
    margin-left: 53%;
    width: 47%;
  }
  .pagination.row, .footer.row {
    margin-left: 60.3%;
  }
  .pagination .main, .footer .main {
    width: 83.3%;
  }
  #search-form {
    margin-top: 1.2rem;
  }
  /* Always display drawer open in large layout */
  .pure-toggle-label {
    display: none;
  }
  .pure-drawer {
    visibility: visible;
    position: fixed;
    width: 20%;
    top: 0;
    left: 0;
    z-index: 10;
    padding-top: 1rem;
  }
  [data-effect=pure-effect-3] .pure-drawer[data-position=left] {
    -webkit-transform: none;
    transform: none;
  }
  .pure-pusher {
    -webkit-transform: none;
    transform: none;
  }
  .pure-overlay {
    display: none;
  }
  #search-form {
    margin-top: 1.2rem;
  }
  /* Always display drawer open in large layout end */
}
/* Grid end */


/* Social sharing toggle */
.social-share {
  display: inline-block;
  position: relative;
}
.icon-share {
  cursor: pointer;
}
.social-share-toggle {
  display: none;
}
.social-share-buttons {
  display: none;
  position: absolute;
  top: 1.5rem;
  z-index: 10;
  width: 9rem;
  padding: 0.5rem;
}
.social-share-buttons a {
  text-decoration: none;
}
.no-flexbox .social-share-buttons a {
  margin-right: 1em;
}
.no-flexbox .social-share-buttons a:last-child {
  margin-right: 0;
}
.social-share-toggle:checked ~ .social-share-buttons {
  display: block;
  display: flex;
  justify-content: space-around;
}
/* End social sharing toggle */

/* Hamburger icon */
.pure-toggle-label {
  height: 2.3rem;
}
.pure-toggle-label span, .pure-toggle-label span:before, .pure-toggle-label span:after {
  cursor: pointer;
  border-radius: 1px;
  height: 5px;
  width: 35px;
  background: white;
  position: absolute;
  display: block;
  content: '';
}
.pure-toggle-label span {
  left: 0.6rem;
  top: 1rem;
}
.pure-toggle-label span:before {
  top: -10px;
}
.pure-toggle-label span:after {
  top: 10px;
}

.pure-toggle-label span, .pure-toggle-label span:before, .pure-toggle-label span:after {
  transition: all 500ms ease-in-out;
}
.pure-toggle:checked ~ .pure-toggle-label span {
  background-color: transparent;
}
.pure-toggle:checked ~ .pure-toggle-label span:before, .pure-toggle:checked ~ .pure-toggle-label span:after {
  top: 0;
}
.pure-toggle:checked ~ .pure-toggle-label span:before {
  transform: rotate(45deg);
}
.pure-toggle:checked ~ .pure-toggle-label span:after {
  transform: rotate(-45deg);
}
/* Hamburger icon end*/

/* Header styles */
header {
  position: relative;
  overflow: hidden;
  height: 15rem;
  z-index: 2;
}

.info-container {
  position: absolute;
  bottom: 0;
  padding-bottom: 2.5rem;
  width: 100%;
  display: flex;
  justify-content: center;
}
.info {
  background: rgba(0,0,0,0.5);
  padding: 1rem;
  display: inline-block;
  width: 80%;
  text-align: center;
  color: white;
}
.info a {
  color: white;
  text-decoration: none;
}
.info h1 {
  margin: 0;
}
.avatar {
  display: none;
  border-radius: 50%;
  width: 100px;
}

@media screen and (min-width: 850px) {
  header {
    position: fixed;
    top: 0;
  }
  .info-container {
    width: 94.6%;
  }
}
@media screen and (min-width: 1500px) {
  .info-container {
    /* todo: fix this value to fit inside the header */
    width: 98.4%;
  }
}
@media screen and (min-width: 850px) {
  .avatar {
    display: inline-block;
  }
}
/* Header styles end */

/* Font styles */
html {
  font-size: 18px;
}
.tagline {
  font-size: 1.3rem;
}
i, em {
  font-style: italic;
}
h1 {
  font-size: 2rem;
}
h3 {
  font-size: 1.2rem;
}
h3 a {
  text-decoration: none;
}
article, aside {
  line-height: 1.555555556;
}
.authorship, .pure-drawer {
  font-size: 0.888888889rem;
}
.dsq-comment-count {
  text-transform: uppercase;
  text-decoration: none;
}
[class^="icon-"], [class*=" icon-"] {
  text-decoration: none;
}
/* Font styles end */

.comments-link {
  text-align: right;
}
img, .tumblr_audio_player {
  max-width: 100%;
}
/* Responsive video embeds */
.video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}
.video iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}

aside {
  padding: 1rem 0 0.5rem;
}
.author-avatar, .asker-avatar {
  vertical-align: middle;
  border-radius: 50%;
  margin: 0 0.2rem 0 0.4rem;
}
.authorship p {
  position: relative;
  top: 0.1rem;
  margin: 0.5rem 0;
}
.authorship a {
  text-decoration: none;
}
.post-icon {
  margin: 2rem auto 0.5rem;
  text-align: center;
  display: block;
}
a.link {
  text-decoration: none;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  display: block;
  position: relative;
}
a.link:after {
  content:">";
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
}
pre {
  background: #fff;
  padding: 0.5rem;
}
input[type=search] {
  box-sizing: border-box;
  border-radius: 25px;
  color: #000;
  border: 0;
  box-shadow: none;
  padding: 0.1rem 0.75rem 0.1rem 1.75rem;
  width: 100%;
}
[type=search]:focus {
  outline: 0;
}
#search-form .icon-search {
  position: absolute;
  left: 0.5rem;
  top: 0.2rem;
  color: #000;
}

/* Pure Drawer custom styles */
.pure-drawer p {
  margin: 2rem 0;
  line-height: 1.75;
  padding: 1rem 0.3rem;
}
.pure-drawer h4 {
  margin-top: 3rem;
}
hr {
  width: 100%;
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #595958;
  margin: 1rem 0;
  padding: 0;
}
nav ul {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
}
nav a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
}
nav li {
  margin: 1rem 0 0 0.5rem;
}
nav li:first-of-type {
  margin-top: 0;
}
/* Pure Drawer custom styles end */

/* Post styles */
.share > a:link, .share > div {
  margin-left: 1rem;
  text-decoration: none;
}
.share a:link:first-child, .share > div:first-child {
  margin-left: 0;
}
.read_more_container, .permalink-container {
  text-align: right;
  position: absolute;
  right: 3.25%;
}
.read_more_container a, .permalink-container a {
  text-decoration: none;
  text-transform: uppercase;
}
/* Question*/
.question-row {
  display: flex;
  align-items: center;
  margin-top: 1.25rem;
}
.avatar-container {
  flex-grow: 0;
  margin-right: 15px;
}
.question {
  flex-grow: 100000;
  padding: 0.15rem 0.5rem;
  position: relative;
}
.question:after{
  border-width: 6px;
  border-style: solid;
  position: absolute;
  left: -12px;
  content: "";
  top: 50%;
  transform: translateY(-50%);
}

/* Ensures the PERMALINK link is not displayed if we have a READ MORE link*/
.read_more_container + .permalink-container {
  display: none;
}

@media screen and (min-width: 850px) {
  .post-icon {
    text-align: right;
    margin-top: 0.9rem;
  }
  .post-icon.icon-text.titled {
    margin-top: 1.65rem;
  }
  .post-icon.icon-question {
    margin-top: 1.67rem;
  }
  .read_more_container, .permalink-container {
    text-align: right;
    position: absolute;
    right: 13%;
  }
}
@media screen and (min-width: 1500px) {
  .read_more_container, .permalink-container {
    right: 7.5%;
  }
}

.tag { background: #fff; }
/* Post styles end */

/* Pagination styles */
ul.pagination {
  display: inline-block;
  list-style-type: none;
  padding: 0.2rem;
  width: 100%;
  position: relative;
}
.pagination li {
  display: inline-block;
}
.pagination.row {
  text-align: center;
}
.pagination a {
  text-decoration: none;
  display: inline-block;
  background:
}
.pagination a, .current-page {
  padding: 1rem;
}
li.jump-page, li.current-page {
  display: none;
}
.prev {
  float: left;
}
.next {
  float: right;
}
@media screen and (min-width: 850px) {
  li.jump-page {
    display: inline;
  }
  li.current-page {
    display: inline-block;
  }
  .pagination a, .current-page {
    padding: 0 0.4rem 0.1rem;
  }
}
/* Pagination styles end*/

/* Displays only the first of each call-to-action */
.store, .prerelease, .follow {
  display: none;
  color: #fff;
}
.store, .prerelease {
  text-align: left;
}
.store:first-child, .prerelease:first-child, .follow:first-child {
  display: block;
}

.store-links a, .prerelease-links a {
  display: block;
  color: #fff;
}

.store-links, .prerelease-links {
  text-align: center;
}

/* Social links styling */
.social-links a {
  padding: 0.2rem;
  background: #1A1919;
  color: #fff;
  text-decoration: none;
  border-radius: 50%;
  font-size: 1.5em;
  display: inline-block;
  min-width: 1.5em;
  text-align: center;
}
.social-links a + a {
  margin-left: 0.75rem;
}
.social-links span {
  position: relative;
  top: 0.12em;
}

/* Workaround for custom Tumblr like button */
/* http://stackoverflow.com/a/21715659/800492 */
.custom-like-button {
  position: relative;
  display: block;
  float: left;
  width: 22px;
  height: 20px;
  cursor: pointer;
  top: 3px;
}
.like_button {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 10;
}
.like_button iframe {
  width: 100% !important;
  height: 100% !important;
}
.custom-button {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
/* Custom like button hover and active states */
.like_button:hover + .custom-button:before, .share span:hover, .share label:hover {
  opacity: 0.75;
}
.like_button.liked + .custom-button:before, .like_button:hover.liked + .custom-button:before, .social-share-toggle:checked + label, .share a:active span {
  opacity: 1;
}