Merge pull request #306 from scala/revamp-donate

Make donate page prettier

Author: bishabosha

_includes/navbar.html

@@ -10,7 +10,7 @@
       </button>
       <a class="navbar-brand" href="{{ site.baseurl }}/">
         <div class="header-logo">
-          <img height="42" style="top: 6px; position: relative;" src="/resources/img/scala-center-logo-top@2x.png" alt="Scala Center">
+          <img height="42" style="top: 14px; position: relative;" src="/resources/img/scala-center-logo-top@2x.png" alt="Scala Center">
         </div>
       </a>
     </div>

donate.md

@@ -4,12 +4,10 @@ layout: contact
 
 ## Support the Scala Center!
 
-<a target="_blank" href="https://donate.stripe.com/fZefZYfMC5Y0cXS9AD">Make a one-time donation to the Scala Center</a>.
+<a target="_blank" class="btn btn-default btn-md btn-block" href="https://donate.stripe.com/fZefZYfMC5Y0cXS9AD">Make a one-time donation to the Scala Center</a>
 
 Email us at [scala.center@epfl.ch](mailto:scala.center@epfl.ch) if you'd like to turn your
-one-time donation into a monthly or yearly recurring donation.
-
-(For companies, please consider [the corporate membership options](./corporate-membership.html).)
+one-time donation into a monthly or yearly recurring donation. (For companies, please consider [the corporate membership options](./corporate-membership.html).)
 
 ### Why contribute?
 

resources/css/main.scss

@@ -1381,7 +1381,7 @@ div.search {
     margin-bottom: 20px;
   }
 
-  a {
+  a:not(.btn) {
     text-decoration: underline;
   }
 

resources/css/sass/bootstrap/_buttons.scss

@@ -137,6 +137,10 @@ a.btn {
   // line-height: ensure even-numbered height of button next to large input
   @include button-size($padding-large-vertical, $padding-large-horizontal, $font-size-large, $line-height-large, $btn-border-radius-large);
 }
+.btn-md {
+  // line-height: ensure even-numbered height of button next to base input
+  @include button-size($padding-large-vertical, $padding-medium-horizontal, $font-size-medium, $line-height-medium, $btn-border-radius-base);
+}
 .btn-sm {
   // line-height: ensure proper height of button next to small input
   @include button-size($padding-small-vertical, $padding-small-horizontal, $font-size-small, $line-height-small, $btn-border-radius-small);

resources/css/sass/bootstrap/_navbar.scss

@@ -162,8 +162,7 @@
 
 .navbar-brand {
   float: left;
-  padding: $navbar-padding-vertical $navbar-padding-horizontal;
-  padding-top: 14px;
+  padding: 20px $navbar-padding-horizontal;
   font-size: $font-size-large;
   line-height: $line-height-computed;
   height: $navbar-height;

resources/css/sass/bootstrap/_variables.scss

@@ -51,6 +51,7 @@ $font-family-base:        $font-family-sans-serif !default;
 
 $font-size-base:          14px !default;
 $font-size-large:         ceil(($font-size-base * 1.25)) !default; // ~18px
+$font-size-medium:         ceil(($font-size-base * 1.125)) !default; // ~16px
 $font-size-small:         ceil(($font-size-base * 0.85)) !default; // ~12px
 
 $font-size-h1:            floor(($font-size-base * 2.6)) !default; // ~36px
@@ -98,13 +99,16 @@ $padding-base-horizontal:   24px !default;
 $padding-large-vertical:    10px !default;
 $padding-large-horizontal:  16px !default;
 
+$padding-medium-horizontal: 20px !default;
+
 $padding-small-vertical:    5px !default;
 $padding-small-horizontal:  10px !default;
 
 $padding-xs-vertical:       1px !default;
 $padding-xs-horizontal:     5px !default;
 
 $line-height-large:         1.3333333 !default; // extra decimals for Win 8.1 Chrome
+$line-height-medium:        1.4 !default; // extra decimals for Win 8.1 Chrome
 $line-height-small:         1.5 !default;
 
 $border-radius-base:        2px !default;