moved styles around

Author: mattkersley

_includes/footer.html

@@ -1,7 +1,7 @@
 <footer class="site-footer">
   <div class="wrapper">
     <section>
-      <img src="https://avatars0.githubusercontent.com/u/635655?s=156" alt="Matt Kersley">
+      <img class="footer-avatar" src="https://avatars0.githubusercontent.com/u/635655?s=156" alt="Matt Kersley">
       <p>
         <strong>Matt Kersley</strong><br>
         I’m a web designer &amp; developer from Peterborough (UK). I’ve got over 15 years experience designing and building websites.

_includes/header.html

@@ -7,7 +7,7 @@
   <div class="wrapper">
 
     <!-- logo -->
-    <a href="/">
+    <a class="logo" href="/">
       <svg width="100%" height="100%" viewBox="0 0 900 600" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.41421;">
         <g id="shapes">
           <g opacity="0.6">

_sass/_animations.scss

@@ -16,3 +16,8 @@
   100% {left: 0px; top: 0px;}
 }
 @keyframes pulse { to { transform: scale(1.3, 1.7); opacity: 0; } }
+@keyframes remove-loader {
+  0%   { opacity: 1; }
+  99%  { opacity: 0; height: auto; }
+  100% { opacity: 0; height: 0; }
+}

_sass/_layout.scss

@@ -1,5 +1,52 @@
+/**
+ * HTML Elements
+ */
+
 * { box-sizing: border-box; }
 
+section {
+  border-bottom: solid 1px $grey-color;
+  border-top: solid 1px $grey-color;
+  padding: $spacing-unit 0;
+
+  + section {
+    border-top: 0;
+  }
+
+  &:last-child { border-bottom: 0; }
+}
+
+img{
+  height: auto;
+  max-width: 120%;
+
+  &.full {
+    width: 100%;
+  }
+
+  &.hang {
+    width: 120%;
+  }
+
+  &.left {
+    float: left;
+    margin-left: -10%;
+    margin-right: $spacing-unit;
+    max-width: 60%;
+  }
+
+  &.right {
+    float: right;
+    margin-left: $spacing-unit;
+    margin-right: -10%;
+    max-width: 60%;
+  }
+}
+
+
+/**
+ * Wrappers
+ */
 .wrapper {
   width: 90vw;
   max-width: 1008px;
@@ -12,7 +59,28 @@
   .wrapper { width: 70vw; }
 }
 
-
+/**
+ * Footer
+ */
 .site-footer {
-  margin-top: $spacing-unit*4;
+  section { border-bottom: 0; }
+  p { margin: 0; }
+}
+@include mq(500px){
+  .site-footer { text-align: left; }
+}
+
+.footer-avatar {
+  border: solid 10px $grey-color-light;
+  border-radius: 500px;
+  display: block;
+  margin: 0 auto $spacing-unit auto;
+}
+@include mq(500px){
+  .footer-avatar {
+    display: inline-block;
+    float: left;
+    margin: 0 $spacing-unit $spacing-unit 0;
+    max-width: 20%;
+  }
 }

_sass/_typography.scss

@@ -1,4 +1,8 @@
+/**
+ * HTML Elements
+ */
 body {
+  color: $text-color;
   font-family: 'Esteban', serif;
   font-size: 6vw;
   line-height: 1.5;
@@ -56,3 +60,16 @@ blockquote {
   margin-left: 1em;
   padding-left: 1em;
 }
+
+a {
+  color: $brand-color-2;
+  text-decoration: none;
+}
+
+/**
+ * Footer
+ */
+.site-footer {
+  font-size: .875em;
+  text-align: center;
+}

_sass/logo.scss

@@ -1,3 +1,5 @@
+.logo { display: block; }
+
 svg { display:block; margin: 0 auto; width: 280px; max-width: 80vw; }
 
 #logomark path { fill: $brand-color; }

css/main.scss

@@ -17,75 +17,6 @@
 @import "layout";
 @import "logo";
 
-
-/**
- * HTML elements
- */
-body {
-  color: $text-color;
-}
-
-section {
-  border-bottom: solid 1px $grey-color;
-  border-top: solid 1px $grey-color;
-  padding: $spacing-unit 0;
-
-  + section {
-    border-top: 0;
-  }
-
-  &:last-child { border-bottom: 0; }
-}
-
-footer {
-  font-size: .875em;
-
-  section { border-bottom: 0; }
-
-  img {
-    border: solid 10px $grey-color-light;
-    border-radius: 500px;
-    float: left;
-    margin-bottom: $spacing-unit;
-    margin-right: $spacing-unit;
-    max-width: 20%;
-  }
-
-  p { margin: 0; }
-}
-
-a {
-  color: $brand-color-2;
-  text-decoration: none;
-}
-
-img{
-  height: auto;
-  max-width: 120%;
-
-  &.full {
-    width: 100%;
-  }
-
-  &.hang {
-    width: 120%;
-  }
-
-  &.left {
-    float: left;
-    margin-left: -10%;
-    margin-right: $spacing-unit;
-    max-width: 60%;
-  }
-
-  &.right {
-    float: right;
-    margin-left: $spacing-unit;
-    margin-right: -10%;
-    max-width: 60%;
-  }
-}
-
 /**
  * buttons
  */
@@ -127,23 +58,18 @@ img{
 .js{
 
   .page-content{
-    margin-top: 120px;
+    margin-top: $spacing-unit;
     opacity: 0;
   }
+
   .site-footer { opacity: 0; }
 
   &.loaded{
-    .page-content{
-      animation: movein 1.5s ease-out forwards 0.5s;
-    }
-    .site-footer {
-      animation: fadein 1.5s ease-out forwards 0.5s;
-    }
-
-    .loader{
-      animation: fadeout 0.5s ease-out forwards;
-    }
+    .page-content { animation: movein 1s ease-out forwards 0.5s; }
+    .site-footer  { animation: fadein 1s ease-out forwards 0.5s; }
+    .loader       { animation: remove-loader 0.5s ease-out forwards; }
   }
+
 }
 
 /**
@@ -160,33 +86,37 @@ img{
     margin: 0;
     opacity: 0;
   }
+
+  .loader { display: none; }
 }
 
 /**
  * Loading animation
  */
-.loader {
-  width: 80px;
-  height: 20px;
-  position: relative;
-  margin: 0 auto;
-
-  div {
+.js {
+  .loader {
+    width: 80px;
     height: 20px;
-    width: 20px;
-    background: $brand-color;
-    border-radius: 50%;
-    position: absolute;
-    animation: loader 1.4s ease infinite;
-
-    &:nth-child(2){
-      animation-delay: 0.1s;
-      transform: translateX(30px);
-    }
-
-    &:nth-child(3){
-      animation-delay: 0.2s;
-      transform: translateX(60px);
+    position: relative;
+    margin: 0 auto;
+
+    div {
+      height: 20px;
+      width: 20px;
+      background: $brand-color;
+      border-radius: 50%;
+      position: absolute;
+      animation: loader 1.4s ease infinite;
+
+      &:nth-child(2){
+        animation-delay: 0.1s;
+        transform: translateX(30px);
+      }
+
+      &:nth-child(3){
+        animation-delay: 0.2s;
+        transform: translateX(60px);
+      }
     }
   }
 }