sass/styles.scss
/*

  ____\/\\\_________/\\\____/\\\\\\\\\\\\______
  ____\/\\\_______ /\\\____/\\\/////////\\_____
  ____\//\\\______/\\\____\//\\\______\///_____
  _____\//\\\____/\\\______\////\\\____________
  ______\//\\\__/\\\__________\////\\\_________
  _______\//\\\/\\\______________\////\\\______
  ________\//\\\\\________/\\\______\//\\\_____
  _________\//\\\________\///\\\\\\\\\\\/______
  __________\///__________\////////////________

  TITLE:    Styles for MQtest.io
  AUTHOR:   @viljamis
  VERSION:  0.3

*/

@import "compass/css3";
@import "reset.scss";

// Mixins
@mixin box-sizing {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

@mixin image-replacement {
  text-indent: -9999px;
  overflow: hidden;
  display: block;
}

@mixin disable-select {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@mixin prevent-bleed {
  -moz-background-clip: padding;
  -webkit-background-clip: padding;
  background-clip: padding-box;
}

// Colors
$color-white: #fff;
$color-blue: #103642;
$color-blue-alt: #3ca5ca;
$color-blue-alt2: #0e455a;
$color-black: #06202a;

// Type
$font-default: "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-proxima: "proxima-nova", sans-serif;

/* BASE
--------------------------------------------- */

@-ms-viewport { width: device-width }
@viewport { width: device-width }

html {
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: $color-black;
  min-width: 220px;
}

body {
  font: normal percentage(16/16)/1.3 $font-default;
  font-size: percentage(16/16);
  margin: 7% auto;
  color: $color-white;
  max-width: 800px;
  width: 87%;
}

.wrapper {
  position: relative;
}

h1,h2,h3 {
  -moz-font-feature-settings: "liga=1, kern=1";
  -ms-font-feature-settings: "liga" 1, "kern" 1;
  text-rendering: optimizeLegibility;
}

h1 {
  margin-bottom: 1.2em;
  font-size: 1.125em;
  font-weight: 900;
  line-height: 1;
  a { text-decoration: none !important; }
}

h2 {
  font: 800 1.75em/1.125 $font-proxima;
  color: $color-white;
  margin-bottom: 0;
}

#info {
  @include transition(height .5s ease);
  @include hyphens(manual);
  margin: 1em 0 .3em;
  line-height: 1.3;
  &.closed { display: none }
  &.opened { display: block }
}

#view-info {
  background: transparent url("../img/info-1x.png") no-repeat top right;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  @include image-replacement;
  position: absolute;
  height: 44px;
  width: 44px;
  top: -1px;
  right: 0;
  &:hover { opacity: .8 }
  &:active { opacity: .6 }
}

@media screen and (-webkit-min-device-pixel-ratio: 1.3),
screen and (min--moz-device-pixel-ratio: 1.3),
screen and (-o-min-device-pixel-ratio: 2/1),
screen and (min-device-pixel-ratio: 1.3),
screen and (min-resolution: 192dpi),
screen and (min-resolution: 2dppx) {
  #view-info {
    background-image: url("../img/info-2x.png");
    @include background-size(23px 23px !important);
  }
}

h3 {
  @include border-top-radius(6px);
  @include box-sizing;
  background: $color-blue-alt2;
  font-weight: 800;
  font-size: 1em;
  line-height: 1;
  margin: 2em 0 0;
  border-bottom: 0;
  padding: 1em;
  width: 100%;
}

button {
  font: bold percentage(16/16)/1 $font-default;
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
  background: $color-blue-alt;
  @include background-image(linear-gradient($color-blue-alt, darken($color-blue-alt, 10%) 100%));
  @include border-radius(6px);
  @include disable-select;
  @include prevent-bleed;
  color: $color-white;
  padding: 1em 0 1.1em;
  margin: 1.5em 0 0;
  cursor: pointer;
  width: 100%;
  border: 0;
  &:hover {
    background: darken($color-blue-alt, 10%);
    @include background-image(linear-gradient(darken($color-blue-alt, 5%), darken($color-blue-alt, 15%) 100%));
    }
  &:active { background: darken($color-blue-alt, 20%) }
}

#iterations {
  font-weight: normal;
  display: inline;
}

#useragent {
  background: lighten($color-black, 3%);
  border: 1px solid $color-blue-alt2;
  @include border-bottom-radius(6px);
  @include prevent-bleed;
  @include box-sizing;
  width: 100%;
  padding: 1em;
  margin: 0;
}

#respondList,
.aspect-ratio,
.query,
.test-styles {
  display: none;
}

ul {
  background: lighten($color-black, 3%);
  border: 1px solid $color-blue-alt2;
  @include border-bottom-radius(6px);
  @include prevent-bleed;
  @include box-sizing;
  li {
    border-bottom: 1px solid $color-blue-alt2;
    @include box-sizing;
    padding: 1em;
    width: 100%;
    margin: 0;
    &:last-child,
    &.query,
    &.resolution { border: 0 }
  }
  b { float: right }
}

ul,p { margin-bottom: 1em }
b { font-weight: bold }
.nosupport { display: block }
#orientation:before { content: "unsupported" }

a {
  text-decoration: none;
  color: $color-blue-alt;
  &:hover { text-decoration: underline; }
}

.footer {
  font-size: percentage(14/16);
  @include hyphens(manual);
  line-height: 1.4;
  padding-bottom: 1em;
  margin-top: 2em;
  width: 100%;
}

/* TESTS
--------------------------------------------- */
@media only all {
  #respondList { display: block }
  .nosupport { display: none }
}

@media (orientation: portrait) {
  #orientation:before { content: "portrait" }
  .orientation { display: block }
}

@media (orientation: landscape) {
  #orientation:before { content: "landscape" }
  .orientation { display: block }
}

/* SCALE
--------------------------------------------- */
@media screen and (min-width: 42em) {
  body { font-size: percentage(18/16) }
}

@media screen and (min-width: 54em) {
  body { margin: 4.5em auto 2em }
  h2 { font-size: 2.25em }
}

@media screen and (max-width: 18em) {
  h2 { font-size: 1.5em }
  body { font-size: percentage(12/16) }
}
