Mop/fefan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(previous-editions): fix cell-width to render correctly
All checks were successful
Deploy Fefan / deploy (push) Successful in 3m31s
Details

Browse Source
This commit is contained in:
Julien Aldon
2026-04-21 16:22:04 +02:00
parent ce7fb3eca7
commit 1fb13b6093
1 changed files with 127 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

254
next/components/editionElement/style.module.scss
View File

@@ -1,157 +1,157 @@
.editionSection { .editionSection {
--cell-width: 14.25rem; --cell-width: 10.25rem;
display: grid; display: grid;
scroll-snap-align: center; scroll-snap-align: center;
flex: none; flex: none;
grid-template-columns: repeat(4, max-content); grid-template-columns: repeat(4, max-content);
grid-template-rows: repeat(2, max-content); grid-template-rows: repeat(2, max-content);
align-content: center; align-content: center;
justify-content: center;
&.fullViewport {
min-height: calc(2 * var(--cell-width) + 10rem + 4 * var(--border-width));
height: calc(100vh - 2 * var(--border-width) - 5rem - 2rem);
}
.image {
display: block;
grid-row: span 2;
margin: 0.5rem;
img {
display: block;
height: calc(2 * var(--cell-width) + 1rem + 4 * var(--border-width));
}
}
img.image {
display: block;
height: calc(2 * var(--cell-width) + 1rem + 4 * var(--border-width));
}
article {
border: solid 1px var(--fg-2);
width: var(--cell-width);
height: var(--cell-width);
justify-content: center; justify-content: center;
display: flex;
align-items: center;
object-fit: fill;
margin: 0.5rem;
}
&.fullViewport { .callToAction {
min-height: calc(2 * var(--cell-width) + 10rem + 4 * var(--border-width)); grid-row: 3;
height: calc(100vh - 2 * var(--border-width) - 5rem - 2rem); grid-column: span 4;
} justify-content: flex-end;
display: flex;
align-items: center;
.image { & > a {
display: block; justify-content: flex-end;
grid-row: span 2; display: flex;
margin: 0.5rem; align-items: center;
img {
display: block;
height: calc(2 * var(--cell-width) + 1rem + 4 * var(--border-width));
}
}
img.image {
display: block;
height: calc(2 * var(--cell-width) + 1rem + 4 * var(--border-width));
}
article {
border: solid 1px var(--fg-2);
width: var(--cell-width);
height: var(--cell-width);
justify-content: center;
display: flex;
align-items: center;
object-fit: fill;
margin: 0.5rem;
}
.callToAction {
grid-row: 3;
grid-column: span 4;
justify-content: flex-end;
display: flex;
align-items: center;
& > a {
justify-content: flex-end;
display: flex;
align-items: center;
}
} }
}
} }
.informations { .informations {
color: var(--fg-0); color: var(--fg-0);
display: flex; display: flex;
flex-flow: column; flex-flow: column;
margin-left: 1rem; margin-left: 1rem;
text-decoration: none; text-decoration: none;
h2 {
font-family: var(--font-details);
margin: -0.5rem 0px;
font-size: 2rem;
font-weight: 400;
}
h3 { h2 {
margin: 0px; font-family: var(--font-details);
font-size: 0.75rem; margin: -0.5rem 0px;
opacity: 0.75; font-size: 2rem;
font-weight: 700; font-weight: 400;
text-transform: uppercase; }
}
h3 {
margin: 0px;
font-size: 0.75rem;
opacity: 0.75;
font-weight: 700;
text-transform: uppercase;
}
} }
@media only screen and (max-width: 70rem) { @media only screen and (max-width: 70rem) {
.editionSection { .editionSection {
grid-template-columns: repeat(3, max-content); grid-template-columns: repeat(3, max-content);
.callToAction { .callToAction {
grid-column: span 3; grid-column: span 3;
}
article:nth-of-type(n+5) {
display: none;
}
} }
article:nth-of-type(n + 5) {
display: none;
}
}
} }
@media only screen and (max-width: 60rem) { @media only screen and (max-width: 60rem) {
.editionSection { .editionSection {
grid-template-columns: repeat(2, max-content); grid-template-columns: repeat(2, max-content);
.callToAction { .callToAction {
grid-column: span 2; grid-column: span 2;
}
article:nth-of-type(n+3) {
display: none;
}
} }
article:nth-of-type(n + 3) {
display: none;
}
}
} }
@media only screen and (max-width: 40rem) and (min-width: 30rem) { @media only screen and (max-width: 40rem) and (min-width: 30rem) {
.editionSection { .editionSection {
grid-template-columns: repeat(1, max-content); grid-template-columns: repeat(1, max-content);
.callToAction { .callToAction {
grid-column: span 1; grid-column: span 1;
}
article {
display: none;
}
} }
article {
display: none;
}
}
} }
@media only screen and (max-width: 30rem) { @media only screen and (max-width: 30rem) {
.editionSection { .editionSection {
--cell-width: calc(50vw - 5rem); --cell-width: calc(50vw - 5rem);
grid-template-columns: repeat(2, max-content); grid-template-columns: repeat(2, max-content);
grid-template-rows: repeat(5, max-content); grid-template-rows: repeat(5, max-content);
&.fullViewport { &.fullViewport {
height: calc(3.5 * var(--cell-width) + 10rem + 4 * var(--border-width)); height: calc(3.5 * var(--cell-width) + 10rem + 4 * var(--border-width));
min-height: calc(100vh - 2 * var(--border-width) - 4rem - 2rem); min-height: calc(100vh - 2 * var(--border-width) - 4rem - 2rem);
}
.image {
grid-row: 1;
grid-column: span 2;
img {
height: auto;
width: calc(2 * var(--cell-width) + 1rem + 4 * var(--border-width));
}
}
img.image {
height: auto;
width: calc(2 * var(--cell-width) + 1rem + 4 * var(--border-width));
}
.callToAction {
grid-row: 5;
grid-column: span 2;
}
article:nth-of-type(n+3) {
display: none;
}
} }
}
.image {
grid-row: 1;
grid-column: span 2;
img {
height: auto;
width: calc(2 * var(--cell-width) + 1rem + 4 * var(--border-width));
}
}
img.image {
height: auto;
width: calc(2 * var(--cell-width) + 1rem + 4 * var(--border-width));
}
.callToAction {
grid-row: 5;
grid-column: span 2;
}
article:nth-of-type(n + 3) {
display: none;
}
}
}