refills 0.0.1 → 0.0.2

data/source/stylesheets/_refills-nav.scss

@@ -0,0 +1,91 @@
+$sidebar-width: em(200);
+
+section.inner-content {
+  margin-left: auto;
+}
+
+.refills-menu-anchor {
+  @include inline-block;
+  cursor: pointer;
+  border: 1px solid gray;
+  height: 50px;
+  width: 50px;
+  padding: .7em 1em;
+  border-radius: 50%;
+  font-size: $base-font-size;
+  margin-bottom: $base-line-height;
+  position: fixed;
+  top: 1em;
+  left: 1em;
+  z-index: 9999;
+
+  img {
+    height: 26px;
+    width: 30px;
+  }
+}
+
+.refills-menu-screen {
+  @include position(fixed, 0px 0px 0px 0px);
+  @include transition;
+  background: teal;
+  opacity: 0;
+  visibility: hidden;
+  z-index: 999998;
+
+  &.is-visible {
+    opacity: 0;
+    visibility: visible;
+  }
+}
+
+.er_toc_title {
+  display: none;
+}
+
+.er_toc_top {
+  display: none;
+}
+
+.er_toc {
+  @include position(fixed, 0px auto 0px 0px);
+  @include size(220px 100%);
+  @include transform(translateX(-220px));
+  @include transition(all .2s linear);
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+  background: #1D3842;
+  z-index: 999999;
+
+  ul {
+    padding: 1em;
+  }
+
+  ul li {    
+    a {
+      color: $light-gray;
+      font-weight: 800;
+      font-size: $base-font-size;
+
+      &:hover {
+        color: #FFF;
+        text-decoration: none;
+      }
+    }
+  }
+
+  ul ul {
+    margin-top: .5em;
+    margin-bottom: 1em;
+    padding: 0;
+  }
+
+  ul ul li a {
+    font-weight: 200;
+  }
+  
+  &.is-visible {
+    @include transform(translateX(0));
+  }
+}
+  

data/source/stylesheets/_refills-styles.scss

@@ -1,173 +1,3 @@
-$refills-color: lighten(desaturate(teal, 60), 40);
-$base-body-color: white;
-
-body {
-  background-color: $base-body-color; 
-}
-
-$refills-nav-height: 60px;
-
-
-
-.refills-header {
-  width: 100%;
-  margin: 0 0 $base-line-height*3;
-  height: $refills-nav-height;
-  background-color: $base-body-color;
-
-  .logo {
-    font-weight: bold;
-    float: left;
-    padding: 0; 
-    text-transform: uppercase;
-    line-height: $refills-nav-height;
-    color: white;
-    background-color: $dark-gray;
-    padding: 0 2em;
-  }
-
-  p {
-    padding-right: 1em;
-    display: block;
-    float: right;
-    margin: 0;
-    line-height: $refills-nav-height;
-    background-color: $base-body-color;
-  }
-
-  &:hover {
-    .nav ul {
-      display: block;
-    }
-  }
-
-  .nav {
-    ul {
-      display: none;
-      -webkit-transform-style: preserve-3d; // stop webkit flicker
-      overflow: hidden;
-      margin: 0 auto;
-      padding: 0;
-      width: 100%;
-
-      li {
-        position: relative;
-        overflow: hidden;
-        display: block;
-        width: 100%;
-        text-align: right;
-        padding: 1em;
-        border-radius: $base-border-radius;
-        line-height: $refills-nav-height;
-        width: 100%;
-        position: relative;
-        display: block;
-        z-index: 99999999;
-        overflow: hidden;
-        font-size: $base-font-size /1.2;
-        font-weight: 200;
-        background-color: $refills-color;
-
-        &:hover {
-          background-color: darken($refills-color, 10);          
-        }
-
-
-        a {
-          padding: 1em;
-          color: white;
-        }
-      }
-    }
-  }
-
-  @include media ($medium-screen) {
-    margin: 2em 0 $base-line-height*3;
-    p {
-      display: none;
-    }
-    .nav {
-      float: right;
-
-      ul {
-        display: block;
-        margin: 0;
-        padding: 0;
-
-        li {
-          display: inline;
-          display: inline;
-          text-decoration: none;
-          line-height: $refills-nav-height;
-          padding-right: 1em;
-        }
-      }
-    }
-  }
-}
-
-/////////////////////////
-
-.refills-wrapper {
-    @include outer-container;
-    padding: 1em;
-
-  h1.main-header {
-    background-color: $refills-color;
-    display: inline-block;
-    padding: 0.5em;
-  }
-
-  .refill {
-    margin-bottom: 2em;
-    padding-bottom: 3em;
-    border-bottom: 2px dashed $light-gray;
-    position: relative;
-
-    > h3 {
-      padding-top: 0.5em;
-      margin-top: 1em;
-      margin-bottom: 1.3em;
-    }
-  }
-}
-
-.js-hide-code {
-  display: none;
-}
-
-.js-show-code {
-  display: block;
-}
-
-pre {
-  display: none;
-  padding: 0;
-  width: 50%;
-  float: left;
-
-  code {
-    max-height: em(400);
-    font-size: $base-font-size/2;  
-    line-height: $base-line-height/2;
-    overflow: scroll;
-  }
-  
-}
-
-.row {
-  @include clearfix;
-
-  .narrow {
-    @include media($medium-screen) {
-      @include span-columns(6);
-      @include omega(2n);  
-    }    
-  }
-}
-
-
-
 @mixin texture($bg-color, $texture-number, $inverted) { $texture-list: "paper.png"             // Fabric and paper
   "rice_paper.png"
   "noise_lines.png"
@@ -255,6 +85,7 @@ pre {
   "grey.png"
   "shinedotted.png"
   "stacked_circles.png"
+  "noisy_grid_simple.png"
   ;
 
   @if ($inverted == 1) {
@@ -267,3 +98,421 @@ pre {
     background-color: $bg-color;
   }
 }
+
+$refills-color: lighten(desaturate(teal, 60), 40);
+$base-body-color: white;
+$refills-nav-height: 60px;
+$refills-anchor-color: #FF4286;
+
+.external a {
+  height: 84px;
+  width: 84px;
+  border: 2px solid white;
+  padding: 2px;
+  display: block;
+  margin: auto;
+  margin-bottom: 3em;
+  background-image: url(../images/cat.png);
+  background-size: 80px 80px;
+  background-repeat: no-repeat;
+
+  &:hover {
+    cursor: pointer;
+    border: 2px solid yellow;
+    border-radius: 50%;
+  }
+}
+
+body {
+  background-color: $base-body-color; 
+  min-width: 320px;
+  -webkit-backface-visibility: hidden;
+}
+
+.refills-header {
+  @include clearfix;
+  background-color: #DDF0EF;
+  clear: both;
+  margin-bottom: 4em;
+  width: 100%;
+  text-align: center;
+  @include texture(#DDF0EF, 30, 1); 
+  padding: 5em 0;
+
+  @include media($medium-screen) {
+    padding: 6em 0;
+  }
+
+  @include media($large-screen) {
+    padding: 9em 0;
+  }
+
+  h1 {
+    font-size: 1em;
+    text-align: center;
+    text-transform: uppercase;
+    padding: .5em 1em;
+    background: #FF4286;
+    color: white;
+    display: inline-block;
+    margin-bottom: 2em;
+    font-family: 'Open Sans', sans-serif;
+    font-weight: 800;
+  }
+
+  h2 {
+    font-size: 1.8em;
+    text-align: center;
+    font-weight: 100;
+    font-family: 'Lusitana', serif;
+    margin: 0 0 $base-line-height*.25;
+    margin: auto; 
+    max-width: 90%;
+    margin-bottom: 1em;
+
+    @include media($medium-screen) {
+      font-size: 3em;
+      max-width: 90%;
+      margin-bottom: 1em;
+    }
+
+    @include media($large-screen) {
+      font-size: 3em;
+      max-width: 60%;
+      margin-bottom: .8em;
+    }
+  }
+
+  h3 {
+    text-align: center;
+    font-weight: 200;
+    font-size: 1.3em;
+    margin-bottom: 1em;
+  }
+
+  a {
+    color: $refills-anchor-color;
+  }
+
+  p {
+    font-family: 'Open Sans', sans-serif;
+    display: inline;
+    padding-top: 1em;
+    @include media($medium-screen) {
+      border-top: 1px solid darken(#DDF0EF, 20);
+    }
+  }
+}
+
+/////////////////////////////////
+
+.menu-wrapper {
+  @include clearfix;
+}
+
+.refills-wrapper {
+    @include outer-container;
+    padding: 1em;
+
+  h1.main-header {
+    background-color: $refills-color;
+    display: inline-block;
+    padding: 0.5em;
+  }
+}
+
+h5 {
+  font-family: 'Lusitana', serif;
+  font-size: 2em;
+  color: #BBB295; 
+  text-align: center;
+}
+
+//////////////////
+
+.refill {
+  margin-bottom: 2em;
+  padding-bottom: 1em;
+  position: relative;
+  @include clearfix;
+
+  > h3 {
+    padding-top: 0.5em;
+    margin-top: 1em;
+    margin-bottom: 1.3em;
+  }
+}
+
+// this centers the refill and sets back to text-align left below first object
+.refill-centering {
+  text-align: center;
+  & > * {
+    display: inline-block;
+    & > * {
+      text-align: left;      
+    }
+  }
+  script {
+    display: none;
+  }
+}
+
+.line-behind-text {
+  text-align: center;
+  border-bottom: 1px solid #CACACA;
+  margin-bottom: $base-line-height *3;
+}
+
+.line-behind-text h6 {
+  font-family: 'Oswald', sans-serif;
+  text-transform: uppercase;
+  color: gray;
+  font-weight: 500;
+  display: inline-block;
+  position: relative;
+  font-size: 1em;
+  top: 34px;
+  background: white;
+  padding: 0 10px;
+}
+
+.refill h6 {
+  margin-bottom: $base-line-height;
+}
+
+/////////////////////////
+
+.js-hide-code, 
+.js-show-code {
+  border-top: 1px dashed #BEBCBC;
+  color: #7E7A7A;
+  text-transform: uppercase;
+  font-size: .8em;
+  width: 9em;
+
+
+  &:hover {
+    // background: darken(desaturate(#F5F2F0, 10), 3);
+    color: $base-accent-color;
+  }
+}
+
+.js-show-code {
+  display: inline-block;
+  padding: 0.5em 1em;
+  // border-radius: $base-border-radius;
+}
+
+.js-hide-code {
+  display: none;
+  padding: 0.5em 1em;
+  // border-radius: $base-border-radius;
+}
+
+.refill-snippet {
+  margin-top: $base-line-height *3;
+}
+
+.refill-control {
+  display: block;
+  text-align: center;
+  margin-bottom: 2em;
+  width: 100%;
+}
+
+//////////////////////////
+
+pre[class*="language-"] {
+  height: 300px;
+  border-top: 2px solid silver;
+  background: #F8F8F8;
+  line-height: 1em;
+}
+
+.copy-source {
+  background-color: lighten($dark-gray, 20);
+  border-radius: 10px;
+  font-size: $base-font-size/2;
+  color: white;
+  text-transform: uppercase;
+  font-weight: 800;
+  padding: 0.4em 1em;
+
+  &:hover, &:active {
+    background-color: lighten($dark-gray, 20);
+    color: white;
+  }
+}
+
+.snippet {
+  display: none;
+
+  @include media($medium-screen) {
+    width: 50%;
+    float: left;
+    margin-bottom: 2em;
+  }
+
+  code {
+    max-height: em(400);
+    font-size: .7em;
+    line-height: 1.4em;
+    overflow: scroll;
+  }
+}
+
+.token.variable {
+  background-color: transparent;
+}
+
+footer.refills-footer {
+  padding-top: 1em;
+  padding-bottom: 2em;
+  color: silver;
+  text-align: center;
+  
+  a {
+    color: $refills-anchor-color;
+  }
+
+  img {
+    display: block;
+    height: 60px;
+    margin: auto;
+    margin-bottom: 2em;
+  }
+}
+
+///////////////////////// refill adjustments
+
+.refill-smaller {
+  @include media($large-screen) {
+    width: 70%;
+    margin: auto;
+  }
+}
+
+///////////////////////// 
+
+@include keyframes(fadeInAccordionTabsArticles) {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
+.accordion-tabs-type-systems {
+  $tab-border-color: $base-border-color;
+  $tab-border: 1px solid $tab-border-color;
+  $tab-content-background: lighten($light-gray, 15);
+  $tab-active-background: $tab-content-background;
+  $tab-inactive-color: $base-body-color;
+  $tab-inactive-hover-color: darken($light-gray, 5);
+  $tab-mode: $medium-screen;
+
+  @include clearfix;
+  border-radius: $base-border-radius;
+  border: $tab-border;
+  margin-bottom: $base-line-height;
+ 
+  @include media($tab-mode) {
+    border: none;
+  }
+ 
+  .tab {
+    @include media($tab-mode) {
+      display: inline;
+    }
+ 
+    &:first-child .tab-link {
+      border-top-left-radius: $base-border-radius;
+      border-top-right-radius: $base-border-radius;
+    }
+ 
+    &:last-child .tab-link {
+      border-bottom-left-radius: $base-border-radius;
+      border-bottom-right-radius: $base-border-radius;
+ 
+      @include media($tab-mode) {
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+ 
+    .tab-link-type-system {
+      background-color: transparent;
+      border-bottom: 1px solid $tab-border-color;
+      color: $dark-gray;
+      display: block;
+      font-size: .9em;
+      letter-spacing: .6px;
+      font-weight: 200;
+      padding: $base-line-height/2 $gutter/2;
+      text-align: center;
+ 
+      @include media($tab-mode) {
+        @include inline-block;
+        border-bottom: 0;
+        border-top-right-radius: $base-border-radius;
+        border-top-left-radius: $base-border-radius;
+      }
+ 
+      &:hover {
+        color: $base-link-color;
+      }
+ 
+      &:focus {
+        outline: none;
+      }
+    }
+ 
+    section {
+      padding: $base-line-height $gutter;
+      background: $tab-content-background;
+      display: none;
+      overflow: hidden;
+      width: 100%;
+ 
+      @include media($tab-mode) {
+        border-bottom-left-radius: $base-border-radius;
+        border-bottom-right-radius: $base-border-radius;
+        border-top: $tab-border;
+        float: left;
+        left: 0;
+        padding: $base-line-height/2 $gutter;
+      }
+
+      .tab-content {
+        opacity: 0;
+      }
+    }
+ 
+    &.js-is-active {
+      border-bottom: $tab-border;
+
+      @include media($tab-mode) {
+        border-bottom: 0;
+      }
+
+      .tab-link-type-system {
+        background-color: $tab-active-background;
+        border-bottom: 0;
+ 
+        @include media($tab-mode) {
+          background-color: $tab-active-background;
+          border: $tab-border;
+          border-bottom: 1px solid $tab-active-background;
+          margin-bottom: -1px;
+        }
+      }
+ 
+      section {
+        display: block;
+
+        .tab-content {
+          @include animation-name(fadeInAccordionTabsArticles);
+          @include animation-duration(1s);
+          opacity: 1;
+        }
+      }
+    }
+  }
+}