BIN
content/film/2025-06-17/000011750007.webp
Normal file
|
After Width: | Height: | Size: 903 KiB |
BIN
content/film/2025-06-17/000011750008.webp
Normal file
|
After Width: | Height: | Size: 426 KiB |
BIN
content/film/2025-06-17/000011750009.webp
Normal file
|
After Width: | Height: | Size: 1.1 MiB |
BIN
content/film/2025-06-17/000011750010.webp
Normal file
|
After Width: | Height: | Size: 1.4 MiB |
BIN
content/film/2025-06-17/000011750013.webp
Normal file
|
After Width: | Height: | Size: 968 KiB |
BIN
content/film/2025-06-17/000011750014.webp
Normal file
|
After Width: | Height: | Size: 890 KiB |
BIN
content/film/2025-06-17/000011750016.webp
Normal file
|
After Width: | Height: | Size: 1.1 MiB |
BIN
content/film/2025-06-17/000011750018.webp
Normal file
|
After Width: | Height: | Size: 1.0 MiB |
BIN
content/film/2025-06-17/000011750021.webp
Normal file
|
After Width: | Height: | Size: 1.1 MiB |
BIN
content/film/2025-06-17/000011750022.webp
Normal file
|
After Width: | Height: | Size: 877 KiB |
BIN
content/film/2025-06-17/000011750023.webp
Normal file
|
After Width: | Height: | Size: 927 KiB |
BIN
content/film/2025-06-17/000011750024.webp
Normal file
|
After Width: | Height: | Size: 1.0 MiB |
BIN
content/film/2025-06-17/000011750027.webp
Normal file
|
After Width: | Height: | Size: 820 KiB |
BIN
content/film/2025-06-17/000011750030.webp
Normal file
|
After Width: | Height: | Size: 1.2 MiB |
BIN
content/film/2025-06-17/000011750031.webp
Normal file
|
After Width: | Height: | Size: 442 KiB |
BIN
content/film/2025-06-17/000011760005.webp
Normal file
|
After Width: | Height: | Size: 416 KiB |
BIN
content/film/2025-06-17/000011760006.webp
Normal file
|
After Width: | Height: | Size: 617 KiB |
BIN
content/film/2025-06-17/000011760007.webp
Normal file
|
After Width: | Height: | Size: 532 KiB |
BIN
content/film/2025-06-17/000011760008.webp
Normal file
|
After Width: | Height: | Size: 492 KiB |
BIN
content/film/2025-06-17/000011760010.webp
Normal file
|
After Width: | Height: | Size: 574 KiB |
BIN
content/film/2025-06-17/000011760012.webp
Normal file
|
After Width: | Height: | Size: 1011 KiB |
BIN
content/film/2025-06-17/000011760013.webp
Normal file
|
After Width: | Height: | Size: 719 KiB |
BIN
content/film/2025-06-17/000011760014.webp
Normal file
|
After Width: | Height: | Size: 906 KiB |
BIN
content/film/2025-06-17/000011760018.webp
Normal file
|
After Width: | Height: | Size: 623 KiB |
BIN
content/film/2025-06-17/000011760021.webp
Normal file
|
After Width: | Height: | Size: 418 KiB |
BIN
content/film/2025-06-17/000011760022.webp
Normal file
|
After Width: | Height: | Size: 747 KiB |
BIN
content/film/2025-06-17/000011760023.webp
Normal file
|
After Width: | Height: | Size: 485 KiB |
BIN
content/film/2025-06-17/000011760024.webp
Normal file
|
After Width: | Height: | Size: 518 KiB |
BIN
content/film/2025-06-17/000011760026.webp
Normal file
|
After Width: | Height: | Size: 529 KiB |
BIN
content/film/2025-06-17/000011760029.webp
Normal file
|
After Width: | Height: | Size: 509 KiB |
BIN
content/film/2025-06-17/000011760030.webp
Normal file
|
After Width: | Height: | Size: 383 KiB |
BIN
content/film/2025-06-17/000011760032.webp
Normal file
|
After Width: | Height: | Size: 258 KiB |
36
content/film/2025-06-17/images.json
Normal file
@ -0,0 +1,36 @@
|
||||
{
|
||||
"images": [
|
||||
"000011750007.webp",
|
||||
"000011750008.webp",
|
||||
"000011750009.webp",
|
||||
"000011750010.webp",
|
||||
"000011750013.webp",
|
||||
"000011750014.webp",
|
||||
"000011750016.webp",
|
||||
"000011750018.webp",
|
||||
"000011750021.webp",
|
||||
"000011750022.webp",
|
||||
"000011750023.webp",
|
||||
"000011750024.webp",
|
||||
"000011750027.webp",
|
||||
"000011750030.webp",
|
||||
"000011750031.webp",
|
||||
"000011760005.webp",
|
||||
"000011760006.webp",
|
||||
"000011760007.webp",
|
||||
"000011760008.webp",
|
||||
"000011760010.webp",
|
||||
"000011760012.webp",
|
||||
"000011760013.webp",
|
||||
"000011760014.webp",
|
||||
"000011760018.webp",
|
||||
"000011760021.webp",
|
||||
"000011760022.webp",
|
||||
"000011760023.webp",
|
||||
"000011760024.webp",
|
||||
"000011760026.webp",
|
||||
"000011760029.webp",
|
||||
"000011760030.webp",
|
||||
"000011760032.webp"
|
||||
]
|
||||
}
|
||||
9
content/film/2025-06-17/index.smd
Normal file
@ -0,0 +1,9 @@
|
||||
---
|
||||
.title = "2025-06-17",
|
||||
.date = @date("2025-08-21"),
|
||||
.author = "Yadunand Prem",
|
||||
.layout = "film.shtml",
|
||||
.description = "Banff",
|
||||
.draft = false,
|
||||
---
|
||||
Film Rolls from banff
|
||||
9
content/film/index.smd
Normal file
@ -0,0 +1,9 @@
|
||||
---
|
||||
.title = "Film Archive",
|
||||
.date = @date("2025-08-21"),
|
||||
.author = "Yadunand Prem",
|
||||
.layout = "film-archive.shtml",
|
||||
.draft = false,
|
||||
---
|
||||
|
||||
Index of my film photos I've taken over the years. I didn't really want to post them on instagram, and posting them on my site made sense. However, I'm initially just embedding them into the container, I might think of hosting them externally.
|
||||
25
layouts/film-archive.shtml
Normal file
@ -0,0 +1,25 @@
|
||||
<extend template="base.shtml">
|
||||
<head id="head">
|
||||
<style>
|
||||
.date {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.title h3{
|
||||
margin-top: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body id="body">
|
||||
<h1 :text="$page.title"></h1>
|
||||
<div :html="$page.content()"></div>
|
||||
<div>
|
||||
<h2>Rolls</h2>
|
||||
<div :loop="$page.subpages()">
|
||||
<span class="date" :text="$loop.it.date.format('Year 2006')"></span>
|
||||
<a class="title" href="$loop.it.link()">
|
||||
<h3 :text="$loop.it.title"></h3>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
119
layouts/film.shtml
Normal file
@ -0,0 +1,119 @@
|
||||
<extend template="base.shtml">
|
||||
<head id="head">
|
||||
<style>
|
||||
#prev-next {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
figure {
|
||||
align-self: center;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.post {
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.image-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
grid-auto-rows: 150px;
|
||||
gap: 10px;
|
||||
margin-bottom: 40px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
@media (min-width: 480px) {
|
||||
.image-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
grid-auto-rows: 180px;
|
||||
gap: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.image-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
grid-auto-rows: 200px;
|
||||
gap: 15px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1200px) {
|
||||
.image-grid {
|
||||
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
.image-grid img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.image-grid img:hover {
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.image-grid a.portrait {
|
||||
grid-row: span 2;
|
||||
}
|
||||
|
||||
.film-container {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.film-container h1 {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const images = document.querySelectorAll('.image-grid img');
|
||||
images.forEach(img => {
|
||||
img.onload = function() {
|
||||
if (this.naturalHeight > this.naturalWidth) {
|
||||
this.parentElement.classList.add('portrait');
|
||||
}
|
||||
};
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</head>
|
||||
<body id="body">
|
||||
<div class="film-container">
|
||||
<h1 :text="$page.title"></h1>
|
||||
<div class="post" :html="$page.content()"></div>
|
||||
<div class="image-grid" :loop="$page.asset('images.json').ziggy().get('images')">
|
||||
<a href="$page.asset($loop.it).link()" target="_blank">
|
||||
<img src="$page.asset($loop.it).link()">
|
||||
</a>
|
||||
</div>
|
||||
<div id="prev-next">
|
||||
<div :if="$page.prevPage?()">
|
||||
<a href="$if.link()">
|
||||
←
|
||||
<span :text="$if.title"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div :if="$page.nextPage?()">
|
||||
<a href="$if.link()">
|
||||
<span :text="$if.title"></span>
|
||||
→
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
@ -25,6 +25,8 @@
|
||||
</ctx>
|
||||
•
|
||||
<a href="$site.asset('resume.pdf').link()">Resume</a>
|
||||
•
|
||||
<a href="$site.page('film').link()">Film</a>
|
||||
</nav>
|
||||
<super>
|
||||
<footer>
|
||||
|
||||