2 files changed, 107 insertions, 0 deletions
diff --git a/gal b/gal
new file mode 100755
index 0000000..8667376
--- /dev/null
+++ b/gal
@@ -0,0 +1,60 @@
+#!/bin/sh
+## Script for generating photo gallery website
+##
+## Usage:
+## $ ./gal [PHOTOS DIR] [OUTPUT DIR]
+
+## === Customize ===
+
+QUALITY=70
+THUMBNAIL_RESOLUTION=250
+RESOLUTION=1500
+
+## =================
+
+
+PHOTOS=$1
+OUTPUT=$2
+mkdir -p $2/{photos,thumbs}
+
+## Generate index.html menu file
+cp style.css $OUTPUT
+
+cat > $OUTPUT/index.html <<EOF
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width">
+    <title>Gallery</title>
+    <link rel="stylesheet" href="style.css" type="text/css" >
+  </head>
+  <body>
+    <div class="tiles">
+EOF
+
+
+for f in $PHOTOS/*.{jpg,JPG,jpeg,JPEG,png,PNG}; do
+  filename=$(basename $f)
+  [ -f $f ] && cat >> $OUTPUT/index.html <<EOF
+      <div class="tile">
+        <a href="photos/$filename">
+          <img src="thumbs/$filename" />
+        </a>
+      </div>
+EOF
+done
+
+cat >> $OUTPUT/index.html <<EOF
+    </div>
+  </body>
+</html>
+EOF
+
+## Optimize images
+
+for f in $PHOTOS/*.{jpg,JPG,jpeg,JPEG,png,PNG}; do
+  filename=$(basename $f)
+  [ -f $f ] && convert -auto-orient -strip -quality $QUALITY -resize x$RESOLUTION "$f" "$OUTPUT/photos/$filename" && \
+    convert -auto-orient -strip -quality $QUALITY -resize x$THUMBNAIL_RESOLUTION "$f" "$OUTPUT/thumbs/$filename"
+done
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..5f01a57
--- /dev/null
+++ b/style.css
@@ -0,0 +1,47 @@
+
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+}
+.tiles {
+  padding: 6vh 16vw;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: center;
+  position: relative;
+}
+.tile {
+  margin: 15px;
+  cursor: pointer;
+  overflow: hidden;
+  min-width: 120px;
+  min-height: 120px;
+  width: 18vw;
+  height: 18vw;
+}
+
+.tile img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 500ms ease;
+}
+
+.tile img:hover {
+  transform: scale(1.1);
+}
+
+@media only screen and (max-width: 420px) {
+  .tiles {
+    padding: 6vh 4vw;
+  }
+
+  .tile {
+    margin: 5px;
+    width: 44vw;
+    height: 44vw;
+  }
+}