From: Eric Morris <eric@zurb.com>
Date: Wed, 13 Nov 2013 21:12:17 +0000 (-0800)
Subject: Update templates and examples to use new style buttons
X-Git-Tag: v1.0.2
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=943d8fb87c4ef1fa04b37796cc1afdf7b19bf888;p=thirdparty%2Ffoundation%2Ffoundation-emails.git

Update templates and examples to use new style buttons
---

diff --git a/templates/base/basic.html b/templates/base/basic.html
index c133d096..be67a562 100644
--- a/templates/base/basic.html
+++ b/templates/base/basic.html
@@ -8,30 +8,30 @@
   </style>
   <style>
 		
-    .facebook table td {
+    table.facebook td {
       background: #3b5998;
       border-color: #2d4473;
     }
 
-    .facebook:hover table td {
+    table.facebook:hover td {
       background: #2d4473 !important;
     }
 
-    .twitter table td {
+    table.twitter td {
       background: #00acee;
       border-color: #0087bb;
     }
 
-    .twitter:hover table td {
+    table.twitter:hover td {
       background: #0087bb !important;
     }
 
-    .google-plus table td {
+    table.google-plus td {
       background-color: #DB4A39;
       border-color: #CC0000;
     }
 
-    .google-plus:hover table td {
+    table.google-plus:hover td {
       background: #CC0000 !important;
     }
 
@@ -174,39 +174,33 @@
 
                             <h5>Connect With Us:</h5>
 
-                            <a class="tiny-button facebook" href="#">
-                              <table>
-                                <tr>
-                                  <td>
-                                    Facebook
-                                  </td>
-                                </tr>
-                              </table>
-                            </a>
+                            <table class="tiny-button facebook">
+                              <tr>
+                                <td>
+                                  <a href="#">Facebook</a>
+                                </td>
+                              </tr>
+                            </table>
 
                             <br>
 
-                            <a class="tiny-button twitter" href="#">
-                              <table>
-                                <tr>
-                                  <td>
-                                    Twitter
-                                  </td>
-                                </tr>
-                              </table>
-                            </a>
+                            <table class="tiny-button twitter">
+                              <tr>
+                                <td>
+                                  <a href="#">Twitter</a>
+                                </td>
+                              </tr>
+                            </table>
 
                             <br>
 
-                            <a class="tiny-button google-plus" href="#">
-                              <table>
-                                <tr>
-                                  <td>
-                                    Google +
-                                  </td>
-                                </tr>
-                              </table>
-                            </a>
+                            <table class="tiny-button google-plus">
+                              <tr>
+                                <td>
+                                  <a href="#">Google +</a>
+                                </td>
+                              </tr>
+                            </table>
 
                           </td>
                           <td class="expander"></td>
diff --git a/templates/base/hero.html b/templates/base/hero.html
index 6c59e690..bd20ca31 100644
--- a/templates/base/hero.html
+++ b/templates/base/hero.html
@@ -8,30 +8,30 @@
   </style>
   <style>
     
-    .facebook table td {
+    table.facebook td {
       background: #3b5998;
       border-color: #2d4473;
     }
 
-    .facebook:hover table td {
+    table.facebook:hover td {
       background: #2d4473 !important;
     }
 
-    .twitter table td {
+    table.twitter td {
       background: #00acee;
       border-color: #0087bb;
     }
 
-    .twitter:hover table td {
+    table.twitter:hover td {
       background: #0087bb !important;
     }
 
-    .google-plus table td {
+    table.google-plus td {
       background-color: #DB4A39;
       border-color: #CC0000;
     }
 
-    .google-plus:hover table td {
+    table.google-plus:hover td {
       background: #CC0000 !important;
     }
 
@@ -228,39 +228,33 @@
 
                             <h5>Connect With Us:</h5>
 
-                            <a class="tiny-button facebook" href="#">
-                              <table>
-                                <tr>
-                                  <td>
-                                    Facebook
-                                  </td>
-                                </tr>
-                              </table>
-                            </a>
+                            <table class="tiny-button facebook">
+                              <tr>
+                                <td>
+                                  <a href="#">Facebook</a>
+                                </td>
+                              </tr>
+                            </table>
 
                             <br>
 
-                            <a class="tiny-button twitter" href="#">
-                              <table>
-                                <tr>
-                                  <td>
-                                    Twitter
-                                  </td>
-                                </tr>
-                              </table>
-                            </a>
+                            <table class="tiny-button twitter">
+                              <tr>
+                                <td>
+                                  <a href="#">Twitter</a>
+                                </td>
+                              </tr>
+                            </table>
 
                             <br>
 
-                            <a class="tiny-button google-plus" href="#">
-                              <table>
-                                <tr>
-                                  <td>
-                                    Google +
-                                  </td>
-                                </tr>
-                              </table>
-                            </a>
+                            <table class="tiny-button google-plus">
+                              <tr>
+                                <td>
+                                  <a href="#">Google +</a>
+                                </td>
+                              </tr>
+                            </table>
 
                           </td>
                           <td class="expander"></td>
diff --git a/templates/base/sidebar-hero.html b/templates/base/sidebar-hero.html
index 5e58264b..521852e9 100644
--- a/templates/base/sidebar-hero.html
+++ b/templates/base/sidebar-hero.html
@@ -8,30 +8,30 @@
   </style>
   <style>
     
-    .facebook table td {
+    table.facebook td {
       background: #3b5998;
       border-color: #2d4473;
     }
 
-    .facebook:hover table td {
+    table.facebook:hover td {
       background: #2d4473 !important;
     }
 
-    .twitter table td {
+    table.twitter td {
       background: #00acee;
       border-color: #0087bb;
     }
 
-    .twitter:hover table td {
+    table.twitter:hover td {
       background: #0087bb !important;
     }
 
-    .google-plus table td {
+    table.google-plus td {
       background-color: #DB4A39;
       border-color: #CC0000;
     }
 
-    .google-plus:hover table td {
+    table.google-plus:hover td {
       background: #CC0000 !important;
     }
 
@@ -256,35 +256,33 @@
                       <tr>
                         <td class="panel">
                           <h6 style="margin-bottom:5px;">Connect With Us:</h6>
-                          <a class="tiny-button full facebook" href="#">
-                            <table>
+                          <table class="tiny-button facebook">
                               <tr>
                                 <td>
-                                  Facebook
+                                  <a href="#">Facebook</a>
                                 </td>
                               </tr>
                             </table>
-                          </a>
-                          <hr>
-                          <a class="tiny-button full twitter" href="#">
-                            <table>
+
+                            <hr>
+
+                            <table class="tiny-button twitter">
                               <tr>
                                 <td>
-                                  Twitter
+                                  <a href="#">Twitter</a>
                                 </td>
                               </tr>
                             </table>
-                          </a>
-                          <hr>
-                          <a class="tiny-button full google-plus" href="#">
-                            <table>
+
+                            <hr>
+
+                            <table class="tiny-button google-plus">
                               <tr>
                                 <td>
-                                  Google +
+                                  <a href="#">Google +</a>
                                 </td>
                               </tr>
                             </table>
-                          </a>
                           <br>
                           <h6 style="margin-bottom:5px;">Contact Info:</h6>
                           <p>Phone: <b>408.341.0600</b></p>
diff --git a/templates/base/sidebar.html b/templates/base/sidebar.html
index b59f4845..2f78acba 100644
--- a/templates/base/sidebar.html
+++ b/templates/base/sidebar.html
@@ -8,30 +8,30 @@
   </style>
   <style>
     
-    .facebook table td {
+    table.facebook td {
       background: #3b5998;
       border-color: #2d4473;
     }
 
-    .facebook:hover table td {
+    table.facebook:hover td {
       background: #2d4473 !important;
     }
 
-    .twitter table td {
+    table.twitter td {
       background: #00acee;
       border-color: #0087bb;
     }
 
-    .twitter:hover table td {
+    table.twitter:hover td {
       background: #0087bb !important;
     }
 
-    .google-plus table td {
+    table.google-plus td {
       background-color: #DB4A39;
       border-color: #CC0000;
     }
 
-    .google-plus:hover table td {
+    table.google-plus:hover td {
       background: #CC0000 !important;
     }
 
@@ -248,35 +248,33 @@
                         <tr>
                           <td class="panel">
                             <h6 style="margin-bottom:5px;">Connect With Us:</h6>
-                            <a class="tiny-button facebook" href="#">
-                              <table>
-                                <tr>
-                                  <td>
-                                    Facebook
-                                  </td>
-                                </tr>
-                              </table>
-                            </a>
+                            <table class="tiny-button facebook">
+                              <tr>
+                                <td>
+                                  <a href="#">Facebook</a>
+                                </td>
+                              </tr>
+                            </table>
+
                             <hr>
-                            <a class="tiny-button twitter" href="#">
-                              <table>
-                                <tr>
-                                  <td>
-                                    Twitter
-                                  </td>
-                                </tr>
-                              </table>
-                            </a>
+
+                            <table class="tiny-button twitter">
+                              <tr>
+                                <td>
+                                  <a href="#">Twitter</a>
+                                </td>
+                              </tr>
+                            </table>
+
                             <hr>
-                            <a class="tiny-button google-plus" href="#">
-                              <table>
-                                <tr>
-                                  <td>
-                                    Google +
-                                  </td>
-                                </tr>
-                              </table>
-                            </a>
+
+                            <table class="tiny-button google-plus">
+                              <tr>
+                                <td>
+                                  <a href="#">Google +</a>
+                                </td>
+                              </tr>
+                            </table>
                             <br>
                             <h6 style="margin-bottom:5px;">Contact Info:</h6>
                             <p>Phone: <b>408.341.0600</b></p>
diff --git a/templates/examples/basic.html b/templates/examples/basic.html
index c133d096..e123744f 100644
--- a/templates/examples/basic.html
+++ b/templates/examples/basic.html
@@ -1,37 +1,37 @@
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head>
-	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-	<meta name="viewport" content="width=device-width"/>
-	<style>
-		/* Include ink.css */
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <meta name="viewport" content="width=device-width"/>
+  <style>
+    /* Include ink.css */
   </style>
   <style>
-		
-    .facebook table td {
+    
+    table.facebook td {
       background: #3b5998;
       border-color: #2d4473;
     }
 
-    .facebook:hover table td {
+    table.facebook:hover td {
       background: #2d4473 !important;
     }
 
-    .twitter table td {
+    table.twitter td {
       background: #00acee;
       border-color: #0087bb;
     }
 
-    .twitter:hover table td {
+    table.twitter:hover td {
       background: #0087bb !important;
     }
 
-    .google-plus table td {
+    table.google-plus td {
       background-color: #DB4A39;
       border-color: #CC0000;
     }
 
-    .google-plus:hover table td {
+    table.google-plus:hover td {
       background: #CC0000 !important;
     }
 
@@ -86,12 +86,12 @@
       }
     }
 
-	</style>
+  </style>
 </head>
 <body>
-	<table class="body">
-		<tr>
-			<td class="center" align="center" valign="top">
+  <table class="body">
+    <tr>
+      <td class="center" align="center" valign="top">
         <center>
          
           <table class="row header">
@@ -136,8 +136,8 @@
                         <tr>
                           <td>
                             <h3>Hi, Susan Calvin</h3>
-                						<p class="lead">Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.</p>
-                						<p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. consequat vel lacus. Sed iaculis pulvinar ligula, ornare fringilla ante viverra et. In hac habitasse platea dictumst. Donec vel orci mi, eu congue justo. Integer eget odio est, eget malesuada lorem. Aenean sed tellus dui, vitae viverra risus. Nullam massa sapien, pulvinar eleifend fringilla id, convallis eget nisi. Mauris a sagittis dui. Pellentesque non lacinia mi. Fusce sit amet libero sit amet erat venenatis sollicitudin vitae vel eros. Cras nunc sapien, interdum sit amet porttitor ut, congue quis urna.</p>
+                            <p class="lead">Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.</p>
+                            <p>Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae. consequat vel lacus. Sed iaculis pulvinar ligula, ornare fringilla ante viverra et. In hac habitasse platea dictumst. Donec vel orci mi, eu congue justo. Integer eget odio est, eget malesuada lorem. Aenean sed tellus dui, vitae viverra risus. Nullam massa sapien, pulvinar eleifend fringilla id, convallis eget nisi. Mauris a sagittis dui. Pellentesque non lacinia mi. Fusce sit amet libero sit amet erat venenatis sollicitudin vitae vel eros. Cras nunc sapien, interdum sit amet porttitor ut, congue quis urna.</p>
                           </td>
                           <td class="expander"></td>
                         </tr>
@@ -174,39 +174,33 @@
 
                             <h5>Connect With Us:</h5>
 
-                            <a class="tiny-button facebook" href="#">
-                              <table>
-                                <tr>
-                                  <td>
-                                    Facebook
-                                  </td>
-                                </tr>
-                              </table>
-                            </a>
+                            <table class="tiny-button facebook">
+                              <tr>
+                                <td>
+                                  <a href="#">Facebook</a>
+                                </td>
+                              </tr>
+                            </table>
 
                             <br>
 
-                            <a class="tiny-button twitter" href="#">
-                              <table>
-                                <tr>
-                                  <td>
-                                    Twitter
-                                  </td>
-                                </tr>
-                              </table>
-                            </a>
+                            <table class="tiny-button twitter">
+                              <tr>
+                                <td>
+                                  <a href="#">Twitter</a>
+                                </td>
+                              </tr>
+                            </table>
 
                             <br>
 
-                            <a class="tiny-button google-plus" href="#">
-                              <table>
-                                <tr>
-                                  <td>
-                                    Google +
-                                  </td>
-                                </tr>
-                              </table>
-                            </a>
+                            <table class="tiny-button google-plus">
+                              <tr>
+                                <td>
+                                  <a href="#">Google +</a>
+                                </td>
+                              </tr>
+                            </table>
 
                           </td>
                           <td class="expander"></td>
@@ -257,8 +251,8 @@
           </table> 
 
         </center>
-			</td>
-		</tr>
-	</table>
+      </td>
+    </tr>
+  </table>
 </body>
 </html>
\ No newline at end of file
diff --git a/templates/examples/sidebar-hero.html b/templates/examples/sidebar-hero.html
index 5806e0a3..4c36c46f 100644
--- a/templates/examples/sidebar-hero.html
+++ b/templates/examples/sidebar-hero.html
@@ -8,30 +8,30 @@
   </style>
   <style>
     
-    .facebook table td {
+    table.facebook td {
       background: #3b5998;
       border-color: #2d4473;
     }
 
-    .facebook:hover table td {
+    table.facebook:hover td {
       background: #2d4473 !important;
     }
 
-    .twitter table td {
+    table.twitter td {
       background: #00acee;
       border-color: #0087bb;
     }
 
-    .twitter:hover table td {
+    table.twitter:hover td {
       background: #0087bb !important;
     }
 
-    .google-plus table td {
+    table.google-plus td {
       background-color: #DB4A39;
       border-color: #CC0000;
     }
 
-    .google-plus:hover table td {
+    table.google-plus:hover td {
       background: #CC0000 !important;
     }
 
@@ -192,95 +192,61 @@
                         <td class="panel">
                           <h6>Header Thing &raquo;</h6>
                           <p>Sub-head or something</p>
-                          <a class="link" href="#">
-                            <table>
-                              <tr>
-                                <td>
-                                  Just a Plain Link &raquo;
-                                </td>
-                              </tr>
-                            </table>
-                          </a>
-                          <hr>
-                          <a class="link" href="#">
-                            <table>
+                          <table>
                               <tr>
                                 <td>
-                                  Just a Plain Link &raquo;
+                                  <a href="#">Just a Plain Link &raquo;</a>
                                 </td>
                               </tr>
                             </table>
-                          </a>
-                          <hr>
-                          <a class="link" href="#">
-                            <table>
-                              <tr>
-                                <td>
-                                  Just a Plain Link &raquo;
-                                </td>
-                              </tr>
-                            </table>
-                          </a>
-                          <hr>
-                          <a class="link" href="#">
+                            <hr>
                             <table>
                               <tr>
                                 <td>
-                                  Just a Plain Link &raquo;
+                                  <a href="#">Just a Plain Link &raquo;</a>
                                 </td>
                               </tr>
                             </table>
-                          </a>
-                          <hr>
-                          <a class="link" href="#">
+                            <hr>
                             <table>
                               <tr>
                                 <td>
-                                  Just a Plain Link &raquo;
+                                  <a href="#">Just a Plain Link &raquo;</a>
                                 </td>
                               </tr>
                             </table>
-                          </a>
-                          <hr>
-                          <a class="link" href="#">
+                            <hr>
                             <table>
                               <tr>
                                 <td>
-                                  Just a Plain Link &raquo;
+                                  <a href="#">Just a Plain Link &raquo;</a>
                                 </td>
                               </tr>
                             </table>
-                          </a>
-                          <hr>
-                          <a class="link" href="#">
+                            <hr>
                             <table>
                               <tr>
                                 <td>
-                                  Just a Plain Link &raquo;
+                                  <a href="#">Just a Plain Link &raquo;</a>
                                 </td>
                               </tr>
                             </table>
-                          </a>
-                          <hr>
-                          <a class="link" href="#">
+                            <hr>
                             <table>
                               <tr>
                                 <td>
-                                  Just a Plain Link &raquo;
+                                  <a href="#">Just a Plain Link &raquo;</a>
                                 </td>
                               </tr>
                             </table>
-                          </a>
-                          <hr>
-                          <a class="link" href="#">
+                            <hr>
                             <table>
                               <tr>
                                 <td>
-                                  Just a Plain Link &raquo;
+                                  <a href="#">Just a Plain Link &raquo;</a>
                                 </td>
                               </tr>
                             </table>
-                          </a>
                         </td>
                         <td class="expander"></td>
                       </tr>
@@ -290,35 +256,33 @@
                       <tr>
                         <td class="panel">
                           <h6 style="margin-bottom:5px;">Connect With Us:</h6>
-                          <a class="tiny-button full facebook" href="#">
-                            <table>
+                          <table class="tiny-button facebook">
                               <tr>
                                 <td>
-                                  Facebook
+                                  <a href="#">Facebook</a>
                                 </td>
                               </tr>
                             </table>
-                          </a>
-                          <hr>
-                          <a class="tiny-button full twitter" href="#">
-                            <table>
+
+                            <hr>
+
+                            <table class="tiny-button twitter">
                               <tr>
                                 <td>
-                                  Twitter
+                                  <a href="#">Twitter</a>
                                 </td>
                               </tr>
                             </table>
-                          </a>
-                          <hr>
-                          <a class="tiny-button full google-plus" href="#">
-                            <table>
+
+                            <hr>
+
+                            <table class="tiny-button google-plus">
                               <tr>
                                 <td>
-                                  Google +
+                                  <a href="#">Google +</a>
                                 </td>
                               </tr>
                             </table>
-                          </a>
                           <br>
                           <h6 style="margin-bottom:5px;">Contact Info:</h6>
                           <p>Phone: <b>408.341.0600</b></p>