Building the Blog: Day 4

Today doesn’t involve much work, but the blog will really stand out because of today’s additions.

$white: #fff;
$primary: lavender;

nav {
  background-color: $white;
  border: 1px solid $primary;
  box-shadow: 5px 5px 0px $primary;
}

a {
  color: $primary;
}

We’ll add more color variables and start styling the navigation section by setting the background color to white. We’ll then set a colored border and a box shadow around it to the right and down. This makes a neat effect - the navigation section appears to have depth! We’ll also style the links in the navigation as well as the previous and next arrows to the same color as the border & box shadow.

main {
  border: 1px solid $primary;
  box-shadow: 10px 10px 0px $primary;
}

And then we’ll add the effect to the main section - the posts list and individual posts. Now the blog really has some personality!

But we’re still not done! I’ve got a special surprise for you in Saturday’s post.