megatron 0.0.3 → 0.0.4

data/app/assets/stylesheets/_grid.scss

@@ -0,0 +1,41 @@
+.grid-demo .grid-cell {
+
+  code {
+    display: inline-block;
+    color: #fff;
+    background: hsl(200, 65%, 72%); 
+    width: 100%;
+    border: none;
+    border-radius: 0px;
+    line-height: 1.8em;
+    margin-bottom: 1px;
+  }
+  .grid {
+    code {
+      background: hsl(160, 45%, 72%); 
+    }
+  }
+}
+
+.cell-size-demo {
+  .grid-cell:nth-child(even) {
+    code {
+      background: hsl(200, 12%, 90%);
+      color: #444;
+    }
+  }
+}
+
+.gutter-demo {
+  .grid-cell:nth-child(2) code {
+     background: hsl(160, 45%, 72%); 
+  }
+
+  .grid-cell:nth-child(3) code {
+     background: hsl(0, 45%, 72%); 
+  }
+
+  .grid-cell:nth-child(4) code {
+     background: hsl(240, 45%, 72%); 
+  }
+}

data/app/assets/stylesheets/_typography.scss

@@ -0,0 +1,38 @@
+.main-content {
+  h2 {
+    font-size: 32px;
+    &:not(:first-of-type) {
+      border-top: 1px solid $page-border;
+      padding-top: $block-margin + 1em;
+      margin-top: $block-margin + 1.2em;
+    }
+  }
+  h3 {
+    font-size: 26px;
+  }
+}
+
+.heading-anchor {
+  position: relative;
+  color: inherit;
+  text-decoration: none;
+
+  &:hover:after {
+    font-weight: normal;
+    display: inline-block;
+    opacity: .3;
+    font-size: .8em;
+    top: -2px;
+    width: 1em;
+    left: .3em;
+    position: relative;
+    content: "§";
+    font-family: Arial,Helvetica,sans-serif;
+
+    @include at-least($large) {
+      position: absolute;
+      left: -.8em;
+      top: 3px;
+    }
+  }
+}

data/app/assets/stylesheets/application.scss

@@ -0,0 +1,19 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any styles
+ * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
+ * file per style scope.
+ *
+ *= require_self
+ */
+@import "megatron/modules/core/index";
+@import "typography";
+@import "grid";
+@import "example";
+

data/app/assets/stylesheets/megatron/error-pages.scss

@@ -0,0 +1,164 @@
+@charset "UTF-8";
+$error-animation-step: .5s;
+* { box-sizing: border-box; }
+
+@import "modules/core/colors";
+@import "modules/core/mixins";
+@import "error-pages/animations";
+
+.error-layout {
+  background: #262b30;
+  height: 100%;
+  @media all and (min-width: 600px) and (min-height: 600px) { overflow: hidden; }
+
+  body {
+    overflow: visible;
+    text-align: center;
+  }
+
+  .error-page {
+    padding: 60px 0 20px;
+    display: inline-block;
+    font-family: Helvetica-neue, Helvetica, Arial, sans-serif;
+    color: #788392;
+    
+    svg {
+      position: relative;
+      overflow: visible;
+      z-index: 2;
+      transform: translate3d(0,0,0);
+      margin: 4em;
+    }
+
+    .error-message {
+      margin: 1em 0;
+      position: relative;
+      transform: translate3d(0,0,0);
+      z-index: 2;
+    }
+    
+    h1 {
+      font-size: 50px;
+      font-weight: normal;
+      margin: 0;
+      span {
+        animation: $error-animation-step*3 ease-out fade-in-slowly;
+      }
+    }
+    p {
+      font-size: 20px;
+      margin: 10px 0;
+      span {
+        animation: $error-animation-step*4 ease-out fade-in-slowly;
+      }
+    }
+
+    .support-links {
+      margin: 1.5em 0;
+      animation: $error-animation-step*5 ease-out fade-in-slowly;
+      position: relative;
+      z-index: 3;
+    }
+
+    a {
+      color: $shade;
+      text-decoration: none;
+      &:hover { text-decoration: underline; }
+      + a:before {
+        content: "";
+        position: relative;
+        top: -.3em;
+        width: 10px;
+        margin: 0 15px;
+        border-top: 1px solid $shade;
+        display: inline-block;
+      }
+    }
+    &.error-404 svg:hover + .error-message {
+      animation: error-party .9s linear infinite;
+      transform: translateY(10px);
+
+      [data-alt-message]{
+        font-size: 0;
+        &:before { content: attr(data-alt-message) }
+      }
+      h1[data-alt-message]:before {
+        font-size: 20px;
+      }
+      p[data-alt-message]:before {
+        font-size: 50px;
+      }
+      p {
+        animation: error-bounce .5s linear infinite; 
+      }
+    }
+  } 
+
+  @for $i from 1 through 12 {
+    [id$=cube-#{$i}], [id$=cube-#{$i + 12}], [id$=cube-#{$i + 24}] {
+      animation: drop-cube-#{$i} .9s cubic-bezier(0.190, 1.000, 0.320, 1.000);
+      path {
+        animation: fade-cube-#{$i} .9s cubic-bezier(0.190, 1.000, 0.320, 1.000);
+      }
+    }
+  }
+
+  .reverse-stack svg:hover + .error-message {
+    h1[data-alt-message]:before { 
+      font-size: 20px;
+      position: relative;
+      top: 10px;
+    }
+
+    p[data-alt-message]:before  { 
+      font-size: 50px;
+    }
+
+  }
+
+  .error-404 svg:hover {
+
+    @for $i from 1 through 12{
+      [id$=cube-#{$i}] path, [id$=cube-#{$i + 12}] path, [id$=cube-#{$i + 24}] path {
+        animation: fade-out-cube-#{$i} .7s cubic-bezier(0.190, 1.000, 0.320, 1.000) infinite;
+      }
+    }
+
+  }
+}
+
+$logo-width: 20px;
+$logo-height: $logo-width * 1.173;
+$cube-animation-style: 1.5s ease-out infinite;
+
+@include tetromino-graphics(small, $logo-width, $logo-height, 47515b, 262b30);
+
+.hidden_label {
+  font-size: 0;
+}
+
+.compose-logo {
+  position: relative;
+  height: $logo-height * 1.7;
+  width: $logo-width * 2.5;
+  display: inline-block;
+  text-align: left;
+  top: -5px;
+  margin: 4em 0;
+
+  &:before, &:after,
+  .hidden_label:before,
+  .hidden_label:after   { @extend %small-tetromino; }
+
+  &:before              { @extend %small-tetromino-position-1 }
+  .hidden_label:before  { @extend %small-tetromino-position-2 }
+  .hidden_label:after   { @extend %small-tetromino-position-3 }
+  &:after               { @extend %small-tetromino-position-4 }
+
+  &:hover {
+    &:before              { animation: small-tetromino-animation-1 $cube-animation-style; }
+    .hidden_label:before  { animation: small-tetromino-animation-2 $cube-animation-style; }
+    .hidden_label:after   { animation: small-tetromino-animation-3 $cube-animation-style; z-index: 2; }
+    &:after               { animation: small-tetromino-animation-4 $cube-animation-style; }
+  }
+}

data/app/assets/stylesheets/megatron/error-pages/_animations.scss

@@ -0,0 +1,96 @@
+$error-drop-distance: 200px;
+
+@for $i from 1 through 12 {
+  @keyframes drop-cube-#{$i} {
+    0%, #{7 * $i}% {
+      transform: translateY($error-drop-distance);
+    } 100% {
+      transform: translateY(0);
+    }
+  }
+  @keyframes fade-cube-#{$i} {
+    0%, #{7 * $i}% {
+      opacity: 0;
+    } 
+    100% {
+      opacity: 1;
+    }
+  }
+  @keyframes fade-out-cube-#{$i} {
+    $start: 3 * $i;
+    $mid: 100 - $start;
+    0%, #{$start}% {
+      opacity: 1;
+    }
+    #{$mid}% {
+      opacity: 0;
+    }
+    100% {
+      opacity: 1;
+    }
+  }
+}
+
+@keyframes error-party {
+  0% {
+    color: #8e55dd;
+  } 20% {
+    color: #967adc;
+  } 40% {
+    color: #fef0bd;
+  } 60% {
+    color: #d4eef7;
+  } 80% {
+    color: #82c1ed;
+  } 100% {
+    color: #5d9cec;
+  }
+}
+
+@keyframes fade-in-slowly {
+  0%   { opacity: 0; }
+  80%  { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+@keyframes error-bounce {
+  0%, 100% {
+    transform: scale(.95, .95)
+  }
+  50% {
+    transform: scale(1, 1)
+  }
+}
+
+/*
+  @keyframes waves-1 {
+    0% {
+      transform: translate(0px, 0px);
+    } 100% {
+      transform: translate(40px, 0px);
+    }
+  }  
+  @keyframes waves-2 {
+    0% {
+      transform: translate(0px, 0px);
+    } 100% {
+      transform: translate(-40px, 0px);
+    }
+  }
+
+  @keyframes tide {
+    0%, 100% {
+      transform: translateY(0);
+    } 50% {
+      transform: translateY(-25px);
+    }
+  }
+
+  @keyframes csi {
+    0% {
+      transform: translateY(1.5em);
+    } 100% {
+      transform: translateY(-1.5em * 4);
+    }
+  }
+*/

data/app/assets/stylesheets/megatron/error-pages/_csi.scss

@@ -0,0 +1,41 @@
+.csi {
+  overflow: hidden;
+  position: relative;
+  display: block;
+  height: 1.5em;
+}
+
+.csi span {
+  display: block;
+  text-align: center;
+  line-height: 1.5em;
+}
+
+.error-page.error-503:hover {
+  p {
+    margin: 0;
+  }
+  .csi {
+    animation: $error-animation-step*2 ease-out fade-in-slowly;
+    font-size: 50px;
+    top: 15px;
+  }
+  .csi span { 
+    font-size: 50px;
+    &:first-child {
+      display: none;
+    }
+    transform: translateY(-1.5em * 3);
+    animation: csi 4.5s steps(5, end);
+  }
+  h1:after {
+    content: "YEEEEEAAAAAAAHHHH!!!!!";
+    display: block;
+    font-size: 16px;
+    position: absolute;
+    top: 100%;
+    width: 100%;
+    text-align: center;
+    animation: 7s ease-out fade-in-slowly;
+  }
+}

data/app/assets/stylesheets/megatron/error-pages/_waves.scss

@@ -0,0 +1,36 @@
+.waves-bg {
+  $animation-style: 1.5s ease-in-out infinite;
+  $box-height: 66px;
+  $box-width: 40px;
+  $top-shift: $box-height/2;
+  position: fixed;
+  top: 0; left: 0;
+  bottom: 0; right: 0;
+  z-index: -1;
+  animation: tide 4.5s ease infinite;
+  
+  &:before, &:after {
+    background-image: url('data:image/svg+xml;utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="40" height="44.7" viewBox="0 0 59.4 66.5"%3E%3ClinearGradient id="a" gradientUnits="userSpaceOnUse" x1="29.72" y1="66.48" x2="29.72"%3E%3Cstop offset=".117" stop-opacity="0"/%3E%3Cstop offset="1" stop-opacity=".1"/%3E%3C/linearGradient%3E%3Cpath fill="url(%23a)" d="M29.7 0L0 16.6v33.2l29.7 16.6 29.7-16.6V16.6L29.7 0z"/%3E%3Cpath opacity=".3" fill="%2330363d" d="M29.7 7.8L7 20.5l22.7 12.7 22.7-12.7L29.7 7.8"/%3E%3C/svg%3E');
+    position: absolute;
+    top: -$box-width; left: -$box-width;
+    bottom: -$box-width; right: -$box-width;
+    background-size: $box-width $box-height;
+    opacity: 0;
+    content: "";
+    transition: opacity 1.5s ease-out;
+  }
+  &:after {
+    background-position: $box-width/2 $top-shift;
+    animation: waves-1 $animation-style;
+  }
+  &:before {
+    animation: waves-2 $animation-style;
+  }
+}
+
+.error-500:hover + .waves-bg {
+  opacity: 1;
+  &:before, &:after {
+    opacity: 1;
+  }
+}

data/app/assets/stylesheets/megatron/megatron.scss

@@ -0,0 +1,3 @@
+@charset "UTF-8";
+@import "modules/index";
+/*# sourceMappingURL=/stylesheets/megatron.css.map */