landing page visual updates

cockroaches makeover new link to forum blog links makeover
SutraHsing · Jul 29, 2016 · 5dd9865 · 5dd9865
1 parent 7e5f9a2
commit 5dd9865
Show file tree

Hide file tree

Showing 5 changed files with 155 additions and 29 deletions.
diff --git a/css/customstyles.css b/css/customstyles.css
@@ -440,7 +440,8 @@ header {
     -moz-osx-font-smoothing: grayscale;
     line-height: 40px;
     color: #46a417;
-    margin-bottom: 5px; }
+    margin-bottom: 5px;
+    text-transform: initial; }
   .roach a img {
     height: 120px; }
   .roach p {
@@ -466,6 +467,55 @@ header {
         max-width: 270px;
         height: auto; } }
 
+.blog-post {
+  border: 1px solid #d9dbe2;
+  padding: 10px 20px;
+  border-bottom: none;
+  overflow: auto; }
+  .blog-post .blog-title {
+    font-family: 'AvenirLTStd-Book', serif;
+    font-size: 14px;
+    font-weight: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: 20px;
+    color: #142848;
+    margin-bottom: 5px; }
+  .blog-post .blog-meta {
+    font-family: 'AvenirLTStd-Oblique', serif;
+    font-size: 12px;
+    font-weight: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    line-height: 28px;
+    color: #959797; }
+    .blog-post .blog-meta .meta-emphasis {
+      color: #46a417; }
+  .blog-post.last-entry {
+    border-bottom: 1px solid #d9dbe2; }
+  .blog-post:hover {
+    background-color: #f7f7f7; }
+  @media screen and (min-width: 768px) {
+    .blog-post .blog-title {
+      float: left;
+      line-height: 28px; }
+    .blog-post .blog-meta {
+      float: right; } }
+
+.view-blog {
+  margin-top: 15px;
+  text-align: right; }
+  .view-blog a {
+    text-transform: uppercase;
+    font-family: 'AvenirLTStd-Black', serif;
+    font-size: 12px;
+    font-weight: normal;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    color: #959797; }
+    .view-blog a:hover {
+      border-bottom: none; }
+
 #content {
   background: #fff;
   position: relative;
@@ -1114,11 +1164,6 @@ hr {
   margin-left: auto;
   margin-right: auto; }
 
-.recent-articles {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto; }
-
 button.cursorNorm {
   cursor: pointer; }
 

diff --git a/css/customstyles.scss b/css/customstyles.scss
@@ -480,12 +480,6 @@ hr {
     margin-right: auto;
 }
 
-.recent-articles {
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
 button.cursorNorm {
     cursor: pointer;
 }

diff --git a/css/global/_variables.scss b/css/global/_variables.scss
@@ -2,6 +2,7 @@
 $cl_green: #46a417;
 $cl_blue: #142848;
 $cl_gray: #F7F7F7;
+$cl_gray_text: #959797;
 $cl_green_hover: #37880f;
 $cl_blue_hover: #0e2b48;
 $cl_light_green: #F0FFE8;

diff --git a/css/layouts/_landing-page.scss b/css/layouts/_landing-page.scss
@@ -11,6 +11,7 @@
     line-height: 40px;
     color: $cl_green;
     margin-bottom: 5px;
+    text-transform: initial;
   }
 
   a {
@@ -51,4 +52,61 @@
       }
     }
   }
+}
+
+.blog-post {
+  border: 1px solid $cl_border;
+  padding: 10px 20px;
+  border-bottom: none;
+  overflow: auto;
+
+  .blog-title {
+    @include avenir_bk(14px);
+    line-height: 20px;
+    color: $cl_blue;
+    margin-bottom: 5px;
+  }
+
+  .blog-meta {
+    @include avenir_o(12px);
+    line-height: 28px;
+    color: $cl_gray_text;
+
+    .meta-emphasis {
+      color: $cl_green;
+    }
+  }
+
+  &.last-entry {
+    border-bottom: 1px solid $cl_border;
+  }
+
+  &:hover {
+    background-color: $cl_gray;
+  }
+
+  @include at-query($min, $screen-sm){
+    .blog-title {
+      float: left;
+      line-height: 28px;
+    }
+    .blog-meta {
+      float: right;
+    }
+  }
+}
+
+.view-blog {
+  margin-top: 15px;
+  text-align: right;
+
+  a {
+    text-transform: uppercase;
+    @include avenir_bl(12px);
+    color: $cl_gray_text;
+
+    &:hover {
+      border-bottom: none;
+    }
+  }
 }
diff --git a/index.md b/index.md
@@ -55,23 +55,51 @@ The project is currently in **Beta**. For details about upcoming features, see t
         </a>
     </div>
 </div>
-<br>
-
----
-
-<br>
-<div class="recent-articles" markdown="1">
-
-## Recent Articles By CockroachDB Engineers
-<br>
-**[Modesty in Simplicity: CockroachDB's JOIN](https://www.cockroachlabs.com/blog/cockroachdbs-first-join/)**
-
-**[Consensus, Made Thrive](https://www.cockroachlabs.com/blog/consensus-made-thrive/)**
-
-**[Critters in a Jar: Running CockroachDB in a FreeBSD Jail](https://www.cockroachlabs.com/blog/critters-in-a-jar-running-cockroachdb-in-a-freebsd-jail/)**
 
-**[Time-Travel Queries: SELECT witty_subtitle FROM THE FUTURE](https://www.cockroachlabs.com/blog/time-travel-queries-select-witty_subtitle-the_future/)**
-
-**[Outsmarting Go Dependencies in Testing Code](https://www.cockroachlabs.com/blog/outsmarting-go-dependencies-testing-code/)**
+## Recent Blog Posts
 
+<div class="row">
+    <div class="col-xs-12">
+        <a href="https://www.cockroachlabs.com/blog/cockroachdbs-first-join/">
+        <div class="blog-post">
+            <div class="blog-title">Modesty in Simplicity: CockroachDB’s JOIN</div>
+            <div class="blog-meta">Written by <span class="meta-emphasis">Raphael ‘kena’ Poss</span> on <span class="meta-emphasis">July 20</span></div>
+        </div>
+        </a>  
+    </div>
+</div>
+<div class="row">
+    <div class="col-xs-12">
+        <a href="https://www.cockroachlabs.com/blog/consensus-made-thrive/">
+        <div class="blog-post">
+            <div class="blog-title">Consensus, Made Thrive</div>
+            <div class="blog-meta">Written by <span class="meta-emphasis">Tobias Schottdorf</span> on <span class="meta-emphasis">July 14</span></div>
+        </div>
+        </a>  
+    </div>
+</div>
+<div class="row">
+    <div class="col-xs-12">
+        <a href="https://www.cockroachlabs.com/blog/critters-in-a-jar-running-cockroachdb-in-a-freebsd-jail/">
+        <div class="blog-post">
+            <div class="blog-title">Critters in a Jar: Running CockroachDB in a FreeBSD Jail</div>
+            <div class="blog-meta">Written by <span class="meta-emphasis">Raphael ‘kena’ Poss</span> on <span class="meta-emphasis">July 7</span></div>
+        </div>
+        </a>  
+    </div>
+</div>
+<div class="row">
+    <div class="col-xs-12">
+        <a href="https://www.cockroachlabs.com/blog/time-travel-queries-select-witty_subtitle-the_future/">
+        <div class="blog-post last-entry">
+            <div class="blog-title">Time-Travel Queries: SELECT witty_subtitle FROM THE FUTURE</div>
+            <div class="blog-meta">Written by <span class="meta-emphasis">Matt Jibson</span> on <span class="meta-emphasis">June 22</span></div>
+        </div>
+        </a>  
+    </div>
+</div>
+<div class="row">
+    <div class="col-xs-12">
+        <div class="view-blog"><a href="https://www.cockroachlabs.com/blog">View All Posts</a></div>
+    </div>
 </div>