Import repositories from gitlab

next/components/editionElement/editionBlock/index.jsx

@@ -0,0 +1,32 @@
+import ImageBlock from "@/components/imageBlock";
+import StatBlock from "@/components/statBlock";
+import VideoBlock from "@/components/videoBlock";
+
+import styles from './style.module.scss';
+
+export default async function EditionBlock({type, ...props}) {
+    
+    switch (type) {
+        case 'stat':
+            return (
+                <article className={styles.editionBlock}>
+                    <StatBlock {...props} />
+                </article>
+            );
+
+        case 'image':
+            return (
+                <article className={styles.editionBlock}>
+                    <ImageBlock {...props} src={props.value} alt={props.title}/>
+                </article>
+            );
+
+        case 'video':
+            return (
+                <article className={styles.editionBlock}>
+                    <VideoBlock {...props} src={props.value} title={props.title}/>
+                </article>
+            );
+    }
+    return null;
+}

next/components/editionElement/editionBlock/style.module.scss

@@ -0,0 +1,3 @@
+.editionBlock {
+    overflow: hidden;
+}

next/components/editionElement/index.jsx

@@ -0,0 +1,31 @@
+import ImageBlock from '../imageBlock';
+import EditionBlock from './editionBlock';
+import styles from './style.module.scss';
+
+export default async function EditionElement(props) {
+    
+    return (
+        <section className={`${styles.editionSection} ${props.full ? styles.fullViewport : ''}`}>
+            {props.href ?
+                (
+                    <a className={styles.image} href={props.href}>
+                        <img src={props.flyerImg} alt={props.flyerAlt}/>
+                    </a>
+                ) : (
+                    <ImageBlock className={styles.image} alt={props.flyerAlt} src={props.flyerImg} />
+                )
+            }
+            {props.blocks.slice(0, 6).map(block => (
+                <EditionBlock {...block} key={`${block.type}-${block.id}`} href={props.href} />
+            ))}
+            {props.full ? <aside className={styles.callToAction}>
+                <a href={props.href}>
+                    <h2>{props.title}</h2>
+                    <svg width="40px" height="40px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M6 12H18M18 12L13 7M18 12L13 17" stroke="var(--fefan-1)" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                    </svg>
+                </a>
+            </aside> : null}
+        </section>
+    );
+}

next/components/editionElement/style.module.scss

@@ -0,0 +1,157 @@
+.editionSection {
+    --cell-width: 14.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;
+    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;
+    }
+    
+    .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 {
+    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;
+    }
+
+    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);
+
+        .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);
+
+        .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);
+
+        .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);
+
+        &.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;
+        }
+    }
+}