diff --git a/next/components/editionElement/style.module.scss b/next/components/editionElement/style.module.scss index 0c1056d..f82ef9a 100644 --- a/next/components/editionElement/style.module.scss +++ b/next/components/editionElement/style.module.scss @@ -1,157 +1,157 @@ .editionSection { - --cell-width: 14.25rem; + --cell-width: 10.25rem; - display: grid; - scroll-snap-align: center; - flex: none; - grid-template-columns: repeat(4, max-content); - grid-template-rows: repeat(2, max-content); - align-content: center; + display: grid; + scroll-snap-align: center; + flex: none; + grid-template-columns: repeat(4, max-content); + grid-template-rows: repeat(2, max-content); + 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; + display: flex; + align-items: center; + object-fit: fill; + margin: 0.5rem; + } - &.fullViewport { - min-height: calc(2 * var(--cell-width) + 10rem + 4 * var(--border-width)); - height: calc(100vh - 2 * var(--border-width) - 5rem - 2rem); - } + .callToAction { + grid-row: 3; + grid-column: span 4; + justify-content: flex-end; + display: flex; + align-items: center; - .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; - 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; - } + & > a { + justify-content: flex-end; + display: flex; + align-items: center; } + } } .informations { - color: var(--fg-0); - display: flex; - flex-flow: column; - margin-left: 1rem; - text-decoration: none; - - h2 { - font-family: var(--font-details); - margin: -0.5rem 0px; - font-size: 2rem; - font-weight: 400; - } + color: var(--fg-0); + display: flex; + flex-flow: column; + margin-left: 1rem; + text-decoration: none; - h3 { - margin: 0px; - font-size: 0.75rem; - opacity: 0.75; - font-weight: 700; - text-transform: uppercase; - } + h2 { + font-family: var(--font-details); + margin: -0.5rem 0px; + font-size: 2rem; + font-weight: 400; + } + + h3 { + margin: 0px; + font-size: 0.75rem; + opacity: 0.75; + font-weight: 700; + text-transform: uppercase; + } } @media only screen and (max-width: 70rem) { - .editionSection { - grid-template-columns: repeat(3, max-content); + .editionSection { + grid-template-columns: repeat(3, max-content); - .callToAction { - grid-column: span 3; - } - - article:nth-of-type(n+5) { - display: none; - } + .callToAction { + grid-column: span 3; } + + article:nth-of-type(n + 5) { + display: none; + } + } } @media only screen and (max-width: 60rem) { - .editionSection { - grid-template-columns: repeat(2, max-content); + .editionSection { + grid-template-columns: repeat(2, max-content); - .callToAction { - grid-column: span 2; - } - - article:nth-of-type(n+3) { - display: none; - } + .callToAction { + grid-column: span 2; } + + article:nth-of-type(n + 3) { + display: none; + } + } } @media only screen and (max-width: 40rem) and (min-width: 30rem) { - .editionSection { - grid-template-columns: repeat(1, max-content); + .editionSection { + grid-template-columns: repeat(1, max-content); - .callToAction { - grid-column: span 1; - } - - article { - display: none; - } + .callToAction { + grid-column: span 1; } + + article { + display: none; + } + } } @media only screen and (max-width: 30rem) { - .editionSection { - --cell-width: calc(50vw - 5rem); - grid-template-columns: repeat(2, max-content); - grid-template-rows: repeat(5, max-content); + .editionSection { + --cell-width: calc(50vw - 5rem); + grid-template-columns: repeat(2, max-content); + grid-template-rows: repeat(5, max-content); - &.fullViewport { - height: calc(3.5 * var(--cell-width) + 10rem + 4 * var(--border-width)); - 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; - } + &.fullViewport { + height: calc(3.5 * var(--cell-width) + 10rem + 4 * var(--border-width)); + min-height: calc(100vh - 2 * var(--border-width) - 4rem - 2rem); } -} \ No newline at end of file + + .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; + } + } +}