From aa8bcbb209ab4756b2e4240976b1f6437e44e5e7 Mon Sep 17 00:00:00 2001 From: Kentai Radiquum Date: Sat, 22 Feb 2025 00:38:21 +0500 Subject: [PATCH] feat/generator: add date to images --- generate/static/css/tailwind.css | 137 ++++++++++++++++++++++++++++++ generate/templates/YearPhotos.tsx | 20 ++++- 2 files changed, 155 insertions(+), 2 deletions(-) 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: ""; + inherits: false; + initial-value: #0000; +} +@property --tw-gradient-via { + syntax: ""; + inherits: false; + initial-value: #0000; +} +@property --tw-gradient-to { + syntax: ""; + 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: ""; + inherits: false; + initial-value: 0%; +} +@property --tw-gradient-via-position { + syntax: ""; + inherits: false; + initial-value: 50%; +} +@property --tw-gradient-to-position { + syntax: ""; + 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 ( ); })}