Schnitzelpress 0.3.0 Theme SCSS Preview

theme.scss

@import 'schnitzelstyle';
@include grid;
@include buttons;

/* variables! */
$font: 15px "Helvetica Neue",Arial,Helvetica,sans-serif;
$font-title: 15px Verdana,Arial,Helvetica,sans-serif;
$font-monospaced: 13px Menlo,Monaco,"Lucida Console",monospace;

$color-background: #fff;
$color-text: #222;
$color-extra: #4EA4EC;
$color-link: complement($color-extra);
$color-footer: rgba($color-text, 0.4);

/* useful mixins */
@mixin when-sized-medium { @include when-narrower-than(730px) { @content }}
@mixin when-sized-small  { @include when-narrower-than(480px) { @content }}
@mixin floaty-title($fg, $bg) {
  display: inline-block;
  padding: 5px 10px 4px 10px;

  color: $fg;
  background-color: $bg;
  border-bottom: 1px solid mix($color-text, $bg, 10%);

  a {
    color: $fg;
    border: none;
    text-decoration: none;
    &:hover { color: $fg }
  }
}

/* reset margins */
*:first-child { margin-top: 0; }
*:last-child  { margin-bottom: 0; }

/* let's do this! */
body {
  @include box-model(border-box);
  background: url(/img/background.png) $color-background;
  color: $color-text;
  font: $font;
}

.container {
  width: 650px;
  margin: 0 auto;
  padding: 40px 0;

  @include when-sized-medium {
    width: 100%;
    padding: 40px;
  }
  @include when-sized-small {
    font-size: 85%;
    padding: 10px;
    margin: 0;
  }
}

.container>header {
  color: $color-extra;
  font: $font-title;
  font-size: 130%;

  .site-title {
    @include floaty-title($color-background, $color-extra);
    font-size: 200%;
    font-weight: bold;
  }

  p {
    line-height: 140%;
    a { color: $color-text; }
  }
}

.container>footer {
  font: $font-title;
  @include small-type;
  margin-top: 100px;
  text-align: right;
  color: $color-footer;
}

.container>section, .container>article {
  margin-top: 2em;
  text-align: justify;
  text-justify: newspaper;
  line-height: 150%;

  header {
    margin-bottom: 1em;
  }
  footer {
    @include small-type;
    color: $color-footer;
    font-weight: bold;
    a {
      text-decoration: none;
      &:hover { text-decoration: underline };
    }
  }
  h1,h2,h3,h4,h5,h6 {
    font: $font-title;
    font-weight: bold;
  }
  h1,h2 {
    @include floaty-title(rgba($color-text, 0.8), rgba($color-text, 0.15));
  }
  h1 {
    font-size: 130%;
    text-transform: uppercase;
  }
  blockquote {
    color: rgba($color-text, 0.6);
    border-left: 5px solid rgba($color-text, 0.1);
    margin-left: 0;
    padding-left: 1em;
    font-style: italic;
  }
  img {
    max-width: 100%;
  }
  .code>pre {
    font: $font-monospaced;
    padding: 0.5em;
    line-height: 120%;
    overflow: scroll;
  }

  /* media embeds */
  .embedded {
    position: relative;
    width: 100%;
    height: 0 !important;
    padding-bottom: 56.25%;
    overflow: hidden;

    &.soundcloud { height: 165px !important; padding-bottom: 0; }
    &.vimeo { padding-bottom: 56%; }
    &.youtube { padding-bottom: 61%; }

    iframe, object, embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
  }

  /* embedded tweets */
  .twp-container {
    margin: 1.5em auto;
  }
}

article.post {
  .body {
    a {
      text-decoration: none;
      border-bottom: 2px solid $color-link;
    }
  }
}

div.pagination {
  margin: 2em 0;
  a { @include button($color-link) }
}