mirror of
https://github.com/Radiquum/photos.git
synced 2025-04-05 07:44:31 +00:00
feat/generator: add date to images
This commit is contained in:
parent
165e68b9f4
commit
aa8bcbb209
GPG key ID:
858E8EE696525EED
2 changed files with 155 additions and 2 deletions
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
);
|
||||
})}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue