Add notice that components are outdated

thoughtbot · Mar 9, 2017 · 72b9f18 · 72b9f18
1 parent 6d29bea
commit 72b9f18
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 4 deletions.
diff --git a/source/_outdated_notice.html.erb b/source/_outdated_notice.html.erb
@@ -0,0 +1,9 @@
+<div class="refills-wrapper">
+  <div class="refills-notice">
+    <span>
+      Refills requires Bourbon 5.0+ and Neat < 2.0, &ge; 1.6. We're working on
+      another version with a focus on accessibility, which you can preview
+      <a href="http://refills.netlify.com">here</a>.
+    </span>
+  </div>
+</div>
diff --git a/source/components.html.erb b/source/components.html.erb
@@ -13,6 +13,7 @@ title: Components
   <%= partial "refills-menu" %>
 
   <div id="example">
+    <%= partial "outdated_notice" %>
 
     <section id="accordion" class="refill">
       <div class="refills-wrapper">

diff --git a/source/index.html.erb b/source/index.html.erb
@@ -12,6 +12,7 @@ title: Patterns
   <%= partial "refills-menu" %>
 
   <div id="example">
+    <%= partial "outdated_notice" %>
 
     <section id="accordion-tabs" class="refill">
       <div class="refills-wrapper">

diff --git a/source/stylesheets/all.css.scss b/source/stylesheets/all.css.scss
@@ -9,6 +9,7 @@
 @import "refills-styles";
 @import "refills-header";
 @import "refills-menu";
+@import "refills-notice";
 @import "refill";
 @import "refills-footer";
 @import "bourbon-nav";

diff --git a/source/stylesheets/refills-notice.scss b/source/stylesheets/refills-notice.scss
@@ -0,0 +1,19 @@
+$_notice-color: #fff6bf;
+
+.refills-notice {
+  background-color: $_notice-color;
+  border-radius: 3px;
+  color: shade($_notice-color, 60%);
+  padding: 2em 1em;
+  text-align: center;
+
+  a {
+    color: shade($_notice-color, 70%);
+    text-decoration: underline;
+
+    &:focus,
+    &:hover {
+      color: shade($_notice-color, 90%);
+    }
+  }
+}
diff --git a/source/type-systems.html.erb b/source/type-systems.html.erb
@@ -13,7 +13,8 @@ title: Type Systems
   <%= partial "refills-menu" %>
 
   <div id="example">
-
+    <%= partial "outdated_notice" %>
+
     <div id="type-systems">
 
       <section class="refill">
@@ -55,7 +56,7 @@ title: Type Systems
           <div class="refill-snippet"><%= code_for("type_system_serif") %></div>
         </div>
       </section>
-      
+
       <section class="refill">
         <div class="refills-wrapper">
           <div class="line-behind-text"><h6>Slab Serif</h6></div>
@@ -73,9 +74,9 @@ title: Type Systems
             <div class="refill-centering"><%= partial "type_system_traditional" %></div>
           </div>
           <div class="refill-snippet"><%= code_for("type_system_traditional") %></div>
-        </div>   
+        </div>
       </section>
-       
+
     </div>
   </div>
 </div>