From: RafiBomb <rafi@zurb.com>
Date: Tue, 19 Jul 2016 23:56:23 +0000 (-0700)
Subject: updates topbar links and color
X-Git-Tag: v2.3.0~32
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=df5d3ac0ca79da9c717ee633c3dc32f24bb9dc3c;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

updates topbar links and color
---

diff --git a/docs/assets/scss/docs.scss b/docs/assets/scss/docs.scss
index 207bf751..7dc58112 100644
--- a/docs/assets/scss/docs.scss
+++ b/docs/assets/scss/docs.scss
@@ -47,3 +47,8 @@ $foundation-palette: (
   border: none;
   border-left: 5px solid $primary-color;
 }
+
+.marketing-topbar,
+.title-bar {
+  background: #2c3840;
+}
\ No newline at end of file
diff --git a/docs/pages/css-guide.md b/docs/pages/css-guide.md
index 6bbd41fb..7e00bf21 100644
--- a/docs/pages/css-guide.md
+++ b/docs/pages/css-guide.md
@@ -13,7 +13,7 @@ In this Getting Started guide, we'll download Foundation for Emails, construct t
 
 If you haven't yet, download the starter files for Foundation for Emails. They include the boilerplate HTML needed for an email, and all of the CSS for Foundation.
 
-<a href="http://foundation.zurb.com/downloads/foundation-emails.zip" class="large button">Download Foundation for Emails</a>
+<a href="https://s3.amazonaws.com/zurb-foundation/foundation-emails.zip" class="large button">Download Foundation for Emails</a>
 
 Unzip the folder and open it in your text editor of choice.
 
diff --git a/docs/partials/footer.html b/docs/partials/footer.html
index 3bafe2a7..dd846a70 100644
--- a/docs/partials/footer.html
+++ b/docs/partials/footer.html
@@ -47,8 +47,7 @@
             <div class="support-links">
             <h4 class="hide-for-small">Talk to us</h4>
             <p>Tweet us at <br> <a href="https://twitter.com/zurbfoundation">@ZURBfoundation</a></p>
-            <p><a href="http://foundation.zurb.com/business/business-support.html">Business Support</a></p>
-            <p>Or check our <a href="http://foundation.zurb.com/support/support.html">support page</a></p>
+            <p><a href="http://foundation.zurb.com/get-involved/contribute.html">Get involved in<br>our amazing community.</a></p>
             </div>
           </div>
         <div class="medium-4 columns">
@@ -107,7 +106,7 @@
           <li><a href="http://zurb.com/contact">Contact</a></li>
           <li><a href="http://zurb.com/sitemap">Sitemap</a></li>
        </ul>
-       <p class="copyright">&copy; 1998&dash;2015 ZURB, Inc. All rights reserved.</p>
+       <p class="copyright">&copy; 1998&dash;2016 ZURB, Inc. All rights reserved.</p>
     </div>
   </div>
 </div>
diff --git a/templates/basic.html b/templates/basic.html
index e1f1224e..752600b4 100644
--- a/templates/basic.html
+++ b/templates/basic.html
@@ -1,54 +1,41 @@
 <style type="text/css">
-  .header {
-    background: #8a8a8a;
-  }
 
-  .header .columns {
-    padding-bottom: 0;
-  }
+.header {
+  background: #8a8a8a;
+}
 
-  .header p {
-    color: #fff;
-    padding-top: 15px;
-  }
+.header .columns {
+  padding-bottom: 0;
+}
 
-  .header .wrapper-inner {
-    padding: 20px;
-  }
+.header p {
+  color: #fff;
+  margin-bottom: 0;
+}
 
-  .header .container {
-    background: transparent;
-  }
+.header .wrapper-inner {
+  padding: 20px; /*controls the height of the header*/
+}
 
-  table.button.facebook table td {
-    background: #3B5998 !important;
-    border-color: #3B5998;
-  }
+.header .container {
+  background: #8a8a8a;
+}
 
-  table.button.twitter table td {
-    background: #1daced !important;
-    border-color: #1daced;
-  }
+.wrapper.secondary {
+  background: #f3f3f3;
+}
 
-  table.button.google table td {
-    background: #DB4A39 !important;
-    border-color: #DB4A39;
-  }
-
-  .wrapper.secondary {
-    background: #f3f3f3;
-  }
 </style>
+<!-- move the above styles into your custom stylesheet -->
 
 
-
-<wrapper class="header">
+<wrapper class="header" bgcolor="#8a8a8a">
   <container>
     <row class="collapse">
-      <columns small="6">
+      <columns small="6" valign="middle">
         <img src="http://placehold.it/200x50/663399">
       </columns>
-      <columns small="6">
+      <columns small="6" valign="middle">
         <p class="text-right">BASIC</p>
       </columns>
     </row>
@@ -60,7 +47,7 @@
   <spacer size="16"></spacer>
   
   <row>
-    <columns small="12">
+    <columns>
       
       <h1>Hi, Susan Calvin</h1>
       <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni, iste, amet consequatur a veniam.</p>
@@ -68,24 +55,27 @@
       <callout class="primary">
         <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit repellendus natus, sint ea optio dignissimos asperiores inventore a molestiae dolorum placeat repellat excepturi mollitia ducimus unde doloremque ad, alias eos!</p>
       </callout>
+
     </columns>
   </row>
+  
   <wrapper class="secondary">
-
     <spacer size="16"></spacer>
-
     <row>
-      <columns large="6">
+      <columns small="12" large="6">
         <h5>Connect With Us:</h5>
-        <button class="facebook expand" href="http://zurb.com">Facebook</button>
-        <button class="twitter expand" href="http://zurb.com">Twitter</button>
-        <button class="google expand" href="http://zurb.com">Google+</button>
+        <menu class="vertical">
+          <item style="text-align: left;" href="#">Twitter</item>
+          <item style="text-align: left;" href="#">Facebook</item>
+          <item style="text-align: left;" href="#">Google +</item>
+        </menu>
       </columns>
-      <columns large="6">
+      <columns small="12" large="6">
         <h5>Contact Info:</h5>
         <p>Phone: 408-341-0600</p>
         <p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
       </columns>
     </row>
   </wrapper>
-</container>
+
+</container>
\ No newline at end of file
diff --git a/templates/drip.html b/templates/drip.html
index 54876774..822e9ecf 100644
--- a/templates/drip.html
+++ b/templates/drip.html
@@ -13,8 +13,11 @@
     border-top: 8px solid #663399;
   }
 </style>
+<!-- move the above styles into your custom stylesheet -->
 
 
+<spacer size="16"></spacer>
+
 <container class="header">
   <row class="collapse">
     <columns>
diff --git a/templates/hero.html b/templates/hero.html
index a5a773c6..c9ad78b6 100644
--- a/templates/hero.html
+++ b/templates/hero.html
@@ -1,44 +1,32 @@
 <style type="text/css">
-  .header {
-    background: #8a8a8a;
-  }
 
-  .header .columns {
-    padding-bottom: 0;
-  }
+.header {
+  background: #8a8a8a;
+}
 
-  .header p {
-    color: #fff;
-    padding-top: 15px;
-  }
+.header .columns {
+  padding-bottom: 0;
+}
 
-  .header .wrapper-inner {
-    padding: 20px;
-  }
+.header p {
+  color: #fff;
+  margin-bottom: 0;
+}
 
-  .header .container {
-    background: transparent;
-  }
+.header .wrapper-inner {
+  padding: 20px; /*controls the height of the header*/
+}
 
-  table.button.facebook table td {
-    background: #3B5998 !important;
-    border-color: #3B5998;
-  }
+.header .container {
+  background: #8a8a8a;
+}
 
-  table.button.twitter table td {
-    background: #1daced !important;
-    border-color: #1daced;
-  }
+.wrapper.secondary {
+  background: #f3f3f3;
+}
 
-  table.button.google table td {
-    background: #DB4A39 !important;
-    border-color: #DB4A39;
-  }
-
-  .wrapper.secondary {
-    background: #f3f3f3;
-  }
 </style>
+<!-- move the above styles into your custom stylesheet -->
 
 <wrapper class="header">
   <container>
@@ -74,17 +62,17 @@
   </row>
   
   <wrapper class="secondary">
-
     <spacer size="16"></spacer>
-
     <row>
-      <columns large="6">
+      <columns small="12" large="6">
         <h5>Connect With Us:</h5>
-        <button class="facebook expand" href="#">Facebook</button>
-        <button class="twitter expand" href="#">Twitter</button>
-        <button class="google expand" href="#">Google+</button>
+        <menu class="vertical" align="left">
+          <item style="text-align: left;" href="#">Twitter</item>
+          <item style="text-align: left;" href="#">Facebook</item>
+          <item style="text-align: left;" href="#">Google +</item>
+        </menu>
       </columns>
-      <columns large="6">
+      <columns small="12" large="6">
         <h5>Contact Info:</h5>
         <p>Phone: 408-341-0600</p>
         <p>Email: <a href="mailto:foundation@zurb.com">foundation@zurb.com</a></p>
diff --git a/templates/marketing.html b/templates/marketing.html
index 9358a574..28816996 100644
--- a/templates/marketing.html
+++ b/templates/marketing.html
@@ -5,8 +5,11 @@
     background: #f3f3f3 !important;
   }
 </style>
+<!-- move the above styles into your custom stylesheet -->
 
 
+<spacer size="16"></spacer>
+
 <container>
   <row>
     <columns large="4">
diff --git a/templates/newsletter-2.html b/templates/newsletter-2.html
index 8965c832..56d1174c 100644
--- a/templates/newsletter-2.html
+++ b/templates/newsletter-2.html
@@ -5,8 +5,9 @@
     background: #f3f3f3 !important;
   }
 </style>
+<!-- move the above styles into your custom stylesheet -->
 
-
+<spacer size="16"></spacer>
 
 <container>
 
@@ -26,7 +27,7 @@
       <p><a href="#">Learn more</a></p>
     </columns>
     <columns large="4">
-      <img class="small-float-center" src="http://placehold.it/170x129" alt="">
+      <img class="small-float-center" src="http://placehold.it/170x129" width="170" alt="">
     </columns>
   </row>
   <row>
diff --git a/templates/newsletter.html b/templates/newsletter.html
index bbcc934d..d6542c7f 100644
--- a/templates/newsletter.html
+++ b/templates/newsletter.html
@@ -5,6 +5,7 @@
     background: #f3f3f3 !important;
   }
 </style>
+<!-- move the above styles into your custom stylesheet -->
 
 <container>
 
diff --git a/templates/order.html b/templates/order.html
index def38313..eec2d16a 100644
--- a/templates/order.html
+++ b/templates/order.html
@@ -5,6 +5,9 @@
     background: #f3f3f3 !important;
   }
 </style>
+<!-- move the above styles into your custom stylesheet -->
+
+<spacer size="16"></spacer>
 
 <container>
 
diff --git a/templates/password.html b/templates/password.html
index efbbd5ef..9577a7bb 100644
--- a/templates/password.html
+++ b/templates/password.html
@@ -9,6 +9,9 @@
     background: #f3f3f3;
   }
 </style>
+<!-- move the above styles into your custom stylesheet -->
+
+<spacer size="16"></spacer>
 
 <container>
 
diff --git a/templates/sidebar-hero.html b/templates/sidebar-hero.html
index 71cc0885..28d39605 100644
--- a/templates/sidebar-hero.html
+++ b/templates/sidebar-hero.html
@@ -1,59 +1,43 @@
 <style type="text/css">
-  .header {
-    background: #8a8a8a;
-  }
 
-  .header .columns {
-    padding-bottom: 0;
-  }
+.header {
+  background: #8a8a8a;
+}
 
-  .header p {
-    color: #fff;
-    padding-top: 15px;
-  }
+.header .columns {
+  padding-bottom: 0;
+}
 
-  .header .wrapper-inner {
-    padding: 20px;
-  }
+.header p {
+  color: #fff;
+  margin-bottom: 0;
+}
 
-  .header .container {
-    background: transparent;
-  }
+.header .wrapper-inner {
+  padding: 20px; /*controls the height of the header*/
+}
 
-  table.button.facebook table td {
-    background: #3B5998 !important;
-    border-color: #3B5998;
-  }
+.header .container {
+  background: #8a8a8a;
+}
 
-  table.button.twitter table td {
-    background: #1daced !important;
-    border-color: #1daced;
-  }
+.wrapper.secondary {
+  background: #f3f3f3;
+}
 
-  table.button.google table td {
-    background: #DB4A39 !important;
-    border-color: #DB4A39;
-  }
-
-  .wrapper.secondary {
-    background: #f3f3f3;
-  }
-
-  .sidebar .menu .menu-item {
-    border-top: 1px solid #777777;
-  }
 </style>
+<!-- move the above styles into your custom stylesheet -->
 
+<spacer size="16"></spacer>
 
-
-<wrapper class="header">
+<wrapper class="header" bgcolor="#8a8a8a">
   <container>
     <row class="collapse">
-      <columns small="6">
+      <columns small="6" valign="middle">
         <img src="http://placehold.it/200x50/663399">
       </columns>
-      <columns small="6">
-        <p class="text-right">SIDEBAR HERO</p>
+      <columns small="6" valign="middle">
+        <p class="text-right">Sidebar Hero</p>
       </columns>
     </row>
   </container>
@@ -91,15 +75,11 @@
       <callout class="secondary">
         <h5>Header</h5>
         <p class="lead">Sub-header</p>
-        <menu class="vertical">
-          <item href="#">Just a Plain Link &raquo;</item>
-          <item href="#">Just a Plain Link &raquo;</item>
-          <item href="#">Just a Plain Link &raquo;</item>
-          <item href="#">Just a Plain Link &raquo;</item>
-          <item href="#">Just a Plain Link &raquo;</item>
-          <item href="#">Just a Plain Link &raquo;</item>
-          <item href="#">Just a Plain Link &raquo;</item>
-        </menu>
+        <p><a href="#">Just a Plain Link &raquo;</a></p>
+        <p><a href="#">Just a Plain Link &raquo;</a></p>
+        <p><a href="#">Just a Plain Link &raquo;</a></p>
+        <p><a href="#">Just a Plain Link &raquo;</a></p>
+        <p><a href="#">Just a Plain Link &raquo;</a></p>
       </callout>
       <callout class="secondary">
         <h6>CONNECT WITH US:</h6>
diff --git a/templates/sidebar.html b/templates/sidebar.html
index 022d01ec..75ab0e80 100644
--- a/templates/sidebar.html
+++ b/templates/sidebar.html
@@ -1,59 +1,43 @@
 <style type="text/css">
-  .header {
-    background: #8a8a8a;
-  }
 
-  .header .columns {
-    padding-bottom: 0;
-  }
+.header {
+  background: #8a8a8a;
+}
 
-  .header p {
-    color: #fff;
-    padding-top: 15px;
-  }
+.header .columns {
+  padding-bottom: 0;
+}
 
-  .header .wrapper-inner {
-    padding: 20px;
-  }
+.header p {
+  color: #fff;
+  margin-bottom: 0;
+}
 
-  .header .container {
-    background: transparent;
-  }
+.header .wrapper-inner {
+  padding: 20px; /*controls the height of the header*/
+}
 
-  table.button.facebook table td {
-    background: #3B5998 !important;
-    border-color: #3B5998;
-  }
+.header .container {
+  background: #8a8a8a;
+}
 
-  table.button.twitter table td {
-    background: #1daced !important;
-    border-color: #1daced;
-  }
+.wrapper.secondary {
+  background: #f3f3f3;
+}
 
-  table.button.google table td {
-    background: #DB4A39 !important;
-    border-color: #DB4A39;
-  }
-
-  .wrapper.secondary {
-    background: #f3f3f3;
-  }
-
-  .sidebar .menu .menu-item {
-    border-top: 1px solid #777777;
-  }
 </style>
+<!-- move the above styles into your custom stylesheet -->
 
+<spacer size="16"></spacer>
 
-
-<wrapper class="header">
+<wrapper class="header" bgcolor="#8a8a8a">
   <container>
     <row class="collapse">
-      <columns small="6">
+      <columns small="6" valign="middle">
         <img src="http://placehold.it/200x50/663399">
       </columns>
-      <columns small="6">
-        <p class="text-right">SIDEBAR</p>
+      <columns small="6" valign="middle">
+        <p class="text-right">Sidebar</p>
       </columns>
     </row>
   </container>
@@ -79,15 +63,11 @@
       <callout class="secondary">
         <h5>Header</h5>
         <p class="lead">Sub-header</p>
-        <menu class="vertical">
-          <item href="#">Just a Plain Link &raquo;</item>
-          <item href="#">Just a Plain Link &raquo;</item>
-          <item href="#">Just a Plain Link &raquo;</item>
-          <item href="#">Just a Plain Link &raquo;</item>
-          <item href="#">Just a Plain Link &raquo;</item>
-          <item href="#">Just a Plain Link &raquo;</item>
-          <item href="#">Just a Plain Link &raquo;</item>
-        </menu>
+        <p><a href="#">Just a Plain Link &raquo;</a></p>
+        <p><a href="#">Just a Plain Link &raquo;</a></p>
+        <p><a href="#">Just a Plain Link &raquo;</a></p>
+        <p><a href="#">Just a Plain Link &raquo;</a></p>
+        <p><a href="#">Just a Plain Link &raquo;</a></p>
       </callout>
       <callout class="secondary">
         <h6>CONNECT WITH US:</h6>
diff --git a/templates/welcome.html b/templates/welcome.html
index 145a978b..8309ca35 100644
--- a/templates/welcome.html
+++ b/templates/welcome.html
@@ -13,6 +13,9 @@
     border-top: 8px solid #663399;
   }
 </style>
+<!-- move the above styles into your custom stylesheet -->
+
+<spacer size="16"></spacer>
 
 <container class="header">
   <row>