1 files changed, 203 insertions, 0 deletions
diff --git a/design/sass/_photos.scss b/design/sass/_photos.scss
new file mode 100644
index 0000000..664b892
--- /dev/null
+++ b/design/sass/_photos.scss
@@ -0,0 +1,203 @@
+// ##############################################
+// Photo Gallery pages
+// ##############################################
+
+// Add padding and create grid layout at various widths:
+.image-gallery--list {
+    @include constrain_wide;
+    margin-top: 3em;
+    li {
+        display: inline-block;
+        margin-bottom: 10px;
+    }
+}
+@include breakpoint(alpha) {
+    .first, .third {
+        padding-right: 10px;
+    }
+}
+@include breakpoint(gamma) {
+    .first, .third {
+        padding-right: 0;
+    }
+    .one {
+        padding-right: 6px;
+    }
+    .two {
+        padding-left: 6px;
+        padding-right: 6px;
+    }
+    .three {
+        padding-left: 6px;
+    }
+}
+@include breakpoint(delta) {
+    .one, .two, .three {
+        padding: 0;
+    }
+    .first {
+        padding-right: 6px;
+    }
+    .second, .third {
+        padding-left: 6px;
+        padding-right: 6px;
+    }
+    .fourth {
+        padding-left: 6px;
+    }
+}
+
+//########### GALLERY FIGURES AND CAPTIONS ################
+.image-gallery--figure {
+    position: relative;
+    margin: 0;
+    width: 280px;
+    .image-gallery--legend {
+        display: block;
+        @include transparent_class;
+        position: absolute;
+        left: 0;
+        bottom: 8px;
+        width: 100%;
+        background: $brown;
+        color: #999999;
+    }
+    h1 {
+        @include smcaps;
+        @include fontsize(13);
+        margin: 8px 0 4px 8px;
+        text-align: left;
+        color: white;
+    }
+    p {
+        @include fontsize(12);
+        margin: 8px 0 4px 8px;
+        padding-bottom: 6px;
+    }
+}
+
+.image-gallery--wrapper {
+    @include constrain_wide;
+    .figcaption {
+        background: lighten(#000, 12);
+        margin: -6px 0 0 0;
+        padding: 1em 1em .5em 1em;
+        border-radius: 0 0 0.5em 0.5em;
+        &:after {
+            content: " ";
+            display: table;
+            clear: both;
+        }
+    }
+    h6 a {
+        color: darken($body_font_light, 20); 
+        text-decoration: none;
+        font-family: sans-serif;
+    }
+    img { background: none; max-width: 100%; padding: 0;}
+}
+.directions {
+    color: darken($body_font_light, 35);
+    text-align: center;
+    @include fontsize(13);
+    margin-top: 3em;
+    display: none;
+}
+.caption { 
+    float: left;
+    font-family: sans-serif;
+    min-height: 32px;
+    padding-right: 1.5em;
+    @include breakpoint(beta) {
+        width: 50%;
+        border-right: darken($body_font_light, 45) 1px solid;
+        min-height: 55px;
+    }
+    @include breakpoint(gamma) {
+        width: 65%;
+        padding-right: 2.5em;
+    }
+    @include breakpoint(delta) {
+        width: 70%;
+    }
+}
+.figcaption--title, .figcaption--date {
+    float: left;
+    font-weight: normal;
+    line-height: 24px;
+    vertical-align: bottom;
+    margin: 0;
+    display: block;
+}
+.figcaption--title {
+    margin-right: 1em;
+}
+.figcaption--date {
+    margin-top: 4px;
+}
+.caption .map-link { 
+    @include smcaps;
+    @include fontsize(13);
+    float: right;
+    text-decoration: none;
+    padding: 7px 14px 5px;
+    background: lighten(#000, 18);
+    color: $body_font_light;
+    border-radius: 25px;
+    &:hover {
+        background: $orange;
+    }
+}
+.figcaption--desc {
+    @include fontsize(13);
+    padding-top: .5em;
+    margin-bottom: 0;
+    clear: left;
+    margin-left: 0;
+    text-align: left;
+}
+.photo-options {
+    float: right;
+    font-family: sans-serif;
+    p{
+        @include fontsize(13);
+        margin-top: 12px;
+        margin-bottom: 2px;
+        color: darken($body_font_light, 35);
+        &:first-of-type {
+            margin-top: 4px;
+        }
+    }
+    a { color: darken($body_font_light, 35);}
+}
+.photo-options, .caption .map-link {
+  display: none;
+}
+@include breakpoint(beta) {
+    .photo-options, .caption .map-link, .directions {
+        display: block;
+    }
+}
+
+
+//.figcaption {
+//  clear: both;
+//  background: #1a1713;
+//  -moz-border-radius: 0 0 0.5em 0.5em;
+//  -webkit-border-radius: 0 0 0.5em 0.5em;
+//  border-radius: 0 0 0.5em 0.5em;
+//  color: white;
+//  margin: -0.25em 0 0 0;
+//  padding: 1em 0 1em 0;
+//  z-index: 100;
+//}
+//
+//.caption {
+//  width: 100%;
+//  float: none;
+//  p {
+//    font: normal 0.75em Helvetica, Verdana, sans-serif;
+//    margin: 0.5em 0 0 0.75em;
+//    padding-bottom: 0.25em;
+//  }
+//}