From 58e8e5d43ca79ea015098a46cbc6c31273d6eef6 Mon Sep 17 00:00:00 2001 From: Antonio De Lucreziis Date: Thu, 21 Nov 2024 22:52:05 +0100 Subject: [PATCH] chore: better gallery layout and astro image tags --- ...-luca.jpg => 001-cluster-fra-luca@4x3.jpg} | Bin ...-tastiera-2.jpg => 002-tastiera-2@3x4.jpg} | Bin ...-tastiera-1.jpg => 003-tastiera-1@4x3.jpg} | Bin ...ter-luca.jpg => 004-computer-luca@4x3.jpg} | Bin ...nt.jpg => 005-website-development@3x4.jpg} | Bin .../{006-pulizie.jpg => 006-pulizie@3x4.jpg} | Bin .../{007-porta.jpg => 007-porta@4x3.jpg} | Bin src/pages/index.astro | 46 ++++++++++++------ src/styles/components.scss | 43 ++++++++++++---- src/styles/pages.scss | 36 ++++++++------ 10 files changed, 86 insertions(+), 39 deletions(-) rename src/assets/gallery/{001-cluster-fra-luca.jpg => 001-cluster-fra-luca@4x3.jpg} (100%) rename src/assets/gallery/{002-tastiera-2.jpg => 002-tastiera-2@3x4.jpg} (100%) rename src/assets/gallery/{003-tastiera-1.jpg => 003-tastiera-1@4x3.jpg} (100%) rename src/assets/gallery/{004-computer-luca.jpg => 004-computer-luca@4x3.jpg} (100%) rename src/assets/gallery/{005-website-development.jpg => 005-website-development@3x4.jpg} (100%) rename src/assets/gallery/{006-pulizie.jpg => 006-pulizie@3x4.jpg} (100%) rename src/assets/gallery/{007-porta.jpg => 007-porta@4x3.jpg} (100%) diff --git a/src/assets/gallery/001-cluster-fra-luca.jpg b/src/assets/gallery/001-cluster-fra-luca@4x3.jpg similarity index 100% rename from src/assets/gallery/001-cluster-fra-luca.jpg rename to src/assets/gallery/001-cluster-fra-luca@4x3.jpg diff --git a/src/assets/gallery/002-tastiera-2.jpg b/src/assets/gallery/002-tastiera-2@3x4.jpg similarity index 100% rename from src/assets/gallery/002-tastiera-2.jpg rename to src/assets/gallery/002-tastiera-2@3x4.jpg diff --git a/src/assets/gallery/003-tastiera-1.jpg b/src/assets/gallery/003-tastiera-1@4x3.jpg similarity index 100% rename from src/assets/gallery/003-tastiera-1.jpg rename to src/assets/gallery/003-tastiera-1@4x3.jpg diff --git a/src/assets/gallery/004-computer-luca.jpg b/src/assets/gallery/004-computer-luca@4x3.jpg similarity index 100% rename from src/assets/gallery/004-computer-luca.jpg rename to src/assets/gallery/004-computer-luca@4x3.jpg diff --git a/src/assets/gallery/005-website-development.jpg b/src/assets/gallery/005-website-development@3x4.jpg similarity index 100% rename from src/assets/gallery/005-website-development.jpg rename to src/assets/gallery/005-website-development@3x4.jpg diff --git a/src/assets/gallery/006-pulizie.jpg b/src/assets/gallery/006-pulizie@3x4.jpg similarity index 100% rename from src/assets/gallery/006-pulizie.jpg rename to src/assets/gallery/006-pulizie@3x4.jpg diff --git a/src/assets/gallery/007-porta.jpg b/src/assets/gallery/007-porta@4x3.jpg similarity index 100% rename from src/assets/gallery/007-porta.jpg rename to src/assets/gallery/007-porta@4x3.jpg diff --git a/src/pages/index.astro b/src/pages/index.astro index 603e52f..a0331f9 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -2,10 +2,11 @@ import { getCollection } from 'astro:content' import PageLayout from '../layouts/PageLayout.astro' import { Content as WhatPhcContent, frontmatter as whatsPhcFrontmatter } from '../content/meta/whats-phc.md' +import { Image } from 'astro:assets' const news = await getCollection('news') -const galleryCollage = (await Astro.glob('@/assets/gallery/*.jpg')).map(({ default: { src } }) => src) +const galleryCollage = await Astro.glob('@/assets/gallery/*.jpg') --- @@ -117,19 +118,19 @@ const galleryCollage = (await Astro.glob('@/assets/gallery/*.jpg')).map(({ defau + -->
-
+
Logo Orario
Orario
@@ -234,11 +235,24 @@ const galleryCollage = (await Astro.glob('@/assets/gallery/*.jpg')).map(({ defau
{ - galleryCollage.map((src, i) => ( -
- {`gallery -
- )) + galleryCollage.map((module, i) => { + const src = module.default.src + const filename = src.split('/').at(-1).split('?').at(0).split('.').at(0) + + const [rows, cols] = filename.includes('@') + ? filename + .split('@') + .at(-1) + .split('x') + .map(s => parseInt(s)) + : [1, 1] + + return ( +
+ {`gallery +
+ ) + }) }
diff --git a/src/styles/components.scss b/src/styles/components.scss index 37bb047..31741ec 100644 --- a/src/styles/components.scss +++ b/src/styles/components.scss @@ -753,35 +753,60 @@ } .gallery-collage { - display: flex; + // display: flex; + // flex-wrap: wrap; - place-content: center; - align-items: center; - gap: 1rem; + // width: 64rem; + max-width: 100%; - flex-wrap: wrap; + --cell-size: 6rem; - width: 100%; + display: grid; + grid-template-columns: repeat(auto-fit, calc(var(--cell-size))); + grid-auto-rows: calc(var(--cell-size)); + + grid-auto-flow: dense; + gap: 1rem; - max-width: 64rem; + // place-content: center; + // align-items: center; + + @media screen and (max-width: $screen-desktop-min) { + grid-template-columns: auto; + grid-template-rows: auto; + grid-auto-rows: auto; + } & > .card { padding: 3px; overflow: hidden; + width: 100%; + height: 100%; + + grid-column: span var(--cols, 1); + grid-row: span var(--rows, 1); + @media screen and (max-width: $screen-desktop-min) { max-width: 100%; + + grid-column: span 1; + grid-row: span 1; } img { display: grid; - max-width: 25rem; - max-height: 25rem; + width: 100%; + height: 100%; + + overflow: hidden; border-radius: 3px; + object-fit: cover; + @media screen and (max-width: $screen-desktop-min) { max-height: none; diff --git a/src/styles/pages.scss b/src/styles/pages.scss index 982f1dc..a41a548 100644 --- a/src/styles/pages.scss +++ b/src/styles/pages.scss @@ -79,7 +79,7 @@ gap: 4rem; - padding: 3rem 0 6rem; + padding: 3rem 2rem 6rem; background: var(--homepage-principal-bg); @@ -103,7 +103,9 @@ & > .logo { z-index: 2; - max-width: 640px; + + width: 32rem; + position: relative; user-select: none; @@ -114,6 +116,10 @@ // drop-shadow(4px 0 0 var(--palette-black)) drop-shadow(0 4px 0 var(--palette-black)) // drop-shadow(-4px 0 0 var(--palette-black)) drop-shadow(0 -4px 0 var(--palette-black)); } + + max-width: calc(100vw - 3rem); + @media screen and (max-width: $screen-desktop-min) { + } } & > .whats-phc { @@ -177,8 +183,10 @@ padding-bottom: 6rem; .project-list { - width: calc(20rem * 3 + 1.5rem * 2 + 6rem * 2); - max-width: calc(100vw - 2rem); // HACK: capire come si propagano le width per bene + // width: calc(20rem * 3 + 1.5rem * 2 + 6rem * 2); + // max-width: calc(100vw - 2rem); // HACK: capire come si propagano le width per bene + + max-width: calc(20rem * 3 + 1.5rem * 2 + 6rem * 2); display: grid; grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); @@ -228,13 +236,13 @@ background: #0003; border: 3px solid #0006; border-radius: 6px; - width: 5rem; - height: 5rem; + width: 4rem; + height: 4rem; } img { - width: 5rem; - height: 5rem; + width: 4rem; + height: 4rem; } &.cover { @@ -243,12 +251,12 @@ } } - &.auto { - img { - width: auto; - height: auto; - } - } + // &.auto { + // img { + // width: auto; + // height: auto; + // } + // } } .description {