diff --git a/generate/static/css/tailwind.css b/generate/static/css/tailwind.css
index 1570671..a812576 100644
--- a/generate/static/css/tailwind.css
+++ b/generate/static/css/tailwind.css
@@ -524,12 +524,24 @@
.invisible {
visibility: hidden;
}
+ .absolute {
+ position: absolute;
+ }
.relative {
position: relative;
}
.static {
position: static;
}
+ .right-0 {
+ right: calc(var(--spacing) * 0);
+ }
+ .bottom-0 {
+ bottom: calc(var(--spacing) * 0);
+ }
+ .left-0 {
+ left: calc(var(--spacing) * 0);
+ }
.container {
width: 100%;
@media (width >= 40rem) {
@@ -629,9 +641,15 @@
.flex-col {
flex-direction: column;
}
+ .flex-row {
+ flex-direction: row;
+ }
.items-center {
align-items: center;
}
+ .gap-1 {
+ gap: calc(var(--spacing) * 1);
+ }
.gap-2 {
gap: calc(var(--spacing) * 2);
}
@@ -670,9 +688,31 @@
.bg-gray-800 {
background-color: var(--color-gray-800);
}
+ .bg-gradient-to-t {
+ --tw-gradient-position: to top in oklab;
+ background-image: linear-gradient(var(--tw-gradient-stops));
+ }
+ .from-black {
+ --tw-gradient-from: var(--color-black);
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+ }
+ .from-black\/75 {
+ --tw-gradient-from: color-mix(in oklab, var(--color-black) 75%, transparent);
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+ }
+ .to-transparent {
+ --tw-gradient-to: transparent;
+ --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+ }
+ .to-95\% {
+ --tw-gradient-to-position: 95%;
+ }
.object-cover {
object-fit: cover;
}
+ .p-2 {
+ padding: calc(var(--spacing) * 2);
+ }
.p-4 {
padding: calc(var(--spacing) * 4);
}
@@ -691,6 +731,9 @@
.py-2 {
padding-block: calc(var(--spacing) * 2);
}
+ .pt-8 {
+ padding-top: calc(var(--spacing) * 8);
+ }
.text-2xl {
font-size: var(--text-2xl);
line-height: var(--tw-leading, var(--text-2xl--line-height));
@@ -699,10 +742,23 @@
font-size: var(--text-sm);
line-height: var(--tw-leading, var(--text-sm--line-height));
}
+ .text-xs {
+ font-size: var(--text-xs);
+ line-height: var(--tw-leading, var(--text-xs--line-height));
+ }
.font-bold {
--tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
}
+ .text-gray-200 {
+ color: var(--color-gray-200);
+ }
+ .text-gray-300 {
+ color: var(--color-gray-300);
+ }
+ .text-gray-400 {
+ color: var(--color-gray-400);
+ }
.text-white {
color: var(--color-white);
}
@@ -722,6 +778,21 @@
.scrollbar-track-gray-900 {
--scrollbar-track: oklch(0.21 0.034 264.665);
}
+ .md\:flex-row {
+ @media (width >= 48rem) {
+ flex-direction: row;
+ }
+ }
+ .md\:items-center {
+ @media (width >= 48rem) {
+ align-items: center;
+ }
+ }
+ .md\:gap-2 {
+ @media (width >= 48rem) {
+ gap: calc(var(--spacing) * 2);
+ }
+ }
.lg\:\[grid-column\:span_2\] {
@media (width >= 64rem) {
grid-column: span 2;
@@ -732,6 +803,30 @@
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
+ .lg\:text-base {
+ @media (width >= 64rem) {
+ font-size: var(--text-base);
+ line-height: var(--tw-leading, var(--text-base--line-height));
+ }
+ }
+ .lg\:text-lg {
+ @media (width >= 64rem) {
+ font-size: var(--text-lg);
+ line-height: var(--tw-leading, var(--text-lg--line-height));
+ }
+ }
+ .lg\:text-sm {
+ @media (width >= 64rem) {
+ font-size: var(--text-sm);
+ line-height: var(--tw-leading, var(--text-sm--line-height));
+ }
+ }
+ .lg\:text-xl {
+ @media (width >= 64rem) {
+ font-size: var(--text-xl);
+ line-height: var(--tw-leading, var(--text-xl--line-height));
+ }
+ }
.xl\:grid-cols-7 {
@media (width >= 80rem) {
grid-template-columns: repeat(7, minmax(0, 1fr));
@@ -818,6 +913,48 @@
inherits: false;
initial-value: solid;
}
+@property --tw-gradient-position {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-gradient-from {
+ syntax: "<color>";
+ inherits: false;
+ initial-value: #0000;
+}
+@property --tw-gradient-via {
+ syntax: "<color>";
+ inherits: false;
+ initial-value: #0000;
+}
+@property --tw-gradient-to {
+ syntax: "<color>";
+ inherits: false;
+ initial-value: #0000;
+}
+@property --tw-gradient-stops {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-gradient-via-stops {
+ syntax: "*";
+ inherits: false;
+}
+@property --tw-gradient-from-position {
+ syntax: "<length-percentage>";
+ inherits: false;
+ initial-value: 0%;
+}
+@property --tw-gradient-via-position {
+ syntax: "<length-percentage>";
+ inherits: false;
+ initial-value: 50%;
+}
+@property --tw-gradient-to-position {
+ syntax: "<length-percentage>";
+ inherits: false;
+ initial-value: 100%;
+}
@property --tw-font-weight {
syntax: "*";
inherits: false;
diff --git a/generate/templates/YearPhotos.tsx b/generate/templates/YearPhotos.tsx
index 5b47eee..6f510ff 100644
--- a/generate/templates/YearPhotos.tsx
+++ b/generate/templates/YearPhotos.tsx
@@ -20,11 +20,19 @@ export default function YearPhotos({ year, images }: YearPhotosProps) {
>
{images.map((image) => {
const aspectRatio = image.width / image.height;
+ const date = new Date(image.date);
+ const fmtDate = `${date.getDate()}/${(date.getMonth() + 1)
+ .toString()
+ .padStart(2, "0")}/${date.getFullYear()}`;
return (
<a
href={image.image}
- className={`w-full h-full hidden ${
- aspectRatio < 0.95 ? "" : aspectRatio > 1.05 ? "lg:[grid-column:span_2]" : "aspect-square"
+ className={`w-full h-full hidden relative ${
+ aspectRatio < 0.95
+ ? ""
+ : aspectRatio > 1.05
+ ? "lg:[grid-column:span_2]"
+ : "aspect-square"
}`}
key={`${year}-${image.id}`}
data-slide-name={image.id}
@@ -47,6 +55,14 @@ export default function YearPhotos({ year, images }: YearPhotosProps) {
loading="lazy"
alt={image.alt}
/>
+ <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/75 to-95% to-transparent pt-8 p-2">
+ <div className="flex flex-col md:flex-row md:items-center md:gap-2 text-gray-200 text-xs lg:text-sm">
+ <div>
+ {image.width}x{image.height}
+ </div>
+ <div>{fmtDate}</div>
+ </div>
+ </div>
</a>
);
})}