Merge pull request #3 from KevinVanDerSchans/feature/add-styles

Modify .gitattributes

.gitattributes

@@ -1,5 +1,3 @@
 *.gif filter=lfs diff=lfs merge=lfs -text
 *.mp3 filter=lfs diff=lfs merge=lfs -text
 *.mp4 filter=lfs diff=lfs merge=lfs -text
-
-*.scss filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -15,9 +15,6 @@
 
 # production
 /build
-/src/scss
-
-*.scss
 
 # misc
 .DS_Store
@@ -38,4 +35,3 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-

pages/_app.js

@@ -1,10 +1,7 @@
 import { useRouter } from 'next/router';
 import 'bootstrap/dist/css/bootstrap.min.css';
 import 'jquery/dist/jquery.min.js';
-
-// import "assets/css/style.css"
-// import "../src/scss/style.scss";
-
+import "../src/scss/style.scss";
 
 import Home from './home';
 

src/scss/elements/_alignment.scss

@@ -0,0 +1,172 @@
+.flex {
+  display: flex;
+
+  > * {
+    display: inline-block;
+  }
+}
+
+.flex--wrap {
+  flex-wrap: wrap;
+}
+
+.flex--column {
+  flex-direction: column;
+}
+
+.flex--end {
+  justify-content: flex-end;
+}
+
+.flex--center {
+  justify-content: center;
+  align-items: center;
+}
+
+.flex--center-x {
+  justify-content: center;
+}
+
+.flex--center-y {
+  align-items: center;
+}
+
+.flex--space-between {
+  justify-content: space-between;
+}
+
+.flex--space-around {
+  justify-content: space-around;
+}
+
+.flex--space-evenly {
+  justify-content: space-evenly;
+}
+
+.flex--grow > * {
+  flex-grow: 1;
+}
+
+.flex--shrink-none > * {
+  flex-shrink: 0;
+}
+
+.flex--gap, .flex--gap-md, .flex-gap, .flex-gap--md {
+  > * {
+    margin-right: var(--space-md);
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+.flex--wrap.flex--gap, .flex--wrap.flex--gap-md, .flex--wrap.flex-gap, .flex--wrap.flex-gap--md {
+  margin-bottom: calc(-1 * var(--space-md));
+
+  > * {
+    margin-bottom: var(--space-md);
+  }
+}
+
+.flex--gap-xxs, .flex-gap--xxs {
+  > * {
+    margin-right: var(--space-xxs);
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+.flex--wrap.flex--gap-xxs, .flex--wrap.flex-gap--xxs {
+  margin-bottom: calc(-1 * var(--space-xxs));
+
+  > * {
+    margin-bottom: var(--space-xxs);
+  }
+}
+
+.flex--gap-xs, .flex-gap--xs {
+  > * {
+    margin-right: var(--space-xs);
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+.flex--wrap.flex--gap-xs, .flex--wrap.flex-gap--xs {
+  margin-bottom: calc(-1 * var(--space-xs));
+
+  > * {
+    margin-bottom: var(--space-xs);
+  }
+}
+
+.flex--gap-sm, .flex-gap--sm {
+  > * {
+    margin-right: var(--space-sm);
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+.flex--wrap.flex--gap-sm, .flex--wrap.flex-gap--sm {
+  margin-bottom: calc(-1 * var(--space-sm));
+
+  > * {
+    margin-bottom: var(--space-sm);
+  }
+}
+
+.flex--gap-lg, .flex-gap--lg {
+  > * {
+    margin-right: var(--space-lg);
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+.flex--wrap.flex--gap-lg, .flex--wrap.flex-gap--lg {
+  margin-bottom: calc(-1 * var(--space-lg));
+
+  > * {
+    margin-bottom: var(--space-lg);
+  }
+}
+
+.flex--gap-xl, .flex-gap--xl {
+  > * {
+    margin-right: var(--space-xl);
+
+    &:last-child {
+      margin-right: 0;
+    }
+  }
+}
+
+.flex--wrap.flex--gap-xl, .flex--wrap.flex-gap--xl {
+  margin-bottom: calc(-1 * var(--space-xl));
+
+  > * {
+    margin-bottom: var(--space-xl);
+  }
+}
+
+.flex-item--end {
+  align-self: flex-end;
+}
+
+.flex-item--grow {
+  flex-grow: 1;
+}
+
+.flex-item--shrink-none {
+  flex-shrink: 0;
+}

src/scss/elements/_anim-menu-btn.scss

@@ -0,0 +1,158 @@
+.container-menu {
+  position: relative;
+  z-index: 1;
+  z-index: 99;
+}
+
+.ms-logo__default h3 {
+  transition: color .6s cubic-bezier(.405,0,.025,1);
+}
+
+.ms-logo__default.menu_opened {
+  z-index: 99;
+
+  h3 {
+    transition: color .6s cubic-bezier(.405,0,.025,1);
+    color: var(--color-contrast-low);
+  }
+}
+
+.action-menu {
+    cursor: pointer;
+    position: relative;
+
+  .burger {
+    width: 28px;
+    height: 100%;
+    position: relative;
+    margin-left: 10px;
+
+    .icon-close {
+      position: absolute;
+      top: -2px;
+      left: 0;
+      will-change: transform;
+      transform: rotate(90deg) scale(.8);
+      transition: color .5s, opacity .5s, transform .5s;
+      line {
+        stroke-dasharray: 0px, 999px;
+      }
+    }
+
+    .icon-burger {
+      will-change: transform;
+      transition: transform .3s, color .5s;
+      overflow: hidden;
+      color: var(--color-contrast-higher);
+    }
+  }
+
+  .text {
+    flex: 1 1;
+    position: relative;
+    font-size: 20px;
+    font-family: var(--font-heading);
+    letter-spacing: 1pt;
+
+    span {
+      display: block;
+      color: var(--color-contrast-higher);
+      transition: .6s cubic-bezier(0.575, 0.015, 0.000, 0.995);
+    }
+  }
+
+  .text span:first-child {
+      position: relative;
+      transition-delay: .1s;
+    }
+
+  .text span:nth-child(2) {
+      position: absolute;
+      top:0;
+      left: 0;
+      opacity: 0;
+      transform: translate(0%, 50%) rotate(7deg);
+    }
+
+    &:hover .icon-burger {
+      transform: rotate(90deg);
+    }
+  }
+
+.open-event.style-open {
+
+  .icon-burger {
+    color: var(--color-white);
+  }
+
+  .icon-close {
+    color: var(--color-white);
+    transform: rotate(90deg) scale(1);
+    transition: color .5s, transform .5s;
+  }
+
+  .burger .line:first-child{
+    transform-origin:initial;
+    background-color: hsl(220, 23%, 97%);
+    transform: translateY(4px) rotate(130deg);
+  }
+
+  .burger .line:nth-child(2){
+    background-color: hsl(220, 23%, 97%);
+    transform: translateY(-4px) rotate(225deg);
+  }
+
+  .text span:first-child {
+    transform: translate(0%, -50%) rotate(-7deg);
+    opacity: 0;
+    transition-delay: 0s;
+  }
+
+  .text span:nth-child(2) {
+    opacity: 1;
+    transform: translate(0%, 0%) rotate(0deg);
+    transition-delay: .1s;
+  }
+
+  .text span{
+    color: hsl(220, 23%, 97%);
+  }
+}
+
+.open-event,
+.close-event {
+  background: none;
+  border: none;
+  padding-left: 0;
+  padding-right: 0;
+
+  &:focus {
+    outline: none;
+  }
+
+  &:disabled {
+    color: inherit;
+  }
+}
+
+.open-event {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  cursor: pointer;
+}
+
+.close-event {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  display: none;
+  cursor: pointer;
+}
+
+.close-event:hover + .open-event.style-open .icon-close {
+  transform: rotate(0deg);
+}