phc/website
6
4
Fork 1
Code Issues 9 Pull Requests Projects 1 Releases Wiki Activity

chore: better gallery layout and astro image tags
continuous-integration/drone/push Build is failing
Details

Browse Source
This commit is contained in:
aziis98
2024-11-21 22:52:05 +01:00
parent 48bd9e459c
commit 58e8e5d43c
10 changed files with 86 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/styles/components.scss
+34 -9
View File
@@ -753,35 +753,60 @@
}
.gallery-collage {
display: flex;
// display: flex;
// flex-wrap: wrap;
place-content: center;
align-items: center;
// width: 64rem;
max-width: 100%;
--cell-size: 6rem;
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;
flex-wrap: wrap;
// place-content: center;
// align-items: center;
width: 100%;
max-width: 64rem;
@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;
src/styles/pages.scss
+22 -14
View File
@@ -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 {