paul/photomk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make photo page responsive

Browse Source
This commit is contained in:
Paul Brinkmeier 2025-02-20 14:18:00 +01:00
parent 5e1612774a
commit 753390f728
3 changed files with 18 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -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

15
extra/photo.css
View File

@ -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;
}
}

6
photo.hbs
View File

@ -9,9 +9,7 @@
</head>
<body>
<div class="my-epic-layout">
<div class="picture-frame">
<img src="./{{ path.relativeToRoot }}" alt="{{ path.name }}">
</div>
<div class="picture-frame"><img src="./{{ path.relativeToRoot }}" alt="{{ path.name }}"></div>
<div class="text-frame">
<h1>{{ path.name }}</h2>
<p><a href="./{{ navigation.previous }}">prev</a> · <a href="./{{ navigation.next }}">next</a> · <a href=".">up</a></p>
@ -20,7 +18,7 @@
exposure time <strong>{{ exif.ExposureTime.num }}⁄{{ exif.ExposureTime.denom }}</strong> s<br>
aperture <strong>f{{ exif.FNumber.f64 }}</strong><br>
iso <strong>{{ exif.PhotographicSensitivity }}</strong><br>
resolution <strong>{{ exif.PixelXDimension }}x{{ exif.PixelYDimension }}</strong>
resolution <strong>{{ exif.PixelXDimension }}×{{ exif.PixelYDimension }}</strong>
</p>
</div>
</div>