timequake 1.0.9 → 2.0.0

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 100 {
+  .fz-#{$i} { font-size: #{$i}px; }
+}
+
+.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

@@ -2,12 +2,18 @@ $main-overflow: hidden !default;
 $section-padding-desktop: 2rem 0 !default;
 $section-padding-mobile: 1rem 0 !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,11 +21,16 @@ section {
 a {
   color: inherit;
   text-decoration: none;
+  transition: 300ms;
 }
 
 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 {

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; }
+}

data/lib/generators/timequake/templates/timequake_overrides.scss

@@ -1,3 +1,15 @@
+//FONTS add fonts here
+// e.g.
+// @font-face {
+//   font-family: 'Butler Black';
+//   src: font-url('butler_black.otf')
+// }
+//
+// @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;900&display=swap');
+//
+// $butler_black: 'Butler Black', serif;
+// $raleway: 'Raleway', sans-serif;
+
 // BREAKPOINTS
 $medium: 600px;
 $large: 800px;
@@ -23,6 +35,7 @@ $teal: #2D9FA2;
 $primary-color: $red;
 $secondary-color: $yellow;
 $tertiary-color: $blue;
+$heading-color: #333;
 $copy-color: #333;
 $success-color: #2FAC58;
 $info-color: #25327C;
@@ -52,6 +65,7 @@ $btn-border-radius: 5px;
 $btn-border-width: 1px;
 $btn-padding: 11px 5px;
 $btn-font-size: 16px;
+$btn-font-weight: 700;
 $btn-font: $copy-font;
 $btn-color: $primary-color;
 $btn-border-color: $primary-color;
@@ -110,3 +124,60 @@ $section-padding-desktop: 2rem 0;
 $section-padding-mobile: 1rem 0;
 
 @import 'timequake/index';
+
+// HAMBURGERS
+$hamburger-padding-x           : 15px;
+$hamburger-padding-y           : 15px;
+$hamburger-layer-width         : 40px;
+$hamburger-layer-height        : 4px;
+$hamburger-layer-spacing       : 6px;
+$hamburger-layer-color         : #789798;
+$hamburger-layer-border-radius : 4px;
+$hamburger-hover-opacity       : 0.7;
+$hamburger-active-layer-color  : $hamburger-layer-color;
+$hamburger-active-hover-opacity: $hamburger-hover-opacity;
+
+// To use CSS filters as the hover effect instead of opacity,
+// set $hamburger-hover-use-filter as true and
+// change the value of $hamburger-hover-filter accordingly.
+$hamburger-hover-use-filter   : false;
+$hamburger-hover-filter       : opacity(0%);
+$hamburger-active-hover-filter: $hamburger-hover-filter;
+
+// Remove or comment out the hamburger types you don’t want
+// or need, so they get excluded from the compiled CSS.
+$hamburger-types: (
+  3dx,
+  3dx-r,
+  3dy,
+  3dy-r,
+  3dxy,
+  3dxy-r,
+  arrow,
+  arrow-r,
+  arrowalt,
+  arrowalt-r,
+  arrowturn,
+  arrowturn-r,
+  boring,
+  collapse,
+  collapse-r,
+  elastic,
+  elastic-r,
+  emphatic,
+  emphatic-r,
+  minus,
+  slider,
+  slider-r,
+  spring,
+  spring-r,
+  stand,
+  stand-r,
+  spin,
+  spin-r,
+  squeeze,
+  vortex,
+  vortex-r
+);
+
+@import "hamburgers/hamburgers"