refills 0.1.0 → 0.2.0

data/source/stylesheets/_refills-footer.scss

@@ -0,0 +1,62 @@
+footer.refills-footer {
+  color: silver;
+  padding-bottom: 2em;
+  padding-top: 1em;
+  text-align: center;
+
+  a {
+    color: $refills-anchor-color;
+    text-decoration: none;
+  }
+
+  p {
+    font-size: 0.8em;
+    line-height: 1.5em;
+    margin: 0 1em;
+
+    @include media($refills-large-screen) {
+      font-size: 1em;
+    }
+  }
+
+  .refills-footer-logo {
+    margin-bottom: 2em;
+  }
+
+  img {
+    @include clearfix;
+    display: block;
+    height: 60px;
+    margin: auto;
+  }
+
+  .footer-links {
+    border-top: 2px solid;
+    display: inline-block;
+    font-family: $refills-narrow-sans;
+    font-size: 0.8em;
+    font-weight: 300;
+    margin-bottom: 4em;
+    padding: 0.6em;
+    text-transform: uppercase;
+
+    @include media($refills-large-screen) {
+      font-size: 1em;
+      padding: 1em;
+    }
+
+    li {
+      display: inline;
+      padding: 0.4em;
+
+      a {
+        color: #a7a7a7;
+        text-decoration: none;
+
+        &:hover {
+          color: $refills-anchor-color;
+        }
+      }
+    }
+  }
+}

data/source/stylesheets/_refills-header.scss

@@ -0,0 +1,113 @@
+.refills-header {
+  @include clearfix;
+  background-color: $refills-hero-background;
+  clear: both;
+  margin-bottom: 1em;
+  padding: 5em 0 8em;
+  text-align: center;
+  width: 100%;
+
+  @include media($refills-medium-screen) {
+    margin-bottom: 4em;
+    padding: 6em 0 8em;
+  }
+
+  @include media($refills-large-screen) {
+    border-bottom: 2px solid darken($refills-hero-background, 5%);
+    margin-bottom: 4em;
+    padding: 6em 0 8em;
+  }
+
+  .refills-logo {
+    display: inline-block;
+    margin: 0 auto 1.4em auto;
+
+    svg {
+      @include size(80px);
+      background: $refills-body-background-color;
+      border-radius: 50%;
+      fill: $refills-logo-color;
+      padding: 0.3em;
+
+      @include media($refills-medium-screen) {
+        @include size(120px);
+        padding: 0.5em;
+      }
+    }
+  }
+
+  h2 {
+    font-family: $refills-second-serif;
+    font-size: 1.4em;
+    font-weight: 100;
+    line-height: 1.4em;
+    margin: 0 auto 2em auto;
+    max-width: 80%;
+    text-align: center;
+
+    @include media($refills-medium-screen) {
+      font-size: 2em;
+      margin-bottom: 1em;
+      max-width: 80%;
+    }
+
+    @include media($refills-large-screen) {
+      font-size: 3em;
+      line-height: 1.3em;
+      margin-bottom: 0.8em;
+      max-width: 45%;
+    }
+  }
+
+  h3 {
+    font-size: 1.3em;
+    font-weight: 200;
+    margin-bottom: 1em;
+    text-align: center;
+  }
+
+  a {
+    color: $refills-anchor-color;
+    text-decoration: none;
+
+    &:focus,
+    &:hover {
+      color: lighten($refills-anchor-color, 10%);
+    }
+  }
+
+  p {
+    @include refills-inset;
+    border-radius: 30px;
+    color: darken(desaturate($refills-logo-color, 50%), 15%);
+    display: inline-block;
+    font-family: $refills-narrow-sans;
+    font-size: 0.8em;
+    font-weight: 400;
+    margin-bottom: 2em;
+    padding: 0.5em 1.4em;
+
+    @include media($refills-large-screen) {
+      font-size: 0.8em;
+    }
+  }
+
+  .empties-banner {
+    $empties-color: #776faa;
+    background-color: $empties-color;
+    border: 1px solid darken(transparentize($empties-color, 0.1), 10%);
+    border-radius: 5px;
+    box-shadow: 0 2px 0 darken(transparentize($empties-color, 0.7), 10%);
+    color: lighten(#c8c0ff, 8);
+    display: inline-block;
+    font-family: $refills-narrow-sans;
+    margin-bottom: 2em;
+    padding: 1em 2em;
+
+    &:hover,
+    &:focus {
+      background-color: lighten($empties-color, 1%);
+      color: lighten(#c8c0ff, 10);
+    }
+  }
+}

data/source/stylesheets/_refills-menu.scss

@@ -0,0 +1,91 @@
+ul.refills-menu {
+  font-weight: normal;
+  margin: -3em auto 0.7em auto;
+  padding: 0;
+  text-align: center;
+
+  @include media($refills-medium-screen) {
+    margin: -6em auto 0.4em auto;
+  }
+
+  @include media($refills-large-screen) {
+    margin: -6.7em auto 0.8em auto;
+  }
+
+  .menu-item {
+    display: inline;
+
+    a {
+      @include refills-inset;
+      border-radius: 3px;
+      color: $refills-secondary-anchor-color;
+      font-family: $refills-narrow-sans;
+      font-size: 0.8em;
+      font-weight: 300;
+      padding: 0.5em 1em 1.5em;
+      text-decoration: none;
+
+      @include media($refills-medium-screen) {
+        font-size: 1em;
+        padding: 0.5em 1.8em 1.3em;
+      }
+
+      @include media($refills-large-screen) {
+        font-size: 1.2em;
+        padding: 0.7em 2.7em 2em;
+      }
+
+      &:hover {
+        color: lighten($refills-secondary-anchor-color, 10%);
+      }
+    }
+  }
+}
+
+.refills-patterns li.patterns a {
+  background: $refills-body-background-color;
+  box-shadow: none;
+
+  &:hover {
+    color: darken($refills-hero-background, 20%);
+  }
+}
+
+.refills-components li.components a {
+  background: $refills-body-background-color;
+  box-shadow: none;
+
+  &:hover {
+    color: darken($refills-hero-background, 20%);
+  }
+}
+
+.refills-type-systems li.type-systems a {
+  background: $refills-body-background-color;
+  box-shadow: none;
+
+  &:hover {
+    color: darken($refills-hero-background, 20%);
+  }
+}
+
+.refills-unstyled li.unstyled a {
+  background: $refills-body-background-color;
+  box-shadow: none;
+
+  &:hover {
+    color: darken($refills-hero-background, 20%);
+  }
+}
+
+.menu-item.unstyled {
+  position: relative;
+}
+
+.menu-item.unstyled::after {
+  content: url('/images/new.svg');
+  position: absolute;
+  right: -42px;
+  top: -63px;
+  transform: scale(0.4) rotate(13deg);
+}

data/source/stylesheets/_refills-nav.scss

@@ -1,4 +1,4 @@
-$sidebar-width: em(200);
+$sidebar-width: 12.5em;
 
 section.inner-content {
   margin-left: auto;
@@ -7,18 +7,19 @@ section.inner-content {
 .refills-menu-anchor {
   @include position(fixed, 4.5em null null 1em);
   @include size(50px);
-  border: 1px solid darken(desaturate(#93e9be, 50), 15%);
+  border: 1px solid $refills-secondary-anchor-color;
   border-radius: 50%;
   cursor: pointer;
   display: inline-block;
-  font-size: 1em;
-  padding: 0.7em 1em;
+  fill: $refills-secondary-anchor-color;
   margin-bottom: 1.5em;
+  padding-top: 0.9em;
+  text-align: center;
   transition: all 0.2s ease-in-out;
   z-index: 9999;
 
   &.fixedsticky-on {
-    margin-top: -3.5em;
+    margin-top: 0;
   }
 
   &.fixedsticky-off {
@@ -26,7 +27,7 @@ section.inner-content {
   }
 
   img {
-    @include size(30px 26px);
+    @include size(30px, 26px);
     max-width: 100%;
   }
 }
@@ -40,10 +41,10 @@ section.inner-content {
 }
 
 .refills-menu-screen {
-  @include position(fixed, 0 0 0 0);
-  @include transition;
+  @include position(fixed, 0);
   background-color: teal;
   opacity: 0;
+  transition: all 0.15s ease-out;
   visibility: hidden;
   z-index: 999998;
 
@@ -61,13 +62,12 @@ section.inner-content {
 .er_toc {
   $base-line-height: 1.5em !default;
   @include position(fixed, 0 auto 0 0);
-  @include size(220px 100%);
-  @include transform(translateX(-220px));
-  @include transition(all 0.2s linear);
+  @include size(220px, 100%);
   background-color: black;
-  overflow-y: auto;
   -webkit-font-smoothing: antialiased;
   -webkit-overflow-scrolling: touch;
+  overflow-y: auto;
+  transform: translateX(-220px);
   transition: all 0.2s linear;
   z-index: 999999;
 
@@ -103,6 +103,6 @@ section.inner-content {
   }
 
   &.is-visible {
-    @include transform(translateX(0));
+    transform: translateX(0);
   }
 }

data/source/stylesheets/_refills-styles.scss

@@ -1,665 +1,29 @@
 body {
+  -webkit-backface-visibility: hidden;
+  background: $refills-body-background-color;
   -webkit-font-smoothing: antialiased;
+  min-width: 320px;
 }
 
-$refills-body-background-color: #fff;
-
-nav.bourbon {
-  text-rendering: optimizeLegibility;
-
-  ul {
-    list-style-type: none;
-    margin: 0;
-    padding: 0;
-
-    li a {
-      text-decoration: none;
-    }
-  }
-
-  h1 {
-    margin: 0;
-
-    a {
-      text-decoration: none;
-    }
-  }
-}
-
-$refills-color: lighten(desaturate(teal, 60%), 40%);
-$refills-accent-color: #477dca;
-$refills-nav-height: 60px;
-$refills-logo-color: #93e9be;
-$refills-anchor-color: #f55481;
-$refills-hero-background: #e7f1ec;
-$refills-highlight-color: #bbb295;
-$refills-narrow-sans: "Oswald", sans-serif;
-$refills-white-shadow: 0 1px 1px transparentize(#fff, 0.6);
-$refills-medium-screen: em(640);
-$refills-large-screen: em(860);
-
-$refills-serif: "Lusitana", $georgia;
-$refills-second-serif: $georgia;
-
 @mixin refills-inset {
   background: darken($refills-hero-background, 2%);
-  box-shadow: inset 0 1px 2px darken($refills-hero-background, 7%), $refills-white-shadow;
+  border: 1px solid darken($refills-hero-background, 7);
+  box-shadow: $refills-white-shadow;
   text-shadow: $refills-white-shadow;
 }
 
-body {
-  -webkit-backface-visibility: hidden;
-  background: $refills-body-background-color;
-  min-width: 320px;
-}
-
-.refills-header {
-  @extend .refills-header;
-  @include clearfix;
-  background-color: $refills-hero-background;
-  clear: both;
-  margin-bottom: 1em;
-  padding: 5em 0;
-  text-align: center;
-  width: 100%;
-
-  @include media($refills-medium-screen) {
-    margin-bottom: 4em;
-    padding: 6em 0;
-  }
-
-  @include media($refills-large-screen) {
-    margin-bottom: 4em;
-    padding: 6em 0 11em 0;
-  }
-
-  .refills-logo {
-    display: inline-block;
-    margin: 0 auto 1.4em auto;
-
-    @include media($refills-medium-screen) {
-      max-width: 8em;
-      max-height: 8em;
-    }
-
-    img {
-      background: #fff;
-      border-radius: 50%;
-      padding: 0.3em;
-      margin-bottom: 1em;
-      max-width: 5em;
-      max-height: 5em;
-
-      @include media($refills-medium-screen) {
-        margin-bottom: 2em;
-        max-width: 8em;
-        max-height: 8em;
-        padding: 0.5em;
-      }
-    }
-  }
-
-  h2 {
-    font-family: $refills-second-serif;
-    font-size: 1.4em;
-    font-weight: 100;
-    margin: 0 auto 2em auto;
-    max-width: 90%;
-    text-align: center;
-    line-height: 1.4em;
-
-    @include media($refills-medium-screen) {
-      font-size: 2em;
-      margin-bottom: 1em;
-      max-width: 90%;
-    }
-
-    @include media($refills-large-screen) {
-      font-size: 3em;
-      margin-bottom: 0.8em;
-      line-height: 1.3em;
-      max-width: 55%;
-    }
-  }
-
-  h3 {
-    font-size: 1.3em;
-    font-weight: 200;
-    margin-bottom: 1em;
-    text-align: center;
-  }
-
-  a {
-    color: $refills-anchor-color;
-    text-decoration: none;
-
-    &:focus,
-    &:hover {
-      color: lighten($refills-anchor-color, 10%);
-    }
-  }
-
-  p {
-    @include refills-inset;
-    border-radius: 30px;
-    color: darken(desaturate($refills-logo-color, 50%), 15%);
-    display: inline;
-    font-family: $refills-narrow-sans;
-    font-size: 0.8em;
-    font-weight: 400;
-    padding: 0.5em 1.4em;
-
-    @include media($refills-large-screen) {
-      font-size: 0.8em;
-    }
-  }
-}
-
 .menu-wrapper {
   @include clearfix;
 }
 
-// Refill menu
-
-ul.refills-menu {
-  font-weight: normal;
-  margin-bottom: 5em;
-  margin: -3.3em auto 0 auto;
-  text-align: center;
-
-  @include media($refills-medium-screen) {
-    margin: -6em auto 0 auto;
-  }
-
-  @include media($refills-large-screen) {
-    margin: -6.7em auto 0 auto;
-  }
-
-  .menu-item {
-    display: inline;
-
-    a {
-      text-decoration: none;
-      border-radius: 3px;
-      color: darken($refills-hero-background, 20%);
-      font-family: "Lusitana", serif;
-      font-size: 0.9em;
-      padding: 0.5em 0.5em 2em;
-
-      @include media($refills-medium-screen) {
-        font-size: 1.1em;
-        padding: 0.5em 0.8em 2em;
-      }
-
-      @include media($refills-large-screen) {
-        font-size: 1.3em;
-        padding: 0.5em 1.3em 2em;
-      }
-
-      &:hover {
-        color: darken($refills-hero-background, 30%);
-      }
-    }
-  }
-}
-
-.refills-patterns li.patterns a {
-  background: $refills-body-background-color;
-
-  &:hover {
-    color: darken($refills-hero-background, 20%);
-  }
-}
-
-.refills-components li.components a {
-  background: $refills-body-background-color;
-
-  &:hover {
-    color: darken($refills-hero-background, 20%);
-  }
-}
-
-.refills-type-systems li.type-systems a {
-  background: $refills-body-background-color;
-
-  &:hover {
-    color: darken($refills-hero-background, 20%);
-  }
-}
-
 #example {
-  padding-top: 6em;
-}
-
-// Refill section
-
-section.refill {
-  @include clearfix;
-  margin-bottom: 2em;
-  padding-bottom: 1em;
-  position: relative;
-
-  > h3 {
-    margin-bottom: 1.3em;
-    margin-top: 1em;
-    padding-top: 0.5em;
-  }
-}
-
-.refills-wrapper {
-  @include outer-container;
-  padding: 1em;
-
-  h1.main-header {
-    background-color: $refills-color;
-    display: inline-block;
-    padding: 0.5em;
-  }
-}
-
-// 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 {
-  border-bottom: 1px solid #cacaca;
-  text-align: center;
-  margin-bottom: 4.5em;
-}
-
-.line-behind-text h6 {
-  background: #fff;
-  color: gray;
+  background: $refills-body-background-color;
   display: inline-block;
-  font-family: $refills-narrow-sans;
-  font-size: 1em;
-  font-weight: 500;
-  padding: 0 10px;
+  padding-top: 1em;
   position: relative;
-  text-transform: uppercase;
-  top: 34px;
-}
-
-.refill h6 {
-  margin-bottom: 1.5em;
-
-}
-
-// Hiding and showing code
-
-.js-hide-code,
-.js-show-code {
-  border-top: 1px dashed #bebcbc;
-  color: #7e7a7a;
-  font-size: 0.8em;
-  text-transform: uppercase;
-  width: 9em;
-
-  &:hover {
-    color: $refills-accent-color;
-  }
-}
-
-.js-show-code {
-  display: inline-block;
-  padding: 0.5em 1em;
-}
-
-.js-hide-code {
-  display: none;
-  padding: 0.5em 1em;
-}
-
-
-.refill-control {
-  display: block;
-  margin-bottom: 2em;
-  text-align: center;
   width: 100%;
 
-  a {
-    line-height: 1.5em;
-    text-decoration: none;
-  }
-
-}
-
-// Snippet
-
-.refill-snippet {
-  margin-top: 4.5em;
-  padding: 0 1em;
-
-  table {
-    border-collapse: collapse;
-    margin: (1.5em / 2) 0;
-    table-layout: fixed;
-    width: 100%;
-  }
-
-  th {
-    font-weight: bold;
-    padding: (1.5em / 2) 0;
-    text-align: left;
-  }
-
-  td {
-    padding: (1.5em / 2) 0;
-  }
-
-  tr,
-  td,
-  th {
-    vertical-align: middle;
-  }
-}
-
-pre[class*="language-"] {
-  background-color: #f8f8f8;
-  border-top: 2px solid silver;
-  height: 300px;
-  line-height: 1em;
-}
-
-.snippets-table {
-  display: none;
-
-  td {
-    border-bottom: 0;
-  }
-
-  .snippet:nth-child(4n) {
-    display: none;
-  }
-}
-
-
-.snippet {
-
-  @include media($refills-medium-screen) {
-    margin-bottom: 2em;
-  }
-
-  .copy-source-container {
-    min-height: 3.4em;
-
-    @include media($refills-medium-screen) {
-      min-height: 2.5em;
-    }
-
-    @include media($refills-large-screen) {
-      min-height: 1em;
-    }
-  }
-
-  &:nth-of-type(1) .copy-source {
-    background: #e98065;     
-  }
-
-  &:nth-of-type(2) .copy-source {
-    background: #55a1d4;     
-  }
-
-  &:nth-of-type(3) .copy-source:nth-of-type(1) {
-    background: #e9c05b;     
-  }
-
-  &:nth-of-type(3) .copy-source:nth-of-type(2) {
-    background: #89b981;     
-  }
-
-  .copy-source {
-    border-bottom-left-radius: 10px;
-    border-bottom-right-radius: 0;
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
-    color: #fff;
-    display: inline-block;
-    font-size: 0.5em;
-    font-weight: 800;
-    padding: 0.4em 1em;
-    text-transform: uppercase;
-
-    &:hover,
-    &:active {
-      background-color: lighten(#333, 20%);
-      color: #fff;
-    }
-  }
-
-  a {
-    text-decoration: none;
-  }
-
-  code {
-    font-size: 0.6em;
-    line-height: 1.4em;
-    max-height: em(400);
-    overflow: scroll;
-  }
-}
-
-.token.variable {
-  background-color: transparent;
-}
-
-// Footer
-
-footer.refills-footer {
-  color: silver;
-  padding-bottom: 2em;
-  padding-top: 1em;
-  text-align: center;
-
-  a {
-    color: $refills-anchor-color;
-    text-decoration: none;
-  }
-
-  p {
-    font-size: 0.8em;
-    line-height: 1.5em;
-    margin: 0 1em;
-
-    @include media($refills-large-screen) {
-      font-size: 1em;
-    }
-  }
-
-  .refills-footer-logo {
-    margin-bottom: 2em;
-  }
-
-  img {
-    @include clearfix;
-    display: block;
-    height: 60px;
-    margin: auto;
-  }
-
-  .footer-links {
-    background: #f3f3f3;
-    border-radius: 3em;
-    box-shadow: inset 0 1px 2px darken(#f3f3f3, 6%);
-    display: inline-block;
-    font-size: 0.8em;
-    margin-bottom: 2em;
-    padding: 0.6em;
-
-    @include media($refills-large-screen) {
-      font-size: 1em;
-      padding: 1em;
-    }
-
-    li {
-      display: inline;
-      padding: 0.4em;
-
-      a {
-        color: #a7a7a7;
-        text-decoration: none;
-
-        &:hover {
-          color: $refills-anchor-color;
-        }
-      }
-    }
-  }
-}
-
-// Adjustments
-
-.refill-smaller {
-
   @include media($refills-large-screen) {
-    margin: auto;
-    width: 70%;
-  }
-}
-
-// Type Systems
-
-@include keyframes(fadeInAccordionTabsArticles) {
-  0%   { opacity: 0; }
-  100% { opacity: 1; }
-}
-
-.accordion-tabs-type-systems {
-  $refills-border-color: gainsboro;
-  $refills-border-radius: 3px;
-  $refills-spacing: 1.5em;
-  $refills-accent-color: #477dca;
-  $refills-link-color: $refills-accent-color;
-  $dark-gray: #333;
-  $light-gray: #ddd;
-  $refills-line-height: 1.5em;
-
-  $tab-border-color: $refills-border-color;
-  $tab-border: 1px solid $tab-border-color;
-  $tab-content-background: lighten($light-gray, 15%);
-  $tab-active-background: $tab-content-background;
-  $refills-body-inactive-color: $refills-body-background-color;
-  $tab-inactive-hover-color: darken($light-gray, 5%);
-  $tab-mode: $refills-medium-screen;
-
-  @include clearfix;
-  border: $tab-border;
-  border-radius: $refills-border-radius;
-  margin-bottom: $refills-spacing;
-
-  @include media($tab-mode) {
-    border: none;
-  }
-
-  .tab {
-    @include media($tab-mode) {
-      display: inline;
-    }
-
-    &:first-child .tab-link {
-      border-top-left-radius: $refills-border-radius;
-      border-top-right-radius: $refills-border-radius;
-    }
-
-    &:last-child .tab-link {
-      border-bottom-left-radius: $refills-border-radius;
-      border-bottom-right-radius: $refills-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: 0.9em;
-      font-weight: 200;
-      letter-spacing: 0.6px;
-      padding: ($refills-spacing / 2) ($gutter / 2);
-      text-align: center;
-
-      @include media($tab-mode) {
-        display: inline-block;
-        border-bottom: 0;
-        border-top-left-radius: $refills-border-radius;
-        border-top-right-radius: $refills-border-radius;
-      }
-
-      &:hover {
-        color: $refills-link-color;
-      }
-
-      &:focus {
-        outline: none;
-      }
-    }
-
-    section {
-      padding: $refills-spacing $gutter;
-      background: $tab-content-background;
-      display: none;
-      overflow: hidden;
-      padding: $refills-line-height $gutter;
-      width: 100%;
-
-      @include media($tab-mode) {
-        @include border-bottom-radius($refills-border-radius);
-        border-top: $tab-border;
-        float: left;
-        left: 0;
-        padding: ($refills-spacing / 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-bottom: 1px solid $tab-active-background;
-          border: $tab-border;
-          margin-bottom: -1px;
-        }
-      }
-
-      section {
-        display: block;
-
-        .tab-content {
-          @include animation-name(fadeInAccordionTabsArticles);
-          @include animation-duration(1s);
-          opacity: 1;
-        }
-      }
-    }
+    padding-top: 3em;
   }
 }