Merge pull request #228 from codeschool/404_page_styles

johndjameson · johndjameson · commit 10555b96b7d7 · 2015-06-05T09:33:53.000-04:00
404 page styles
diff --git a/client/stylesheets/structures/_errorHero.sass b/client/stylesheets/structures/_errorHero.sass
@@ -9,6 +9,8 @@
 //
 // .errorHero
 //   .errorHero-img
+//     .errorHero-img-boat
+//     .errorHero-img-ocean
 //
 // *************************************
 
@@ -31,9 +33,42 @@
 // ----- Image ----- //
 
 .errorHero-img
+  $errorHero-img-width: 90vw
   bottom: 0
   height: calc(100vh - #{$site-header-height-l} - #{$site-footer-height})
-  left: 4vw // FIXME: Magic number!
+  left: (100 - $errorHero-img-width) / 2
   max-width: none
   position: absolute
-  width: 90vw
+  width: $errorHero-img-width
+
+  @media screen and (min-aspect-ratio: 3 / 2)
+    $errorHero-img-width-l: 70vw
+    left: (100 - $errorHero-img-width-l) / 2
+    width: $errorHero-img-width-l
+
+// Scaffolding
+
+// Scaffolding: Boat
+
+.errorHero-img-boat
+  animation: errorHero-img-boat 1.25s ease-in-out infinite alternate
+  transform-origin: center
+
+// Scaffolding: Ocean
+
+.errorHero-img-ocean
+  animation: slideLeft1of6 2.5s linear infinite
+
+// ------------------------------------
+//   Animations
+// ------------------------------------
+
+// ----- Image ----- //
+
+// Boat
+
+@-webkit-keyframes errorHero-img-boat
+  from
+    transform: translateY(-$errorHero-bob-offset) rotate(-2deg)
+  to
+    transform: translateY($errorHero-bob-offset) rotate(1deg)
