Preen a bunch of stuff

gratipay · Aug 27, 2015 · 14a4f97 · 14a4f97
1 parent 690f802
commit 14a4f97
Show file tree

Hide file tree

Showing 11 changed files with 67 additions and 63 deletions.
diff --git a/scss/components/cta.scss b/scss/components/cta.scss
@@ -7,7 +7,7 @@
 
     .your-payment .amount {
         /* Match content h1 */
-        font: bold 28px/37px $Ideal;
+        font: bold 28px/40px $Ideal;
     }
     .per-week {
         margin-bottom: 10px;
@@ -27,6 +27,10 @@
         background: $white;
         color: $brown;
         margin-bottom: 3px;
+        padding-left: 8px;
+        max-width: 128px;
+        overflow: hidden;
+        text-overflow: ellipsis;
         &.edit, &.join, &.save {
             background: $gold;
         }

diff --git a/scss/components/sign_in.scss b/scss/components/sign_in.scss
@@ -33,24 +33,12 @@
         li {
             margin: 0;
             list-style: none;
-            &.facebook button {
-                @include has-icon("facebook");
-            }
-            &.google button {
-                @include has-icon("google");
-            }
-            &.twitter button {
-                @include has-icon("twitter");
-            }
-            &.github button {
-                @include has-icon("github");
-            }
-            &.bitbucket button {
-                @include has-icon("bitbucket");
-            }
-            &.openstreetmap button {
-                @include has-icon("openstreetmap");
-            }
+            &.facebook      button { @include has-icon("facebook"); }
+            &.google        button { @include has-icon("google"); }
+            &.twitter       button { @include has-icon("twitter"); }
+            &.github        button { @include has-icon("github"); }
+            &.bitbucket     button { @include has-icon("bitbucket"); }
+            &.openstreetmap button { @include has-icon("openstreetmap"); }
             &:hover button {
                 background: $darker-green;
             }

diff --git a/scss/layouts/layout.scss b/scss/layouts/layout.scss
@@ -58,20 +58,20 @@ body {
     position: relative;
 
     h1 {
-        font: bold 64px/64px $Ideal;
+        font: bold 64px/80px $Ideal;
         color: $white;
         position: absolute;
         bottom: 4px;
         right: 16px;
+        text-align: right;
     }
 }
 
 #main {
     display: table;
-    height: 100%;
     table-layout: fixed;
     width: 100%;
-    padding-top: 40px;
+    padding: 40px 0;
 }
 
 #sidebar {
@@ -155,9 +155,8 @@ body {
 }
 
 #footer {
-    background: transparentize($white, 0.1);
     border-top: 1px solid $brown;
-    padding: 10px 40px;
+    padding: 10px 0;
     text-align: right;
     font-size: 13px;
     line-height: 13px;
@@ -171,6 +170,14 @@ body {
             display: inline-block;
             margin: 0 0.3em;
             padding: 0.25em 0.5em;
+
+            .icon {
+                font: normal 20px/20px 'icomoon';
+            }
+
+            &:hover {
+                color: $black;
+            }
         }
 
         &:first-child:before {

diff --git a/scss/mixins/icons.scss b/scss/mixins/icons.scss
@@ -19,19 +19,14 @@
   text-transform: none;
   -webkit-font-smoothing: antialiased;
 
-  @if $name == "facebook" {
-    content: "\e000";
-  } @else if $name == "twitter" {
-    content: "\e001";
-  } @else if $name == "google" {
-    content: "\e002";
-  } @else if $name == "github" {
-    content: "\e003";
-  } @else if $name == "openstreetmap" {
-    content: "\e004";
-  } @else if $name == "bitbucket" {
-    content: "\e005";
-  }
+       @if $name == "facebook"      { content: "\e000"; }
+  @else if $name == "twitter"       { content: "\e001"; }
+  @else if $name == "google"        { content: "\e002"; }
+  @else if $name == "github"        { content: "\e003"; }
+  @else if $name == "openstreetmap" { content: "\e004"; }
+  @else if $name == "bitbucket"     { content: "\e005"; }
+  @else if $name == "medium"        { content: "\e006"; }
+  @else if $name == "email"         { content: "\e007"; }
 }
 
 @mixin has-icon($name: "", $font-size: 16px, $margin-right: 4px) {

diff --git a/templates/base.html b/templates/base.html
@@ -55,7 +55,7 @@ <h1><a href="/"><img src="{{ website.asset('gratipay.svg') }}"
                 <li>
                     <a id="sign-out" href="/sign-out.html">
                         <span class="icon">&#xe600;</span>
-                        <span class="screen-reader-text">Sign out</span>
+                        <span class="screen-reader-text">{{ _("Sign out") }}</span>
                     </a>
                 </li>
             </ul>
@@ -80,15 +80,27 @@ <h1><a href="/"><img src="{{ website.asset('gratipay.svg') }}"
 
         <div id="footer">
             <ul>
-                <li><a href="/about/">{{ _("About") }}</a></li>
-                <li><a href="/about/contact">{{ _("Contact Us") }}</a></li>
-                <li><a href="/about/terms/">{{ _("Terms") }}</a></li>
-                <li><a href="http://inside.gratipay.com/appendices/colophon">{{ _("Colophon") }}</a></li>
-                <li><a href="https://medium.com/gratipay-blog">{{ _("Blog") }}</a></li>
-                <li><a href="https://twitter.com/gratipay">Twitter</a></li>
-                <li><a href="https://github.com/gratipay/gratipay.com">GitHub</a></li>
-                <li><a href="https://plus.google.com/+Gratipay/posts">Google Plus</a></li>
-                <li><a href="https://www.facebook.com/Gratipay">Facebook</a></li>
+                <li>
+                    <a href="https://medium.com/gratipay-blog" 
+                       title="our blog on Medium">
+                        <span class="icon">&#xe006;</span>
+                        <span class="screen-reader-text">{{ _("Blog") }}</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="https://github.com/gratipay/gratipay.com/issues/new"
+                       title="public feedback on GitHub">
+                        <span class="icon">&#xe003;</span>
+                        <span class="screen-reader-text">{{ _("GitHub") }}</span>
+                    </a>
+                </li>
+                <li>
+                    <a href="mailto:support@gratipay.com"
+                       title="private feedback via email">
+                        <span class="icon">&#xe007;</span>
+                        <span class="screen-reader-text">{{ _("Email") }}</span>
+                    </a>
+                </li>
             </ul>
         </div>
     </div>

diff --git a/templates/your-payment.html b/templates/your-payment.html
@@ -17,7 +17,7 @@ <h2>{{ _('You Give') }}</h2>
                 </button>
             </div>
             <form class="edit" action="/{{ team.slug }}/payment-instruction.json">
-                $
+                <span class="amount">$</span>
                 <input type="text" name="amount" class="amount"
                        value="{{ format_decimal(payment_instruction.amount) }}"
                        min="0" max="1000">

diff --git a/www/assets/fonts/icomoon.eot b/www/assets/fonts/icomoon.eot