Modifications wall of sound

src/about.njk

@@ -31,13 +31,12 @@ title: Cookie Compilation
     }
 
     .container {
-        margin: 5%;
         position: absolute;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
-        overflow: auto;
+        overflow-y: auto;
         scrollbar-width: none; /* For Firefox */
         display: flex;
         flex-direction: column;

src/index.njk

@@ -12,25 +12,30 @@ title: Cookie Compilation
     <div class="card">
         <div class="too-much frost">
             <div class="frost">
-                <p lang="en">The concept is straightforward: an audiovisual compilation on the theme of Divagation.
-                Divagation is a attractive starting point, that promotes personal errands; letting everyone's singularity emerge (also, it's a pretty flexible theme 🙊).</p>
+                <p lang="en">The concept is straightforward: an audiovisual compilation centered around a main theme: Divagation.
+                    Divagation is an intriguing starting point that encourages personal exploration, allowing each individual’s
+                    peculiarity to shine through. It’s also a remarkably versatile theme 🙊.</p>
+                <br>
+                <br>
                 <p>Some definitions:</p>
                 <ul>
                     <li lang="en">The act of wandering here and there, out of place.</li>
-                    <li lang="en">The action of a mind wandering, wandering at the whim of its _reverie.</li>
-                    <li lang="en">The contravention of letting animals wander or abandoning _them on<br> the roads.</li>
+                    <li lang="en">The act of a mind drifting, wandering at the whim of its own reverie.</li>
+                    <li lang="en">Contravention for letting animals wander on public roads.</li>
                     <li lang="en">Displacement, total or partial, permanent or temporary, of a river bed.</li>
                 </ul>
-                <br>
                 <p lang="en">Synonyms: <i>elucubration</i> - <i>extravagance</i> - <i>incoherence</i> - <i>rambling</i> - <i>reverie</i> - <i>daydream</i>.’’</p>
-                <br>
-                <p lang="en">In the first act, people created videos. For the second act, others created a soudtrack/music/noise for them.
-                Our goal was to create a space of diffusion, for productions/techniques that have few or none, allow encounters to emerge,and foster collaboration between visual art and sound.
-                That's how you ended with this U.F.O (Unidentified Freeform Object) lighting up your retina tingling your eardrums.</p>
-                <p lang="en">The Cookie Collective is an organization of humans, with de-facto roots since 2016. The collective's core is in France and especially the Greater Paris area.
-                Some of us see themselves as technicians; some as artists; some keep pondering this existential question, while others just don't ask.
-                From a focus on realtime visual art, over the last 3 years the musical dimension grew bigger in our collective's works.
-                For this project, we want to bring back the visual to the front stage. A kind of Travel through Time, or rather to an alternative Present which honors the first years of the ollective, a salute to our livecoding pioneers.</p>
+                <p lang="en">At first, people created videos and then some other people composed music or noise fitting for them.
+                Our goal was to create a broadcasting space for productions and/or techniques that do not have one (or not enough).
+                We are trying to bring people together, to foster collaboration between visual and sonic arts.
+                That's how you ended up viewing this U.F.O (Unidentified Freeform Object), lighting up your retina and tingling your eardrums.</p> 
+
+                <p lang="en">The Cookie Collective is a human organization in existence, de-facto, since 2016. Most of the members are based in
+                    France, especially in the Greater Paris area. Some of us see themselves as technicians; some as artists; some keep pondering
+                    this existential question. Others just don't care asking themselves the question. The collective once focused on realtime
+                    visual arts. However, the last three years saw a great development of the musical dimension of our collective work.
+                    This project aims to bring back the visual aspect to the front of the stage. It's a kind of travel through time, or rather
+                    to an alternative present which honors the first years of the collective, a tribute to our livecoding pioneers.</p>
             </p>
         </div>
     </div>
@@ -88,6 +93,7 @@ title: Cookie Compilation
     }
 
     p {
+        display: inline;
         text-align: justify;
         font-size: 2em;
         color: white;
@@ -96,7 +102,4 @@ title: Cookie Compilation
         padding-right: 5%;
         hyphens: auto;
     }
-
-
-
 </style>

src/wall_of_sound.njk

@@ -2,76 +2,77 @@
 title: Wall of Sound
 permalink: /wall-of-sound/
 ---
-{%include "head.njk" %}
-{%include "navigation.njk" %}
-
+{% include "head.njk" %}
+{% include "navigation.njk" %}
 
 <video class="video-background" autoplay muted loop>
     <source src="/media/hardcore_raver.mp4" type="video/mp4">
     Your browser does not support HTML5 video.
 </video>
 
-
 <div class="container">
-
     {% for project in projects | shuffle %}
-        {% for i in range(0, 5) -%}
-            <div class="audio-player">
-                <audio controls>
-                  <source src="https://ccc-static.cookie.paris/{{ project.folder | slugify }}.wav" type="audio/wav" />
-                  <!-- <source src="https://ccc-static.cookie.paris/{{ project.folder | slugify }}.mp3" type="audio/mp3" /> -->
-                  <p>
-                    You web browser does not support HTML5 audio. Here is a link
-                    to the file instead: <a href="myAudio.wav">link</a>.
-                  </p>
-                </audio>
-            </div>
-        {%- endfor %}
+        <div class="audio-player">
+            <audio controls>
+                <source src="https://ccc-static.cookie.paris/{{ project.folder | slugify }}.wav" type="audio/wav" />
+                <p>
+                    Your web browser does not support HTML5 audio. Here is a link to the file instead: 
+                    <a href="https://ccc-static.cookie.paris/{{ project.folder | slugify }}.wav">link</a>.
+                </p>
+            </audio>
+        </div>
     {% endfor %}
-
 </div>
 
-<style>
 
+<style>
     .container {
+        margin-top: 3%;
         display: grid;
-        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-        max-height: 93vh;
+        gap: 1.5em;
+        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
+        padding: 1em;
         overflow-y: auto;
-        -ms-overflow-style: none;  /* IE and Edge */
-        scrollbar-width: none;  /* Firefox */
+        max-height: 90vh;
+        justify-items: center;
     }
 
     .audio-player {
-        margin: 0.25em;
-        padding-top: 0.5em;
-        padding-bottom: 0em;
-        width: 1vw;
-        z-index: 10;
+        width: 100%;  
+        max-width: 500px;  
+        padding: 1em;
+        border-radius: 0.5em;
     }
 
-    .video-background {
-        position: absolute;
+    audio {
         width: 100%;
-        height: 100%;
-        object-fit: cover;
     }
 
-    .video-preview
-    {
-        position: relative;
+    .video-background {
+        position: fixed;
+        top: 0;
+        left: 0;
         width: 100%;
         height: 100%;
-        z-index: 0;
         object-fit: cover;
+        z-index: -1;
     }
 
-    /* Add larger margin-top for phones */
     @media (max-width: 600px) {
         .container {
             margin-top: 15%;
+            grid-template-columns: 1fr;
         }
     }
 
+    .container::-webkit-scrollbar {
+        display: none;
+    }
+
+    .container {
+        -ms-overflow-style: none;  /* Internet Explorer 10+ */
+        scrollbar-width: none;  /* Firefox */
+    }
+
 
 </style>