homepage title & buttons improvements

static/css/style.css

@@ -57,6 +57,31 @@ div#captcha > div {
 
 .flex-spacer { flex-grow: 1; }
 
+.button {
+    text-decoration: none;
+    text-transform: uppercase;
+
+    border-radius: 3px;
+    padding: 0.5em 1em;
+    border: 2px solid #1c619a;
+}
+.button.thin {
+    border-width: 1px;
+    padding: 0.20em 0.50em;
+    border-radius: 5px;
+    font-size: 0.85em;
+}
+
+.button, .button.inverted:hover {
+    color: #1c619a;
+    color: #005188;
+    background: transparent;
+}
+.button:hover, .button.inverted {
+    color: #fff;
+    background: #1c619a;
+}
+
 /***************************************************/
 /********************* Header                      */
 
@@ -146,19 +171,6 @@ header .user-menu {
 header .user-menu li {
     margin-left: 0.75em;
 }
-header .user-menu li a {
-    color: #1c619a;
-    border: 1px solid #1c619a;
-    border-radius: 5px;
-    padding: 0.20em 0.50em;
-    text-decoration: none;
-    text-transform: uppercase;
-    font-size: 0.85em;
-}
-header .user-menu li a:hover {
-    background: #1c619a;
-    color: #fff;
-}
 
 header .site-menu{
     font-size: 1.2em;
@@ -609,26 +621,17 @@ ul.errorlist {
 /***************************************************/
 /********************* Home Page                   */
 
-.home-signup {
-    text-align: center;
-}
-a.home-signup-button {
-    padding: 0.75em 2em;
-}
-
-@media screen and (max-width: 48em) {
-    .home-signup-button {
-        min-width: 50%;
-    }
-}
-
-
 .homepage h2 {
-    font-weight: 400;
     text-align: center;
-    font-family: 'Arvo', serif;
+    font-family: 'Open Sans', sans-serif;
-    font-size: 1.6em;
+    font-size: 2.3em;
-    margin: 3em;
+    font-weight: bold;
+    margin: 3em 0.5em;
+
+    -webkit-text-fill-color: #D99C7E;
+    -webkit-text-stroke-width: 1px;
+    -webkit-text-stroke-color: #1c619a;
+    letter-spacing: 0.045em;
 }
 
 .homepage .title {
@@ -647,7 +650,7 @@ a.home-signup-button {
 }
 
 .homepage .features {
-    margin: 2em 0;
+    margin: 2.25em 0;
 }
 
 .homepage .right h3 {
@@ -668,17 +671,12 @@ a.home-signup-button {
     margin: 0.75em;
 }
 
-.homepage .home-signup {
-    margin: 3em 1em;
-}
-
 .homepage .locations {
     width: 70%;
     margin: 4em auto;
 }
 .homepage .more {
     text-align: right;
-    font-size: 0.9em;
 }
 .homepage .map {
     display: block;
@@ -713,6 +711,25 @@ a.home-signup-button {
 }
 
 
+.homepage .home-signup {
+    text-align: center;
+    margin: 4em 1em;
+}
+a.home-signup-button {
+    padding: 1em 2em;
+    text-transform: none;
+    font-size: 1.1em;
+    font-weight: 600;
+}
+
+@media screen and (max-width: 48em) {
+    .home-signup-button {
+        min-width: 50%;
+    }
+}
+
+
+
 
 
 /***************************************************/

templates/ccvpn/index.html

@@ -56,7 +56,7 @@
     </div>
 
     <p class="home-signup">
-        <a href="/account/signup" class="home-signup-button pure-button pure-button-primary">
+        <a href="/account/signup" class="home-signup-button button inverted">
             {% trans 'Sign up & try for a week for free' %}
         </a>
     </p>

templates/layout.html

@@ -33,8 +33,8 @@
                             <li><a class="create" href="/account/">{% trans 'Your account' %}</a></li>
                             <li><a class="create" href="/account/logout">{% trans 'Logout' %}</a></li>
                         {% else %}
-                            <li><a href="/account/signup" class="create">{% trans 'Sign up' %}</a></li>
+                            <li><a href="/account/signup" class="button thin">{% trans 'Sign up' %}</a></li>
-                            <li><a href="/account/login" class="create">{% trans 'Log in' %}</a></li>
+                            <li><a href="/account/login" class="button thin">{% trans 'Log in' %}</a></li>
                         {% endif %}
                     </ul>
                 </div>