Building the Blog: Day 2

main {
  max-width: 80%;
  margin: 0 auto;
  padding: 25px;
}

Let’s start off today styling the main page content. This will impact both the list of posts and individual posts. We further restrict the size of the main content to be easier to read and set some margin and padding which will set us up nicely for the future 😉.

.title {
  text-align: center;
}

Then we’ll center the blog title.

nav {
  padding: 10px;
  position: absolute;
  right: 50px;
  top: 50px;

  a {
    margin: 0 10px;
  }
}

And we’ll move the navigation up to the top right corner of the page. We give the links inside some space to breathe.

Now onto the post page.

.post {
  line-height: 1.25em;
  position: relative;

  h1:first-of-type {
    text-align: center;
  }

  time:first-of-type {
    position: absolute;
    top: 15px;
    right: 15px;
  }

  img {
    display: block;
    margin: 0 auto;
  }
}

We’ll add some line-height to each post’s text. This will make it easier to read - the text won’t feel so scrunched together. I’ve found you can never go wrong with line height. Just a little bit of line height can make any text a bit friendlier and cleaner.

We’ll also center the post title and move the post date to the top right corner of the post. This requires us to set the post to position: relative first, otherwise the date would be positioned at the top right of the browser window! We use first-of-type on each of these selectors in order to target just the post title and date. We don’t necessary want to apply these styles to every h1 and time element. We could use some nth-child selectors instead, but would add brittleness to our styles. What if we wanted to add an image to the top of the post before the title and date? That would break the nth-child selectors. Therefore, we use first-of-type to safeguard for future change.

And finally we’ll center any images in posts. You can’t see this being applied yet, but trust me it works!

.next, .previous {
  display: block;
  font-size: 5em;
  position: fixed;
  text-decoration: none;
  top: 50%;

  @media screen and (max-width : 768px) {
    display: none;
  }
}

.next {
  right: 25px;
}

.previous {
  left: 25px;
}

If you’re observant, you’ll have noticed that there are arrows on posts which link to previous and next posts. Right now they’re at the bottom and not very user-friendly. We’ll make them really big, remove the underline underneath them, and move them to the left and right sides of the screen. We use position: fixed so that they’ll stay in place as you scroll through the post. And using a media query, we’ll hide them on smaller screens.

Whew! That was a lot. Great job for reaching the end. Things are laid out pretty nicely. Tomorrow we’ll spice things up with fonts.