livingstyleguide 1.0.2 → 1.0.3

data/website/source/style/components/_markdown.md

@@ -1,23 +0,0 @@
-Markdown
-========
-
-
-```
-@haml
-***.markdown***
-  :markdown
-    # Big Headline
-
-    ## Medium Headline
-
-    Lorem ipsum dolor **sit amet,** consectetur adipiscing elit.
-    Aenean porta, `nunc at pulvinar porta`, erat lorem congue magna,
-    sit amet egestas ante erat in neque. _Suspendisse_ vitae sapien
-    et ante feugiat [posuere vitae](#) sit amet urna. Suspendisse
-    vestibulum elit nulla, id venenatis enim ultricies quis.
-
-    * List item
-    * Another list item
-    * Last list item
-```
-

data/website/source/style/components/_markdown.sass

@@ -1,52 +0,0 @@
-.markdown
-  @extend %text-align-left
-
-  h1
-    color: $turquoise
-    font-size: 3em
-    margin: 0 0 0.5em
-
-  h2
-    color: $pink
-    font-size: 2em
-    margin: 0 0 0.5em
-
-  p
-    margin: 0 0 0.75em
-
-  a
-    color: darken($turquoise, 20%)
-    display: inline
-
-    &:hover
-      color: darken($turquoise, 30%)
-
-  strong
-    @extend %display-inline
-    @extend %font-weight-bold
-
-  em
-    @extend %display-inline
-    @extend %font-style-italic
-
-  ul
-    margin: 0 0 0.75em
-
-    li
-      margin-left: 3em
-
-      &:before
-        background: $yellow
-        content: ""
-        height: 6px
-        margin: 0.35em 0 0 -0.9em
-        position: absolute
-        width: 6px
-        @include transform(rotateZ(45deg))
-
-  code
-    background: $yellow
-    display: inline
-    font-family: "courier new", courier, monospace
-
-

data/website/source/style/styles.sass

@@ -1,286 +0,0 @@
-@import "compass"
-@import "compass-placeholders"
-
-//// FONTS ////
-
-@include font-face("Gubia", font-files("GubiaLight.otf"), $weight: 200)
-@include font-face("Gubia", font-files("GubiaRegular.otf"), $weight: normal)
-@include font-face("Gubia", font-files("GubiaBold.otf"), $weight: bold)
-@include font-face("Gubia", font-files("GubiaBlack.otf"), $weight: 800)
-
-//// METRICS ////
-
-$grid: 4px
-$column-width: 45 * $grid
-$gap-width: 3 * $grid
-
-
-//// COLORS ////
-
-$white: white
-$black: black
-$gray: #7f7f7f
-$pink: #CA1F70
-$light-pink: #FFABC2
-$yellow: #FAFF8C
-$turquoise: #2EF1BD
-
-//// SPRITES ////
-
-$graphics-spacing: 5 * $grid
-@import "graphics/*.png"
-
-$graphics-2x-spacing: 10 * $grid
-@import "graphics-2x/*.png"
-
-.graphics-sprite
-  background-size: graphics-sprite-width(livingstyleguide)
-
-
-//// MIXINS ////
-
-@mixin for-phones
-  @media all and (max-width: 640px)
-    @content
-
-@mixin for-phones-portrait
-  @media all and (max-width: 480px)
-    @content
-
-@mixin for-phones-landscape
-  @media all and (min-width: 481px) and (max-width: 640px)
-    @content
-
-@mixin for-tablets
-  @media all and (min-width: 641px) and (max-width: 1024px)
-    @content
-
-@mixin for-tablets-portrait
-  @media all and (min-width: 641px) and (max-width: 768px)
-    @content
-
-@mixin for-tablets-landscape
-  @media all and (min-width: 769px) and (max-width: 1024px)
-    @content
-
-@mixin for-tablets-landscape-and-desktops
-  @media all and (min-width: 1024px)
-    @content
-
-@mixin for-desktops
-  @media all and (min-width: 1025px)
-    @content
-
-@mixin for-hires
-  @media only all and (-webkit-min-device-pixel-ratio: 1.3), only all and (min--moz-device-pixel-ratio: 1.3), only all and (-o-min-device-pixel-ratio: 1.3/1), only all and (min-device-pixel-ratio: 1.3), only all and (min-resolution: 1.3dppx)
-    @content
-
-
-//// RESET EVERYTHING ////
-
-*
-  border: none
-  border-collapse: collapse
-  border-spacing: 0
-  color: inherit
-  display: block
-  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: middle
-  @include box-sizing(border-box)
-
-
-head,
-script,
-style
-  display: none
-
-
-//// LAYOUT ////
-
-.layout
-  background: $white
-  color: $black
-  font-family: Gubia, "helvetica neue", helvetica, arial, sans-serif
-  font-size: 4 * $grid
-  line-height: 1.25
-  margin: 0 auto (5 * $grid)
-  text-align: center
-  -webkit-font-smoothing: antialiased
-  @include for-tablets-landscape-and-desktops
-    width: 5 * ($column-width + $gap-width)
-  @include for-tablets
-    margin-top: 20 * $grid
-  @include for-phones-landscape
-    margin-top: 28 * $grid
-  @include for-phones-portrait
-    margin-top: 34 * $grid
-
-
-//// HEADER ////
-
-.header--logo
-  display: block
-  margin-left: -32px
-  position: relative
-  @include graphics-sprite(livingstyleguide, $dimensions: true)
-
-
-.header--version
-  color: $gray
-  display: none
-  font-size: 1.5rem
-  font-weight: bold
-  position: absolute
-  right: -1em
-  top: 0
-  @include for-phones
-    right: 0
-    top: -1em
-
-
-.header--slogan
-  color: $light-pink
-  font-weight: bold
-  padding-top: 220px
-  margin: auto
-  width: 300px
-
-
-//// INSTALLATION ////
-
-.installation
-  color: $turquoise
-  font-family: "courier new", courier, monospace
-  font-size: 1.5rem
-  left: 550px
-  margin: 2em 0
-  position: absolute
-  text-align: left
-  top: 250px
-
-  &:before
-    color: mix($turquoise, $white, 30%)
-    content: ">"
-    margin: 1px 0 0 -1em
-    position: absolute
-
-
-//// LINKS ////
-
-.links
-  @extend %pie-clearfix
-
-
-.links--item
-  background: $yellow
-  color: $black
-  font-size: 24px
-  font-weight: bold
-  margin: floor($gap-width / 2)
-  text-align: left
-  padding: (5 * $grid) 0
-  position: relative
-  @include transition(all 0, background 0.2s)
-  @include for-tablets-landscape-and-desktops
-    background: transparent
-    float: left
-    height: $column-width
-    text-align: center
-    width: $column-width
-
-    &:hover
-      z-index: 5
-
-    &:after
-      background: $yellow
-      bottom: 0
-      content: ""
-      left: 0
-      position: absolute
-      right: 0
-      top: 0
-      z-index: -1
-      @include transform(rotateZ(45deg))
-      @include transition(transform, 0.15s)
-
-    &:hover:after
-      background: $turquoise
-      @include transform(rotateZ(-315deg))
-
-  &:before
-    content: ""
-    display: inline-block
-    margin-right: 3 * $grid
-    vertical-align: middle
-    z-index: 10
-    @include graphics-sprite(rubygems, $dimensions: true)
-    @include transition(transform, 0.15s)
-    @include for-hires
-      background-image: $graphics-2x-sprites
-    @include for-tablets-landscape-and-desktops
-      display: block
-      margin: 0 auto (5 * $grid)
-
-  &:hover:before
-    @include transform(rotateZ(360deg))
-
-  @each $name in github, issues, twitter, example-project
-    &.-#{$name}:before
-      @include graphics-sprite-position($name)
-
-
-
-
-//// FOOTER ////
-
-.footer
-  margin: (16 * $grid) 0
-
-
-.footer--made-in-berlin
-  display: inline-block
-  margin: 0 45px
-  opacity: 0.7
-  vertical-align: bottom
-  @include graphics-sprite(made-in-berlin, $dimensions: true)
-  @include transition(opacity, 0.2s)
-  @include hide-text
-  @include for-hires
-    background-image: $graphics-2x-sprites
-
-  &:hover
-    opacity: 1
-
-
-.footer--made-by-hagenburger
-  @extend .footer--made-in-berlin
-  @include graphics-sprite(hagenburger, $dimensions: true)
-
-
-.footer--contact
-  color: $gray
-  display: block
-  font-weight: normal
-  font-size: 1rem
-  letter-spacing: 1px
-  margin: (5 * $grid) auto 0
-  text-transform: uppercase
-  width: 10em
-  @include transition(color, 0.2s)
-
-  &:hover
-    color: $turquoise
-
-
-//// COMPONENTS ////
-
-@import "components/markdown"
-

data/website/source/styleguide.html.lsg

@@ -1,11 +0,0 @@
-source: style/styles.sass
-title: "The LivingStyleGuide’s Front-end Style Guide"
-style:
-  layout-selector: '".layout"'
-  color: $pink
-  base-font: 'Courier, "Courier New", monospace'
-  headline-font: 'Gubia, "Helvetica Neue", Helvetica, Arial'
-styleguide-sass: |
-  .livingstyleguide--example
-    @extend .layout
-