spemer

div {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
}

spemer

// set default font-size

@function getRem($size) {
    $rem: $size / 16px;
    @return $rem * 1rem;
}

@mixin font-size($size) {
    font-size: $size;
    font-size: getRem($size);

spemer

$font-stack-code: Menlo, monospace, consolas;
$font-stack-article: 'Merriweather',serif;
$darkgrey: #656c7a;
$lightgrey: #e7e9ee;

.code-block {
  font: 100% $font-stack-code;
  color: $darkgrey;
  background-color: $lightgrey;
}

spemer

.code-block {
  font: 100% Menlo, monospace, consolas;
  color: #656c7a;
  background-color: #e7e9ee;
}

.article-par {
  font: 100% 'Merriweather',serif;
}

spemer

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie);
}

.normal {
  @include opacity(1); 
}

spemer

.normal {
  opacity: 1;
  filter: alpha(opacity=100);
}

.disabled {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

spemer

@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

spemer

h1 {
  font-size: 32px;
  font-size: 2rem;
}

p {
  font-size: 16px;
  font-size: 1rem;
}

spemer

nav {
  margin: 0 auto;
  ul {
    margin: 8px;
    padding: 0;
    list-style-type: disc;
  }

  li {
    font-size: 16px;

spemer

nav {
  margin: 0 auto; }
  nav ul {
    margin: 8px;
    padding: 0;
    list-style-type: disc; }
  nav li {
    font-size: 16px; }
  nav a {
    display: block;