Working on #5

svef · May 16, 2016 · d0ce9f5 · d0ce9f5
1 parent 0aacd8e
commit d0ce9f5
Show file tree

Hide file tree

Showing 21 changed files with 960 additions and 19 deletions.
diff --git a/src/scripts/main.js b/src/scripts/main.js
@@ -1,3 +1,5 @@
 import foo from './modules/foo'
 
 console.log(foo())
+
+setTimeout(() => document.querySelector('html').classList.remove('loading'), 500)
diff --git a/src/styles/_config.scss b/src/styles/_config.scss
@@ -1,4 +1,10 @@
 
+// Footer
+$footer-height: 80px;
+
+// Font
+$font-size: 18px;
+
 // SVEF vefverdlaun colors
 $color-orange: #E7792B;
 $color-green: #56A3A6;

diff --git a/src/styles/components/footer/_index.scss b/src/styles/components/footer/_index.scss
@@ -0,0 +1,30 @@
+
+footer {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 100;
+
+  margin: auto;
+  padding: $spacing;
+  // width: $page-max-width;
+  height: $footer-height;
+
+  text-align: center;
+
+  background: $color-gray;
+
+  transition: transform 500ms ease 750ms;
+  transform: translate3d(0,0,0);
+
+  .loading & {
+    transform: translate3d(0,100%,0);
+  }
+
+  .svg-logo-svef {
+    margin: auto;
+    width: auto;
+    height: $footer-height - ($spacing*2);
+  }
+}
diff --git a/src/styles/components/header/_index.scss b/src/styles/components/header/_index.scss
@@ -0,0 +1,91 @@
+
+header {
+  position: relative;
+  z-index: 1;
+
+  display: block;
+  margin: 0 auto $spacing;
+  padding: 0;
+  height: 100px;
+
+  &:after {
+    content: '';
+    position: absolute;
+    right: 0; bottom: 0;
+
+    display: block;
+    width: calc(100% - #{$spacing*2});
+    height: 4px;
+
+    background: $color-orange;
+
+    transition: transform 250ms ease 750ms;
+    transform: translate3d(0,0,0);
+
+    .loading & {
+      transform: translate3d(100%,0,0);
+    }
+  }
+
+  nav {
+    position: absolute;
+    left: $spacing*2;
+    right: 0;
+    bottom: 4px;
+
+    opacity: 1;
+    transition: opacity 500ms ease 500ms;
+
+    a {
+      position: relative;
+
+      margin: 0 $spacing;
+      padding: 0;
+
+      display: inline-block;
+      line-height: 40px;
+
+      font-size: 20px;
+      text-decoration: none;
+
+      opacity: 1;
+      transform: translate3d(0,0,0);
+      transition: opacity 750ms, transform 500ms;
+      transition-delay: 1000ms;
+
+      &:after {
+        content: '';
+
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: 0;
+
+        display: block;
+        width: auto;
+        height: 4px;
+
+        background: $color-orange;
+
+        transform: translate3d(0,100%,0);
+        transition: transform 150ms;
+      }
+
+      &.active,
+      &:hover {
+        &:after {
+          transform: translate3d(0,0,0);
+        }
+      }
+    }
+
+    .loading & {
+      opacity: 0;
+
+      a {
+        opacity: 0;
+        transform: translate3d(100%,0,0);
+      }
+    }
+  }
+}
diff --git a/src/styles/components/html/_index.scss b/src/styles/components/html/_index.scss
@@ -3,7 +3,8 @@ html {
   margin: 0;
   padding: 0;
 
-  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial;
+  width: 100%;
+  height: 100%;
 
   background: $color-gray;
   color: $color-gray-light;
@@ -15,6 +16,9 @@ html {
 body {
   margin: 0;
   padding: 0;
+
+  width: 100%;
+  height: 100%;
 }
 
 // Default box-sizing to border-box, except for images and hr

diff --git a/src/styles/components/loading/_index.scss b/src/styles/components/loading/_index.scss
@@ -0,0 +1,23 @@
+
+loading {
+  display: block;
+
+  .svg-logo-svef {
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    z-index: 0;
+
+    margin: auto;
+    width: 80%;
+    max-width: 800px;
+
+    opacity: 0;
+    transform: translate3d(0,40vh,0) scale(0.2);
+    transition: opacity 500ms, transform 750ms;
+
+    .loading & {
+      opacity: 1;
+      transform: translate3d(0,0,0) scale(1);
+    }
+  }
+}
diff --git a/src/styles/components/main/_index.scss b/src/styles/components/main/_index.scss
@@ -1,5 +1,50 @@
 
 main {
-  margin: 0;
-  padding: 20px;
+  overflow: hidden;
+
+  position: relative;
+  z-index: 1;
+
+  margin: 0 auto;
+  padding: 0 0 ($footer-height + $spacing);
+
+  max-width: $page-max-width;
+  min-height: 100vh;
+
+  color: $color-gray;
+
+  > grid {
+    max-width: $page-max-width - ($spacing*4);
+    position: relative;
+    z-index: 1;
+
+    text-align: left;
+
+    opacity: 1;
+    transform: translate3d(0,0,0);
+    transition: opacity 500ms, transform 750ms;
+    transition-delay: 1s;
+
+    .loading & {
+      opacity: 0;
+      transform: translate3d(0,20px,0);
+    }
+  }
+
+  &:after {
+    position: absolute;
+    top: 0; left: 0; right: 0; bottom: 0;
+    z-index: 0;
+
+    content: '';
+
+    background: $color-gray-light;
+
+    transition: transform 500ms ease 250ms;
+    transform: rotateY(0deg);
+
+    .loading & {
+      transform: rotateY(90deg);
+    }
+  }
 }
diff --git a/src/styles/components/typography/_index.scss b/src/styles/components/typography/_index.scss
@@ -1,5 +1,99 @@
+@import url("http://overpass-30e2.kxcdn.com/overpass.css");
+
+html, body {
+  font-family: "Overpass", "Helvetica Neue", Helvetica, Arial;
+  font-size: 16px;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  margin: 0 auto $spacing;
+  padding: 0;
 
-h1 {
-  margin: 0 auto 20px;
   font-weight: 400;
+  line-height: 1.275;
+  letter-spacing: -1px;
+}
+
+h1 {
+  font-size: 30px;
+  @include respond-to(medium) {
+    margin-bottom: $spacing*2;
+    font-size: 45px;
+    letter-spacing: -3px;
+  }
+  @include respond-to(large) {
+    font-size: 56px;
+  }
 }
+
+h2 {
+  font-size: 28px;
+  @include respond-to(medium) {
+    font-size: 36px;
+  }
+  @include respond-to(large) {
+    margin-bottom: $spacing*2;
+    font-size: 45px;
+  }
+}
+
+h3 {
+  font-size: 24px;
+  @include respond-to(medium) {
+    font-size: 30px;
+  }
+  @include respond-to(large) {
+    font-size: 36px;
+  }
+}
+
+h4 {
+  font-size: 20px;
+  @include respond-to(medium) {
+    font-size: 22px;
+  }
+  @include respond-to(large) {
+    font-size: 24px;
+  }
+}
+
+h5 {
+  font-size: 20px;
+  letter-spacing: 0;
+}
+
+h6 {
+  font-size: 18px;
+  letter-spacing: 0;
+}
+
+hgroup {
+  @include clearfix;
+  margin-bottom: $spacing;
+
+  h1, h2, h3, h4, h5, h6 {
+    + h1, + h2, + h3, + h4, + h5, + h6 {
+      margin-bottom: -$spacing / 2;
+    }
+  }
+
+  :last-child { margin-bottom: 0; }
+}
+
+p {
+  margin: 0 auto $spacing;
+  font-size: $font-size;
+  font-weight: 300;
+  line-height: 1.875;
+}
+
+a {
+  color: inherit;
+}
+
+.text-small { font-size: $font-size * 0.75; }
+.text-large { font-size: $font-size * 1.125; }
+
+.text-center { text-align: center; }
+.text-left { text-align: left; }
+.text-right { text-align: right; }
diff --git a/src/styles/components/vectors/_logo-svef.scss b/src/styles/components/vectors/_logo-svef.scss
@@ -1,11 +1,7 @@
 
 .svg-logo-svef {
-  position: absolute;
-  top: 0; left: 0; right: 0; bottom: 0;
-
-  margin: auto;
-  width: 80%;
-  max-width: 800px;
+  width: 486px;
+  height: auto;
 
   .svef {
     fill: $color-orange;

diff --git a/src/styles/styles.scss b/src/styles/styles.scss
@@ -1,9 +1,11 @@
-@import "https://fonts.googleapis.com/css?family=Open+Sans:400,600,400italic,300|Merriweather:400,700,300";
 
 @import "config";
 @import "utils/index";
 
+@import "components/footer/index";
+@import "components/header/index";
 @import "components/html/index";
+@import "components/loading/index";
 @import "components/main/index";
 @import "components/typography/index";
 @import "components/vectors/index";
diff --git a/src/styles/utils/_grid.scss b/src/styles/utils/_grid.scss
@@ -55,6 +55,8 @@ grid {
     padding-left: $grid-gutter/2;
     padding-right: $grid-gutter/2;
 
+    text-align: left;
+
     @each $i in $breakArray {
       @include respond-to(nth($i,1)) {
         @include grid-columns(nth($i,1));

diff --git a/src/styles/utils/_index.scss b/src/styles/utils/_index.scss
@@ -1,4 +1,6 @@
 
+@import "normalize";
+
 @import "mixins/index";
 
 @import "grid";