From 2cffbb0b1dd0450d4e1e50194cb86d302c5998c1 Mon Sep 17 00:00:00 2001 From: Aaron Gutierrez Date: Sun, 6 Feb 2022 11:33:38 -0800 Subject: [PATCH] video messaging, css improvements, image dimensions --- bench_template.html | 6 +++--- index.html | 9 ++++++--- pub.py | 15 +++++++++++---- site.css | 27 ++++++++++++++++++++++----- 4 files changed, 42 insertions(+), 15 deletions(-) diff --git a/bench_template.html b/bench_template.html index e270423..db92cb3 100644 --- a/bench_template.html +++ b/bench_template.html @@ -17,9 +17,9 @@

Towards the start of my time at Carnegie Mellon, I started taking - pictures of benches. It provided me an object to seek out; and seek - benches out I did. Since then, I've amassed a collection of photographs - from all over the world.

+ pictures of benches on walk around Pittsburgh. It provided me an subject + to seek out. Since then, I've amassed a collection of photographs from + all over the world.

All images CC BY-NC Aaron Gutierrez.

diff --git a/index.html b/index.html index 5cbb5c5..a52d0d7 100644 --- a/index.html +++ b/index.html @@ -10,11 +10,13 @@ +

Aaron Gutierrez

- Aaron

Engineering Manager @ Asana
@@ -48,8 +50,9 @@ Wufoo -

  • I've also worked on our - CSV importer and Asana +
  • I've also worked on video messaging, + our CSV importer, + and Asana Forms
    • diff --git a/pub.py b/pub.py index 32a00b9..3035671 100755 --- a/pub.py +++ b/pub.py @@ -5,6 +5,7 @@ import os import sys import subprocess from functools import cache +from PIL import Image import boto3 @@ -14,9 +15,9 @@ session = boto3.Session(profile_name='push') s3 = session.client('s3') -bench_fmt = """""" +bench_fmt = """""" -bench_view_ftm = """""" +bench_view_ftm = """""" TYPE_MAP = { 'asc': 'text/plain', @@ -108,7 +109,10 @@ def make_bench(): for i in range(1, num_imgs+1, 16): page = '' for j in range(i, min(num_imgs+1, i+16)): - page += bench_fmt.format(num_imgs + 1 - j) + 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) prev_pg = i//16 next_pg = i//16 + 2 @@ -129,7 +133,10 @@ def make_bench_view(idx, prev, nxt): with open('bench_view_template.html', 'r') as f: template = f.read() - body = bench_view_ftm.format(idx) + with Image.open('img/bench/{0:03d}.png'.format(idx)) as img: + width,height = img.size + + body = bench_view_ftm.format(idx, width, height) preview = "/img/bench/{0:03d}.780.jpg".format(idx) diff --git a/site.css b/site.css index d53fe01..ba916b9 100644 --- a/site.css +++ b/site.css @@ -1,14 +1,13 @@ -img#aaron { - width: 128px; - height: 128px; -} - body { max-width: 780px; margin: 0 auto; padding: 20px; } +:root { + --padding: 20px; +} + h1 { font-weight: normal; } @@ -23,6 +22,14 @@ footer { text-align: center; } +li, p { + line-height: 1.5; +} + +li { + margin-bottom: 1em; +} + .img-grid { display: flex; flex-wrap: wrap; @@ -33,12 +40,15 @@ footer { align-items: flex-end; display: flex; margin-bottom: 40px; + margin-bottom: var(--padding); max-height: min(calc(100vh - 80px), calc(100vw - 40px)); + max-height: min(calc(100vh - 80px), calc(100vw - var(--padding))); overflow: hidden; } .img-grid img { display: block; + height: 100%; margin-left: auto; margin-right: auto; max-width: 100%; @@ -51,6 +61,7 @@ footer { } .img-view img { + height: 100%; max-height: 100vh; max-width: 100%; } @@ -68,6 +79,12 @@ div.nav { } } +@media(min-width:820px) { + :root { + --padding: min(40px, calc((100vw - 820px) / 2 + 20px)); + } +} + @media(prefers-color-scheme: dark) { body { background: #333;