Start Section Activités

public/js/main.min.js

@@ -1 +1 @@
-function addCopyrightCurrentDate(){document.querySelector("footer").querySelector("p").innerHTML+=" "+(new Date).getFullYear()}addCopyrightCurrentDate();
+function addCopyrightCurrentDate(){document.querySelector("footer").querySelector("p").innerHTML+=" "+(new Date).getFullYear()}function showActivityContent(e){e.target.parentElement.parentElement.querySelector(".headline").classList.toggle("toggle-visibility"),e.target.parentElement.parentElement.querySelector(".content").classList.toggle("slide"),e.target.parentElement.parentElement.querySelector(".bg-img").classList.toggle("slide")}addCopyrightCurrentDate(),document.querySelectorAll("section#activites button").forEach(function(e){e.addEventListener("click",showActivityContent)});

resources/js/app.js

@@ -1,7 +1,17 @@
 (function() {
     addCopyrightCurrentDate();
+
+    document.querySelectorAll('section#activites button').forEach(function(item) {
+        item.addEventListener('click', showActivityContent);
+    })
 })();
 
 function addCopyrightCurrentDate() {
     document.querySelector('footer').querySelector('p').innerHTML += ' ' + new Date().getFullYear();
+}
+
+function showActivityContent(e) {
+    e.target.parentElement.parentElement.querySelector('.headline').classList.toggle('toggle-visibility');
+    e.target.parentElement.parentElement.querySelector('.content').classList.toggle('slide');
+    e.target.parentElement.parentElement.querySelector('.bg-img').classList.toggle('slide');
 }

resources/sass/_partials/_general.scss

@@ -19,24 +19,34 @@ header.logo-container {
     }
 }
 
-section.full-height {
+.full-height {
     height: 100vh;
 }
 
+.full-width {
+    width: 100vw;
+}
+
+.bg-img {
+    background-size: cover;
+    -webkit-filter: brightness(60%);
+    filter: brightness(60%);
+}
+
+section {
+    h2 {
+        font-size: 3.5rem;
+    }
+}
+
 section#splashscreen {
     padding: 0 !important;
 
     .bg-img {
         background-image: url('../img/splashscreen.jpg');
-        background-size: cover;
-        -webkit-filter: brightness(60%);
-        filter: brightness(60%);
-        width: 100vw;
-        height: 100vh;
     }
 
     .splashscreen-text-container {
-        width: 100vw;
         position: absolute;
         top: 60%;
         text-align: center;
@@ -58,8 +68,77 @@ section#splashscreen {
     }
 }
 
+section#activites {
+    height: 200vh;
+    padding: 0;
+    margin: 0;
+
+    div {
+        position: relative;
+    }
+
+    div:nth-of-type(2) {
+        margin-top: 25px;
+    }
+
+    div.content {
+        position: absolute;
+        padding: 25px;
+        transition: all 2s;
+
+        &:not(.animation-inversed) {
+            left: -40%;
+        }
+
+        &.animation-inversed {
+            right: - 40%;
+        }
+    }
+
+    div.content.slide, div.bg-img.slide {
+        &:not(.animation-inversed) {
+            transform: translateX(40%);
+        }
+
+        &.animation-inversed {
+            transform: translateX(-40%);
+        }
+    }
+
+    div.headline {
+        margin-top: 50px;
+        padding: 25px;
+        transition: all 0.25s;
+        position: absolute;
+
+        &:not(.is-headline-inversed) {
+            left: 50px;
+        }
+
+        &.is-headline-inversed {
+            right: 100px;
+        }
+    }
+
+    div.headline.toggle-visibility {
+        display: none;
+    }
+
+    div.bg-img {
+        position: absolute;
+        transition: all 2s;
+
+        &.gala-img {
+            background-image: url('../img/gala.jpg');
+        }
+
+        &.mtlgj-img {
+            background-image: url('../img/mtlgj.jpg');
+        }
+    }
+}
+
 footer {
-    width: 100vw;
     padding: 15px 0;
 
     p {

resources/sass/_partials/_media.scss

@@ -0,0 +1,47 @@
+@media only screen and (max-width: 1028px) {
+    section#activites {
+        div.content {
+            &:not(.animation-inversed) {
+                left: -50%;
+            }
+
+            &.animation-inversed {
+                right: -50%;
+            }
+        }
+
+        div.content.slide-in, div.bg-img.slide-out {
+            &:not(.animation-inversed) {
+                transform: translateX(50%);
+            }
+
+            &.animation-inversed {
+                transform: translateX(-50%);
+            }
+        }
+    }
+}
+
+@media only screen and (max-width: 768px) {
+    section#activites {
+        div.content {
+            &:not(.animation-inversed) {
+                left: -75%;
+            }
+
+            &.animation-inversed {
+                right: -75%;
+            }
+        }
+
+        div.content.slide-in, div.bg-img.slide-out {
+            &:not(.animation-inversed) {
+                transform: translateX(75%);
+            }
+
+            &.animation-inversed {
+                transform: translateX(-75%);
+            }
+        }
+    }
+}

resources/sass/app.scss

@@ -4,6 +4,7 @@
 @import "../../node_modules/bulma/sass/base/_all.sass";
 @import "../../node_modules/bulma/sass/grid/columns.sass";
 @import "../../node_modules/bulma/sass/layout/section.sass";
+@import "../../node_modules/bulma/sass/elements/button.sass";
 
 // Disable the widescreen breakpoint
 $widescreen-enabled: false;

view/fr/index.html

@@ -48,19 +48,44 @@
 
     <main>
         <section class="section full-height" id="splashscreen">
-            <div class="bg-img"></div>
+            <div class="bg-img full-height full-width"></div>
-            <div class="splashscreen-text-container">
+            <div class="splashscreen-text-container full-width">
                 <h1>Laboratoire de médias interactifs</h1>
                 <div class="border-seperator"></div>
             </div>
         </section>
         <section class="section" id="apropos"></section>
-        <section class="section" id="activites"></section>
+        <section class="section" id="activites">
+            <div class="full-height full-width is-full">
+                <div class="bg-img gala-img full-height full-width"></div>
+                <div class="content is-two-fifths-desktop is-half-tablet is-three-quarters-mobile full-height">
+                    <p></p>
+                    <button class="button is-info is-outlined is-medium">Fermer</button>
+                </div>
+                <div class="headline">
+                    <h2>Gala Conjure</h2>
+                    <p></p>
+                    <button class="button is-info is-outlined is-medium">En savoir plus</button>
+                </div>
+            </div>
+            <div class="full-height full-width is-full">
+                <div class="bg-img mtlgj-img animation-inversed full-height full-width"></div>
+                <div class="headline is-headline-inversed">
+                    <h2>Montréal Game Jam</h2>
+                    <p></p>
+                    <button class="button is-info is-outlined is-medium">En savoir plus</button>
+                </div>
+                <div class="content animation-inversed is-two-fifths-desktop is-half-tablet is-three-quarters-mobile full-height">
+                    <p></p>
+                    <button class="button is-info is-outlined is-medium">Fermer</button>
+                </div>
+            </div>
+        </section>
         <section class="section" id="competitions"></section>
         <section class="section" id="partenaires"></section>
     </main>
 
-    <footer>
+    <footer class="full-width">
         <p>Copyright &copy; Conjure</p>
     </footer>