more content, improved typography (#150)

Author: narimiran

jekyll/_includes/header.html

@@ -1,7 +1,4 @@
 <header>
-  <a href="https://github.com/nim-lang/nim" class="ribbon">
-    <img style="position: absolute; top: 0; right: 0; border: 0;" height="150" src="{{ site.baseurl }}/assets/img/forkme.svg" alt="Fork me on GitHub">
-  </a>
   <nav class="pure-menu pure-menu-horizontal pure-menu-scrollable">
     <div class="nav-content">
       <a href="{{ site.baseurl }}/" class="pure-menu-heading pure-menu-link site-logo-container">

jekyll/_sass/_variables.scss

@@ -5,8 +5,8 @@ $footer-background-color: darken($dark-color, 5%);
 $footer-color: #888;
 $default-background-color: #fdfdfd;
 $default-color: #333;
-$desktop-default-font-size: 17px;
-$mobile-default-font-size: 15px;
+$desktop-default-font-size: 18px;
+$mobile-default-font-size: 16px;
 $menu-background-color: darken($dark-color, 5%);
 $menu-color: #fff;
 $menu-separator-color: #888;
@@ -19,7 +19,7 @@ $menu-fade-width: 80px;
 $hr-color: #cfcfcf;
 
 
-$index-code-bg: #282a36;
+$index-code-bg: #2b2e3b;
 $jumbotron-background-color: #232733;
-$main-jumbotron-background-color: darken($dark-color, 5%);
-$faded-background-color: darken($default-background-color, 8%);
+$main-jumbotron-background-color: darken($dark-color, 2%);
+$faded-background-color: darken($default-background-color, 8%);

jekyll/assets/css/main.scss

@@ -42,6 +42,7 @@ h1, h2, h3, h4, h5, h6 {
 
 h1 {
   margin-top: 50px;
+  font-size: 225%;
 }
 
 h2 {
@@ -64,6 +65,7 @@ a {
 figure.highlight {
   code {
     font-family: "Inconsolata", monospace;
+    font-size: 0.8em;
   }
 
   pre {
@@ -81,8 +83,8 @@ figure.highlight {
 
 .jumbotron {
   figure.highlight {
-    padding: 25px;
-    margin-top: 4em;
+    padding: 5px;
+    margin-top: 1.5em;
     background-color: $index-code-bg;
   }
 }
@@ -182,8 +184,9 @@ footer {
 }
 
 .news-item {
-  padding: 20px;
+  padding: 15pt 25pt;
   text-align: justify;
+  margin-bottom: 25pt;
 
   p {
     margin: 0;
@@ -197,11 +200,11 @@ footer {
 }
 
 .slim {
-  max-width: 800px;
+  max-width: 1000px;
 }
 
 .site-content > .content {
-  margin-bottom: 100px;
+  margin-bottom: 50px;
 }
 
 // Fix footer to stick to the bottom using flexbox.
@@ -256,19 +259,25 @@ a.pure-menu-link.pure-menu-heading {
   color: $jumbotron-color;
 
   h1 {
-    font-size: 250%;
+    font-size: 225%;
     margin-bottom: 0;
     margin-top: 16px;
     color: $highlight-color;
   }
 
   h2 {
-    margin-top: 16px;
     font-size: 150%;
   }
 
+  h3 {
+    font-size: 133%;
+    margin-top: 2em;
+  }
+
   li {
     list-style-type: none;
+    line-height: 1.5;
+    margin-bottom: 0.6em;
 
     &::before {
       content: "» ";
@@ -317,7 +326,7 @@ a.pure-menu-link.pure-menu-heading {
 
 // The left part of the main page jumbotron
 .main-block {
-  padding-right: 30px;
+  padding-right: 25pt;
 }
 
 .hljs {
@@ -361,7 +370,7 @@ h1.post-title {
 
 .main-heading {
   text-align: center;
-  font-size: 250%;
+  font-size: 225%;
   margin-top: 0;
 }
 
@@ -650,7 +659,7 @@ section#donations {
 .feature-projects {
   .pure-u-1-3, .pure-u-md-1-3 {
     align-self: flex-start;
-  }  
+  }
 }
 
 .project-container {
@@ -669,12 +678,10 @@ section#donations {
 
 .project-container, .sponsor-container {
   display: inline-block;
-  margin-right: 15pt;
-  margin-top: 15pt;
-  margin-bottom: 15pt;
+  margin: 15pt 25pt;
+  text-align: justify;
 
   a {
-    
     &:hover, &:focus {
       .title {
         text-decoration: underline;
@@ -722,15 +729,11 @@ section#donations {
 
 // Styles for the donate section.
 
-.green.tag {
-  background-color: #03ab1e;
-  font-size: 60%;
-}
 
 .sponsor-container {
   width: 160pt;
   font-size: 90%;
-  margin-right: 20pt;
+  text-align: center;
 
   img {
     width: 150px;
@@ -778,7 +781,6 @@ div.code-align {
 }
 
 .call-to-action {
-  font-size: 125%;
   padding: 20px 0 60px 0;
 }
 
@@ -947,7 +949,7 @@ blockquote {
 }
 
 // Styles that apply only to medium-sized screens (small laptops for example)
-@media (max-width: 1370px) {
+@media (max-width: 1280px) {
   body {
     font-size: $mobile-default-font-size;
     //margin-top: $menu-height * $mobile-default-font-size / $desktop-default-font-size;

jekyll/donate.md

@@ -12,7 +12,7 @@ css_class: donate
 
 <section class="background-faded call-to-action">
   <section class="content text-centered">
-    <h2>BountySource</h2>
+    <h1>BountySource</h1>
     <div class="pure-g center">
       <div class="pure-u-1-2">
         <p>
@@ -73,4 +73,4 @@ services.
 <i class="fab fa-btc" aria-hidden="true"></i>
 ``1BXfuKM2uvoD6mbx4g5xM3eQhLzkCK77tJ``
 
-</section>
+</section>