Add post link styles.

index.php

@@ -17,8 +17,10 @@
   ?>
 </div>
 
-<div id="beta"></div>
+<div id="beta">
+  <?php get_sidebar(); ?>
+</div>
 
 <?php
   get_footer();
-?>
+?>

sidebar.php

@@ -0,0 +1,28 @@
+<section id="recent">
+  <h1>ac.recent</h1>
+  <ul>
+    <?php
+      $args = array( 'numberposts' => '5', 'post_status' => 'publish' );
+      $posts= wp_get_recent_posts($args);
+      foreach ($posts as $post):
+    ?>
+    <li>
+      <a class="post" href="<?php echo get_permalink($post["ID"]); ?>" title="<?php echo $post["post_title"]; ?>">
+        <div class="sidebar-post-title"><?php echo $post["post_title"]; ?></div>
+        <div class="sidebar-post-metadata">
+          <?php echo date('M j', strtotime($post["post_date"])); ?>
+          <?php
+            $categories = array();
+            foreach (array_slice(get_the_category($post["ID"]), 0, 2) as $cat) {
+              $categories[] = $cat->cat_name;
+            }
+            $category_str = join(', ', $categories);
+          ?>
+          <span class="sidebar-post-categories"><?php echo $category_str; ?></span>
+        </div>
+      </a>
+    </li>
+    <?php endforeach; ?>
+  </ul>
+</section>
+

style.css

@@ -304,14 +304,7 @@ header#site-header {
 
 #beta {
   width: 240px;
-  float: right;
-  font-family: "Century Gothic", Verdana, Helvetica, Arial, sans-serif; }
-  #beta li {
-    text-align: right;
-    padding-right: 10px;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    line-height: 20px; }
+  float: right; }
 
 footer {
   width: 960px;
@@ -566,3 +559,39 @@ footer {
   font-size: 11px; }
   footer #copyright {
     text-align: center; }
+
+#beta {
+  margin-top: 40px;
+  font-family: museo-sans, "Helvetica Neue", Helvetica, Verdana, Arial, sans-serif; }
+  #beta h1 {
+    font-size: 22px;
+    font-weight: normal;
+    font-family: "Raleway", sans-serif;
+    color: #699a88;
+    margin-bottom: 10px; }
+  #beta ul {
+    list-style: none; }
+  #beta li {
+    padding: 5px 0;
+    line-height: 18px; }
+
+#recent li {
+  margin-bottom: 5px;
+  overflow: hidden; }
+#recent .post:hover {
+  color: #96b0c9; }
+  #recent .post:hover .sidebar-post-title {
+    -webkit-box-shadow: 0px 2px 3px rgba(150, 176, 201, 0.5);
+    -moz-box-shadow: 0px 2px 3px rgba(150, 176, 201, 0.5);
+    box-shadow: 0px 2px 3px rgba(150, 176, 201, 0.5); }
+#recent .post .sidebar-post-title {
+  font-family: "Century Gothic", Verdana, Helvetica, Arial, sans-serif;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+  padding-bottom: 3px; }
+#recent .post .sidebar-post-metadata {
+  font-size: 12px;
+  padding-top: 3px;
+  color: #859fb8; }
+#recent .post .sidebar-post-categories {
+  color: #aaa;
+  float: right; }

style.scss

@@ -13,4 +13,5 @@ This is an ac theme, 3.0.
 @import "styles/header";
 @import "styles/content";
 @import "styles/post";
-@import "styles/footer";
+@import "styles/footer";
+@import "styles/sidebar";

styles/_base.scss

@@ -20,10 +20,10 @@ a, a:active, a:visited {
   color: $color-link;
   text-decoration: none;
   &:hover {
-    color: $color-link + #224;
+    color: $color-sec - #111;
   }
 }
 
 ul {
   margin-left: 0;
-}
+}

styles/_config.scss

@@ -7,6 +7,7 @@ $color-prim-light: #A1AFBD;
 $color-sec: #C0AD6B;
 $color-sec-light: #BFB494;
 $color-ter: #ADDECC;
+$color-ter-dark: $color-ter - #444;
 $color-link: #748EA7;
 
 $font-raleway: "Raleway", sans-serif;

styles/_layout.scss

@@ -28,14 +28,6 @@ header#site-header {
 #beta {
   width: 960px - 680px - 40px;
   float: right;
-  font-family: $font-gothic;
-  li {
-    text-align: right;
-    padding-right: 10px;
-    padding-top: 5px;
-    padding-bottom: 5px;
-    line-height: 20px;
-  }
 }
 
 footer {

styles/_sidebar.scss

@@ -0,0 +1,56 @@
+// Sidebar styles.
+
+@import "config";
+@import "mixins";
+
+#beta {
+  margin-top: 40px;
+  font-family: $font-default;
+
+  h1 {
+    font-size: 22px;
+    font-weight: normal;
+    font-family: $font-raleway;
+    color: $color-ter-dark;
+    margin-bottom: 10px;
+  }
+
+  ul {
+    list-style: none;
+  }
+
+  li {
+    padding: 5px 0;
+    line-height: 18px;
+  }
+}
+
+#recent {
+  li {
+    margin-bottom: 5px;
+    overflow: hidden;
+  }
+
+  .post {
+    &:hover {
+      color: $color-link + #222;
+      .sidebar-post-title {
+        @include box-shadow(0px 2px 3px rgba(150, 176, 201, 0.5));
+      }
+    }
+    .sidebar-post-title {
+      font-family: $font-gothic;
+      border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+      padding-bottom: 3px;
+    }
+    .sidebar-post-metadata {
+      font-size: 12px;
+      padding-top: 3px;
+      color: $color-link + #111;
+    }
+    .sidebar-post-categories {
+      color: #aaa;
+      float: right;
+    }
+  }
+}