Version de travail un peu sale

CookieCollective · Aug 28, 2024 · 92b4c8e · 92b4c8e
1 parent 37f4f1c
commit 92b4c8e
Show file tree

Hide file tree

Showing 10 changed files with 2,227 additions and 2,960 deletions.
diff --git a/.eleventy.js b/.eleventy.js
@@ -8,6 +8,15 @@ module.exports = function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy("src/media");
   eleventyConfig.addPassthroughCopy("src/content");
   eleventyConfig.addPlugin(mdxPlugin);
+  eleventyConfig.addFilter("shuffle", function(array) {
+      let shuffledArray = array.slice();
+      for (let i = shuffledArray.length - 1; i > 0; i--) {
+          const j = Math.floor(Math.random() * (i + 1));
+          [shuffledArray[i], shuffledArray[j]] = [shuffledArray[j], shuffledArray[i]];
+      }
+      return shuffledArray;
+  });
+
   return {
     dir: {
       input: "src",

diff --git a/src/_data/all_projects.json b/src/_data/all_projects.json
diff --git a/src/_data/projects.json b/src/_data/projects.json
diff --git a/src/_includes/navigation.njk b/src/_includes/navigation.njk
@@ -1,13 +1,16 @@
 <div class="main-bar frost">
-    <div class="logo">
-    </div>
-    <div class="horizontal-scroller">
-        <div><a class="navlink" href="/gallery">All</a></div>
-        <div><a class="navlink" href="javascript:getRandomProject()">Random</a></div>
-        <div><a class="navlink" href="/wall-of-sound">Wall of Sound</a></div>
-        <div><a class="navlink" href="/">Cinema</a></div>
-        <div><a class="navlink" href="/">Fanzine</a></div>
-        <div><a class="navlink" href="/"><img src="/media/icon/cookie_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg"></a></div>
+        <div class="logo">
+        </div>
+        <div class="horizontal-scroller">
+            <div><a class="navlink" href="/gallery">Browse</a></div>
+            <div><a class="navlink" href="javascript:getRandomProject()">Wander</a></div>
+            <div><a class="navlink" href="/wall-of-sound">Wall</a></div>
+            <div><a class="navlink" href="/">Cinema</a></div>
+            <div><a class="navlink" href="/">Fanzine</a></div>
+            <div><a class="navlink" href="/about">About</a></div>
+            <div><a class="navlink" href="/"><img src="/media/icon/cookie_24dp_E8EAED_FILL0_wght400_GRAD0_opsz24.svg"></a></div>
+
+        </div>
     </div>
 </div>
 
@@ -61,18 +64,40 @@
         });
 
     loadState();
+
+    // Add event listeners for showing/hiding the navigation bar
+    const mainBar = document.querySelector('.main-bar');
+    
+    mainBar.addEventListener('mouseenter', () => {
+        clearTimeout(hideTimeout);
+        mainBar.classList.remove('hidden');
+    });
+
+    mainBar.addEventListener('mouseleave', () => {
+        hideTimeout = setTimeout(() => {
+            mainBar.classList.add('hidden');
+        }, 3000);
+    });
+
+    hideTimeout = setTimeout(() => {
+        mainBar.classList.add('hidden');
+    }, 3000);
+
 </script>
 
 <style>
-
-    .frost
-    {
+    :root {
+        --navigation-size: 50px;
+    }
+    body {
+        margin: 0;
+        padding: 0;
+        font-family: Arial, sans-serif;
+    }
+    .frost {
         backdrop-filter: blur(40px) brightness(70%);
     }
-
-
-    .main-bar
-    {
+    .main-bar {
         display: flex;
         width: 100%;
         height: var(--navigation-size);
@@ -82,41 +107,34 @@
         position: fixed;
         top: 0;
         z-index: 10;
+        transition: transform 0.3s ease;
     }
-
-    .logo img
-    {
+    .main-bar.hidden {
+        transform: translateY(calc(-1 * var(--navigation-size)));
+    }
+    .logo img {
         line-height: var(--navigation-size);
         padding: 0 10px;
     }
-
-    .logo-link
-    {
+    .logo-link {
         text-decoration: none;
         color: white;
     }
-
-    .logo a:hover
-    {
+    .logo a:hover {
         background-color: #333;
         color: white;
         transition: background-color 0.3s ease, color 0.3s ease;
     }
-
-    .horizontal-scroller
-    {
+    .horizontal-scroller {
         display: flex;
         gap: 16px;
         padding: 16px;
-        /**used to scroll text*/
         white-space: nowrap;    
         overflow-x: scroll;
         scrollbar-width: none;
         overflow-y: hidden;
     }
-
-    .navlink
-    {
+    .navlink {
         white-space: nowrap;
         text-decoration: none;
         color: white;
@@ -125,14 +143,11 @@
         padding-right: 1vh;
         width: 100%;
     }
-
-    .navlink:hover
-    {
+    .navlink:hover {
         background: white;
         color: black;
         padding: 1vh;
         padding-bottom: 1vh;
         transition: background-color 0.3s ease, color 0.3s ease;
     }
-
 </style>
diff --git a/src/about.njk b/src/about.njk
@@ -2,5 +2,37 @@
 title: Cookie Compilation
 ---
 {%include "head.njk" %}
+{%include "navigation.njk"%}
 
-Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repudiandae odit cum numquam culpa, quos voluptatibus! Voluptate odio facilis provident ullam accusamus rerum sint nesciunt, sunt, temporibus laboriosam, magnam cumque ea? Et le Cookie Collective vaincra.
+<div class="container">
+    <video autoplay muted loop>
+        <source src="/media/ccc.mp4" type="video/mp4">
+        Your browser does not support HTML5 video.
+    </video>
+</div>
+
+<div>
+    <h1>Bonjour je veux écrire quelque chose</h1>
+</div>
+
+<style>
+
+    .container
+    {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+    }
+
+    .card
+    {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        text-align: center;
+    }
+
+</style>
diff --git a/src/css/gallery.scss b/src/css/gallery.scss
@@ -1,7 +1,8 @@
 
 .gallery {
+    margin-top: 30pt;
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
     gap: 16px;
     padding: 16px;
     max-height: 80vh;
@@ -10,7 +11,7 @@
 
 .gallery-item {
     position: relative;
-    border-radius: 8px;
+    // border-radius: 8px;
     overflow: hidden;
     transition: transform 0.2s;
     border: 1px solid #ccc;
@@ -51,6 +52,7 @@
 
 .gallery-item-content h1 {
     margin: 0;
+    font-family: 'IBM Plex Mono SemiBold', sans-serif;
     font-size: 1.75em;
     transition: transform 0.2s;
 }

diff --git a/src/css/style.scss b/src/css/style.scss
@@ -1,3 +1,4 @@
+@import url('https://fonts.cdnfonts.com/css/ibm-plex-mono-3');
 
 :root
 {
@@ -10,7 +11,7 @@ body, html
 {
     margin: 0;
     padding: 0;
-    font-family: monospace;
+    font-family: 'IBM Plex Mono', sans-serif;
 }
 
 a,
@@ -19,7 +20,7 @@ a:visited,
 a:hover,
 a:active
 {
-  color: #fff;
+  font-family: 'IBM Plex Mono', sans-serif;
 }
 
 /* effects */
@@ -54,13 +55,20 @@ a:active
 }
 
 fieldset {
+    font-family: 'IBM Plex Mono', sans-serif;
     border-radius: 10px;
     padding: 10px;
     margin-bottom: 15pt;
+    margin-top: 15pt;
+    padding-top: 10pt;
+    padding-bottom: 10pt;
 }
 
 legend {
     font-size: 15pt;
+    font-family: 'IBM Plex Mono', sans-serif;
+    padding-left: 10px;
+    padding-right: 10px;
 }
 
 .emoji {
@@ -78,4 +86,93 @@ legend {
 
 .project-text-content {
     font-size: 1.15em;
+    padding-left: 10px;
+}
+
+$max-tab-count: 5;
+$tab-wrap-border-radius: 6px;
+.tab-wrap {
+  padding: 40px;
+  transition: 0.3s box-shadow ease;
+  border-radius: $tab-wrap-border-radius;
+  background-color: white;
+  opacity: 0.75;
+  display: flex;
+  flex-wrap: wrap;
+  position: relative;
+  list-style: none;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
+  &:hover {
+    box-shadow: 0 12px 23px rgba(0, 0, 0, 0.23), 0 10px 10px rgba(0, 0, 0, 0.19);
+  }
+}
+.tab {
+    display: none;
+    @for $i from 1 through $max-tab-count {
+        &:checked:nth-of-type(#{$i}) ~ .tab__content:nth-of-type(#{$i}) {
+            font-family: 'IBM Plex Mono', sans-serif;
+            opacity: 1;
+            transition: 0.5s opacity ease-in, 0.8s transform ease;
+            position: relative;
+            top: 0;
+            z-index: 100;
+            transform: translateY(0px);
+            text-shadow: 0 0 0;
+        }
+    }
+    &:first-of-type:not(:last-of-type) + label {
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+    }
+    &:not(:first-of-type):not(:last-of-type) + label {
+        border-radius: 0;
+    }
+    &:last-of-type:not(:first-of-type) + label {
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
+    }
+    &:checked + label,
+    &:hover + label { /* Added hover effect */
+        cursor: default;
+        &:hover {
+            box-shadow: 0 -1px 0 #fff inset;
+            background-color: #f0f0f0;
+        }
+    }
+    + label {
+        box-shadow: 0 -1px 0 #eee inset;
+        border-radius: $tab-wrap-border-radius $tab-wrap-border-radius 0 0;
+        font-family: 'IBM Plex Mono SemiBold', sans-serif;
+        cursor: pointer;
+        display: block;
+        text-decoration: none;
+        color: #333;
+        flex-grow: 3;
+        text-align: center;
+        user-select: none;
+        text-align: center;
+        transition: 0.3s background-color ease, 0.3s box-shadow ease;
+        height: 50px;
+        box-sizing: border-box;
+        padding: 15px;
+        &:hover {
+            box-shadow: 0 1px 0 #f4f4f4 inset;
+        }
+    }
+    &__content {
+        padding: 10px 25px;
+        background-color: transparent;
+        position: absolute;
+        width: 100%;
+        z-index: -1;
+        opacity: 0;
+        left: 0;
+        transform: translateY(-3px);
+        border-radius: $tab-wrap-border-radius;
+    }
+}
+
+.ressource-button {
+    padding-left: 6pt;
+    display: inline;
 }