Styling suggestion

[musflood]

Try making the green bar at the top go all the way to the edges and/or have an image for the background.

@media screen and (min-width: 600px){

  body {
    max-width: 960px;
  }
...

instead of setting body, try setting main

[musflood]

Maybe also try adding some transition animations so stuff doesn't jump around as much. For example, using slideUp/Down instead of hide and show:

viewArticles.shortenText = function () {
  $('.article-body *:nth-of-type(n+2)').hide();
  $('#articles').on('click', '.read-more', function(event){
    event.preventDefault();
    if($(this).html() === 'Read more →') {
      $(this).prev().children().show(); // here: slideDown
      $(this).html('Read less ←');
      $(this).blur();
    } else if ($(this).html() === 'Read less ←') {
      $('.article-body *:nth-of-type(n+2)').hide(); // here slideUp
      $(this).html('Read more →');
      $(this).blur();
    }
  });
};

[portermichael]

Thanks for demonstrating slidedown and slideup!