Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Tree: dad72b51fe
Fetching contributors…

Cannot retrieve contributors at this time

228 lines (187 sloc) 3.767 kB
$color-1: #444;
$color-2: gainsboro;
$color-3: #B32216;
$color-4: #999;
$color-5: white;
// Mixins
// ----------------------------------------
@mixin prefixer ($property, $value,
$webkit: true,
$moz: true,
$ms: true,
$o: true,
$spec: true) {
@if $webkit { -webkit-#{$property}: $value; }
@if $moz { -moz-#{$property}: $value; }
@if $ms { -ms-#{$property}: $value; }
@if $o { -o-#{$property}: $value; }
@if $spec { #{$property}: $value; }
}
// Base Styles
// ----------------------------------------
body {
border-top: 4px solid #AD141E;
}
header {
background: transparent url(logo.png) no-repeat 40px 20px;
margin: 30px auto 0px auto;
padding: 0 40px;
width: 1040px;
position: relative;
div.header-wrap {
border-bottom: 1px solid $color-2;
padding: 20px;
h1 {
padding-left: 80px;
a {
color: $color-1;
}
}
}
a.fork_me {
background: url(github.png) no-repeat;
padding-left: 25px;
position: absolute;
top: 0px;
right: 50px;
color: #000;
&:hover {
color: #AD141E;
}
}
}
div#main-wrap {
background: url(shadowing.png) no-repeat top center;
padding-top: 40px;
margin: 0 auto;
width: 1000px;
h2 {
margin-bottom: 50px;
}
}
a.new-friend {
background-color: $color-3;
color: $color-5;
font-weight: bold;
padding: .3em .6em;
&:hover {
background-color: lighten($color-3, 5%);
}
}
footer {
margin: 50px auto;
width: 1000px;
a {
color: $color-4;
border-bottom: 1px dotted;
}
p {
color: $color-4;
font: 400 12px helvetica neue, sans-serif;
font-size: 16px;
line-height: 24px;
margin-bottom: 24px;
margin-top: 10px;
text-align: center;
}
}
// Friend
// ----------------------------------------
section#friends {
font-size: 0;
}
div.friend {
display: inline-block;
font-size: 12px;
position: relative;
height: 200px;
width: 200px;
-webkit-perspective: 600px;
-moz-perspective: 600px;
a {
color: $color-1;
}
& > div {
left: 0;
position: absolute;
top: 0;
@include prefixer(transition, all .6s ease-in-out);
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-transform-style: preserve-3d;
-moz-backface-visibility: hidden;
}
&:hover {
div.front {
-webkit-transform: rotateY(180deg);
}
div.back {
z-index: 1000;
-webkit-transform: rotateY(0deg);
}
}
div.front {
z-index: 900;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
}
div.back {
background: $color-2;
@include prefixer(box-sizing, border-box);
padding: 20px;
height: 200px;
width: 200px;
position: absolute;
top: 0;
left: 0;
@include prefixer(transform, rotateY(-180deg));
z-index: 800;
}
span.friend-name {
font-size: 16px;
}
}
div.actions {
margin: 12px 0 0 0;
a {
@extend a.new-friend;
color: $color-5;
}
}
// Forms
// ----------------------------------------
input {
font-size: 16px;
padding: 5px 0;
}
input[type=text] {
border: 1px solid $color-4;
outline: none;
padding: 5px;
&:focus {
@include prefixer(box-shadow, inset 0 0 5px #ddd);
}
}
label {
display: inline-block;
width: 100px;
}
.field {
margin-bottom: 1.3em;
}
form {
.actions {
margin-left: 100px;
input[type=submit], a.button {
@extend a.new-friend;
border: none;
}
}
}
// Other
// ----------------------------------------
aside {
color: $color-4;
font-size: 10px;
margin-top: 16px;
}
Jump to Line
Something went wrong with that request. Please try again.