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

Make index a bit nicer

Browse Source
This commit is contained in:
Paul Brinkmeier 2025-02-18 01:03:59 +01:00
parent a0f69fa82a
commit e3ed6a5089
4 changed files with 76 additions and 10 deletions

2
Makefile

@ -18,7 +18,7 @@ dist_images := $(addprefix $(DIST_DIR)/,$(image_names))
dist_thumbs := $(patsubst $(DIST_DIR)/%.jpg,$(THUMB_DIR)/%.webp,$(dist_images))
extra_files := $(wildcard extra/*)
dist_extra_files := $(extra_files:%=dist/%)
dist_extra_files := $(extra_files:%=$(DIST_DIR)/%)
define copy_image_rule =
$(DIST_DIR)/$(1): $(shell find $(IMAGE_DIR) -iname $(1))

57
extra/index.css

@ -5,4 +5,61 @@ html {
body {
margin: 0;
font-family: 'Source Sans Pro', sans-serif;
background-color: #f0f0f0;
}
h1 {
font-weight: normal;
margin-top: 0;
}
.download-button {
color: white;
text-decoration: none;
background-color: #6080ff;
padding: .5em;
border-radius: .5em;
}
.container {
margin: 2em auto;
width: 87em;
}
.photo-cards {
display: flex;
flex-wrap: wrap;
gap: 1em;
/* ul reset */
padding: 0;
}
.photo-card {
list-style: none;
padding: .5em;
box-shadow: 0 0 .5em rgba(0, 0, 0, 20%);
background-color: white;
}
.photo-card-wrapper {
display: block;
}
.photo-card-image {
}
.photo-card-image img {
width: 20em;
height: 15em;
object-fit: contain;
object-position: center;
}
.photo-card-label {
}
footer {
text-align: center;
}

17
index.hbs

@ -6,13 +6,22 @@
<link rel="stylesheet" href="./extra/index.css">
</head>
<body>
<a href="/all.zip">download all photos</a>
<ul>
<header class="container">
<h1>photo gallery</h1>
<a class="download-button" href="./all.zip">download all</a>
</header>
<ul class="container photo-cards">
{{#each index}}
<li>
<a href="/{{ path.distRelativeToRoot }}"><img src="/{{ path.thumbnailRelativeToRoot }}" loading="lazy" width=100></a>
<li class="photo-card">
<a class="photo-card-wrapper" href="./{{ path.distRelativeToRoot }}">
<div class="photo-card-image">
<img src="./{{ path.thumbnailRelativeToRoot }}" loading="lazy" width=100>
</div>
<div class="photo-card-label">{{ key }}</div>
</a>
</li>
{{/each}}
</ul>
<footer class="container">all photos © paul brinkmeier</footer>
</body>
</html>

10
photo.hbs

@ -8,16 +8,16 @@
<body>
<div class="my-epic-layout">
<div class="picture-frame">
<img src="{{ path.relativeToRoot }}" alt="{{ path.name }}">
<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>
<p><a href="./{{ navigation.previous }}">prev</a> · <a href="./{{ navigation.next }}">next</a> · <a href=".">up</a></p>
<p>{{ exif.datetime }}</p>
<p>
Exposure Time <strong>{{ exif.exposure_time }}s</strong><br>
Aperture <strong>f{{ exif.aperture_value }}</strong><br>
ISO <strong>{{ exif.photographic_sensitivity }}</strong>
exposure time <strong>{{ exif.exposure_time }}s</strong><br>
aperture <strong>f{{ exif.aperture_value }}</strong><br>
iso <strong>{{ exif.photographic_sensitivity }}</strong>
</p>
</div>
</div>