From a68c37f0b766a59d75b28776ae52bfbc41e82192 Mon Sep 17 00:00:00 2001
From: luxagraf <sng@luxagraf.net>
Date: Thu, 25 Oct 2018 19:04:21 +0000
Subject: fixed a bug in lightbox js, used defered loading for scripts

---
 design/sass/_photos.scss  | 506 ++++++++++++++++++++++++++++++++++++++++++++++
 design/sass/screenv9.scss |   1 +
 2 files changed, 507 insertions(+)
 create mode 100644 design/sass/_photos.scss

(limited to 'design/sass')

diff --git a/design/sass/_photos.scss b/design/sass/_photos.scss
new file mode 100644
index 0000000..d152bf4
--- /dev/null
+++ b/design/sass/_photos.scss
@@ -0,0 +1,506 @@
+// ##############################################
+// 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: 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;
+}
+
+//.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;
+//  }
+//}
+
+//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";
+    }
+}
diff --git a/design/sass/screenv9.scss b/design/sass/screenv9.scss
index d2adb37..7144000 100644
--- a/design/sass/screenv9.scss
+++ b/design/sass/screenv9.scss
@@ -13,3 +13,4 @@
 @import "_map.scss";
 @import "_src.scss";
 @import "_resume.scss";
+@import "_photos.scss";
-- 
cgit v1.2.3-70-g09d2