Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
tree: fa63fb9a27
Fetching contributors…

Cannot retrieve contributors at this time

247 lines (235 sloc) 6.561 kb
@import "compass";
@import "curled";
body {
font: medium Helvetica, sans-serif;
margin: 2em 4em;
}
h1, h2, h3 {
font-family: "Myriad Pro Condensed", "Gill Sans", "Lucida Grande", Helvetica, sans-serif;
font-weight: 100;
}
a:link, a:visited { color: darkblue }
a:hover, a:active { color: firebrick }
img { border: none }
header, footer { display: block; }
input.placeholder { color: gray; }
.no-inputsearch input[type=search] {
border: 1px solid silver;
padding: 3px 1em 2px 1em;
@include border-radius(10px);
width: 10em;
@include box-shadow(rgba(0,0,0,.2), 0px, 1px, 2px, 0, inset);
}
h1 {
color: #333;
img.avatar { width: 30px; height: 30px }
a:link, a:hover, a:active, a:visited { color: #555; font-weight: 400; text-decoration: none }
a:hover { text-decoration: underline }
}
header {
@include clearfix;
margin-bottom: 1em;
h1 {
margin-bottom: 0;
float: left;
+ form {
padding-top: 2em;
clear: none;
float: right;
text-align: right;
width: 20em;
input[type=search] { width: 10em; }
p { margin: 0; }
}
}
}
p.stats {
clear: both;
margin: 0; padding-top: .4em;
font-style: italic; font-size: 90%;
color: gray;
a.feed {
text-decoration: none;
&:link, &:visited { color: inherit; }
span { text-decoration: underline }
img { vertical-align: middle }
}
}
p.footnote {
font-style: italic; font-size: 80%; color: #aaa;
text-align: center; margin: 1.5em 0 1em 0;
}
article {
h1 + nav { margin-top: -1.1em; font-size: 90%; }
max-width: 40em;
}
form.detect {
padding: .1em 1em;
background: #f8f8f8;
label { font-weight: bold }
input[name=twitter] { font-size: 1.1em; width: 8em }
input[type=url] { font-size: 1.1em; width: 15em }
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 60px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
}
ol.tags {
clear: both;
font: 100 90% "Gill Sans", Helvetica, Arial, sans-serif;
margin: 0;
padding: .5em 0 1em 0;
list-style-type: none;
li {
margin: 0px;
padding: 0px;
display: inline;
span { font-size: 90%; }
}
a { text-decoration: none; }
a:hover { text-decoration: underline; }
&:before { content: "Tags: "; color: gray; }
}
$spinner-size: 40px;
#photos {
list-style: none;
padding: 0; margin: 0;
@include clearfix;
li {
display: inline;
.thumb {
display: block;
position: relative;
float: left; margin: 0 3px 3px 0;
img { display: block; }
}
&.active {
.thumb { display: none }
.full {
display: block !important;
padding: 15px;
color: #F7F4E9;
a { color: white }
.caption { padding-top: 1em; }
.close { margin-top: -1.15em; text-align: right; width: 480px }
}
}
&.pagination {
a {
display: block; height: 20px; padding: (150px - 20)/2 0; width: 150px;
text-align: center; float: left;
font-size: 80%; text-decoration: none;
span {
padding: .2em .7em .3em;
color: white; background: #bbb;
@include text-shadow(rgba(black, .4));
@include border-radius(16px);
white-space: nowrap;
}
}
a:hover {
background-color: #eee;
span { background-color: #999; }
}
}
h2 { font-size: 1.2em; margin: 0 0 .5em; }
.loading:after {
content: " ";
display: block;
width: $spinner-size; height: $spinner-size;
position: absolute;
top: (150px - $spinner-size) / 2; left: (150px - $spinner-size) / 2;
background: rgba(black, .7) url(/spinner.svg) no-repeat 50% 50%;
.no-svg & { background-image: url(/spinner.gif); }
@include border-radius(10px);
@include background-size($spinner-size/1.5 + "");
@include box-shadow(rgba(black, .7), 0, 0, 12px);
}
}
&.lightbox {
background: #3F3831;
li { display: none }
li.active { display: block }
}
}
footer {
font-size: 80%;
color: gray;
max-width: 45em;
margin: 2em auto;
border-top: 1px solid silver;
p { text-align: center; text-transform: uppercase; font-family: "Gill Sans", Helvetica, sans-serif; }
a:link, a:hover, a:active, a:visited { color: #444 }
}
$retina-thumb-size: 74px;
$retina-full-size: 306px;
$ipad-thumb-size: 130px;
$ipad-thumb-margin: (768px - (2 * 19) - (5 * $ipad-thumb-size)) / 5;
@media only screen and (device-width: 768px) {
body { margin: .8em 19px; }
h1 { margin: 0 0 .5em; padding: 0; }
header h1 + form { padding-top: .5em; }
p.stats { margin-top: -0.8em; margin-bottom: 1.2em }
#photos {
margin-left: -19px; padding-left: 19px;
li {
.thumb {
margin: 0 $ipad-thumb-margin $ipad-thumb-margin 0;
img {
max-width: $ipad-thumb-size; max-height: $ipad-thumb-size;
// @include curled;
}
}
.loading:after {
top: ($ipad-thumb-size - $spinner-size) / 2; left: ($ipad-thumb-size - $spinner-size) / 2;
}
&.pagination a { padding: ($ipad-thumb-size - 20)/2 0; width: $ipad-thumb-size; }
}
&.lightbox {
margin-left: 0; padding-left: 0;
}
}
article {
h1 { margin-top: 1.5em; }
margin: 0 auto;
}
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
body { font-size: small; margin: .8em 8px; }
h1 {
font-size: 22px; margin: 0 0 .5em; padding: 0;
span { display: none; }
img { max-width: 20px; max-height: 20px; }
}
header h1 + form {
display: none;
padding-top: 0;
width: auto;
margin-bottom: 1em;
}
p.stats { margin-top: -0.8em; margin-bottom: 1em }
#photos {
li .thumb { margin: 0 2px 2px 0; }
li.active {
.full {
padding: 0;
img { max-width: $retina-full-size; max-height: $retina-full-size; }
.caption { padding: .6em 1em; }
.close { width: auto; }
}
}
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
#photos {
li {
.thumb img {
max-width: $retina-thumb-size; max-height: $retina-thumb-size;
}
&.pagination a { padding: ($retina-thumb-size - 20)/2 0; width: $retina-thumb-size; }
.loading:after {
top: ($retina-thumb-size - $spinner-size) / 2; left: ($retina-thumb-size - $spinner-size) / 2;
@include background-size($spinner-size/2 + "");
}
}
}
}
Jump to Line
Something went wrong with that request. Please try again.