[WIP]: Redesign Liberapay

style/base/base.scss

@@ -5,18 +5,27 @@ html {
 }
 
 body {
+    margin: 0;
     display: flex;
     flex-direction: column;
     & > footer {
         display: flex;
         justify-content: space-around;
-        margin: 100px auto 20px auto;
+        margin-top: 100px;
+        background: #fafafa;
+        padding: 80px;
+        font-weight: bold;
 
         @media (max-width: $screen-sm-min) {
             flex-direction: column;
             text-align: center;
         }
 
+        & > p {
+            display: inline-block;
+            margin: 16px 0;
+        }
+
         & > ul {
             list-style: none;
             padding: 0px;
@@ -25,16 +34,25 @@ body {
                 display: inline-block;
                 & > a {
                     display: inline-block;
-                    padding: 10px;
+                    margin: 16px;
+                    color: rgba(37,49,55,.76);
                 }
             }
         }
     }
+
     & > .top {
         order: -1;
     }
 }
 
+.footer-logo {
+    display: block;
+    margin: 0 auto;
+    height: 50px;
+    width: auto;
+}
+
 @mixin transition {
     transition: all 0.1s ease-in;
 }
@@ -43,6 +61,16 @@ body {
     min-height: 75%;
 }
 
+.container {
+    margin: 0 auto;
+}
+
+@media (min-width: 1200px) {
+    .container {
+        width: 100%;
+    }
+}
+
 #homepage {
     > .navbar-liberapay {
         background-color: transparent;
@@ -51,23 +79,64 @@ body {
             color: #222;
         }
     }
+    .container {
+        padding: 0;
+    }
     #main {
         font-size: $font-size-medium;
     }
     .section {
-        $border-color: #f6c915;
-        border-bottom: 1px solid $border-color;
-        border-image: linear-gradient(to left, #fff, $border-color, #fff) 1;
-        padding: 50px 0 70px;
+        padding: 50px 35px 70px 35px;
+        max-width: 100%;
         &.no-border {
             border: none;
         }
+        @media (max-width: $screen-sm-min) {
+            padding: 15px;
+        }
         &.jumbotron {
-            background: transparent;
+            /*background: url("https://images.unsplash.com/photo-1505015160083-00f1e35b6ab8?dpr=1&auto=format&fit=crop&w=1000&q=80&cs=tinysrgb");
+            background-repeat: no-repeat;
+            background-size: cover;
+            background-position: center;*/
+            background: #fff;
             border-radius: 0;
             margin: 0;
-            padding-top: 70px;
-            text-align: center;
+            padding: 70px;
+            text-transform: uppercase;
+            & > h2 {
+                color: #444;
+                text-align: left;
+                font-weight: bold;
+            }
+            & > p {
+                color: #ccc;
+                text-align: left;
+            }
+            & img {
+                height: 80px;
+                margin-bottom: 15px;
+                width: auto;
+            }
+            & .buttons {
+                text-transform: none;
+                text-align: left;
+            }
+            @media (max-width: $screen-sm-min) {
+                padding: 20px;
+            }
+        }
+    }
+    .sponsored-by {
+        background: #f6f6f6;
+        & > p:first-child {
+            opacity: 0.5;
+        }
+        & .s-logo {
+            opacity: 0.5;
+        }
+        & .s-logo:hover {
+            opacity: 1;
         }
     }
     h2 {
@@ -80,6 +149,14 @@ body {
             margin: 0 0.66em 0.66em 0;
         }
     }
+    .section:last-child .buttons {
+        text-align: center;
+        margin: 0 auto;
+    }
+}
+
+.grey {
+    background: #f6f6f6;
 }
 
 .homepage-pitch {
@@ -101,12 +178,8 @@ body {
     text-align: center;
 }
 
-.btn {
-    @include transition;
-}
-
 .btn-donate {
-    $base-color: #ffee16;
+    $base-color: #F6C915;
     background-color: $base-color;
     color: #1a171b;
     &:hover {
@@ -133,6 +206,11 @@ input.amount {
 
 .input-group-addon, .input-group-btn {
     width: auto !important;
+    border-radius: 0;
+}
+
+.input-group-btn .btn:hover {
+    box-shadow: none;
 }
 
 .input-group select.form-control {
@@ -183,6 +261,10 @@ img.account-type {
     height: 32px;
 }
 
+.panel {
+    border-radius: 0;
+}
+
 .panel-body {
     .avatar-col {
         float: left;
@@ -200,7 +282,7 @@ img.account-type {
     text-align: center;
     .avatar-cutter-120 {
         border: 4px solid $gray-lighter;
-        border-radius: 20%;
+        border-radius: 50%;
         box-sizing: content-box;
         display: inline-block;
     }
@@ -347,7 +429,7 @@ input.search {
     width: 104px;
     .avatar-cutter-98 {
         border: 3px solid $gray-lighter;
-        border-radius: 20%;
+        border-radius: 50%;
         box-sizing: content-box;
         display: block;
     }
@@ -431,6 +513,25 @@ ul.emails {
     margin-bottom: 0.33em;
 }
 
+a {
+    text-decoration: none;
+    border-bottom: 2px solid #eee;
+    -webkit-transition: all 0.15s ease;
+    -moz-transition: all 0.15s ease;
+    -ms-transition: all 0.15s ease;
+    -o-transition: all 0.15s ease;
+    transition: all 0.15s ease;
+}
+
+a:hover {
+    text-decoration: none;
+    border-bottom: 2px solid #23527c;
+}
+
+a:focus {
+    text-decoration: none;
+}
+
 h2, h3, h4, h5, h6 {
     &:target {
         background-color: rgba(yellow, 0.2);
@@ -487,6 +588,11 @@ section.invoice-details {
     }
 }
 
+pre {
+    border-radius: 0;
+    background: #f6f8fa;
+}
+
 .notification {
     padding: 14px;
     text-align: center;
@@ -759,6 +865,11 @@ table.team {
     }
 }
 
+.form-control {
+    height: 38px;
+    border-radius: 0;
+}
+
 .table td > form > input.form-control {
     height: 30px;
     margin: -7px 0;
@@ -779,6 +890,27 @@ p.event {
     margin-bottom: 5px;
 }
 
+a.btn, .btn {
+    border: 2px solid rgba(0, 0, 0, 0);
+    border-radius: 0;
+    transition: all .15s ease;
+    &:hover {
+        box-shadow: 0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
+    }
+}
+
+a.btn.btn-default, .btn.btn-default {
+    border: 2px solid #eee;
+    &:hover {
+        border: 2px solid #adadad;
+        box-shadow: none;
+    }
+}
+
+a.liberapay-btn {
+    border-bottom: 0;
+}
+
 .glyphicon + span {
     margin-left: 2px;
 }
@@ -933,9 +1065,18 @@ span.help-title {
 .s-logo {
     display: block;
     margin: 1.5em 0;
+    border-bottom: 0;
     & > img {
+        -webkit-filter: grayscale(1);
+        -webkit-filter: grayscale(100%);
+        filter: gray;
+        filter: grayscale(100%);
         max-width: 100%;
     }
+
+    &:hover {
+        border-bottom: 0;
+    }
 }
 
 @media (min-width: $screen-sm-min) {

style/base/cards.scss

@@ -2,13 +2,13 @@
 .card {
     border-radius: 0.5em;
     display: block;
-    margin-bottom: 0.5em;
-    padding: 0.5em;
+    margin-bottom: 1em;
+    padding: 2em;
     text-align: center;
     vertical-align: top;
 }
 .card-default {
-    border: 1px solid $panel-default-border;
+    border: 2px solid #eee;
 }
 .card-primary {
     border: 1px solid $panel-primary-border;

style/base/navbar.scss

@@ -8,8 +8,8 @@
 }
 
 .navbar-liberapay {
-    background: #f6c915;
     border: none;
+    border-bottom: 2px solid #eee;
     color: #222;
 
     .navbar-nav li {
@@ -18,8 +18,7 @@
             border: none;
             color: inherit;
             &:hover, &:active, &:focus {
-                background: #444;
-                color: #f9f9f9;
+                background: #eee;
                 img {
                     background: #f9f9f9;
                 }
@@ -51,7 +50,7 @@
             padding: $navbar-padding-vertical $navbar-padding-horizontal;
         }
         .dropdown-menu {
-            background-color: #f6c915;
+            background-color: #fff;
             border: none;
             border-radius: 0;
             position: absolute;
@@ -93,7 +92,7 @@
 }
 
 .navbar .avatar-cutter-28 {
-    border-radius: 2px;
+    border-radius: 50%;
     display: inline-block;
     margin: -8px 2px -8px 0;
 }
@@ -134,7 +133,7 @@
         }
     }
     .navbar-collapse > .navbar-nav {
-        background-color: #f6c915;
+        //background-color: #f6c915;
         color: #222;
         > li .dropdown-menu {
             position: static;

templates/base.html

@@ -107,7 +107,8 @@ <h1 class="{{ 'hidden-xs hidden-sm' if subhead }}">{{ title }}</h1>
         </div>
     </div>
 
-    <footer class="container" role="navigation">
+    <footer role="navigation">
+        <p>CC0 Liberapay</p>
         <ul>
             <li><a href="/about/">{{ _("About") }}</a></li>
             <li><a href="/about/contact">{{ _("Contact Us") }}</a></li>
@@ -121,6 +122,7 @@ <h1 class="{{ 'hidden-xs hidden-sm' if subhead }}">{{ title }}</h1>
             <li><a href="https://twitter.com/liberapay">Twitter</a></li>
             <li><a href="https://www.facebook.com/Liberapay-472128142945598/">Facebook</a></li>
         </ul>
+        <img class="footer-logo" src="https://upload.wikimedia.org/wikipedia/commons/2/27/Liberapay_logo_v2_white-on-yellow.svg">
     </footer>
 
 <script src="{{ website.asset('jquery.min.js') }}"></script>