Radiquum/radiquum.github.io--photos
1
0
Fork 0
mirror of https://github.com/Radiquum/photos.git synced 2025-04-05 15:54:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat/generator: change columns on gallery container

Browse source
This commit is contained in:
Kentai Radiquum 2025-02-21 19:48:04 +05:00
parent 17d41b32d5
commit 50a473d417
Signed by: Radiquum
GPG key ID: 858E8EE696525EED
3 changed files with 84 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
generate/build.tsx
View file

@ -123,7 +123,7 @@ Object.keys(items).forEach((year) => {
const html = renderToString( const html = renderToString(
<Base isDev={ENVIRONMENT == "dev"}> <Base isDev={ENVIRONMENT == "dev"}>
<Header /> <Header />
<div className="container mx-auto p-4"> <div className="container mx-auto p-4 flex flex-col gap-4">
{Object.keys(items).sort().reverse().map((year) => ( {Object.keys(items).sort().reverse().map((year) => (
<YearPhotos <YearPhotos
year={year} year={year}

93
generate/static/css/tailwind.css
View file

@ -620,12 +620,36 @@
.grid-flow-row-dense { .grid-flow-row-dense {
grid-auto-flow: row dense; grid-auto-flow: row dense;
} }
.\[grid-template-columns\:repeat\(auto-fill\,minmax\(256px\,1fr\)\)\] {
grid-template-columns: repeat(auto-fill,minmax(256px,1fr));
}
.grid-cols-1 {
grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.grid-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.grid-cols-4 { .grid-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-columns: repeat(4, minmax(0, 1fr));
} }
.grid-cols-5 {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
.grid-cols-6 { .grid-cols-6 {
grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-columns: repeat(6, minmax(0, 1fr));
} }
.grid-cols-7 {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
.grid-cols-8 {
grid-template-columns: repeat(8, minmax(0, 1fr));
}
.flex-col {
flex-direction: column;
}
.items-center { .items-center {
align-items: center; align-items: center;
} }
@ -635,6 +659,9 @@
.gap-4 { .gap-4 {
gap: calc(var(--spacing) * 4); gap: calc(var(--spacing) * 4);
} }
.gap-8 {
gap: calc(var(--spacing) * 8);
}
.rounded-lg { .rounded-lg {
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
} }
@ -655,9 +682,6 @@
.object-cover { .object-cover {
object-fit: cover; object-fit: cover;
} }
.p-2 {
padding: calc(var(--spacing) * 2);
}
.p-4 { .p-4 {
padding: calc(var(--spacing) * 4); padding: calc(var(--spacing) * 4);
} }
@ -711,24 +735,69 @@
--tw-ease: var(--ease-out); --tw-ease: var(--ease-out);
transition-timing-function: var(--ease-out); transition-timing-function: var(--ease-out);
} }
.sm\:h-1\/2 { .sm\:\[grid-column\:span_2\] {
@media (width >= 40rem) { @media (width >= 40rem) {
height: calc(1/2 * 100%); grid-column: span 2;
} }
} }
.sm\:w-1\/2 { .sm\:\[grid-template-columns\:repeat\(auto-fill\,minmax\(256px\,1fr\)\)\] {
@media (width >= 40rem) { @media (width >= 40rem) {
width: calc(1/2 * 100%); grid-template-columns: repeat(auto-fill,minmax(256px,1fr));
} }
} }
.lg\:h-1\/3 { .md\:\[grid-column\:span_2\] {
@media (width >= 64rem) { @media (width >= 48rem) {
height: calc(1/3 * 100%); grid-column: span 2;
} }
} }
.lg\:w-1\/3 { .lg\:\[grid-column\:span_2\] {
@media (width >= 64rem) { @media (width >= 64rem) {
width: calc(1/3 * 100%); grid-column: span 2;
}
}
.lg\:grid-cols-3 {
@media (width >= 64rem) {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.lg\:grid-cols-4 {
@media (width >= 64rem) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.lg\:grid-cols-5 {
@media (width >= 64rem) {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
.xl\:\[grid-column\:span_2\] {
@media (width >= 80rem) {
grid-column: span 2;
}
}
.xl\:\[grid-template-columns\:repeat\(auto-fill\,minmax\(128px\,1fr\)\)\] {
@media (width >= 80rem) {
grid-template-columns: repeat(auto-fill,minmax(128px,1fr));
}
}
.xl\:\[grid-template-columns\:repeat\(auto-fill\,minmax\(200px\,1fr\)\)\] {
@media (width >= 80rem) {
grid-template-columns: repeat(auto-fill,minmax(200px,1fr));
}
}
.xl\:\[grid-template-columns\:repeat\(auto-fill\,minmax\(512px\,1fr\)\)\] {
@media (width >= 80rem) {
grid-template-columns: repeat(auto-fill,minmax(512px,1fr));
}
}
.xl\:grid-cols-7 {
@media (width >= 80rem) {
grid-template-columns: repeat(7, minmax(0, 1fr));
}
}
.xl\:grid-cols-8 {
@media (width >= 80rem) {
grid-template-columns: repeat(8, minmax(0, 1fr));
} }
} }
.xl\:text-3xl { .xl\:text-3xl {

4
generate/templates/YearPhotos.tsx
View file

@ -13,7 +13,7 @@ export default function YearPhotos({ year, images }: YearPhotosProps) {
</h2> </h2>
<div <div
className="grid grid-cols-6 grid-flow-row-dense gap-2" className="grid grid-cols-2 lg:grid-cols-5 xl:grid-cols-7 grid-flow-row-dense gap-2"
id={`gallery-${year}`} id={`gallery-${year}`}
data-type="gallery" data-type="gallery"
data-year={year} data-year={year}
@ -24,7 +24,7 @@ export default function YearPhotos({ year, images }: YearPhotosProps) {
<a <a
href={image.image} href={image.image}
className={`w-full h-full ${ className={`w-full h-full ${
aspectRatio < 0.95 ? "[grid-row:span_2] aspect-[1/2]" : aspectRatio > 1.05 ? "[grid-column:span_2] aspect-[2/1]" : "aspect-square" aspectRatio < 0.95 ? "" : aspectRatio > 1.05 ? "lg:[grid-column:span_2]" : "aspect-square"
}`} }`}
key={`${year}-${image.id}`} key={`${year}-${image.id}`}
data-slide-name={image.id} data-slide-name={image.id}