big update to Thankful website

Author: ErikBjare

templates/email-signup-horizontal.pug

@@ -1,7 +1,10 @@
 |<!-- Begin Mailchimp Signup Form -->
 |<link href="//cdn-images.mailchimp.com/embedcode/horizontal-slim-10_7.css" rel="stylesheet" type="text/css">
 |<style type="text/css">
-|	#mc_embed_signup{clear:left; font:14px Helvetica,Arial,sans-serif; width:100%;}
+|	#mc_embed_signup {clear:left; width:100%;}
+|	#mc_embed_signup input {font:14px Helvetica,Arial,sans-serif; }
+|
+| #mc_embed_signup label { font-size: 1.2em; line-height: 1.2em; }
 |	/* Add your own Mailchimp form style overrides in your site stylesheet or in this style block.
 |	   We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
 |

templates/head-includes.pug

@@ -6,7 +6,7 @@ link(rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Ic
 // Possible values for primary: deep_orange, red, pink, purple, deep_purple, indigo, blue, light_blue, cyan, teal, green, light_green, lime, yellow, amber, orange, brown, blue_grey, grey
 - var primary = 'deep_purple';
 // Possible values for secondary: deep_orange, red, pink, purple, deep_purple, indigo, blue, light_blue, cyan, teal, green, light_green, lime, yellow, amber, orange
-- var secondary = 'amber';
+- var secondary = 'orange';
 link(rel="stylesheet" href=`https://code.getmdl.io/1.3.0/material.${primary}-${secondary}.min.css`)
 script(defer src="https://code.getmdl.io/1.3.0/material.min.js")
 

templates/mixins.pug

@@ -1,10 +1,9 @@
 mixin section(padding="2em 0em")
     div()&attributes(attributes)
-      div(style=`padding: ${padding}`)
-        .mdl-grid
-          +cell(8).mdl-cell--2-offset-desktop
-            .mdl-grid
-              block
+      .mdl-grid(style=`padding: ${padding}`)
+        +cell(8).mdl-cell--2-offset-desktop
+          .mdl-grid(style="padding: 0")
+            block
 
 
 mixin button(href, style)
@@ -51,11 +50,11 @@ mixin cell(cols)
 
 
 mixin sectitle
-  h2.mdl-typography--display-2-color-contrast
+  h4.mdl-typography--display-1(style="margin-top: 0")
     block
 
 mixin footer
   +section("2em")(class!=attributes.class)
     +cell(12)
-      p(style="margin: 0")
+      p(style="margin: 0; text-align: center")
         b Made with #[i.fas.fa-heart(style="color: red")] by Superuser Labs

thankful/index.pug

@@ -15,9 +15,10 @@ html
             +text('div', 'text-center', 'grey-800')
               div
                 +typo('div', 'display-4')
-                  img(src="/media/thankful-logo-512.png", style="width: 1em; display: inline-block; vertical-align: middle; margin: 0em 0em 0.2em 0")
-                  span(style="display: inline-block; vertical-align: middle; font-family: 'Varela round'")
-                    | #[b hankful]
+                  div(style="white-space: nowrap; font-size: 0.8em")
+                    img(src="/media/thankful-logo-512.png", style="width: 1em; display: inline-block; vertical-align: middle; margin: 0em 0em 0.2em 0")
+                    span(style="display: inline-block; vertical-align: middle; font-family: 'Varela round'")
+                      | #[b hankful]
               div(style="font-family: 'Varela round'")
                 div(style="margin-top: 1.5em; font-size: 1.5em; font-weight: bold;")
                   | Support the creators that you love using cryptocurrency
@@ -29,6 +30,11 @@ html
               div
                 h5
                   b Try the early alpha!
+
+                //div
+                  +button("asd", style="background-color: #F82; color: white")
+                    | #[i.fab.fa-firefox(style="color: #FFF")] Firefox
+
                 div(style="display: flex; align-items: center; justify-content: center;")
                   div(style="margin: 0 1em")
                     a(href="https://chrome.google.com/webstore/detail/thankful/eapbondnpopbiepnjfhnaaejfdfjhnde")
@@ -37,6 +43,9 @@ html
                     a(href="https://addons.mozilla.org/en-US/firefox/addon/getthankful/")
                       img(src="https://addons.cdn.mozilla.net/static/img/addons-buttons/AMO-button_1.png")
 
+                div.mdl-typography--body-2-color-contrast(style="margin-top: 0.5em")
+                  | ...or get the code on #[a(href="https://github.com/SuperuserLabs/thankful").mdl-typography--body-2-color-contrast GitHub]
+
                 p
                   a(href="/media/screenshot-thankful-1280x800.png")
                     figure(style="border: 1px solid #555; border-radius: 3px; width: 30em; max-width: 100%; margin: 0 auto 0 auto")
@@ -60,33 +69,65 @@ html
           +section
             +cell(9)
                 +sectitle Support everyone you like
-                p Thankful makes it easy to support creators. It keeps track of your favorite creators and then lets you support those you like the most.
-            +cell(3)(align='right')
-              +fa('donate', 'fas', 'amber')
+                div(style="opacity: 0.8")
+                  p
+                    | Thankful automatically tracks which creators you spend time on. Then at the end of the month, it shows you a list of your top creators and lets you support them by sending them cryptocurrency.
+                  p
+                    | We currently support creators on:
+                  ul(style="padding-left: 2em; margin: 0")
+                    li YouTube
+                    li GitHub
+                    li Medium
+                    li ...and more to come
 
-          +section.mdl-color--grey-200
-            +cell(3)(style="margin-top: 2em")
-              +fa('coins', 'fas', 'amber')
-            +cell(9)(align='right')
-                +sectitle Zero fees
-                p The only fees you pay are transaction fees, and the completely optional "I'm thankful for Thankful"-fee.
+            +cell(3)(align='right', style="margin-top: 1em").mdl-cell--hide-phone
+              +fa('heart', 'fas', 'red')
+
+          +section.mdl-color--grey-100
+            +cell(9)
+                +sectitle Healthier incentives, for a healthier web
+                p There is a fundamental issue on the internet where ad-funded creators have incentive to steal your attention as long as possible instead of providing you with as much value as they can.
+
+                p By using Thankful, you incentivize creators to spend more time and effort on creating #[b what you want].
+            +cell(3)(align='right', style="margin-top: 1em").mdl-cell--hide-phone
+              span
+                +fa('seedling', 'fas', 'green')
 
           +section
             +cell(9)
                 +sectitle A good use case for cryptocurrency
-                p.mdl-typography--font-light
-                  | While some people in the crypto-community are figuring out how to do all kinds of cool and crazy things using the technology it seems like many people still view it as no more than a high volatility asset swinging between bubbles and crashes. By focusing on vastly improving the experience for an already common use of them (donations) we hope to demystify cryptocurrency and encourage adoption.
                 p
-                  | Payments currently happen on the Ethereum blockchain* since it currently has the most active development and strongest developer community, but we seek to let you use whichever cryptocurrency you choose.
+                  | One of the earliest uses for cryptocurrency were donations. People and organizations all over the web accept donations and we want to build on that history and take it to the next level. You can read all about our master plan to make it easier to support every creator online #[a(href="https://github.com/SuperuserLabs/thankful/wiki/Growth-plan") here].
                 p
-                  i *support for ERC-20 tokens planned
-            +cell(3)(align='right', style="margin-top: 2em")
+                  | Payments are made with Ether*, the currency native to the Ethereum blockchain. This provides low transaction fees and lets us build more advanced features in the future by utilizing smart contracts and the vibrant Ethereum ecosystem.
+                p
+                  i *support for more cryptocurrencies planned
+            +cell(3)(align='right', style="margin-top: 1em").mdl-cell--hide-phone
               span(style="margin-right: 2em")
                 +fa('ethereum', 'fab', 'blue-grey-900')
               span
                 +fa('bitcoin', 'fab', 'amber')
 
-          +section.mdl-color--light-blue-50
-            include /templates/email-signup-horizontal.pug
+          +section.mdl-color--grey-100
+            +cell(9)
+              +sectitle
+                | Zero fees #[span(style="opacity: 0.5") (almost) ]
+              p The only fees you pay are transaction fees (usually ~1-3%), and the voluntary "I'm thankful for Thankful"-fee. This means #[b creators will get more] of what you give, and #[b reduces fees by about 90%] compared to Patreon.
+              p You can read more about how we get rid of almost all fees #[a(href="https://github.com/SuperuserLabs/thankful/wiki/Fees") here].
+            +cell(3)(align='right', style="margin-top: 1em").mdl-cell--hide-phone
+              +fa('coins', 'fas', 'amber')
+
+          +section
+            +cell(9)
+              +sectitle
+                | Open source, unstoppable, and you own your data
+              p We believe in open source and self-ownership of data. That's why we designed Thankful so that we don't collect any of your data and don't need any servers. Even if we disappeared tomorrow, Thankful would still work.
+
+            +cell(3)(align='right', style="margin-top: 1em").mdl-cell--hide-phone
+              +fa('code', 'fas', 'grey-500')
+
+          +section.mdl-color--grey-100
+            +cell(12)(style="font-size: 1.5em")
+              include /templates/email-signup-horizontal.pug
 
-          +footer.mdl-color--grey-200
+          +footer