timequake 1.0.8 → 2.0.2

data/app/assets/stylesheets/timequake/margin.scss

@@ -0,0 +1,246 @@
+.mx-hr {
+  margin-left: .5rem !important;
+  margin-right: .5rem !important;
+}
+
+.my-hr {
+  margin-top: .5rem !important;
+  margin-bottom: .5rem !important;
+}
+
+@for $i from 0 through 8 {
+  .mx-#{$i} {
+    margin-left: #{$i}rem !important;
+    margin-right: #{$i}rem !important;
+  }
+
+  .my-#{$i} {
+    margin-top: #{$i}rem !important;
+    margin-bottom: #{$i}rem !important;
+  }
+}
+
+.m-hr { margin: .5rem !important; }
+@for $i from 0 through 8 {
+  .m-#{$i} { margin: #{$i}rem !important; }
+}
+
+.mb-hr { margin-bottom: .5rem !important; }
+@for $i from 0 through 8 {
+  .mb-#{$i} { margin-bottom: #{$i}rem !important; }
+}
+
+.mt-hr { margin-top: .5rem !important; }
+@for $i from 0 through 8 {
+  .mt-#{$i} { margin-top: #{$i}rem !important; }
+}
+
+.mr-hr { margin-right: .5rem !important; }
+@for $i from 0 through 8 {
+  .mr-#{$i} { margin-right: #{$i}rem !important; }
+}
+
+.ml-hr { margin-left: .5rem !important; }
+@for $i from 0 through 8 {
+  .ml-#{$i} { margin-left: #{$i}rem !important; }
+}
+
+// MEDIUM
+@media (min-width: $medium) {
+  .md-mx-hr {
+    margin-left: .5rem !important;
+    margin-right: .5rem !important;
+  }
+
+  .md-my-hr {
+    margin-top: .5rem !important;
+    margin-bottom: .5rem !important;
+  }
+
+  @for $i from 0 through 8 {
+    .md-mx-#{$i} {
+      margin-left: #{$i}rem !important;
+      margin-right: #{$i}rem !important;
+    }
+
+    .md-my-#{$i} {
+      margin-top: #{$i}rem !important;
+      margin-bottom: #{$i}rem !important;
+    }
+  }
+
+  .md-m-hr { margin: .5rem !important; }
+  @for $i from 0 through 8 {
+    .md-m-#{$i} { margin: #{$i}rem !important; }
+  }
+
+  .md-mb-hr { margin-bottom: .5rem !important; }
+  @for $i from 0 through 8 {
+    .md-mb-#{$i} { margin-bottom: #{$i}rem !important; }
+  }
+
+  .md-mt-hr { margin-top: .5rem !important; }
+  @for $i from 0 through 8 {
+    .md-mt-#{$i} { margin-top: #{$i}rem !important; }
+  }
+
+  .md-mr-hr { margin-right: .5rem !important; }
+  @for $i from 0 through 8 {
+    .md-mr-#{$i} { margin-right: #{$i}rem !important; }
+  }
+
+  .md-ml-hr { margin-left: .5rem !important; }
+  @for $i from 0 through 8 {
+    .md-ml-#{$i} { margin-left: #{$i}rem !important; }
+  }
+}
+
+// LARGE
+@media (min-width: $large) {
+  .lg-mx-hr {
+    margin-left: .5rem !important;
+    margin-right: .5rem !important;
+  }
+
+  .lg-my-hr {
+    margin-top: .5rem !important;
+    margin-bottom: .5rem !important;
+  }
+
+  @for $i from 0 through 8 {
+    .lg-mx-#{$i} {
+      margin-left: #{$i}rem !important;
+      margin-right: #{$i}rem !important;
+    }
+
+    .lg-my-#{$i} {
+      margin-top: #{$i}rem !important;
+      margin-bottom: #{$i}rem !important;
+    }
+  }
+
+  .lg-m-hr { margin: .5rem !important; }
+  @for $i from 0 through 8 {
+    .lg-m-#{$i} { margin: #{$i}rem !important; }
+  }
+
+  .lg-mb-hr { margin-bottom: .5rem !important; }
+  @for $i from 0 through 8 {
+    .lg-mb-#{$i} { margin-bottom: #{$i}rem !important; }
+  }
+
+  .lg-mt-hr { margin-top: .5rem !important; }
+  @for $i from 0 through 8 {
+    .lg-mt-#{$i} { margin-top: #{$i}rem !important; }
+  }
+
+  .lg-mr-hr { margin-right: .5rem !important; }
+  @for $i from 0 through 8 {
+    .lg-mr-#{$i} { margin-right: #{$i}rem !important; }
+  }
+
+  .lg-ml-hr { margin-left: .5rem !important; }
+  @for $i from 0 through 8 {
+    .lg-ml-#{$i} { margin-left: #{$i}rem !important; }
+  }
+}
+
+// XLARGE
+@media (min-width: $xlarge) {
+  .xlg-mx-hr {
+    margin-left: .5rem !important;
+    margin-right: .5rem !important;
+  }
+
+  .xlg-my-hr {
+    margin-top: .5rem !important;
+    margin-bottom: .5rem !important;
+  }
+
+  @for $i from 0 through 8 {
+    .xlg-mx-#{$i} {
+      margin-left: #{$i}rem !important;
+      margin-right: #{$i}rem !important;
+    }
+
+    .xlg-my-#{$i} {
+      margin-top: #{$i}rem !important;
+      margin-bottom: #{$i}rem !important;
+    }
+  }
+
+  .xlg-m-hr { margin: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xlg-m-#{$i} { margin: #{$i}rem !important; }
+  }
+
+  .xlg-mb-hr { margin-bottom: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xlg-mb-#{$i} { margin-bottom: #{$i}rem !important; }
+  }
+
+  .xlg-mt-hr { margin-top: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xlg-mt-#{$i} { margin-top: #{$i}rem !important; }
+  }
+
+  .xlg-mr-hr { margin-right: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xlg-mr-#{$i} { margin-right: #{$i}rem !important; }
+  }
+
+  .xlg-ml-hr { margin-left: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xlg-ml-#{$i} { margin-left: #{$i}rem !important; }
+  }
+}
+
+// XXLARGE
+@media (min-width: $xxlarge) {
+  .xxlg-mx-hr {
+    margin-left: .5rem !important;
+    margin-right: .5rem !important;
+  }
+
+  .xxlg-my-hr {
+    margin-top: .5rem !important;
+    margin-bottom: .5rem !important;
+  }
+
+  @for $i from 0 through 8 {
+    .xxlg-mx-#{$i} {
+      margin-left: #{$i}rem !important;
+      margin-right: #{$i}rem !important;
+    }
+
+    .xxlg-my-#{$i} {
+      margin-top: #{$i}rem !important;
+      margin-bottom: #{$i}rem !important;
+    }
+  }
+
+  .xxlg-m-hr { margin: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xxlg-m-#{$i} { margin: #{$i}rem !important; }
+  }
+
+  .xxlg-mb-hr { margin-bottom: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xxlg-mb-#{$i} { margin-bottom: #{$i}rem !important; }
+  }
+
+  .xxlg-mt-hr { margin-top: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xxlg-mt-#{$i} { margin-top: #{$i}rem !important; }
+  }
+
+  .xxlg-mr-hr { margin-right: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xxlg-mr-#{$i} { margin-right: #{$i}rem !important; }
+  }
+
+  .xxlg-ml-hr { margin-left: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xxlg-ml-#{$i} { margin-left: #{$i}rem !important; }
+  }
+}

data/app/assets/stylesheets/timequake/padding.scss

@@ -0,0 +1,246 @@
+.px-hr {
+  padding-left: .5rem !important;
+  padding-right: .5rem !important;
+}
+
+.py-hr {
+  padding-top: .5rem !important;
+  padding-bottom: .5rem !important;
+}
+
+@for $i from 0 through 8 {
+  .px-#{$i} {
+    padding-left: #{$i}rem !important;
+    padding-right: #{$i}rem !important;
+  }
+
+  .py-#{$i} {
+    padding-top: #{$i}rem !important;
+    padding-bottom: #{$i}rem !important;
+  }
+}
+
+.p-hr { padding: .5rem !important; }
+@for $i from 0 through 8 {
+  .p-#{$i} { padding: #{$i}rem !important; }
+}
+
+.pb-hr { padding-bottom: .5rem !important; }
+@for $i from 0 through 8 {
+  .pb-#{$i} { padding-bottom: #{$i}rem !important; }
+}
+
+.pt-hr { padding-top: .5rem !important; }
+@for $i from 0 through 8 {
+  .pt-#{$i} { padding-top: #{$i}rem !important; }
+}
+
+.pr-hr { padding-right: .5rem !important; }
+@for $i from 0 through 8 {
+  .pr-#{$i} { padding-right: #{$i}rem !important; }
+}
+
+.pl-hr { padding-left: .5rem !important; }
+@for $i from 0 through 8 {
+  .pl-#{$i} { padding-left: #{$i}rem !important; }
+}
+
+// MEDIUM
+@media (min-width: $medium) {
+  .md-px-hr {
+    padding-left: .5rem !important;
+    padding-right: .5rem !important;
+  }
+
+  .md-py-hr {
+    padding-top: .5rem !important;
+    padding-bottom: .5rem !important;
+  }
+
+  @for $i from 0 through 8 {
+    .md-px-#{$i} {
+      padding-left: #{$i}rem !important;
+      padding-right: #{$i}rem !important;
+    }
+
+    .md-py-#{$i} {
+      padding-top: #{$i}rem !important;
+      padding-bottom: #{$i}rem !important;
+    }
+  }
+
+  .md-p-hr { padding: .5rem !important; }
+  @for $i from 0 through 8 {
+    .md-p-#{$i} { padding: #{$i}rem !important; }
+  }
+
+  .md-pb-hr { padding-bottom: .5rem !important; }
+  @for $i from 0 through 8 {
+    .md-pb-#{$i} { padding-bottom: #{$i}rem !important; }
+  }
+
+  .md-pt-hr { padding-top: .5rem !important; }
+  @for $i from 0 through 8 {
+    .md-pt-#{$i} { padding-top: #{$i}rem !important; }
+  }
+
+  .md-pr-hr { padding-right: .5rem !important; }
+  @for $i from 0 through 8 {
+    .md-pr-#{$i} { padding-right: #{$i}rem !important; }
+  }
+
+  .md-pl-hr { padding-left: .5rem !important; }
+  @for $i from 0 through 8 {
+    .md-pl-#{$i} { padding-left: #{$i}rem !important; }
+  }
+}
+
+// LARGE
+@media (min-width: $large) {
+  .lg-px-hr {
+    padding-left: .5rem !important;
+    padding-right: .5rem !important;
+  }
+
+  .lg-py-hr {
+    padding-top: .5rem !important;
+    padding-bottom: .5rem !important;
+  }
+
+  @for $i from 0 through 8 {
+    .lg-px-#{$i} {
+      padding-left: #{$i}rem !important;
+      padding-right: #{$i}rem !important;
+    }
+
+    .lg-py-#{$i} {
+      padding-top: #{$i}rem !important;
+      padding-bottom: #{$i}rem !important;
+    }
+  }
+
+  .lg-p-hr { padding: .5rem !important; }
+  @for $i from 0 through 8 {
+    .lg-p-#{$i} { padding: #{$i}rem !important; }
+  }
+
+  .lg-pb-hr { padding-bottom: .5rem !important; }
+  @for $i from 0 through 8 {
+    .lg-pb-#{$i} { padding-bottom: #{$i}rem !important; }
+  }
+
+  .lg-pt-hr { padding-top: .5rem !important; }
+  @for $i from 0 through 8 {
+    .lg-pt-#{$i} { padding-top: #{$i}rem !important; }
+  }
+
+  .lg-pr-hr { padding-right: .5rem !important; }
+  @for $i from 0 through 8 {
+    .lg-pr-#{$i} { padding-right: #{$i}rem !important; }
+  }
+
+  .lg-pl-hr { padding-left: .5rem !important; }
+  @for $i from 0 through 8 {
+    .lg-pl-#{$i} { padding-left: #{$i}rem !important; }
+  }
+}
+
+// XLARGE
+@media (min-width: $xlarge) {
+  .xlg-px-hr {
+    padding-left: .5rem !important;
+    padding-right: .5rem !important;
+  }
+
+  .xlg-py-hr {
+    padding-top: .5rem !important;
+    padding-bottom: .5rem !important;
+  }
+
+  @for $i from 0 through 8 {
+    .xlg-px-#{$i} {
+      padding-left: #{$i}rem !important;
+      padding-right: #{$i}rem !important;
+    }
+
+    .xlg-py-#{$i} {
+      padding-top: #{$i}rem !important;
+      padding-bottom: #{$i}rem !important;
+    }
+  }
+
+  .xlg-p-hr { padding: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xlg-p-#{$i} { padding: #{$i}rem !important; }
+  }
+
+  .xlg-pb-hr { padding-bottom: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xlg-pb-#{$i} { padding-bottom: #{$i}rem !important; }
+  }
+
+  .xlg-pt-hr { padding-top: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xlg-pt-#{$i} { padding-top: #{$i}rem !important; }
+  }
+
+  .xlg-pr-hr { padding-right: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xlg-pr-#{$i} { padding-right: #{$i}rem !important; }
+  }
+
+  .xlg-pl-hr { padding-left: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xlg-pl-#{$i} { padding-left: #{$i}rem !important; }
+  }
+}
+
+// XXLARGE
+@media (min-width: $xxlarge) {
+  .xxlg-px-hr {
+    padding-left: .5rem !important;
+    padding-right: .5rem !important;
+  }
+
+  .xxlg-py-hr {
+    padding-top: .5rem !important;
+    padding-bottom: .5rem !important;
+  }
+
+  @for $i from 0 through 8 {
+    .xxlg-px-#{$i} {
+      padding-left: #{$i}rem !important;
+      padding-right: #{$i}rem !important;
+    }
+
+    .xxlg-py-#{$i} {
+      padding-top: #{$i}rem !important;
+      padding-bottom: #{$i}rem !important;
+    }
+  }
+
+  .xxlg-p-hr { padding: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xxlg-p-#{$i} { padding: #{$i}rem !important; }
+  }
+
+  .xxlg-pb-hr { padding-bottom: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xxlg-pb-#{$i} { padding-bottom: #{$i}rem !important; }
+  }
+
+  .xxlg-pt-hr { padding-top: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xxlg-pt-#{$i} { padding-top: #{$i}rem !important; }
+  }
+
+  .xxlg-pr-hr { padding-right: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xxlg-pr-#{$i} { padding-right: #{$i}rem !important; }
+  }
+
+  .xxlg-pl-hr { padding-left: .5rem !important; }
+  @for $i from 0 through 8 {
+    .xxlg-pl-#{$i} { padding-left: #{$i}rem !important; }
+  }
+}

data/app/assets/stylesheets/timequake/typography.scss

@@ -16,6 +16,7 @@ $btn-font: $copy-font !default;
 html {
   font-family: $body-font;
   font-size: $body-font-size;
+  color: $heading-color;
 }
 
 .copy {
@@ -42,3 +43,60 @@ html {
 .heading-4 { font-size: $heading-4-font-size; }
 .heading-5 { font-size: $heading-5-font-size; }
 .heading-6 { font-size: $heading-6-font-size; }
+
+@for $i from 1 through 200 {
+  .fz-#{$i} { font-size: #{$i}px !important; }
+}
+
+.fw-100 { font-weight: 100 !important; }
+.fw-200 { font-weight: 200 !important; }
+.fw-300 { font-weight: 300 !important; }
+.fw-400 { font-weight: 400 !important; }
+.fw-500 { font-weight: 500 !important; }
+.fw-600 { font-weight: 600 !important; }
+.fw-700 { font-weight: 700 !important; }
+.fw-800 { font-weight: 800 !important; }
+.fw-900 { font-weight: 900 !important; }
+
+/* TEXT HELPERS */
+.bold { font-weight: bold !important; }
+.italic { font-style: italic !important; }
+.uppercase { text-transform: uppercase !important; }
+.lowercase { text-transform: lowercase !important; }
+.capitalize { text-transform: capitalize !important; }
+.nowrap { white-space: nowrap !important; }
+.underline { text-decoration: underline !important; }
+.line-through { text-decoration: line-through !important; }
+
+.text-center { text-align: center !important; }
+.text-right { text-align: right !important; }
+.text-left { text-align: left !important; }
+.text-justify { text-align: justify !important; }
+
+@media (min-width: $medium) {
+  .md-text-center { text-align: center !important; }
+  .md-text-right { text-align: right !important; }
+  .md-text-left { text-align: left !important; }
+  .md-text-justify { text-align: justify !important; }
+}
+
+@media (min-width: $large) {
+  .lg-text-center { text-align: center !important; }
+  .lg-text-right { text-align: right !important; }
+  .lg-text-left { text-align: left !important; }
+  .lg-text-justify { text-align: justify !important; }
+}
+
+@media (min-width: $xlarge) {
+  .xlg-text-center { text-align: center !important; }
+  .xlg-text-right { text-align: right !important; }
+  .xlg-text-left { text-align: left !important; }
+  .xlg-text-justify { text-align: justify !important; }
+}
+
+@media (min-width: $xxlarge) {
+  .xxlg-text-center { text-align: center !important; }
+  .xxlg-text-right { text-align: right !important; }
+  .xxlg-text-left { text-align: left !important; }
+  .xxlg-text-justify { text-align: justify !important; }
+}

data/app/assets/stylesheets/timequake/universal.scss

@@ -1,13 +1,20 @@
 $main-overflow: hidden !default;
 $section-padding-desktop: 2rem 0 !default;
 $section-padding-mobile: 1rem 0 !default;
+$link-hover-color: $primary-color !default;
+
+* {
+  box-sizing: border-box;
+  padding: 0;
+  margin: 0;
+}
 
 main { overflow: $main-overflow; }
 
 section {
   padding: $section-padding-mobile;
 
-  @include breakpoint('large') {
+  @media (min-width: $large) {
     padding: $section-padding-desktop;
   }
 }
@@ -15,16 +22,25 @@ section {
 a {
   color: inherit;
   text-decoration: none;
+  transition: 300ms;
+
+  &.link:hover { color: $link-hover-color; }
 }
 
 ul,
 ol {
   &.no-style { list-style-type: none; }
+  &.circle { list-style-type: circle; }
+  &.square { list-style-type: square; }
+  &.upper-roman { list-style-type: upper-roman; }
+  &.lower-alpha { list-style-type: lower-alpha; }
 }
 
 img {
   display: inline-block;
   vertical-align: middle;
   max-width: 100%;
+  max-height: 100%;
+  width: auto;
   height: auto;
 }

data/app/assets/stylesheets/timequake/visibility.scss

@@ -0,0 +1,39 @@
+/* VISIBILITY HELPERS */
+.hide { display: none !important; }
+.md-show { display: none !important; }
+.md-show-inline { display: none !important; }
+.lg-show { display: none !important; }
+.lg-show-inline { display: none !important; }
+.xlg-show { display: none !important; }
+.xlg-show-inline { display: none !important; }
+.xxlg-show { display: none !important; }
+.xxlg-show-inline { display: none !important; }
+.invisible { visibility: hidden !important; }
+
+@media (min-width: $medium) {
+  .md-hide { display: none !important; }
+  .md-show { display: block !important; }
+  .md-show-inline { display: inline-block !important; }
+  .md-invisible { visibility: hidden !important; }
+}
+
+@media (min-width: $large) {
+  .lg-hide { display: none !important; }
+  .lg-show { display: block !important; }
+  .lg-show-inline { display: inline-block !important; }
+  .lg-invisible { visibility: hidden !important; }
+}
+
+@media (min-width: $xlarge) {
+  .xlg-hide { display: none !important; }
+  .xlg-show { display: block !important; }
+  .xlg-show-inline { display: inline-block !important; }
+  .xlg-invisible { visibility: hidden !important; }
+}
+
+@media (min-width: $xxlarge) {
+  .xxlg-hide { display: none !important; }
+  .xxlg-show { display: block !important; }
+  .xxlg-show-inline { display: inline-block !important; }
+  .xxlg-invisible { visibility: hidden !important; }
+}