Constant Styling + Corrections

public/js/main.min.js

@@ -1 +1 @@
-function addCopyrightCurrentDate(){document.querySelector("footer").querySelector("p").innerHTML+=" "+(new Date).getFullYear()}function showActivityContent(t){t.target.parentElement.parentElement.querySelector(".headline").classList.toggle("toggle-visibility"),t.target.parentElement.parentElement.classList.toggle("slide")}function pad(t,e,i){return i=i||"0",(t+="").length>=e?t:new Array(e-t.length+1).join(i)+t}function animateNumbers(t){setTimeout(function(){let e=t.getAttribute("data-endvalue"),i=1*(e=parseInt(null===e?(new Date).getFullYear():e))/7,n=setInterval(function(){i-=1;let l=parseInt(t.innerHTML);t.innerHTML=pad(l+7>e?l+(e-l):l+7,4),i<=0&&clearInterval(n)},1)},null===t.getAttribute("data-delay")?250:t.getAttribute("data-delay"))}addCopyrightCurrentDate(),document.querySelectorAll("section#activites .is-mtlgj-btn").forEach(function(t){t.addEventListener("click",showActivityContent)}),document.querySelectorAll(".year-animated").forEach(function(t){animateNumbers(t)}),bulmaCarousel.attach(".slider",{autoplay:!0,pagination:!1,loop:!0,slidesToShow:2,slidesToScroll:1,infinite:!0,icons:{previous:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="_clipPath_Rmt62eEg1OXF13UQV6A0tZ7nRrSHuqzl"><rect width="100" height="100"/></clipPath></defs><g clip-path="url(#_clipPath_Rmt62eEg1OXF13UQV6A0tZ7nRrSHuqzl)"><path d=" M 68.738 87.477 L 68.738 87.477 L 31.262 50 L 68.738 12.523" fill="none" vector-effect="non-scaling-stroke" stroke-width="8" stroke="rgb(132,132,132)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"/></g></svg>',next:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="_clipPath_sc80dOHRo7GcAKylIDWHu4HjiUHjgH8R"><rect width="100" height="100"/></clipPath></defs><g clip-path="url(#_clipPath_sc80dOHRo7GcAKylIDWHu4HjiUHjgH8R)"><path d=" M 39 12.523 L 39 12.523 L 76.477 50 L 39 87.477" fill="none" vector-effect="non-scaling-stroke" stroke-width="8" stroke="rgb(132,132,132)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"/></g></svg>'}});
+function addCopyrightCurrentDate(){document.querySelector("footer").querySelector("p").innerHTML+=" "+(new Date).getFullYear()}function showActivityContent(t){t.target.parentElement.parentElement.parentElement.querySelector(".headline").classList.toggle("toggle-visibility"),t.target.parentElement.parentElement.parentElement.classList.toggle("slide")}function pad(t,e,n){return n=n||"0",(t+="").length>=e?t:new Array(e-t.length+1).join(n)+t}function animateNumbers(t){setTimeout(function(){let e=t.getAttribute("data-endvalue"),n=1*(e=parseInt(null===e?(new Date).getFullYear():e))/7,i=setInterval(function(){n-=1;let l=parseInt(t.innerHTML);t.innerHTML=pad(l+7>e?l+(e-l):l+7,4),n<=0&&clearInterval(i)},1)},null===t.getAttribute("data-delay")?250:t.getAttribute("data-delay"))}addCopyrightCurrentDate(),document.querySelectorAll("section#activites .is-mtlgj-btn").forEach(function(t){t.addEventListener("click",showActivityContent)}),document.querySelectorAll(".year-animated").forEach(function(t){animateNumbers(t)}),bulmaCarousel.attach(".slider",{autoplay:!0,pagination:!1,loop:!0,slidesToShow:2,slidesToScroll:1,infinite:!0,icons:{previous:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="_clipPath_Rmt62eEg1OXF13UQV6A0tZ7nRrSHuqzl"><rect width="100" height="100"/></clipPath></defs><g clip-path="url(#_clipPath_Rmt62eEg1OXF13UQV6A0tZ7nRrSHuqzl)"><path d=" M 68.738 87.477 L 68.738 87.477 L 31.262 50 L 68.738 12.523" fill="none" vector-effect="non-scaling-stroke" stroke-width="8" stroke="rgb(132,132,132)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"/></g></svg>',next:'<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="isolation:isolate" viewBox="0 0 100 100" width="100" height="100"><defs><clipPath id="_clipPath_sc80dOHRo7GcAKylIDWHu4HjiUHjgH8R"><rect width="100" height="100"/></clipPath></defs><g clip-path="url(#_clipPath_sc80dOHRo7GcAKylIDWHu4HjiUHjgH8R)"><path d=" M 39 12.523 L 39 12.523 L 76.477 50 L 39 87.477" fill="none" vector-effect="non-scaling-stroke" stroke-width="8" stroke="rgb(132,132,132)" stroke-linejoin="round" stroke-linecap="round" stroke-miterlimit="3"/></g></svg>'}});

public/view/fr/index.html

@@ -107,19 +107,18 @@
                 </div>
             </div>
             <div class="full-height full-width is-full columns animation-inversed sub-section">
-                <div class="bg-img mtlgj-img full-height full-width"></div>
+                <div class="column full-height no-spacing">
-                <div class="headline is-headline-inversed">
+                    <div class="bg-img mtlgj-img full-height full-width"></div>
-                    <h2>Montréal Game Jam</h2>
+                    <div class="headline is-headline-inversed">
-                    <p>
+                        <h2>Montréal Game Jam</h2>
-                        Le Montréal Game Jam est le chapitre Montréalais pour le Global Game Jam. Cet événement international donne comme défi aux participants de réaliser un prototype de jeu basé sur une thématique spécifique pendant une période de 48 heures.
+                        <p>
-                    </p>
+                            Le Montréal Game Jam est le chapitre Montréalais pour le Global Game Jam. Cet événement international donne comme défi aux participants de réaliser un prototype de jeu basé sur une thématique spécifique pendant une période de 48 heures.
-                    <button class="button is-mtlgj-btn is-info is-outlined is-medium">En savoir plus</button>
+                        </p>
+                        <button class="button is-mtlgj-btn is-info is-hidden-mobile is-outlined is-medium">En savoir plus</button>
+                    </div>
                 </div>
                 <div class="content column is-one-quarter-fullhd is-two-fifths-desktop is-half-tablet is-three-quarters-mobile full-height">
                     <img alt="Montreal Game Jam Logo" src="../../img/MTLGJ-Logo.jpg" />
-                    <p>
-                        Le Montréal Game Jam est le chapitre Montréalais pour le Global Game Jam. Cet événement international donne comme défi aux participants de réaliser un prototype de jeu basé sur une thématique spécifique pendant une période de 48 heures.
-                    </p>
                     <p>
                         L’organisation du Montreal Game Jam est constitué de l’union de multiples universités et professionnels de Montréal dont le mandat commun est de promouvoir l’industrie du jeu vidéo.
                     </p>
@@ -132,7 +131,9 @@
                     <p>
                         Plus d'information sur le site du <a href="http://mtlgj.org/lang/fr/index.html">Montreal Game Jam</a>
                     </p>
-                    <button class="button is-mtlgj-btn is-info is-outlined is-medium">Fermer</button>
+                    <div>
+                        <button class="button is-mtlgj-btn is-info is-hidden-mobile is-outlined is-medium">Fermer</button>
+                    </div>
                 </div>
             </div>
         </section>

resources/js/app.js

@@ -28,8 +28,8 @@ function addCopyrightCurrentDate() {
 }
 
 function showActivityContent(e) {
-    e.target.parentElement.parentElement.querySelector('.headline').classList.toggle('toggle-visibility');
+    e.target.parentElement.parentElement.parentElement.querySelector('.headline').classList.toggle('toggle-visibility');
-    e.target.parentElement.parentElement.classList.toggle('slide');
+    e.target.parentElement.parentElement.parentElement.classList.toggle('slide');
 }
 
 function pad(n, width, z) {

resources/sass/_partials/_general.scss

@@ -1,3 +1,5 @@
+$border-radius: 4px;
+
 * {
     font-family: Roboto, SansSerif;
 }
@@ -55,6 +57,7 @@ section#splashscreen {
 
     .bg-img {
         background-image: url('../img/splashscreen.jpg');
+        background-size: cover;
     }
 
     .splashscreen-text-container {
@@ -74,7 +77,7 @@ section#splashscreen {
             margin-right: auto;
             border-top: 5px solid white;
             max-width: 900px;
-            border-radius: 20px;
+            border-radius: $border-radius;
         }
     }
 }
@@ -108,6 +111,7 @@ section#apropos {
 
         img.is-quarter {
             width: 25%;
+            border-radius: $border-radius;
         }
 
         .column {
@@ -136,6 +140,11 @@ section#activites {
         position: relative;
         transition: all 2s;
 
+        div.no-spacing {
+            margin: 0;
+            padding: 0;
+        }
+
         &.slide {
             &:not(.animation-inversed) {
                 transform: translateX(25%);
@@ -154,15 +163,16 @@ section#activites {
 
         &.animation-inversed {
             div.content {
-                right: - 25%;
+                right: -25%;
             }
         }
 
         div.content {
-            position: absolute;
+            position: relative;
             padding: 25px;
             text-align: justify;
-            overflow-y: hidden;
+            overflow-y: auto;
+            top: 0;
 
             p, img {
                 margin-bottom: 1em;
@@ -174,6 +184,7 @@ section#activites {
                 left: 20%;
                 width: 60%;
                 text-align: center;
+                border-radius: $border-radius;
             }
         }
 
@@ -184,7 +195,7 @@ section#activites {
             position: absolute;
             color: white;
             max-width: 35%;
-            border-radius: 4px;
+            border-radius: $border-radius;
             background-color: rgba(0, 0, 0, 0.5);
 
             &:not(.is-headline-inversed) {
@@ -252,7 +263,7 @@ section#competitions, section#partenaires {
         margin: 10px auto 50px auto;
         border-top: 5px solid #848484;
         max-width: 200px;
-        border-radius: 20px;
+        border-radius: $border-radius;
     }
 }
 
@@ -278,17 +289,17 @@ section#competitions {
             }
 
             .slider-navigation-previous {
-                border-top-left-radius: 0px;
+                border-top-left-radius: 0;
-                border-bottom-left-radius: 0px;
+                border-bottom-left-radius: 0;
-                border-top-right-radius: 8px;
+                border-top-right-radius: $border-radius;
-                border-bottom-right-radius: 8px;
+                border-bottom-right-radius: $border-radius;
             }
 
             .slider-navigation-next {
-                border-top-left-radius: 8px;
+                border-top-left-radius: $border-radius;
-                border-bottom-left-radius: 8px;
+                border-bottom-left-radius: $border-radius;
-                border-top-right-radius: 0px;
+                border-top-right-radius: 0;
-                border-bottom-right-radius: 0px;
+                border-bottom-right-radius: 0;
             }
 
             .slider-item {

resources/sass/_partials/_media.scss

@@ -140,7 +140,12 @@
     }
 
     section#activites {
+        height: auto;
+
         .sub-section {
+            min-height: 100vh;
+            height: auto;
+
             div.headline {
                 max-width: 75% !important;
                 background-color: rgba(0, 0, 0, 0.75);
@@ -148,25 +153,32 @@
 
             &.slide {
                 &:not(.animation-inversed) {
-                    transform: translateX(75%);
+                    transform: translateX(0%);
                 }
 
                 &.animation-inversed {
-                    transform: translateX(-75%);
+                    transform: translateX(0%);
                 }
             }
 
             &:not(.animation-inversed) {
                 div.content {
-                    left: -75%;
+                    left: 0;
                 }
             }
 
             &.animation-inversed {
                 div.content {
-                    right: -75%;
+                    right: 0;
                 }
             }
+
+            div.content {
+                height: auto;
+                width: 100vw;
+                padding-right: 2rem;
+                padding-left: 2rem;
+            }
         }
     }
 

resources/sass/_partials/_navigation.scss

@@ -9,19 +9,19 @@ $open-distance: 105px;
 $opening-angle: $pi*2;
 $hamburger-spacing: 10px;
 $default-opacity: 0.70;
-$ball-spacing: 72px;
+$item-spacing: 64px;
 
-%ball {
+%item {
     background: $fg;
-    border-radius: 100%;
+    border-radius: 4px;
-    width: 60px;
+    width: 52px;
-    height: 60px;
+    height: 52px;
-    margin-left: -20px;
+    margin-left: -16px;
     position: absolute;
     top: 20px;
     color: white;
     text-align: center;
-    line-height: 60px;
+    line-height: 52px;
     transform: translate3d(0, 0, 0);
     transition: transform ease-out 200ms;
     opacity: $default-opacity;
@@ -29,11 +29,11 @@ $ball-spacing: 72px;
     img {
         width: 42px;
         height: 42px;
-        margin: 9px;
+        margin: 5px;
     }
 }
 
-%ball-hover {
+%item-hover {
     opacity: 1;
 }
 
@@ -53,7 +53,7 @@ $ball-spacing: 72px;
     }
 
     .menu-item, .menu-item-always-open {
-        @extend %ball;
+        @extend %item;
         opacity: 0;
         transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
 
@@ -67,10 +67,10 @@ $ball-spacing: 72px;
     @for $i from 1 through $menu-items-always-open {
         .menu-item-always-open:nth-of-type(#{$i+3}) {
             opacity: $default-opacity;
-            top: 20px + $ball-spacing*$i;
+            top: 20px + $item-spacing*$i;
 
             &:hover {
-                @extend %ball-hover;
+                @extend %item-hover;
             }
         }
     }
@@ -120,7 +120,7 @@ $ball-spacing: 72px;
     }
 
     .menu-open-button {
-        @extend %ball;
+        @extend %item;
         z-index: 2;
         transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
         transition-duration: 400ms;
@@ -128,7 +128,7 @@ $ball-spacing: 72px;
         cursor: pointer;
 
         &:hover {
-            @extend %ball-hover;
+            @extend %item-hover;
             transform: scale(1.1, 1.1) translate3d(0, 0, 0);
         }
     }
@@ -143,7 +143,7 @@ $ball-spacing: 72px;
         opacity: $default-opacity;
 
         &:hover {
-            @extend %ball-hover;
+            @extend %item-hover;
         }
     }
 
@@ -151,14 +151,14 @@ $ball-spacing: 72px;
         @for $i from 1 through $menu-items {
             &:nth-child(#{$i+2}) {
                 transition-duration: 90ms+(100ms*$i);
-                transform: translate3d(0, $ball-spacing*$i, 0);
+                transform: translate3d(0, $item-spacing*$i, 0);
             }
         }
     }
 
     .menu-open:checked ~ .menu-item-always-open {
         transition-duration: 90ms+(100ms);
-        transform: translate3d(0, $ball-spacing*$menu-items, 0);
+        transform: translate3d(0, $item-spacing*$menu-items, 0);
     }
 
     .language-icon {
@@ -173,15 +173,15 @@ $ball-spacing: 72px;
         span {
             display: none;
             background: $fg;
-            border-top-left-radius: 60px;
+            border-top-left-radius: 4px;
-            border-bottom-left-radius: 60px;
+            border-bottom-left-radius: 4px;
-            height: 60px;
+            height: 52px;
             position: absolute;
-            right: 30px;
+            right: 25px;
-            padding: 0 35px 0 25px;
+            padding: 0 30px 0 15px;
             text-align: center;
             white-space: nowrap;
-            line-height: 60px;
+            line-height: 52px;
             z-index:-1;
         }