Content updates

_includes/head.html

@@ -7,7 +7,7 @@
 <title>{{ page.title }}</title>
 
 <link rel="shortcut icon" href="{{ site.baseurl }}/assets/img/logo/chilicorn_no_text-64.png">
-<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700" type="text/css" />
+<link href="https://fonts.googleapis.com/css?family=Space+Mono:400,700" rel="stylesheet">
 
 <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/css.css" />
 

assets/css/css.scss

@@ -4,7 +4,7 @@
 
 $susy: (
   columns: 12,
-  gutters: 1/3,
+  gutters: 1,
   math: fluid,
   output: float,
   gutter-position: inside,
@@ -22,16 +22,23 @@ $mobile: 500px;
 
 /* General measures */
 $h-padding: 30px;
+$section-padding: 60px;
 
 /* Typographic scale. Only use these font-sizes */
 $size-tiny: 12px;
 $size-small: 14px;
 $size-base: 16px;
 $size-medium: 22px;
-$size-large: 22px;
-$size-xlarge: 30px;
+$size-large: 30px;
 $size-huge: 58px;
 
+
+/* Colours */
+$body: #4A515E;
+$headlines: #303031;
+$blue: #0B52D6;
+
+/* Resets */
 * {
   margin: 0;
   padding: 0;
@@ -41,20 +48,22 @@ img {
   max-width: 100%;
 }
 
+/* Main styles */
 h1 {
   text-align: center;
   font-size: $size-huge;
-  font-weight: 500;
-  padding-bottom: $h-padding;
+  font-weight: 700;
+  padding-bottom: 10px;
+  font-family: "Space mono";
 }
 
 h2 {
-  font-size: $size-xlarge;
+  font-size: $size-large;
   font-weight: 500;
 }
 
 h3 {
-  font-size: $size-large;
+  font-size: $size-medium;
   padding-bottom: 10px;
   font-weight: 500;
 }
@@ -65,8 +74,10 @@ h4 {
 
 h1, h2, h3, h4 {
   line-height: 1.2;
+  color: $headlines;
 }
 
+
 a {
   color: #333;
 }
@@ -77,66 +88,107 @@ ul {
 
 li {
   margin-left: 20px;
-  padding-bottom: 10px;
+  padding-bottom: 10px; 
+}
+
+a, a:visited, a:hover {
+  text-decoration: none;
+  border-bottom: 1px solid;
 }
 
 html, body {
-    font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;;
-    font-size: $size-base;
-    text-rendering: optimizeLegibility;
-    line-height: 1.4;
-    //-webkit-font-smoothing: antialiased;
-  color: #333;
+  font-family: -apple-system, BlinkMacSystemFont, "Roboto", "Droid Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;;
+  font-size: $size-base;
+  text-rendering: optimizeLegibility;
+  line-height: 1.4;
+  -webkit-font-smoothing: antialiased;
+  color: $body;
 }
 
 
 .hero {
-  background-color: #444;
+  background: #4164FF;
   color: #fff;
   text-align: center;
   padding: 120px 0;
+  margin-bottom: 40px;
 
   p {
-    font-size: $size-xlarge;
+    font-size: $size-medium;
     font-weight: 300;
     max-width: 600px;
     margin: auto;
     opacity: 0.7;
+    font-family: "space mono";
   }
 
   a, a:visited {
     color: #fff;
   }
 
+  h1 {
+    color: #fff;
+  }
+}
+
+p + ul {
+  padding-top: 10px;
 }
 
 section {
-  padding: 50px 0;
+  padding: $section-padding 0;
 }
 
 footer {
   padding: 40px 0;
   font-size: $size-small;
 }
 
+.btn {
+  background-color: #333;
+  padding: 10px 20px;
+  margin: 10px 0;
+  border-bottom: none;
+  display: inline-block;
+  color: #fff;
+}
+
+.btn:hover {
+  border-bottom: none;
+  background-color: #333;
+}
+
 .section-header {
   text-align: center;
   padding-bottom: 50px;
   max-width: 500px;
   margin: auto;
 
   img {
-    padding-bottom: 10px;
+    padding-bottom: 15px;
   }
 }
 
 .learn-more {
   background: url('../img/bg-learn-more.jpeg');
+  background-size: cover;
   color: white;
+
+  h3 {
+    padding-bottom: 50px;
+  }
+
+  p, h2, h3 {
+    color: #fff;
+  }
 }
 
 .track-block, .how, .contribute, .aim, .quote {
   padding-bottom: $h-padding;
+
+  @media screen and (min-width: $mobile) {
+    padding-bottom: 0;
+  }
 }
 
 .track-block {
@@ -152,16 +204,41 @@ footer {
 }
 
 .track-block-txt {
-  padding: 0 30px;
-  margin-top: -50px;
+  position: relative;
+  margin: 0 30px;
+  padding: 15px 20px 0px 20px;
+  top: -50px;
   background-color: #fff;
 }
 
+.track-cta {
+  text-align: center;
+}
+
+.track-img {
+  height: 300px;
+  background: url('../img/track-education.jpg');
+  background-size: cover;
+}
+
 .how {
-  @include span(6);
+  @include span(full);
 
-  @media screen and (max-width: $mobile) {
-    @include span(full);
+  @media screen and (min-width: $mobile) {
+    @include span(5);
+
+  }
+}
+
+.how-left {
+  @media screen and (min-width: $mobile) {
+    @include pre(1);
+  }
+}
+
+.how-right {
+  @media screen and (min-width: $mobile) {
+    @include post(1);
   }
 }
 
@@ -177,7 +254,7 @@ footer {
 
 .aim {
   @include span(4);
-  text-align: center;
+  //text-align: center;
 
   @media screen and (max-width: $mobile) {
     @include span(full);
@@ -188,20 +265,26 @@ footer {
   @include span(6);
 
   p {
-    font-size: $size-large;
+    font-size: $size-medium;
     text-align: center;
     margin: auto;
     max-width: 400px;
+    padding-bottom: 21px;
   }
 
   img {
     max-width: 75px;
     margin: auto;
     display: block;
+    float: left;
   }
 
   @media screen and (max-width: $mobile) {
     @include span(full);
   }
 }
 
+#comments {
+  padding-bottom: 2*$section-padding;
+}
+