Logo + Navigation Desktop FR View

resources/sass/_partials/_general.scss

@@ -0,0 +1,12 @@
+.logo-container {
+    position: fixed;
+    top: -15px;
+    max-width: 500px;
+
+    img {
+        width: 100%;
+    }
+}
+a {
+    outline: none !important;
+}

resources/sass/_partials/_navigation.scss

@@ -0,0 +1,163 @@
+//vars
+$fg: #00bcd4;
+$pi: 3.14;
+
+//config
+$menu-items: 3;
+$menu-items-always-open: 2;
+$open-distance: 105px;
+$opening-angle: $pi*2;
+$hamburger-spacing: 10px;
+$default-opacity: 0.75;
+$ball-spacing: 90px;
+
+%ball {
+    background: $fg;
+    border-radius: 100%;
+    width: 70px;
+    height: 70px;
+    margin-left: -35px;
+    position: absolute;
+    top: 20px;
+    color: white;
+    text-align: center;
+    line-height: 70px;
+    transform: translate3d(0, 0, 0);
+    transition: transform ease-out 200ms;
+    opacity: $default-opacity;
+
+    img {
+        width: 52px;
+        height: 52px;
+        margin: 9px;
+    }
+}
+
+%ball-hover {
+    opacity: 1;
+}
+
+.menu {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 100px;
+    height: 100vh;
+    box-sizing: border-box;
+    font-size: 20px;
+    text-align: center;
+
+    .menu-open {
+        display: none;
+    }
+
+    .menu-item, .menu-item-always-open {
+        @extend %ball;
+        opacity: 0;
+        transition-timing-function: cubic-bezier(0.165, 0.840, 0.440, 1.000);
+
+        @for $i from 1 through $menu-items {
+            &:nth-child(#{$i+2}) {
+                transition-duration: 180ms;
+            }
+        }
+    }
+
+    @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;
+
+            &:hover {
+                @extend %ball-hover;
+            }
+        }
+    }
+
+    .hamburger {
+        $width: 32px;
+        $height: 4px;
+        width: $width;
+        height: $height;
+        background: white;
+        display: block;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin-left: -$width/2;
+        margin-top: -$height/2;
+        transition: transform 200ms;
+        border-radius: 20px;
+
+        &:first-of-type {
+            transform: translate3d(0, -$hamburger-spacing, 0);
+        }
+
+        &:nth-of-type(2) {
+            transform: translate3d(0, 0, 0);
+        }
+
+        &:last-of-type {
+            transform: translate3d(0, $hamburger-spacing, 0);
+        }
+    }
+
+    .menu-open:checked + .menu-open-button {
+        .hamburger {
+            &:first-of-type {
+                transform: translate3d(0, 0, 0) rotate(45deg);
+            }
+
+            &:nth-of-type(2) {
+                transform: translate3d(0, 0, 0) scale(0.1, 1);
+            }
+
+            &:last-of-type {
+                transform: translate3d(0, 0, 0) rotate(-45deg);
+            }
+        }
+    }
+
+    .menu-open-button {
+        @extend %ball;
+        z-index: 2;
+        transition-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1.275);
+        transition-duration: 400ms;
+        transform: scale(1.05, 1.05) translate3d(0, 0, 0);
+        cursor: pointer;
+
+        &:hover {
+            @extend %ball-hover;
+            transform: scale(1.1, 1.1) translate3d(0, 0, 0);
+        }
+    }
+
+    .menu-open:checked + .menu-open-button {
+        transition-timing-function: linear;
+        transition-duration: 200ms;
+        transform: scale(0.9, 0.9) translate3d(0, 0, 0);
+    }
+
+    .menu-open:checked ~ .menu-item, .menu-open:checked ~ .menu-item-always-open {
+        opacity: $default-opacity;
+
+        &:hover {
+            @extend %ball-hover;
+        }
+    }
+
+    .menu-open:checked ~ .menu-item {
+        @for $i from 1 through $menu-items {
+            &:nth-child(#{$i+2}) {
+                transition-duration: 90ms+(100ms*$i);
+                transform: translate3d(0, $ball-spacing*$i, 0);
+            }
+        }
+    }
+
+    .menu-open:checked ~ .menu-item-always-open {
+        transition-duration: 90ms+(100ms);
+        transform: translate3d(0, $ball-spacing*$menu-items, 0);
+    }
+}
+

resources/sass/app.scss

@@ -9,3 +9,5 @@ $widescreen-enabled: false;
   // Disable the fullhd breakpoint
 $fullhd-enabled: false;
 
+@import "./_partials/general";
+@import "./_partials/navigation";

view/fr/index.html

@@ -1,18 +1,46 @@
 <!DOCTYPE html>
 <html lang="fr">
 <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta name="description" content="site web du club conjure de l'école de technologie supérieure ÉTS à Montréal">
-    <meta name="keywords" content="Conjure, Laboratoire de médias interactifs, Club Conjure, ÉTS, École de technologie supérieure, jeu vidéo, médias interactifs">
-    <meta name="author" content="Club Conjure">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="site web du club conjure de l'école de technologie supérieure ÉTS à Montréal" />
+    <meta name="keywords" content="Conjure, Laboratoire de médias interactifs, Club Conjure, ÉTS, École de technologie supérieure, jeu vidéo, médias interactifs" />
+    <meta name="author" content="Club Conjure" />
 
     <title>Club Conjure</title>
 
     <link rel="stylesheet" type="text/css" href="../../public/css/main.min.css">
 </head>
 <body>
+    <header class="logo-container">
+        <a href="#"><img src="../../public/img/conjure-logo.png" alt="Conjure Logo"></a>
+    </header>
 
+    <nav class="menu">
+        <input type="checkbox" class="menu-open" name="menu-open" id="menu-open" />
+        <label class="menu-open-button" for="menu-open">
+            <span class="hamburger"></span>
+            <span class="hamburger"></span>
+            <span class="hamburger"></span>
+        </label>
+        <a href="#apropos" class="menu-item">
+            <img src="../../public/img/icons/profile.png" alt="À Propos"/>
+        </a>
+        <a href="#activites" class="menu-item">
+            <img src="../../public/img/icons/medal.png" alt="Activitiés / Compétitions"/>
+        </a>
+        <a href="#partenaires" class="menu-item">
+            <img src="../../public/img/icons/sponsor.png" alt="Partenaires"/>
+        </a>
+        <a href="https://www.facebook.com/ConjureETS/" class="menu-item-always-open">
+            <img src="../../public/img/icons/facebook.png" alt="Facebook"/>
+        </a>
+        <a href="mailto:conjure@ens.etsmtl.ca" class="menu-item-always-open">
+            <img src="../../public/img/icons/email.png" alt="Courriel"/>
+        </a>
+    </nav>
+
+    <main></main>
 
     <script type="application/javascript" src="../../public/js/main.min.js"></script>
 </body>