quotation-marks 0.1.0 → 0.1.1

data/website/source/css/styles.css.scss

@@ -0,0 +1,650 @@
+@charset "utf-8";
+
+@import "compass";
+@import "compass-placeholders";
+@import "quotation-marks";
+@import "github-badge";
+
+@import "github-buttons";
+
+
+//// SPRITES ////
+
+$logos-spacing: 70px;
+$logos-align: 50%;
+@import "logos/*.png";
+
+
+//// METRICS ////
+
+$page-width: 600px;
+
+
+//// COLORS ////
+
+$black: black;
+$white: white;
+$gold: #E0CD80;
+
+//// RESET ////
+
+* {
+  border: none;
+  border-collapse: collapse;
+  border-spacing: 0;
+  color: inherit;
+  display: inline;
+  font-size: inherit;
+  font-style: inherit;
+  font-weight: inherit;
+  line-height: inherit;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  text-align: inherit;
+  text-decoration: none;
+  vertical-align: baseline;
+  @include box-sizing(border-box);
+}
+
+head,
+script,
+style {
+  display: none;
+}
+
+
+//// EXTENDABLES ////
+
+%block {
+  display: block;
+  margin: auto;
+  max-width: $page-width;
+}
+
+%headline-font {
+  font-family: "ambroise-firmin-std", serif;
+}
+
+
+//// LAYOUT ////
+
+.layout {
+  background: white;
+  font-family: "tablet-gothic", sans-serif;
+  font-size: 14px;
+}
+
+
+//// HEADER ////
+
+@include keyframes(header--name-before) {
+  0%, 19% {
+    text-indent: 0;
+    width: 56px;
+    @include transform(rotateZ(0deg));
+  }
+  20%, 39% {
+    color: $gold;
+    text-indent: 0;
+    @include transform(rotateZ(-180deg) translateY(-15px));
+  }
+  39.2% {
+    color: $white;
+    @include transform(rotateZ(-180deg) translateY(-15px));
+  }
+  39.8% {
+    color: $white;
+    @include transform(rotateZ(-180deg) translateY(-48px));
+  }
+  40%, 59% {
+    color: $gold;
+    text-indent: -0.35em;
+    @include transform(rotateZ(-180deg) translateY(-48px));
+  }
+  60%, 79% {
+    color: $gold;
+    text-indent: -0.35em;
+    width: 56px;
+    @include transform(rotateZ(0deg) translateY(6px));
+  }
+  79.2%, 79.8% {
+    color: $white;
+  }
+  80%, 100% {
+    color: $gold;
+    text-indent: -28px;
+    width: 28px;
+    @include transform(rotateZ(0deg));
+  }
+}
+
+@include keyframes(header--name-after) {
+  0%, 19% {
+    width: 19px;
+    @include transform(rotateZ(0deg));
+  }
+  20%, 39% {
+    color: $gold;
+    text-indent: 0;
+    @include transform(rotateZ(180deg) translateX(3px) translateY(3.5px));
+  }
+  39.2% {
+    color: $white;
+    @include transform(rotateZ(180deg) translateX(3px) translateY(3.5px));
+  }
+  39.8% {
+    color: $white;
+    @include transform(rotateZ(180deg) translateX(-3px) translateY(-43px));
+  }
+  40%, 59% {
+    color: $gold;
+    text-indent: -0.35em;
+    @include transform(rotateZ(180deg) translateX(-3px) translateY(-43px));
+  }
+  60%, 79% {
+    color: $gold;
+    text-indent: -0.35em;
+    width: 19px;
+    @include transform(rotateZ(0deg) translateY(1px));
+  }
+  79.2%, 79.8% {
+    color: $white;
+  }
+  80%, 99.8% {
+    color: $gold;
+    text-indent: 0;
+    width: 9px;
+    @include transform(rotateZ(0deg));
+  }
+}
+
+.header {
+  @extend %block;
+  @extend %headline-font;
+  padding: 50px 0;
+  text-align: center;
+}
+
+.header--name {
+  background: inline-image("sass.svg") no-repeat center;
+  display: inline-block;
+  font-size: 50px;
+  letter-spacing: 1.7px;
+  position: relative;
+  white-space: nowrap;
+
+  @media all and (max-width: #{$page-width}) {
+    line-height: 120px;
+    white-space: normal;
+  }
+
+  &::before {
+    color: $gold;
+    content: "“»";
+    font-size: 150px;
+    overflow: hidden;
+    position: absolute;
+    right: 100%;
+    white-space: nowrap;
+    width: 56px;
+    @include animation(header--name-before 20s infinite);
+
+    @media all and (max-width: #{$page-width}) {
+      display: none;
+    }
+  }
+
+  &::after {
+    color: $gold;
+    content: "”«";
+    left: 100%;
+    overflow: hidden;
+    position: absolute;
+    top: 52%;
+    white-space: nowrap;
+    width: 19px;
+    @include transform-origin(10px, 18px);
+    @include animation(header--name-after 20s infinite);
+
+    @media all and (max-width: #{$page-width}) {
+      display: none;
+    }
+  }
+}
+
+.header--logo-image {
+  @extend %display-none;
+}
+
+.header--name-word {
+  @extend %display-inline-block;
+
+  &::first-letter {
+    font-size: 150px;
+    margin-right: -0.01em;
+  }
+
+  &:first-child::first-letter {
+    margin-right: -0.03em;
+  }
+}
+
+.header--slogan {
+  display: block;
+  font-size: 12px;
+  letter-spacing: 3px;
+  margin: -1.9em 0 0 -0.07em;
+  text-transform: uppercase;
+}
+
+
+.header--version,
+.header--version-container {
+  &,
+  &:before,
+  &:after {
+    background: inherit;
+    content: "";
+    height: 60px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 60px;
+    z-index: -1;
+  }
+
+  &:before {
+    @include transform(rotate(15deg));
+  }
+
+  &:after {
+    @include transform(rotate(-15deg));
+  }
+}
+
+.header--version {
+  background: $gold;
+  color: $black;
+  left: 50%;
+  margin-left: 300px;
+  top: 20px;
+  z-index: 2;
+  @include transform(rotate(-45deg));
+
+  @media all and (max-width: 778px) {
+    left: auto;
+    right: 30px;
+  }
+
+  &:hover {
+    background: $black;
+    color: $gold;
+  }
+}
+
+.header--version-container {
+  z-index: 3;
+  @include transform(rotate(45deg));
+}
+
+.header--version-changelog,
+.header--version-title,
+.header--version-current {
+  display: block;
+  margin: 0.2rem 0 -1rem;
+  position: relative;
+  z-index: 4;
+}
+
+.header--version-current {
+  font-size: 2.5rem;
+}
+
+.header--version-changelog {
+  display: none;
+
+  .header--version:hover & {
+    @extend %display-block;
+  }
+}
+
+.header--version-title {
+  .header--version:hover & {
+    @extend %display-none;
+  }
+}
+
+
+//// GITHUB BADGE ////
+
+.github-badge {
+  @include github-badge(
+    $background: $black,
+    $backside-background: darken($gold, 10%),
+    $text-color: $gold !important,
+    $backside-text-color: $black !important
+  );
+
+  @media all and (min-width: #{$page-width + 1px}) {
+    position: fixed;
+  }
+
+  span {
+    @extend %headline-font;
+    letter-spacing: 1px;
+    padding-bottom: 6px;
+    @include box-shadow(none);
+  }
+}
+
+
+//// DOCUMENTATION ////
+
+.documentation {
+  background: $gold;
+  display: block;
+  padding: 100px 0;
+}
+
+.documentation--container {
+  @extend %block;
+}
+
+
+//// MARKDOWN ////
+
+.markdown {
+  h1,
+  h2,
+  h3,
+  p,
+  pre,
+  ul,
+  ol {
+    display: block;
+    margin: 0 0 0.75rem;
+  }
+
+  strong {
+    @extend %font-weight-bold;
+  }
+
+  h1 {
+    font-size: 2rem;
+  }
+
+  h2 {
+    @extend %headline-font;
+    color: $white;
+    font-size: 2.5rem;
+    letter-spacing: 0.1em;
+    margin: 5rem 0 1.5rem;
+    text-align: center;
+    text-transform: uppercase;
+
+    @media all and (max-width: #{$page-width}) {
+      font-size: 2rem;
+    }
+
+    &::before,
+    &::after {
+      background: mix($gold, $white, 80%);
+      content: "";
+      display: block;
+      height: 1px;
+      margin: 0.3rem auto;
+      width: 33%;
+    }
+  }
+
+  h1 + h2,
+  h2:first-child {
+    margin-top: 0;
+  }
+
+  h3 {
+    text-align: center;
+  }
+
+  p {
+    @media all and (max-width: #{$page-width}) {
+      padding: 0 0.5rem;
+    }
+  }
+
+  pre {
+    $border-width: 50px;
+    border: mix($black, $gold, 3%) solid;
+    border-width: 1px $border-width;
+    background: $white;
+    color: darken($gold, 20%);
+    font-size: 0.75rem;
+    margin: 0 (-$border-width) 0.75rem;
+    padding: 0.5rem;
+    position: relative;
+
+    @media all and (max-width: #{$page-width}) {
+      border-width: 1px 0;
+      font-size: 0.6rem;
+      margin: 0 0 0.75rem;
+      overflow-x: auto;
+      overflow-y: hidden;
+    }
+
+    &.-css {
+      background: $black;
+    }
+
+    &:before,
+    &:after {
+      background: inherit;
+      bottom: 0;
+      content: "";
+      position: absolute;
+      right: floor($border-width * -0.8);
+      top: 0;
+      width: floor($border-width * 0.8);
+      opacity: 0.1;
+
+      @media all and (max-width: #{$page-width}) {
+        display: none;
+      }
+    }
+
+    &:before {
+      left: floor($border-width * -0.8);
+    }
+  }
+}
+
+
+//// SYNTAX ////
+
+.markdown pre {
+  $color: #b965ba;
+  color: $color;
+
+  kbd {
+    display: block;
+    font-weight: bold;
+
+    &:before {
+      content: "> ";
+    }
+  }
+
+  em {
+    color: lighten($color, 10%);
+    display: inline;
+    font-style: normal;
+    font-weight: bold;
+    text-decoration: underline;
+    vertical-align: baseline;
+  }
+
+  b {
+    color: lighten($color, 20%);
+    display: inline;
+    font-weight: bold;
+    vertical-align: baseline;
+  }
+
+  i {
+    color: lighten($color, 30%);
+    display: inline;
+    vertical-align: baseline;
+  }
+
+  q {
+    color: lighten($color, 30%);
+    display: inline;
+    vertical-align: baseline;
+
+    &:before,
+    &:after {
+      content: "";
+    }
+  }
+
+  var {
+    display: inline;
+    text-decoration: underline;
+    vertical-align: baseline;
+  }
+}
+
+
+//// LANGUAGES ////
+
+.languages {
+  @extend %display-block;
+  @extend %text-align-center;
+}
+
+.languages--item {
+  background: $black;
+  color: $gold;
+  display: inline-block;
+  line-height: 38px;
+  margin-bottom: 4px;
+  width: 64px;
+  white-space: nowrap;
+  @include localized-quotation-marks(map-keys($quotation-marks));
+
+  &:before,
+  &:after {
+    color: $white;
+  }
+}
+
+
+//// OTHER PROJECTS ////
+
+.other-projects {
+  background: $black;
+  display: block;
+  padding: 50px 0;
+  text-align: center;
+
+  &:after {
+    @extend .logos-sprite;
+    $position: sprite-position($logos-sprites, madeinberlin);
+    background-position: nth($position, 1) (nth($position, 2) / 2);
+    background-size: 100px;
+    content: "";
+    display: block;
+    height: 28px;
+    margin: 50px auto;
+    width: 100px;
+  }
+}
+
+.other-projects--item {
+  @extend .logos-sprite;
+  background-size: 100px;
+  color: white;
+  display: inline-block;
+  margin: 20px;
+  padding-top: 110px;
+  text-align: center;
+  width: 170px;
+  opacity: 1;
+  @include transition(all, 0.1s);
+
+  @each $item in javascriptgrid, livingstyleguide, hagenburger {
+    &.-#{$item} {
+      $position: sprite-position($logos-sprites, $item, $offset-x: 50%);
+      background-position: nth($position, 1) (nth($position, 2) / 2);
+    }
+  }
+
+  &:hover {
+    @include transform(scale(1.1));
+  }
+}
+
+
+//// ABOUT ////
+
+.about {
+
+}
+
+.about--container {
+  @extend %block;
+  padding: 150px 0;
+}
+
+
+.about--title {
+  @extend %headline-font;
+  color: $gold;
+  display: block;
+  font-size: 2.5rem;
+  letter-spacing: 0.1em;
+  margin-bottom: 1.5rem;
+  text-align: center;
+  text-transform: uppercase;
+
+  &::before,
+  &::after {
+    background: mix($gold, $white, 20%);
+    content: "";
+    display: block;
+    height: 1px;
+    margin: 0.3rem auto;
+    width: 33%;
+  }
+}
+
+.about--photo {
+  margin: 0 -50px 0.75rem;
+  max-width: 700px;
+}
+
+.about--paragraph {
+  display: block;
+  margin: 0 0 0.75rem;
+  @include hyphens(auto);
+
+  a {
+    @extend %hover-link;
+    color: mix($gold, $black, 66%);
+  }
+}
+
+.about--gittip {
+  border: 1px mix($gold, $white) solid;
+  color: $gold;
+  display: block;
+  margin: 50px auto 0;
+  padding: 10px 30px;
+  text-align: center;
+  width: 66%;
+
+  iframe {
+    margin-top: 10px !important;
+  }
+}
+