Small Corrections (Navigation) + Start Splashscreen

resources/sass/_partials/_general.scss

@@ -2,30 +2,63 @@
     font-family: Roboto, SansSerif;
 }
 
-body {
-    padding: 0;
-    margin: 0;
-}
-
-.logo-container {
-    position: fixed;
-    top: -15px;
-    max-width: 500px;
-    max-height: 135px;
-    overflow: hidden;
-
-    img {
-        width: 100%;
-    }
-}
-
 a {
     outline: none !important;
 }
 
+header.logo-container {
+    position: fixed;
+    top: -15px;
+    max-width: 500px;
+    max-height: 135px;
+    overflow: hidden;
+    z-index: 1000;
+
+    img {
+        width: 100%;
+    }
+}
+
+section.full-height {
+    height: 100vh;
+}
+
+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;
+        color: white;
+        font-size: 4.5rem;
+
+        h1 {
+            font-weight: bold;
+        }
+
+        .border-seperator {
+            margin-top: 10px;
+            margin-left: auto;
+            margin-right: auto;
+            border-top: 5px solid white;
+            max-width: 900px;
+            border-radius: 20px;
+        }
+    }
+}
+
 footer {
-    position: absolute;
-    bottom: 0;
     width: 100vw;
     padding: 15px 0;
 

resources/sass/_partials/_navigation.scss

@@ -1,5 +1,5 @@
 //vars
-$fg: #00bcd4;
+$fg: #115FA2;
 $pi: 3.14;
 
 //config
@@ -8,7 +8,7 @@ $menu-items-always-open: 3;
 $open-distance: 105px;
 $opening-angle: $pi*2;
 $hamburger-spacing: 10px;
-$default-opacity: 0.75;
+$default-opacity: 0.70;
 $ball-spacing: 90px;
 
 %ball {
@@ -40,12 +40,13 @@ $ball-spacing: 90px;
 .menu {
     position: fixed;
     top: 0;
-    right: 0;
+    right: 5px;
     width: 100px;
     height: 100vh;
     box-sizing: border-box;
     font-size: 20px;
     text-align: center;
+    z-index: 1000;
 
     .menu-open {
         display: none;

resources/sass/app.scss

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

view/fr/index.html

@@ -43,8 +43,18 @@
         </a>
     </nav>
 
-    <main class="columns">
-
+    <main>
+        <section class="section full-height" id="splashscreen">
+            <div class="bg-img"></div>
+            <div class="splashscreen-text-container">
+                <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="competitions"></section>
+        <section class="section" id="partenaires"></section>
     </main>
 
     <footer>