diff --git a/generate.py b/generate.py index 9e99df2..ad43683 100644 --- a/generate.py +++ b/generate.py @@ -6,6 +6,7 @@ from markdown import markdown from glob import glob from json import dump, dumps, load from os import path +from subprocess import call import re numbers = re.compile("[0-9]+") @@ -109,7 +110,7 @@ def render_places(): with open("md/" + placename + ".md", "r") as f: md = markdown(f.read()) except FileNotFoundError: - md = "

No Story (Yet)

" + md = "" with open(working_path + "/index.html", "w") as f: f.write(template.render({ "count": count, @@ -120,6 +121,10 @@ def render_places(): "photos_json": photos_json })) +def copy_files(): + call("cp js/* html/js/", shell=True) + call("cp style.css html/style.css", shell=True) + if __name__ == "__main__": try: overwrite = "overwrite" in argv @@ -130,3 +135,4 @@ if __name__ == "__main__": exit() render_index() render_places() + copy_files() diff --git a/js/imgGallery.js b/js/imgGallery.js new file mode 100644 index 0000000..b9b10ea --- /dev/null +++ b/js/imgGallery.js @@ -0,0 +1,108 @@ +// `photos` variable populated by script tag in place page html +viewState = null; +galleryContainer = document.getElementById("galleryContainer"); +galleryImage = document.getElementById("galleryImage"); +previewLinks = document.getElementsByClassName("previewLink"); +headerImage = document.getElementById("headerImage"); + +touchDragStartX = null; +touchDragThreshold = 75; +touchDirection = null; +touchLock = false; + +function enlargeImage (filename) { + viewState = photos.indexOf(filename); + galleryImage.fullRes = filename; + galleryImage.src = "/compressed/compressed_" + filename; + galleryContainer.style.display = "block"; + headerImage.style.rotate = "none"; +}; + +function delGallery () { + galleryContainer.style.display = "none"; + galleryImage.src = ""; + headerImage.style.rotate = "-3deg"; +}; + +function nextImage () { + viewState++; + if (viewState == previewLinks.length) { + viewState = 0; + }; + galleryImage.fullRes = photos[viewState]; + galleryImage.src = "/compressed/compressed_" + photos[viewState]; +}; + +function prevImage () { + viewState--; + if (viewState == -1) { + viewState = previewLinks.length - 1; + }; + galleryImage.fullRes = photos[viewState]; + galleryImage.src = "/compressed/compressed_" + photos[viewState]; +}; + +function imageNewTab () { + window.open(galleryImage.fullRes, "_blank") +}; + +function keyHandler (event) { + if (event.key == "ArrowRight" | event.key == "Space") { + nextImage(); + } else if (event.key == "ArrowLeft") { + prevImage(); + } else if (event.key == "Escape" | event.key == "q") { + delGallery(); + } +}; + +function delGalleryHandler (event) { + if (event.target.id == "galleryContainer") { + delGallery(); + }; +}; + +function mouseUpHandler (event) { + console.log("mousedown"); + if (event.clientX > window.innerWidth / 2) { + nextImage(); + } else { + prevImage(); + }; +}; + +function onTouchMove (event) { + screenX = event.changedTouches[0].screenX; + if (!touchLock && touchDragStartX == null) { + touchDragStartX = screenX; + }; + touchDelta = Math.abs(touchDragStartX - screenX); + if (!touchLock && (touchDelta > touchDragThreshold)) { + touchDirection = touchDragStartX > screenX; + touchDragStartX = null; + touchLock = true; +}; +}; + +function onTouchEnd (event) { + touchLock = false; + touchDragStartX = null; + if (touchDirection == null) { + return; + }; + if (touchDirection) { + nextImage(); + } else { + prevImage(); + }; + touchDirection = null; +}; + +document.onkeydown = keyHandler; +document.body.onclick = delGalleryHandler; +galleryImage.addEventListener("mouseup", mouseUpHandler); +galleryImage.addEventListener("touchmove", onTouchMove); +galleryImage.addEventListener("touchend", onTouchEnd); +galleryImage.addEventListener("touchstart", function (event) { + event.preventDefault(); +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..2c48c77 --- /dev/null +++ b/style.css @@ -0,0 +1,284 @@ +body { + margin: 0px; + padding: 0px; + font-family: sans-serif; + background-color: #B3C8CF; +} + +.mainHeader { + background-image: url("/compressed/compressed_199.jpg"); + background-repeat: none; + background-size: cover; + background-position: center center; + height: 7em; + border-bottom: 2px solid #000; +} + +.title { + margin: 0px; + padding: 0px; + color: white; + text-shadow: 3px 3px black; + text-align: center; + font-size: 3em; + padding-top: 0.8em; + font-family: monospace; +} + +h1, h3 { + text-align: center; +} + +/* in-album image browser */ + +.galleryContainer { + display: none; + background-color: rgba(0, 0, 0 , 0.8); + width: 100%; + height: 100%; + position: fixed; + margin: 0px; + padding: 0px; +} + +.galleryImage { + display: block; + max-width: 100%; + max-height: 90%; + margin-left: auto; + margin-right: auto; +} + +.toolbar { + padding: 6px; + text-align: center; +} + +.toolbar > button { + color: white; + background-color: #222; + border: 2px solid #B3C8CF; + border-radius: 4px; +} + +/* in-album page */ + +.locationDisplay { + margin-top: 1em; + border-left: 0.2em solid black; + padding-left: 1em; +} + +.locationTitle { + display: block; + font-size: 2em; + /* color: white; + text-shadow: 2px 2px black; */ +} + +.locationState { + display: block; + font-size: 1.5em; + margin-left: 1em; +} + +.postBody { + color: #000; + font-size: 125%; + max-width: 1200px; + margin: auto; +} + +p > a, p > a:visited { + color: #50593a; +} + +p > a:hover { + color: #6f3763; +} + +.allphotos > a { + text-decoration: none; +} + +.headerImageContainer { + margin: auto; +} + +.headerImage { + margin: 1em; + border-radius: 1em; + max-width: 500px; + rotate: -3deg; + box-shadow: 4px 4px 10px black; +} + +.indexlink, .indexlink:visited { + font-size: 1.3em; + color: #007b88; +} + +.indexlink:hover { + color: white +} + +.photoCount { + text-align: center; +} + +/* index photos */ + +@keyframes scaleUp { + from {transform: scale(1);} + to {transform: scale(1.025);} +} + +.tocText { + font-size: 1.3em; + text-decoration: underline; +} + +.tocText:hover { + text-decoration: none; +} + +.tocLink, .tocLink:visited { + font-size: 1em; + color: #007b88; + line-height: 2.6ex; + margin-left: 1em; +} + +.tocLink:hover, .placeLink:hover { + color: #ffffff; + text-shadow: 1px 1px 1px #262219, 0 0 0.125em black; +} + +.photolinks { + text-align: center; +} + +.placeLink { + color: #FFF; + font-size: 145%; + text-shadow: 2px 2px #39464a; + text-decoration: underline; +} + +.mainImgContainer { + position: relative; + margin: 0.75em; +} + +.mainImgContainerTop { + box-sizing: border-box; + text-align: center; + position: absolute; + width: 100%; + top: 0px; + background-color: rgba(15, 15, 15 , 0.7); + border-top-right-radius: 0.5em; + border-top-left-radius: 0.5em; + padding: 0.5em; +} + +.mainImgContainerBottom { + box-sizing: border-box; + position: absolute; + bottom: 15px; + left: 10px; + font-size: 125%; + color: white; + background-color: rgba(15, 15, 15 , 0.7); + border-radius: 0.5em; + padding: 0.4em; +} + +.photolink > a > .mainImgContainer > img { + border-radius: 0.5em; + width: 100%; +} + +.photolink > a > .mainImgContainer:hover { + transform: scale(1.025); + animation-name: scaleUp; + animation-duration: 0.5s; +} + +@media only screen and (min-width: 650px) { + .mainBody { + max-width: 110em; + margin-left: auto; + margin-right: auto; + padding: 1em; + } + + .mainHeader { + margin: 1em; + border: 2px solid #000; + border-radius: 1em; + } + + .photolinks { + display: grid; + grid-template-columns: 50% 50%; + } + + .allphotos { + text-align: center; + } + + .allphotos > a > .preview { + margin: 0.5rem; + border-radius: 0.5em; + } +} + +@media only screen and (min-width: 1400px) { + .photolinks { + grid-template-columns: 33% 33% 33%; + } + + .placeLink { + font-size: 145%; + } +} + +@media only screen and (max-width: 650px) { + .allphotos { + text-align: center; + } + + .preview { + width: 31%; + height: 100%; + vertical-align: middle; + margin-bottom: 0.2em; + border-radius: 0.5em; + } + + .placeLink { + font-size: 150%; + } + + .mainBody { + margin-left: 1em; + margin-right: 1em; + padding-top: 1em; + } + + .galleryImage { + position: relative; + top: 45%; + transform: translateY(-45%); + } + + .headerImage { + max-width: 60%; + } + + .placeLink { + font-size: 125%; + } +} + diff --git a/templates/main b/templates/main index 1b54c97..2c433ce 100644 --- a/templates/main +++ b/templates/main @@ -17,33 +17,34 @@

-

Work in progress!

- This is going to be a photo blog. Right now its just a mess of undescribed photos. - A lot of photos have not been uploaded yet and work on CSS and choosing which images - are included here are underway. Come back later to see more pictures, descriptive - content and better CSS. +

Exploring America the Beautiful

+ This is an extensive collection of photos I have taken while traveling + across the United States. I have spent countless hours dedicated to + enjoying and capturing the natural wonders that surround us. These + photos and trips were made possible by the extensive efforts of + individuals across our nation, including people from state parks, + Bureau of Land Management, United States Forest Service, National Parks + Service, and more. I hope you enjoy these photos as much as I enjoyed + taking them.

-

A collection of {{ total_count }} photos in {{ album_count }} albums.

+

A collection of {{ total_count }} photos in {{ album_count }} albums.

Table of Contents -
{% for placename, info in metadata.items() %}
{{ info['title'] }}, {{ info['state'] }} [{{ info["count"] }}]
{% endfor %} -
Albums With Stories -
{% for placename in posts %}
{{ metadata[placename]['title'] }}, {{ metadata[placename]['state'] }}
{% endfor %} -
+

This work is licensed under CC BY-NC-SA 4.0


diff --git a/templates/place b/templates/place index 45c6b6b..cacc482 100644 --- a/templates/place +++ b/templates/place @@ -44,100 +44,12 @@ {% endfor %}
+

This work is licensed under CC BY-NC-SA 4.0

+