diff --git a/README.md b/README.md index f09a4fe..79c0c1a 100644 --- a/README.md +++ b/README.md @@ -24,5 +24,5 @@ The data model is simply the list of all `.jpg` files in `IMAGE_DIR` and its sub - [x] Write a faster `./extract-metadata.py` alternative - [x] Make a pretty index page - [x] Generate .webp thumbnails for index page +- [x] Make a mobile page - [ ] Make `make clean-dist` remove only unused photos (i.e. all photos in dist setminus photos that are supposed to be in dist) -- [ ] Make a mobile page diff --git a/extra/photo.css b/extra/photo.css index ab63818..963d2c4 100644 --- a/extra/photo.css +++ b/extra/photo.css @@ -18,9 +18,17 @@ body { .picture-frame { padding: 1em; background-color: #555; + /* for some reason this is required to make the img fit in the box */ + overflow: hidden; + + display: flex; + justify-content: center; + align-items: center; } .picture-frame img { + display: block; + margin: 0 auto; max-width: 100%; max-height: 100%; object-fit: contain; @@ -36,3 +44,10 @@ h1 { font-size: 1.5em; margin-top: 0; } + +@media (max-aspect-ratio: 16/9) { + .my-epic-layout { + grid-template-columns: 1fr; + grid-template-rows: 1fr auto; + } +} diff --git a/photo.hbs b/photo.hbs index 775b05a..b6822a2 100644 --- a/photo.hbs +++ b/photo.hbs @@ -9,9 +9,7 @@
-
- {{ path.name }} -
+
{{ path.name }}

{{ path.name }}

prev · next · up

@@ -20,7 +18,7 @@ exposure time {{ exif.ExposureTime.num }}⁄{{ exif.ExposureTime.denom }} s
aperture f{{ exif.FNumber.f64 }}
iso {{ exif.PhotographicSensitivity }}
- resolution {{ exif.PixelXDimension }}x{{ exif.PixelYDimension }} + resolution {{ exif.PixelXDimension }}×{{ exif.PixelYDimension }}