Proj: Massive design overhaul to simplify code

Cut out Sass syntax, deleted old CSS rules, changed HTML to use
fewer lists and more cascading instead of specific rules. Still requires
compiling with sass to strip comments and compress, but would in theory
work on its own.

Reduced CSS file size by 2/3

1 files changed, 521 insertions, 0 deletions

diff --git a/design/sassold/_photos.scss b/design/sassold/_photos.scss
new file mode 100644
index 0000000..95d6c45
--- /dev/null
+++ b/design/sassold/_photos.scss
@@ -0,0 +1,521 @@
+// ##############################################
+// 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: -10px;
+        width: 272px;
+        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: 2px;
+}
+.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;
+    }
+}
+.fig { position: relative;}
+.image-gallery--wrapper .map-container {
+    left: -3%;
+    background: url("/media/img/mapbg-black.png") no-repeat top left !important;
+    @include breakpoint(beta) {
+        left: 4%;
+    }
+    @include breakpoint(gamma) {
+        left: 22%;
+    }
+    @include breakpoint(delta) {
+        left: 34%;
+    }
+}
+
+.map-wrapper {
+    width: 400px;
+    height: 328px;
+    position: absolute;
+    bottom: 27px;
+    margin: 0px 0 0 44px;
+}
+
+.daily-figure {
+    figcaption {
+        max-width: 1432px;
+    }
+}
+
+//.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;
+//  }
+//}
+
+.circle-pic {
+    border-radius: 50%;
+    border: 3px solid #000;
+}
+#about-luxagraf .circle-pic {
+    float: left;
+    margin-left: -250px;
+}
+
+//lightbox stuff from https://github.com/felixhagspiel/jsOnlyLightbox/blob/master/css/lightbox.scss
+
+/**
+*   VARS
+**/
+
+// font-sizes
+$font-size-huge: 2.8em;
+$font-size-big: 2em;
+$font-size-medium: 1.4em;
+
+$def-color-1: #FFFFFF;
+$def-color-2: #B9CED2;
+
+$border-color-1: #9C9FA5;
+
+$def-font-color: #6c7176;
+$font-color-highlight: #A99929;
+$font-color-hover-1: #C3B919;
+
+$darkblue: #3F658B;
+@mixin prefixr($var, $val) {
+  -webkit-#{$var}: $val;
+  -moz-#{$var}: $val;
+  -o-#{$var}: $val;
+  -ms-#{$var}: $val;
+  $var: $val;
+}
+
+/* IE8 Stuff */
+.jslghtbx-ie8.jslghtbx {
+  background-image: url('../img/trans-bck.png');
+  display: none;
+  &.jslghtbx-active {
+    display: block;
+  }
+  .jslghtbx-contentwrapper > img {
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+    display: block;
+  }
+  .jslghtbx-contentwrapper.jslghtbx-wrapper-active > img {
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+  }
+}
+
+/* Main wrapper */
+.jslghtbx {
+  font-family: sans-serif;
+  overflow: auto;
+  visibility: hidden;
+  position: fixed;
+  z-index: 2;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0);
+  &.jslghtbx-active {
+    visibility: visible;
+    background-color: rgba(0, 0, 0, 0.85);
+  }
+}
+
+/* loading-animation */
+.jslghtbx-loading-animation {
+  margin-top: -60px;
+  margin-left: -60px;
+  width: 120px;
+  height: 120px;
+  top: 50%;
+  left: 50%;
+  display: none;
+  position: absolute;
+  z-index: -1;
+  & > span {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    border-radius: 20px;
+    margin: 5px;
+    background-color: #fff;
+    @include prefixr(transition, all .3s ease-in-out);
+    &.jslghtbx-active {
+      margin-bottom: 60px;
+    }
+  }
+}
+
+.jslghtbx.jslghtbx-loading .jslghtbx-loading-animation {
+  display: block;
+}
+
+.jslghtbx-nooverflow {
+  overflow: hidden !important; // prevent showing of scrollbars on prev/next
+}
+
+.jslghtbx-contentwrapper {
+  margin: auto;
+  visibility: hidden;
+  & > img {
+    background: #fff;
+    padding: .5em;
+    display: none;
+    height: auto;
+    margin-left: auto;
+    margin-right: auto;
+    opacity: 0;
+  }
+}
+
+.jslghtbx-contentwrapper.jslghtbx-wrapper-active {
+  visibility: visible;
+  & > img {
+    display: block;
+    opacity: 1;
+  }
+}
+
+/* Caption */
+.jslghtbx-caption {
+  display: none;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  max-width: 450px;
+  color: #fff;
+  text-align: center;
+  font-size: .9em;
+}
+
+.jslghtbx-active .jslghtbx-caption {
+  display: inline;
+  margin-right: 1em;
+}
+
+/* Animation Stuff */
+.jslghtbx-contentwrapper.jslghtbx-animate > img {
+  opacity: 0;
+}
+
+.jslghtbx-contentwrapper > img.jslghtbx-animate-transition {
+  @include prefixr(transition, opacity .2s ease-in-out);
+}
+
+.jslghtbx-contentwrapper > img.jslghtbx-animating-next {
+  opacity: 1;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+}
+
+.jslghtbx-contentwrapper > img.jslghtbx-animating-prev {
+  opacity: 1;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+}
+
+.jslghtbx-contentwrapper > img.jslghtbx-animate-init {
+  opacity: 1;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+}
+
+.jslghtbx-contentwrapper > img.jslghtbx-animate-transition {
+  cursor: pointer;
+}
+
+/* Controls */
+.jslghtbx-close {
+  position: fixed;
+  right: 23px;
+  top: 23px;
+  margin-top: -4px;
+  font-size: 2em;
+  color: $def-color-1;
+  cursor: pointer;
+  @include prefixr(transition, all .3s ease-in-out);
+  &:hover {
+    text-shadow: 0 0 10px #fff;
+  }
+  @media screen and(max-width: 1060px) {
+    font-size: 1.5em;
+  }
+}
+
+.jslghtbx-next,
+.jslghtbx-prev {
+  display: none;
+  position: fixed;
+  top: 50%;
+  max-width: 6%;
+  max-height: 250px;
+  cursor: pointer;
+  @include prefixr(transition, all .2s ease-in-out);
+  &.jslghtbx-active {
+    display: block;
+  }
+  & > img {
+    width: 100%;
+  }
+
+}
+
+.jslghtbx-next {
+  right: .6em;
+  &.jslghtbx-no-img:hover {
+    border-left-color: #787878;
+  }
+  @media screen and(min-width: 451px) {
+    right: .6em;
+    &.jslghtbx-no-img {
+      border-top: 20px solid transparent;
+      border-bottom: 20px solid transparent;
+      border-left: 20px solid #FFF;
+    }
+  }
+  @media screen and(max-width: 600px) {
+    &.jslghtbx-no-img {
+      right: 5px;
+      padding-left: 0;
+      border-top: 60px solid transparent;
+      border-bottom: 60px solid transparent;
+      border-left: 15px solid #FFF;
+    }
+  }
+  @media screen and(max-width: 450px) {
+    right: .2em;
+    padding-left: 20px;
+  }
+}
+
+.jslghtbx-prev {
+  left: .6em;
+  &.jslghtbx-no-img:hover {
+    border-right-color: #787878;
+  }
+  @media screen and(min-width: 451px) {
+    left: .6em;
+    &.jslghtbx-no-img {
+      border-top: 20px solid transparent;
+      border-bottom: 20px solid transparent;
+      border-right: 20px solid #FFF;
+    }
+  }
+  @media screen and(max-width: 600px) {
+    &.jslghtbx-no-img {
+      left: 5px;
+      padding-right: 0;
+      border-top: 60px solid transparent;
+      border-bottom: 60px solid transparent;
+      border-right: 15px solid #FFF;
+    }
+  }
+  @media screen and(max-width: 450px) {
+    left: .2em;
+    padding-right: 20px;
+  }
+}
+
+.jslghtbx-thmb {
+  @media screen and(min-width: 451px) {
+    margin: 1em;
+  }
+  @media screen and(max-width: 450px) {
+    margin: 1em 0;
+  }
+  padding: 2px;
+  max-width: 100%;
+  max-height: 140px;
+  cursor: pointer;
+  box-shadow: 0px 0px 3px 0px #000;
+  @include prefixr(transition, all .3s ease-in-out);
+  &:hover {
+    box-shadow: 0px 0px 14px 0px #000;
+  }
+}
+
+.p-link {
+    color: white !important;
+    @include fontsize(14);
+    &:after {
+        content: "\2197";
+    }
+}