style.scss

@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;
}

#login {
  display: inline-block;
  text-decoration: none;
  @include border-radius(5px);
  border: 1px solid silver;
  padding: .5em 1em;
  background: #ddd;
  color: black;
  text-shadow: rgba(white, .5) 1px 1px 1px;
  font-variant: small-caps;
  font-size: 1em;
  font-weight: 600;
  margin: 1.2em 1.5em;
  &:hover { background: #eee; color: darkblue }
}

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 + "");
      }
    }
  }
}