added letter template. Having expander issues and offset issues. Also added a tempora...

diff --git a/scss/ink.scss b/scss/ink.scss
index 4a393ee142c78646fe3eeb7fe5061b7dd2a6a285..16e245d95915c1bc893cd3333bbf96249d84222b 100755 (executable)
--- a/scss/ink.scss
+++ b/scss/ink.scss
@@ -18,4 +18,5 @@
   "ink/components/thumbnails",
        "ink/components/inline-lists",
        "ink/components/outlook-first",
-       "ink/components/media-query";
+       "ink/components/media-query",
+  "ink/override";
\ No newline at end of file

diff --git a/scss/ink/_override.scss b/scss/ink/_override.scss
new file mode 100644 (file)
index 0000000..4a940fa
--- /dev/null
+++ b/scss/ink/_override.scss
@@ -0,0 +1,92 @@
+      /*Styles and overrides*/
+    h1.main {margin-bottom: 0;}
+    .feature h2 {margin: 0 0 30px;}
+    p.metadata { font-weight:700; font-size:11px; margin-bottom:0px; text-transform:uppercase; letter-spacing: 1px; color: #999; }
+    p.lead.gray { color: #999;}
+    p.lead.dark-gray { color: #777;}
+    img.thumbnail { border: 1px solid #d9d9d9; margin: 20px 0; }
+    img.thumbnail.sm { margin: 0 0 20px 0; }
+    h5 { margin-bottom: 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;}
+    h5 a { color: #222 !important; }
+    .copyright p { margin-bottom: 0px; font-size: 11px; color: #999;}
+    .copyright a { color: #999; font-weight: bold;}
+    
+    .copyright p.dark, .copyright p.dark a { color: #222; }
+    ul.steps { list-style: none; padding-left: 0px;}
+    ul.steps li, ul.steps p { margin-bottom: 0; }
+    .flush { margin: 0 !important; }
+    p.comment { background: #f5f5f5; padding: 16px 20px; margin-bottom: 0; padding-left: 80px; }
+    p.next.comment { border-top: 2px solid #fff; }
+    div.triangle {
+      margin-left: 12px;
+      border-left: 10px transparent solid;
+      border-right: 10px transparent solid;
+      border-bottom: 10px solid #f5f5f5;
+      width: 0px;
+    }
+    .cite { font-size: 12px; color: #999; font-weight: bold; margin: 8px 0 0 0; display: block;}
+    img.avatar { margin: 20px auto 0; border-radius: 50%; height: 80px; width: 80px;}
+    p.comment.note { padding-left: 80px; }
+    .note-pip { width: 22px; height: 22px; border-radius: 50%; background: #333; color: white; font-size: 10px; font-weight: bold; text-align: center; line-height: 22px; float: left; }
+    .post-note { padding-left: 40px; }
+    .post-note a, .post-note a:hover { color: #222 !important; }
+    table.button.influence td { background: #2badbe; }
+    table.button.influence:hover td { background: #27a1aa !important; }
+    table.button.verify td { background: #b6d133; }
+    table.button.verify:hover td { background: #b0c130 !important; }
+    table.button.solidify td { background: #c71d5e; }
+    table.button.solidify:hover td { background: #ba1c5d !important; }
+    table.button.hosted td { background: #078cba; }
+    table.button.hosted:hover td { background: #0786a8 !important; }
+    table.button.university td { background: #ff6908; }
+    table.button.university:hover td { background: #e55e07 !important; }
+
+    table.set-thumbs td.wrapper { padding: 10px 5px; }
+    table.set-thumbs td img { margin: 0; }
+    table.set-thumbs .cite { float: right; }
+    
+    table.share-news p { margin: 0; }
+    table.share-news .button { margin: 0; }
+    table.share-news .button td { padding: 0; }
+    table.share-news .button a { padding: 12px 0; display: block; }
+    .panel.light-gray { background: #f9f9f9; padding: 20px 30px !important;}
+    .panel.light-gray p { padding: 0 20px; }
+    pre {background: #f9f9f9; margin: 30px 0;}
+    pre code { color: #777;}
+    pre code span.callout {color: #555; font-weight: bold;}
+    pre code span.callout-strong {color: #ff6908; font-weight: bold;}
+
+    hr { color: #efefef; background-color: #efefef; }
+
+    td.wrapper-small-left {padding-left: 0 !important;}
+
+    /* Tweets Yo */
+
+    td.tweet-pad {padding-top: 5px !important; padding-bottom: 0px !important;}
+    td.tweet-head {padding-top: 30px !important; padding-bottom: 10px !important;}
+    td.tweet-foot {padding-top: 0 !important; padding-bottom: 10px !important;}
+    td.tweet-foot p {margin-bottom: 0 !important; padding-bottom: 15px !important;}
+    .tweet-date, .tweet-handle {color: #999999; font-size: 16px !important}
+    .tweet-pad h3 {margin-bottom: 0;}
+    .tweet-pad h3, .tweet-pad h6 {margin-left: 60px !important;}
+    .panel a .tweet-avatar {width: 50px !important; height: auto !important;}
+    .panel {  padding: 25px !important; padding-top: 25px !important}
+
+    table[class="body"] .thumb-caption {
+        margin-top: 110px !important;
+    }
+
+    @media only screen and (max-width: 600px) {
+        td.wrapper {
+          padding-left: 0;
+        }
+        table[class="body"] .columns.stay-4 {
+            width: 180px !important;
+        }
+        table[class="body"] .thin-row {
+            width: 180px !important;
+            margin: 0 auto !important;
+        }
+
+    }
+

diff --git a/src/pages/hello.handlebars b/src/pages/hello.handlebars
index 9d68471dc169411b3f3f244fef25c94493a23872..1ccfad270af7c7daabdaec9a309555b128de5722 100644 (file)
--- a/src/pages/hello.handlebars
+++ b/src/pages/hello.handlebars
@@ -2,7 +2,7 @@
 <container>
   <row>
     <columns large='12'>
-      <h1>wertuivjlkh</h1>
+      <h1>asdfakh</h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
       <img width="580" height="300" src="http://placehold.it/580x300">
     </columns>

diff --git a/src/pages/letter.handlebars b/src/pages/letter.handlebars
new file mode 100644 (file)
index 0000000..7f8f494
--- /dev/null
+++ b/src/pages/letter.handlebars
@@ -0,0 +1,108 @@
+<container>
+  <row>
+    <columns large='12'>
+    <p class="lead">Hi John,</p>
+    <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet.</p>
+  </columns>
+</row>
+<row>
+  <columns large="12">
+  <img width="580" height="300" src="http://placehold.it/580x300">
+</columns>
+</row>
+<row>
+  <columns large='12'>
+  <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+  <p >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
+  <p>Cheers,<br>Bryan</p>
+</columns>
+</row>
+<hr>
+<row>
+    <columns large="6">
+      <tr>
+        <td class="tweet-pad panel tweet-head">
+          <a href="https://twitter.com/ZURB/status/541043140933582848">
+            <img align="left" class="tweet-avatar" src="http://placehold.it/50x50">
+            <h3>ZURB</h3>
+            <h6 class="tweet-handle">@ZURB</h6>
+          </a>
+        </td>
+        <td class="expander"></td>
+      </tr>
+      <tr>
+        <td class="tweet-pad panel">
+          <p>Introducing Foundation for Apps: Create beautiful web apps that look great on all devices. <a href="http://t.co/ufBR1IalT5">zurb.us/1yjUnj6</a></p>
+        </td>
+        <td class="expander"></td>   
+      </tr>
+      <tr>
+        <td class="tweet-pad tweet-foot panel">
+          <a href="https://twitter.com/ZURB/status/541043140933582848">
+            <p class="tweet-date">8:35 PM - 5 Dec 2014</p>
+          </a>
+        </td>
+        <td class="expander"></td> 
+      </tr>  
+    </columns>
+
+    <columns large="6">
+      <tr>
+        <td align="left"class="tweet-pad panel tweet-head">
+          <a href="https://twitter.com/ZURB/status/541043140933582848">
+            <img align="left" class="tweet-avatar" src="http://placehold.it/50x50">
+            <h3>ZURB</h3>
+            <h6 class="tweet-handle">@ZURB</h6>
+          </a>
+        </td>
+        <td class="expander"></td>
+      </tr>
+      <tr>
+        <td class="tweet-pad panel">
+          <p>Introducing Foundation for Apps: Create beautiful web apps that look great on all devices. <a href="http://t.co/ufBR1IalT5">zurb.us/1yjUnj6</a></p>
+        </td>
+        <td class="expander"></td>   
+      </tr>
+      <tr>
+        <td class="tweet-pad tweet-foot panel">
+          <a href="https://twitter.com/ZURB/status/541043140933582848">
+            <p class="tweet-date">8:35 PM - 5 Dec 2014</p>
+          </a>
+        </td>
+        <td class="expander"></td> 
+      </tr>  
+    </columns>
+</row>
+<hr>
+
+
+
+
+<row class="copyright">
+  <columns large="12">
+    <h5 class="center">Sharing is caring</h5>
+    <p class="center">Share ZURBnews and keep the good vibes going.</p>
+  </columns>
+</row>
+
+<!-- ^^^^^Expander not working^^^^^ -->
+
+
+<row class="share-news" offset="1">
+<!-- ^^^Not sure how to best implement the offset class.^^^^ 
+     It is applied to a td.wrapper that is automatically generated.
+     This might be a proposed option -->
+  <columns large="5">
+    <button class="facebook">
+      <a href="#">Share on facebook</a> 
+    </button> 
+  </columns>
+  <columns large="5">
+    <button class="facebook">
+      <a href="#">Share on facebook</a> 
+    </button> 
+  </columns>
+</row>
+<hr>
+</container>
+{{> footer }}