From: Tim Hartwick Date: Mon, 24 Aug 2015 23:20:01 +0000 (-0700) Subject: buttonz yo X-Git-Tag: v2.0.0-rc.1~110 X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=1247225652df705c1fef4e0e287afa11355ffb5c;p=thirdparty%2Ffoundation%2Ffoundation-emails.git buttonz yo --- diff --git a/_build/container-test.html b/_build/container-test.html index 971b0f1d..b0cd7a78 100644 --- a/_build/container-test.html +++ b/_build/container-test.html @@ -15,12 +15,12 @@
-
+
+

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.

- 		+ -
@@ -31,10 +31,10 @@
- - + +

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. -

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. -

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. +

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. +

diff --git a/_build/css/ink.css b/_build/css/ink.css deleted file mode 100644 index bf3a603c..00000000 --- a/_build/css/ink.css +++ /dev/null @@ -1,1094 +0,0 @@ -/* Client-specific Styles & Reset */ -#outlook a { - padding: 0; } - -body { - width: 100% !important; - min-width: 100%; - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - margin: 0; - padding: 0; } - -/* .ExternalClass applies to Outlook.com (the artist formerly known as Hotmail) */ -.ExternalClass { - width: 100%; } - .ExternalClass, - .ExternalClass p, - .ExternalClass span, - .ExternalClass font, - .ExternalClass td, - .ExternalClass div { - line-height: 100%; } - -#backgroundTable { - margin: 0; - padding: 0; - width: 100% !important; - line-height: 100% !important; } - -img { - outline: none; - text-decoration: none; - -ms-interpolation-mode: bicubic; - width: auto; - max-width: 100%; - float: left; - clear: both; - display: block; } - -center { - width: 100%; - min-width: 580px; } - -a img { - border: none; } - -p { - margin: 0 0 0 10px; } - -table { - border-spacing: 0; - border-collapse: collapse; } - -td { - word-break: break-word; - -webkit-hyphens: auto; - -moz-hyphens: auto; - hyphens: auto; - border-collapse: collapse !important; } - -table, tr, td { - padding: 0; - vertical-align: top; - text-align: left; } - -hr { - color: #d9d9d9; - background-color: #d9d9d9; - height: 1px; - border: none; } - -/* Responsive Grid */ -table.body { - height: 100%; - width: 100%; } - -table.container { - width: 580px; - margin: 0 auto; - text-align: inherit; } - -table.row { - padding: 0px; - width: 100%; - position: relative; } - -table.container table.row { - display: block; } - -td.wrapper { - padding: 10px 20px 0px 0px; - position: relative; } - -table.columns, -table.column { - margin: 0 auto; } - -table.columns td, -table.column td { - padding: 0px 0px 10px; } - -table.row td.last, -table.container td.last { - padding-right: 0px; } - -table.large-1 { - width: 30px; } - -table.large-2 { - width: 80px; } - -table.large-3 { - width: 130px; } - -table.large-4 { - width: 180px; } - -table.large-5 { - width: 230px; } - -table.large-6 { - width: 280px; } - -table.large-7 { - width: 330px; } - -table.large-8 { - width: 380px; } - -table.large-9 { - width: 430px; } - -table.large-10 { - width: 480px; } - -table.large-11 { - width: 530px; } - -table.large-12 { - width: 580px; } - -table.large-1 center { - min-width: 30px; } - -table.large-2 center { - min-width: 80px; } - -table.large-3 center { - min-width: 130px; } - -table.large-4 center { - min-width: 180px; } - -table.large-5 center { - min-width: 230px; } - -table.large-6 center { - min-width: 280px; } - -table.large-7 center { - min-width: 330px; } - -table.large-8 center { - min-width: 380px; } - -table.large-9 center { - min-width: 430px; } - -table.large-10 center { - min-width: 480px; } - -table.large-11 center { - min-width: 530px; } - -table.large-12 center { - min-width: 580px; } - -table.large-1 .panel center { - min-width: 10px; } - -table.large-2 .panel center { - min-width: 60px; } - -table.large-3 .panel center { - min-width: 110px; } - -table.large-4 .panel center { - min-width: 160px; } - -table.large-5 .panel center { - min-width: 210px; } - -table.large-6 .panel center { - min-width: 260px; } - -table.large-7 .panel center { - min-width: 310px; } - -table.large-8 .panel center { - min-width: 360px; } - -table.large-9 .panel center { - min-width: 410px; } - -table.large-10 .panel center { - min-width: 460px; } - -table.large-11 .panel center { - min-width: 510px; } - -table.large-12 .panel center { - min-width: 560px; } - -.body .columns td.large-1, -.body .column td.large-1 { - width: 8.33333%; } - -.body .columns td.large-2, -.body .column td.large-2 { - width: 16.66667%; } - -.body .columns td.large-3, -.body .column td.large-3 { - width: 25%; } - -.body .columns td.large-4, -.body .column td.large-4 { - width: 33.33333%; } - -.body .columns td.large-5, -.body .column td.large-5 { - width: 41.66667%; } - -.body .columns td.large-6, -.body .column td.large-6 { - width: 50%; } - -.body .columns td.large-7, -.body .column td.large-7 { - width: 58.33333%; } - -.body .columns td.large-8, -.body .column td.large-8 { - width: 66.66667%; } - -.body .columns td.large-9, -.body .column td.large-9 { - width: 75%; } - -.body .columns td.large-10, -.body .column td.large-10 { - width: 83.33333%; } - -.body .columns td.large-11, -.body .column td.large-11 { - width: 91.66667%; } - -.body .columns td.large-12, -.body .column td.large-12 { - width: 100%; } - -td.offset-by-1 { - padding-left: 50px; } - -td.offset-by-2 { - padding-left: 100px; } - -td.offset-by-3 { - padding-left: 150px; } - -td.offset-by-4 { - padding-left: 200px; } - -td.offset-by-5 { - padding-left: 250px; } - -td.offset-by-6 { - padding-left: 300px; } - -td.offset-by-7 { - padding-left: 350px; } - -td.offset-by-8 { - padding-left: 400px; } - -td.offset-by-9 { - padding-left: 450px; } - -td.offset-by-10 { - padding-left: 500px; } - -td.offset-by-11 { - padding-left: 550px; } - -td.expander { - visibility: hidden; - width: 0px; - padding: 0 !important; } - -table.columns .text-pad, -table.column .text-pad { - padding-left: 10px; - padding-right: 10px; } - -table.columns .left-text-pad, -table.columns .text-pad-left, -table.column .left-text-pad, -table.column .text-pad-left { - padding-left: 10px; } - -table.columns .right-text-pad, -table.columns .text-pad-right, -table.column .right-text-pad, -table.column .text-pad-right { - padding-right: 10px; } - -.block-grid { - width: 100%; - max-width: 580px; } - .block-grid td { - display: inline-block; - padding: 10px; } - -.up-2 td { - width: 270px !important; } - -.up-3 td { - width: 173px !important; } - -.up-4 td { - width: 125px !important; } - -.up-5 td { - width: 96px !important; } - -.up-6 td { - width: 76px !important; } - -.up-7 td { - width: 62px !important; } - -.up-8 td { - width: 52px !important; } - -table.center, -td.center, -h1.center, -h2.center, -h3.center, -h4.center, -h5.center, -h6.center, -p.center, -span.center { - text-align: center; } - -span.center { - display: block; - width: 100%; } - -img.center { - margin: 0 auto; - float: none; } - -.show-for-small, -.hide-for-desktop { - display: none; } - -/* Typography */ -body, table.body, h1, h2, h3, h4, h5, h6, p, td { - color: #222222; - font-family: Helvetica, Arial, sans-serif; - font-weight: normal; - padding: 0; - margin: 0; - text-align: left; - line-height: 1.3; } - -h1, h2, h3, h4, h5, h6 { - word-break: normal; } - -h1 { - font-size: 40px; } - -h2 { - font-size: 36px; } - -h3 { - font-size: 32px; } - -h4 { - font-size: 28px; } - -h5 { - font-size: 24px; } - -h6 { - font-size: 20px; } - -body, table.body, p, td { - font-size: 14px; - line-height: 19px; } - -p.lead, p.lede, p.leed { - font-size: 18px; - line-height: 21px; } - -p { - margin-bottom: 10px; } - -small { - font-size: 10px; } - -a { - color: #2ba6cb; - text-decoration: none; } - -a:hover { - color: #2795b6 !important; } - -a:active { - color: #2795b6 !important; } - -a:visited { - color: c #2ba6cb !important; } - -h1 a, -h2 a, -h3 a, -h4 a, -h5 a, -h6 a { - color: #2ba6cb; } - -h1 a:active, -h2 a:active, -h3 a:active, -h4 a:active, -h5 a:active, -h6 a:active { - color: #2ba6cb !important; } - -h1 a:visited, -h2 a:visited, -h3 a:visited, -h4 a:visited, -h5 a:visited, -h6 a:visited { - color: #2ba6cb !important; } - -/* Buttons */ -table.button { - width: 100%; - overflow: visible; } - -table.button td { - display: block; - width: auto !important; - text-align: center; - background: #2ba6cb; - border: 1px solid #2284a1; - color: #ffffff; - padding: 0px 0; } - -table.button td a, table.button.tiny td a { - padding: 5px 0; } - -table.button.small td a { - padding: 8px 0; } - -table.button.medium td a { - padding: 12px 0; } - -table.button.large td a { - padding: 21px 0; } - -table.button td a { - font-weight: bold; - text-decoration: none; - font-family: Helvetica, Arial, sans-serif; - color: #ffffff; - font-size: 16px; - display: block; - height: 100%; - width: 100%; } - -table.button.tiny td a { - font-size: 12px; - font-weight: normal; } - -table.button.small td a { - font-size: 16px; } - -table.button.medium td a { - font-size: 20px; } - -table.button.large td a { - font-size: 24px; } - -table.button:hover td, -table.button:visited td, -table.button:active td { - background: #2795b6 !important; } - -table.button:hover td a, -table.button:visited td a, -table.button:active td a { - color: #ffffff !important; } - -table.button:hover td - { - background: #2284a1; } - -table.button:hover td a, -table.button:active td a, -table.button td a:visited - { - color: #ffffff !important; } - -table.button.secondary td { - background: #e9e9e9; - border-color: #d0d0d0; - color: #555555; } - -table.button.secondary td a { - color: #555555; } - -table.button.secondary:hover td { - background: #d0d0d0 !important; - color: #555555; } - -table.button.secondary:hover td a, -table.button.secondary td a:visited, -table.button.secondary:active td a { - color: #555555 !important; } - -table.button.success td { - background: #5da423; - border-color: #457a1a; } - -table.button.success:hover td { - background: #457a1a !important; } - -table.button.alert td { - background: #c60f13; - border-color: #970b0e; } - -table.button.alert:hover td { - background: #970b0e !important; } - -table.button.radius td { - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px; } - -table.button.round td { - -webkit-border-radius: 500px; - -moz-border-radius: 500px; - border-radius: 500px; } - -td.callout { - width: 100%; - border: 1px solid #bfbfbf; - padding: 10px !important; - background: #f2f2f2; } - -td.callout.success { - background: #43AC6A !important; - border: 1px solid #26633d !important; - color: #FFFFFF !important; } - -td.wrapper table tr td.callout.warning { - background: #f08a24 !important; - border: 1px solid #a3570b !important; - color: #FFFFFF; } - -td.callout.alert { - background: #f04124 !important; - border: 1px solid #a3210b !important; - color: #FFFFFF; } - -td.callout.round { - border-radius: 50px !important; } - -.sub-grid table { - width: 100%; } - -.sub-grid td.sub-columns { - padding-bottom: 0; } - -.thumbnail { - display: inline-block; - border-collapse: separate; } - .thumbnail img { - background-color: #ff0000; - border-collapse: separate; } - .thumbnail:hover, .thumbnail:focus { - box-shadow: 0 0 6px 1px rgba(0, 140, 186, 0.5); } - -table.inline-list { - width: 100% !important; } - -td.vertical { - padding-top: 10px !important; } - -table[class="body"] table.inline-list td.vertical { - display: block !important; } - -/* Outlook First */ -body.outlook p { - display: inline !important; } - -/* Media Queries */ -@media only screen and (max-width: 600px) { - table[class="body"] img { - width: auto !important; - height: auto !important; } - - table[class="body"] center { - min-width: 0 !important; } - - table[class="body"] .container { - width: 95% !important; } - - table[class="body"] .row { - width: 100% !important; - display: block !important; } - - table[class="body"] .wrapper { - display: block !important; - padding-right: 0 !important; } - - table[class="body"] .columns, - table[class="body"] .column { - table-layout: fixed !important; - float: none !important; - width: 100% !important; - padding-right: 0px !important; - padding-left: 0px !important; - display: inline-block !important; - margin: 0 !important; } - - table[class="body"] .wrapper.first .columns, - table[class="body"] .wrapper.first .column { - display: table !important; } - - table[class="body"] table.columns td, - table[class="body"] table.column td { - width: 100% !important; } - - .wrapper > table.small-1 { - width: 8.33333% !important; } - - .wrapper > table.small-2 { - width: 16.66667% !important; } - - .wrapper > table.small-3 { - width: 25% !important; } - - .wrapper > table.small-4 { - width: 33.33333% !important; } - - .wrapper > table.small-5 { - width: 41.66667% !important; } - - .wrapper > table.small-6 { - width: 50% !important; } - - .wrapper > table.small-7 { - width: 58.33333% !important; } - - .wrapper > table.small-8 { - width: 66.66667% !important; } - - .wrapper > table.small-9 { - width: 75% !important; } - - .wrapper > table.small-10 { - width: 83.33333% !important; } - - .wrapper > table.small-11 { - width: 91.66667% !important; } - - .wrapper > table.small-12 { - width: 100% !important; } - - .wrapper > table.small-12 { - display: block !important; } - - .body .columns td.small-1, - .body .column td.small-1, - table.small-1 center { - width: 8.33333% !important; } - - .body .columns td.small-2, - .body .column td.small-2, - table.small-2 center { - width: 16.66667% !important; } - - .body .columns td.small-3, - .body .column td.small-3, - table.small-3 center { - width: 25% !important; } - - .body .columns td.small-4, - .body .column td.small-4, - table.small-4 center { - width: 33.33333% !important; } - - .body .columns td.small-5, - .body .column td.small-5, - table.small-5 center { - width: 41.66667% !important; } - - .body .columns td.small-6, - .body .column td.small-6, - table.small-6 center { - width: 50% !important; } - - .body .columns td.small-7, - .body .column td.small-7, - table.small-7 center { - width: 58.33333% !important; } - - .body .columns td.small-8, - .body .column td.small-8, - table.small-8 center { - width: 66.66667% !important; } - - .body .columns td.small-9, - .body .column td.small-9, - table.small-9 center { - width: 75% !important; } - - .body .columns td.small-10, - .body .column td.small-10, - table.small-10 center { - width: 83.33333% !important; } - - .body .columns td.small-11, - .body .column td.small-11, - table.small-11 center { - width: 91.66667% !important; } - - .body .columns td.small-12, - .body .column td.small-12, - table.small-12 center { - width: 100% !important; } - - table[class="body"] .columns td.small-1, - table[class="body"] .column td.small-1 { - width: 8.33333% !important; } - - table[class="body"] .columns td.small-2, - table[class="body"] .column td.small-2 { - width: 16.66667% !important; } - - table[class="body"] .columns td.small-3, - table[class="body"] .column td.small-3 { - width: 25% !important; } - - table[class="body"] .columns td.small-4, - table[class="body"] .column td.small-4 { - width: 33.33333% !important; } - - table[class="body"] .columns td.small-5, - table[class="body"] .column td.small-5 { - width: 41.66667% !important; } - - table[class="body"] .columns td.small-6, - table[class="body"] .column td.small-6 { - width: 50% !important; } - - table[class="body"] .columns td.small-7, - table[class="body"] .column td.small-7 { - width: 58.33333% !important; } - - table[class="body"] .columns td.small-8, - table[class="body"] .column td.small-8 { - width: 66.66667% !important; } - - table[class="body"] .columns td.small-9, - table[class="body"] .column td.small-9 { - width: 75% !important; } - - table[class="body"] .columns td.small-10, - table[class="body"] .column td.small-10 { - width: 83.33333% !important; } - - table[class="body"] .columns td.small-11, - table[class="body"] .column td.small-11 { - width: 91.66667% !important; } - - table[class="body"] .columns td.small-12, - table[class="body"] .column td.small-12 { - width: 100% !important; } - - table[class="body"] td.offset-by-1 { - padding-left: 0 !important; } - - table[class="body"] td.offset-by-2 { - padding-left: 0 !important; } - - table[class="body"] td.offset-by-3 { - padding-left: 0 !important; } - - table[class="body"] td.offset-by-4 { - padding-left: 0 !important; } - - table[class="body"] td.offset-by-5 { - padding-left: 0 !important; } - - table[class="body"] td.offset-by-6 { - padding-left: 0 !important; } - - table[class="body"] td.offset-by-7 { - padding-left: 0 !important; } - - table[class="body"] td.offset-by-8 { - padding-left: 0 !important; } - - table[class="body"] td.offset-by-9 { - padding-left: 0 !important; } - - table[class="body"] td.offset-by-10 { - padding-left: 0 !important; } - - table[class="body"] td.offset-by-11 { - padding-left: 0 !important; } - - table[class="body"] table.columns td.expander { - width: 1px !important; } - - table[class="body"] .right-text-pad, - table[class="body"] .text-pad-right { - padding-left: 10px !important; } - - table[class="body"] .left-text-pad, - table[class="body"] .text-pad-left { - padding-right: 10px !important; } - - table[class="body"] .hide-for-small, - table[class="body"] .show-for-desktop { - display: none !important; } - - table[class="body"] .show-for-small, - table[class="body"] .hide-for-desktop { - display: inherit !important; } } -table[class="body"] table.inline-list td { - width: auto !important; - display: inline-block !important; } - -table[class="body"] table.inline-list.vertical td { - display: block !important; } - -/*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/_build/goodbye.html b/_build/goodbye.html index 1e9bc2d2..2b879756 100644 --- a/_build/goodbye.html +++ b/_build/goodbye.html @@ -14,7 +14,7 @@
- +
What's up
What's up
diff --git a/_build/hello.html b/_build/hello.html index 487db28a..b060f560 100644 --- a/_build/hello.html +++ b/_build/hello.html @@ -15,36 +15,36 @@
- +
+
- + SIDEBAR HERO -
- +

asdfakh

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.

asdfakh

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.
-
+
+

Phasellus dictum sapien a neque luctus cursus. Pellentesque sem dolor, fringilla et pharetra vitae.

Click it! »
-
-
-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.

Click Me!

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et. Lorem ipsum dolor sit amet.

Click Me!

What a game

 +
+
Header Thing

Sub-head or something

Just a Plain Link »
Just a Plain Link »
Just a Plain Link »
Just a Plain Link »
Just a Plain Link »
Just a Plain Link »
Just a Plain Link »
-
- -
+
+
+
Connect With Us:
diff --git a/_build/letter.html b/_build/letter.html index bf43daf9..07a2f761 100644 --- a/_build/letter.html +++ b/_build/letter.html @@ -15,17 +15,17 @@
- +

Hi John,

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.

Hi John,

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.
- +
- +

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.

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.

Cheers,
Bryan

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.

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.

Cheers,
Bryan
-
+ -
- + - +
@@ -34,12 +34,12 @@

Introducing Foundation for Apps: Create beautiful web apps that look great on all devices. zurb.us/1yjUnj6

8:35 PM - 5 Dec 2014

@@ -48,7 +48,7 @@
+
- + - + -
@@ -57,12 +57,12 @@

Introducing Foundation for Apps: Create beautiful web apps that look great on all devices. zurb.us/1yjUnj6

8:35 PM - 5 Dec 2014

@@ -77,7 +77,7 @@ - +
Sharing is caring

Share ZURBnews and keep the good vibes going.

Sharing is caring

Share ZURBnews and keep the good vibes going.
@@ -87,13 +87,13 @@ -
+ - + +
diff --git a/scss/ink/components/_block-grid.scss b/scss/ink/components/_block-grid.scss index 6cca54ab..c280b0ac 100755 --- a/scss/ink/components/_block-grid.scss +++ b/scss/ink/components/_block-grid.scss @@ -2,7 +2,7 @@ // zurb.com/ink/ // Licensed under MIT Open Source -@import "global"; +@import 'global'; //// /// @group block-grid diff --git a/scss/ink/components/_button.scss b/scss/ink/components/_button.scss index 7686c426..67a5adcd 100755 --- a/scss/ink/components/_button.scss +++ b/scss/ink/components/_button.scss @@ -2,201 +2,170 @@ // zurb.com/ink/ // Licensed under MIT Open Source -@import "global"; +@import 'global'; //// /// @group button //// -$include-html-button-classes: $include-html-classes !default; - -// We use these to build padding for buttons. -$button-dft: 0px 0 !default; -$button-tny: 5px !default; -$button-sml: 8px !default; -$button-med: 12px !default; -$button-lrg: 21px !default; - -// We use these to control button text styles. -$button-font-family: $base-font-family !default; -$button-font-color: #ffffff !default; -$button-font-color-alt: #555555 !default; -$button-font-tny: 12px !default; -$button-font-sml: 16px !default; -$button-font-med: 20px !default; -$button-font-lrg: 24px !default; - -// We use these to control button border styles. -$button-border-width: 1px !default; -$button-border-style: solid !default; -$button-bg: #2ba6cb !default; -$button-border-color: darken($button-bg, 10%); - -// We use these as default colors throughout -$primary-color: #2795b6 !default; -$secondary-color: #e9e9e9 !default; -$alert-color: #c60f13 !default; -$success-color: #5da423 !default; -$secondary-border-color: #d0d0d0 !default; -$alert-border-color: #457a1a !default; -$success-border-color: #970b0e !default; - -// We use this to set the default radius used throughout the core. -$button-radius: $global-radius !default; -$button-round: $global-rounded !default; - -@include exports("buttons") { - @if $include-html-button-classes { - /* Buttons */ - - table.button { - width: 100%; - overflow: visible; - } +/// Defualt padding for button. +/// @type List +$button-padding: 12px 0 !default; - table.button td { - display: block; - width: auto !important; - text-align: center; - background: $button-bg; - border: $button-border-width $button-border-style $button-border-color; - color: $button-font-color; - padding: $button-dft; - } +/// Defualt padding for a tiny button. +/// @type List +$button-padding-tiny: 5px 0 4px !default; - table.button td a, table.button.tiny td a { - padding: $button-tny 0; - } +/// Defualt padding for a small button. +/// @type List +$button-padding-small: 8px 0 7px !default; - table.button.small td a { - padding: $button-sml 0; - } +/// Defualt padding for a large button. +/// @type List +$button-padding-large: 21px 0 18px !default; - table.button.medium td a { - padding: $button-med 0; - } +/// Defualt color of the font in a button. +/// @type Color +$button-font-color: $white !default; - table.button.large td a { - padding: $button-lrg 0; - } +/// Defualt color of the font in an alternate button. +/// @type Color +$button-font-color-alt: $medium-gray !default; - table.button td a { - font-weight: bold; - text-decoration: none; - font-family: $button-font-family; - color: $button-font-color; - font-size: $button-font-sml; - display: block; - height: 100%; - width: 100%; - } +/// Defualt font size for a button. +/// @type Number +$button-font-size: 20px !default; - table.button.tiny td a { - font-size: $button-font-tny; - font-weight: normal; - } +/// Defualt font size for a tiny button. +/// @type Number +$button-font-size-tiny: 12px !default; - table.button.small td a { - font-size: $button-font-sml; - } +/// Defualt font size for a small button. +/// @type Number +$button-font-size-small: 16px !default; - table.button.medium td a { - font-size: $button-font-med; - } +/// Defualt font size for a large button. +/// @type Number +$button-font-size-large: 24px !default; - table.button.large td a { - font-size: $button-font-lrg; - } +/// Defualt backgrounnd color for a button. +/// @type Color +$button-background-color: $primary-color !default; - table.button:hover td, - table.button:visited td, - table.button:active td { - background: $primary-color !important; - } +/// Defualt border color for a button. +/// @type Color +$button-border: 1px solid darken($button-background-color, 10%); - table.button:hover td a, - table.button:visited td a, - table.button:active td a { - color: $button-font-color !important; - } +table.button { + width: 100%; + overflow: visible; - table.button:hover td - // table.tiny-button:hover td, - // table.small-button:hover td, - // table.medium-button:hover td, - // table.large-button:hover td - { - background: darken($button-bg, 10%); + td { + display: block; + width: auto !important; + text-align: center; + background: $button-background-color; + border: $button-border; + color: $button-font-color; + padding: $button-padding; } - table.button:hover td a, - table.button:active td a, - table.button td a:visited - // table.tiny-button:hover td a, - // table.tiny-button:active td a, - // table.tiny-button td a:visited, - // table.small-button:hover td a, - // table.small-button:active td a, - // table.small-button td a:visited, - // table.medium-button:hover td a, - // table.medium-button:active td a, - // table.medium-button td a:visited, - // table.large-button:hover td a, - // table.large-button:active td a, - // table.large-button td a:visited - { - color: $button-font-color !important; - } - table.button.secondary td { - background: $secondary-color; - border-color: $secondary-border-color; - color: $button-font-color-alt; - } + td a { + font-weight: bold; + text-decoration: none; + font-family: $base-font-family; + color: $button-font-color; + font-size: $button-font-size; + display: block; + height: 100%; + width: 100%; + padding: $button-padding; + font-size: $button-font-size; + } - table.button.secondary td a { - color: $button-font-color-alt; - } + &.tiny td a { + padding: $button-padding-tiny; + font-size: $button-font-size-tiny; + font-weight: normal; + } - table.button.secondary:hover td { - background: $secondary-border-color !important; - color: $button-font-color-alt; - } + &.small td a { + padding: $button-padding-small; + font-size: $button-font-size-small; + } - table.button.secondary:hover td a, - table.button.secondary td a:visited, - table.button.secondary:active td a { - color: $button-font-color-alt !important; - } + &.large td a { + padding: $button-padding-large 0; + font-size: $button-font-size-large; + } - table.button.success td { - background: $success-color; - border-color: $alert-border-color; - } + &:hover td, + &:visited td, + &:active td { + background: $button-background-color !important; + color: $button-font-color !important; + } - table.button.success:hover td { - background: $alert-border-color !important; - } + &:hover td + &.tiny:hover td, + &.small:hover td, + &.large:hover td + { + background: darken($button-background-color, 10%); + } - table.button.alert td { - background: $alert-color; - border-color: $success-border-color; - } + &:hover td a, + &:active td a, + & td a:visited, + &.tiny:hover td a, + &.tiny:active td a, + &.tiny td a:visited, + &.small:hover td a, + &.small:active td a, + &.small td a:visited, + &.large:hover td a, + &.large:active td a, + &.large td a:visited + { + color: $button-font-color !important; + } - table.button.alert:hover td { - background: $success-border-color !important; + &.secondary td { + background: $secondary-color; + border: darken($secondary-color, -10%); + color: $button-font-color-alt; + a { + color: $button-font-color-alt; } + } - table.button.radius td { - -webkit-border-radius: $global-radius; - -moz-border-radius: $global-radius; - border-radius: $global-radius; - } + &.secondary:hover td { + background: darken($secondary-color, -10%)!important; + color: $button-font-color-alt; + } - table.button.round td { - -webkit-border-radius: $global-rounded; - -moz-border-radius: $global-rounded; - border-radius: $global-rounded; - } + &.secondary:hover td a, + &.secondary td a:visited, + &.secondary:active td a { + color: $button-font-color-alt !important; + } + + &.success td { + background: $success-color; + border-color: 1px solid darken($success-color, 10%); + } + + &.success:hover td { + background: darken($success-color, 10%) !important; + } + + &.alert td { + background: $alert-color; + border-color: 1px solid darken($alert-color, 10%); + } + + &.alert:hover td { + background: darken($alert-color, 10%) !important; } -} \ No newline at end of file +} diff --git a/scss/ink/components/_global.scss b/scss/ink/components/_global.scss index 974c122a..87870b1d 100755 --- a/scss/ink/components/_global.scss +++ b/scss/ink/components/_global.scss @@ -8,6 +8,13 @@ $include-html-classes: true !default; $include-html-global-classes: $include-html-classes !default; +$primary-color: #2ba6cb; + +$white: #ffffff; +$light-gray: #cccccc; +$medium-gray: #555555; +$dark-gray: #222222; + $column-gutter: 20px !default; $container-width: 580px !default;