Merge branch 'master' of github.com:curtmerrill/sarahandcurt.us

.gitignore

@@ -2,3 +2,4 @@
 _site
 .sass-cache
 *.swp
+data/nc-photos.json

_sass/_base.scss

@@ -11,6 +11,10 @@ body {
     line-height: 1.5;
     font-weight: 300;
     color: #222;
+
+    &.no-scroll {
+        overflow:hidden;
+    }
 }
 
 

_sass/_photos.scss

@@ -0,0 +1,70 @@
+.gallery-img {
+    box-sizing: border-box;
+    width: 33.3%;
+    height: 100px;
+    float: left;
+    background-size: cover;
+    background-repeat: no-repeat;
+    position: relative;
+    border: 1px solid white;
+    overflow: hidden;
+    &:hover {
+        cursor: pointer;
+    }
+
+    @media screen and (min-width: 640px) {
+        width: 20%;
+        height: 150px;
+    }
+}
+
+.gallery-index {
+    background-color: $green;
+    padding: 0 8px;
+    color: white;
+    font-size: 2rem;
+    font-family: $slab;
+    font-weight: bold;
+    font-style: italic;
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-shadow: 2px 2px 3px rgba(60,60,60,.5);
+}
+
+.flickr-link {
+    display: block;
+    font-size: 1.2rem;
+    text-transform: uppercase;
+    font-weight: 400;
+}
+
+.lightbox {
+    box-sizing: border-box;
+    display: none;
+    position: fixed;
+    margin: 0;
+    padding: 2rem;
+    top: 0;
+    left: 0;
+    background: rgba(0,0,0,.8);
+    width: 100%;
+    height: 100%;
+    text-align: center;
+    color: white;
+    font-size: 1.5rem;
+    font-family: $sans;
+
+}
+
+.lightbox.is-visible {
+    display: block;
+}
+
+.lb-img {
+    width: auto;
+    height: auto;
+    max-width: 90%;
+    max-height: 80%;
+    border: 4px solid rgba(150,150,150, 1);
+}

css/main.scss

@@ -19,6 +19,7 @@ multiple Sass files for modifications.
     "site-footer",
     "cards",
     "pages",
+    "photos",
     "shame"
 ;
 

js/photos.js

@@ -0,0 +1,67 @@
+// Photos!
+// requires: jQuery, 
+
+(function(ph) {
+    ph(window.jQuery, window, document);
+    }(function($, window, document) {
+        // jQuery $ locally scoped
+
+        function buildImgElement(idx, obj) {
+            var newImg = $('<div></div>');
+            newImg.attr({
+                'class': 'gallery-img',
+                'data-img-src': obj['img_lg'],
+                'data-title': obj['title'],
+                'data-link': obj['flickr_url']
+            });
+
+            newImg.css({
+                'background-image': "url(" + obj['img_sm'] + ")"
+            });
+
+            newImg.append('<div class="gallery-index">'+(idx+1)+'</div>');
+
+            $('.js-photo-container').append(newImg);
+        }
+
+        function displayImg(element) {
+            var $lb = $('.lightbox');
+            var $img = $(element);
+            $lb.append('<img class="lb-img" src="' + $img.attr('data-img-src') + '">');
+            $lb.append('<figcaption>'+$img.attr('data-title')+'</figcaption>');
+            $lb.append('<a class="flickr-link" href="'+$img.attr('data-link')+'">View on Flickr</a>');
+            $('body').toggleClass('no-scroll');
+            $lb.toggleClass('is-visible');
+
+        }
+
+        function usePhotos(data) {
+            $.each(data, buildImgElement);
+            $('.gallery-img').click(function(e) {
+                displayImg(e.target);
+            });
+        }
+
+        $(function() {
+            $('body').append('<figure class="lightbox"></figure>');
+            $('.lightbox').click(function(e) {
+                $(this).toggleClass('is-visible');
+                $(this).html('');
+                $('body').toggleClass('no-scroll');
+            });
+
+
+            $.ajax({
+                url: '/data/nc-photos.json',
+                dataType: 'json',
+                success: usePhotos
+            });
+
+
+        });
+    })
+);
+
+
+
+

pages/90-days-in-nc.html

@@ -1,9 +1,13 @@
 ---
 layout: page
 title: 90 days in North Carolina
+scripts:
+    - /js/photos.js
 ---
 
 <div class="page-body">
-<p>We're in North Carolina</p>
-
+<p>We're living in North Carolina for about three months. While we're here, Sarah
+is embarking on a photo-a-day project. Keep an eye on her progress below:</p>
 </div>
+
+<div class="js-photo-container"></div>