@charset “utf-8”;

$spacing-unit: 10px; $image-size: 50px; $icon-size: 15px; $link-color: #444;

$on-palm: 768px;

// Use media queries like this: // @include media-query($on-palm) { // .wrapper { // padding-right: $spacing-unit / 2; // padding-left: $spacing-unit / 2; // } // } @mixin media-query($device) {

@media screen and (max-width: $device) {
    @content;
}

}

code.highlighter-rouge {

padding: 0;
padding-top: 0.2em;
padding-bottom: 0.2em;
margin: 0;
font-size: 85%;
background-color: rgba(0,0,0,0.04);
border-radius: 3px;

}

aside {

padding-right: 15px;

}

.t-hackcss { // Main prefix to avoid collisions

&-body-large {
  font-size: 1.25em;
  line-height: 1.4;
  h1 {
    font-size: 2em;
    font-weight: bold;
    margin: 0.67em 0;
    &:after {
      bottom: 7px;
    }
  }
  h2 {
    font-size: 1.5em;
    font-weight: bold;
    margin: 0.83em 0;
  }
  h3 {
    font-size: 1.17em;
    font-weight: bold;
    margin: 1.75rem 0;
  }
  a {
    color: $link-color;
    border-bottom: 1px solid $link-color;
    &:hover {
      color: white;
      background: $link-color;
    }
  }
  p {
    margin: 1.75rem 0;
  }
  ul,
  ol {
    display: block;
    list-style-type: none;
    padding-left: 20px;
    margin: 1.75rem 0;
    & ul {
      margin: .75rem 0;
      list-style-type: none;
    }
  }
  ol {
    list-style-type: none;
  }
  li {
    display: list-item;
    padding-left: 0;
    &:after {
      left: -16px;
    }
  }
  blockquote {
    font-size: 1.17em;
    margin: 1.75rem 0;
    padding-left: 20px;
  }
  pre {
    margin: 1.75rem 0;
    white-space: pre;
  }
  em {
    font-size: 1.25rem;
    font-style: italic;
  }
  strong {
    font-size: 1.25rem;
    font-style: bold;
  }

  hr {
    border: 0;
    height: 1px;
    display: block;
    background-color: #e2e2e2;
    margin: 1.75rem 0;
  }
}

// navigation.html

&-navigation {
  padding-right: $spacing-unit;
}

@at-root .hack &-navigation-heading {
  padding-top: 20px;
}

// footer.html

@at-root body &-footer {
  padding-bottom: $spacing-unit;
}

&-social {
  display: inline-block;
}

&-social + &-social {
  padding-left: $spacing-unit;
}

&-sm-reversed-grid.grid {
  @include media-query($on-palm) {
    flex-direction: column-reverse;
  }
}

&-icon {
  display: inline-block;
  vertical-align: middle;
  width: $icon-size;
  height: $icon-size;

  > svg {
    width: $icon-size;
  }
}

// examples.html

&-media {
  margin-bottom: 1.25rem;
}

&-media-shift {
  max-width: $image-size;
}

&-media-image {
  display: block;
  max-width: 100%;
  height: auto;
}

&-cards {
  flex-wrap: wrap;
  @include media-query($on-palm) {
    flex-wrap: nowrap;
  }
}

&-cards-cell {
  padding-bottom: $spacing-unit;
  padding-right: $spacing-unit;
}

&-cards-text {
  margin: 0
}

&-cards-image {
  display: block;
  max-width: 50%;
  height: auto;
  margin: 0 auto;
}

&-cards-link {
  text-align: center;
}

}