Alignment for benches that isn't quite right

campaign/photo.html

@@ -25,7 +25,7 @@
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) {return;}
      js = d.createElement(s); js.id = id;
-     js.src = "http://connect.facebook.net/en_US/sdk.js";
+     js.src = "https://connect.facebook.net/en_US/sdk.js";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
 

pub.py

@@ -15,7 +15,7 @@ session = boto3.Session(profile_name='push')
 s3 = session.client('s3')
 
 
-bench_fmt = """<a href="/bench/view/{0}"><picture><source type="image/webp" media="(min-width: 780px)" srcset="/img/bench/{0:03d}.1560.webp 2x, /img/bench/{0:03d}.780.webp"><source type="image/webp" srcset="/img/bench/{0:03d}.780.webp 2x, /img/bench/{0:03d}.390.webp"><source type="image/jpeg" media="(min-width: 780px)" srcset="/img/bench/{0:03d}.1560.jpg 2x, /img/bench/{0:03d}.780.jpg"><source type="image/jpeg" srcset="/img/bench/{0:03d}.780.jpg 2x, /img/bench/{0:03d}.390.jpg"><img src="/img/bench/{0:03d}.780.jpg" width="{1}px" height="{2}px"></picture></a>"""
+bench_fmt = """<a href="/bench/view/{0}" class="{3}"><picture><source type="image/webp" media="(min-width: 780px)" srcset="/img/bench/{0:03d}.1560.webp 2x, /img/bench/{0:03d}.780.webp"><source type="image/webp" srcset="/img/bench/{0:03d}.780.webp 2x, /img/bench/{0:03d}.390.webp"><source type="image/jpeg" media="(min-width: 780px)" srcset="/img/bench/{0:03d}.1560.jpg 2x, /img/bench/{0:03d}.780.jpg"><source type="image/jpeg" srcset="/img/bench/{0:03d}.780.jpg 2x, /img/bench/{0:03d}.390.jpg"><img src="/img/bench/{0:03d}.780.jpg" width="{1}px" height="{2}px"></picture></a>"""
 
 bench_view_ftm = """<a href="/img/bench/{0:03d}.1560.jpg"><picture><source type="image/webp" media="(min-width: 780px)" srcset="/img/bench/{0:03d}.1560.webp 2x, /img/bench/{0:03d}.780.webp"><source type="image/webp" srcset="/img/bench/{0:03d}.780.webp 2x, /img/bench/{0:03d}.390.webp"><source type="image/jpeg" media="(min-width: 780px)" srcset="/img/bench/{0:03d}.1560.jpg 2x, /img/bench/{0:03d}.780.jpg"><source type="image/jpeg" srcset="/img/bench/{0:03d}.780.jpg 2x, /img/bench/{0:03d}.390.jpg"><img src="/img/bench/{0:03d}.780.jpg" width="{1}px" height="{2}px" class="{3}"></picture></a>"""
 
@@ -30,6 +30,17 @@ TYPE_MAP = {
     'webp': 'image/webp',
 }
 
+CENTER_BENCHES = [
+    113,
+    101,
+]
+
+TOP_BENCHES = [
+    103,
+    23,
+    16,
+]
+
 @cache
 def current_keys():
     print('Fetching existing keys in {}'.format(BUCKET))
@@ -114,7 +125,15 @@ def make_bench():
             idx = num_imgs + 1 - j
             with Image.open('img/bench/{0:03d}.png'.format(idx)) as img:
                 width,height = img.size
-            page += bench_fmt.format(idx, width, height)
+
+            if idx in CENTER_BENCHES:
+                class_name = "centered"
+            elif idx in TOP_BENCHES:
+                class_name = "top"
+            else:
+                class_name = ""
+
+            page += bench_fmt.format(idx, width, height, class_name)
 
         prev_pg = i//16
         next_pg = i//16 + 2

site.css

@@ -46,6 +46,14 @@ li {
 	overflow: hidden;
 }
 
+.img-grid a.centered {
+	align-items: center;
+}
+
+.img-grid a.top {
+	align-items: flex-start;
+}
+
 .img-grid img {
 	display: block;
 	height: 100%;