Website Redesign: The Homepage

I’m making swift and steady progress on the redesign of this site.

I’ve already spent time getting my Sass files and styles in place. I even have defined a set of color variables that I can use throughout the CSS. However, I’m relying a lot less on Sass variables in favor of CSS custom properties. I still think Sass variables are powerful, useful, and sometimes necessary in some cases, but I want to lean into more of CSS’s built-in features.

You might be asking why I’m using Sass at all if I’m not taking advantage of variables. That’s a valid question since variables are perhaps one of the most-used Sass features. I’m still using Sass for two reasons, one for the ability to split styles up into partial files and another for nesting. When I say “nesting” I don’t really mean mean nesting selectors within selectors because I find the code more difficult to read that way. Instead, I use nesting for things like media queries. that lets me manage responsive and other conditional-based styling alongside a selector’s core ruleset.

The general layout

I’m starting with the homepage. It might be the most important part of my updated site because it will now serve as my “about” page. I have come to find that having a separate “about” page on a personal site to be a little awkward because, well, a personal site is about you personally. The main content should be focused on who you are and what you’re doing.

The first thing I did was create the layout grid. I am indeed using CSS Grid. I’ve enjoyed it on other projects and it cuts out the need to either make my own grid system or turn to a CSS framework.

My grid is pretty simple. In fact, I’m putting it directly on the body element and not even setting it until it reaches a medium-sized breakpoint.

body {
  @include center-block;
  max-width: 1440px;
  padding: 2em;

  @media #{$lake} {
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-template-areas: 
      "navigation main"
      "footer footer";
    grid-gap: 75px;
  }
}

That grid-template-areas property might be my favorite thing about CSS Grid because it lets you simply place items on the grid by typing the named areas in the order they go. In this case, I have two columns and two rows. The navigation and main content make up the first row, where the main content takes up 75% of the horizontal space and the navigation takes 25%. The footer sits at the bottom and occupies both columns, letting it span the full width of the grid.

What’s up with that funny media query? I name my breakpoints after bodies of water. I find that makes them more, ahem, fluid for defining ranges instead of naming them after specific devices. This is what’s in my media queries partial:

$puddle: "only screen and (min-width: 320px)" !default;
$pool: "only screen and (min-width: 600px)" !default;
$pond: "only screen and (min-width: 800px)" !default;
$lake: "only screen and (min-width: 1000px)" !default;
$bay: "only screen and (min-width: 1200px)" !default;
$ocean: "only screen and (min-width: 1400px)" !default;

Naming is hard and what works for one person may not work for someone else. This is my personal project, so I get to call these whatever I want and water makes perfect sense to me.

The homepage

Tackling the layout was a significant accomplishment and freed me up to start thinking about the homepage. Again, here’s a rough mockup of what I’m aiming for:

The navigation is going to be a global element that’s used on every page, so that gets to be it’s own WordPress template. I’m not sure if it’s conventional or a good idea, but I consider this area to be the “header” of my site, even if it sits on the side like a traditional sidebar. I mean, the site title (my name) could be the header alone, but I put it and the navigation together in the header.php file, which is what WordPress uses to generate the document head.

The navigation is broken up into two groups. I’m not sure that will be the final list of links, but I’m treating them as two separate navigations as far as WordPress is concerned. The top is the “primary” navigation and the bottom is the “social” navigation.

That goes into my template like this:

You may have noticed that I’m making calls to template parts instead of writing the all the code directly in the template file. Managing content into smaller chunks has become a common practice since the last time I built this site and I’m trying to use it now. This lets me keep content separated and focused on specific bits of content exactly like I’m already doing with Sass partials. It’s also makes things more modular in the sense that it becomes easier to drop these template parts into other templates while managing one file for any updates or changes down the road.

Here’s the main navigation’s contents:

My favorite thing about this layout is the two-column content in the page body. I’m using CSS Columns which I actually used in the existing design of this to create a list of post tags.

The syntax for CSS Columns is so lovely. Here’s how I’m splitting up the content on the new homepage.

.home__body p {

  @media #{$pond} {
    column-count: 2;
    column-fill: balance;
    column-gap: 1em;
  }
}

Not too shabby, right? Again, I’m not even setting it until it reaches a larger screen size. That means it will be single-column on smaller screens which should be a lot easier to read.

The last hurdle on the homepage is the work places at the bottom. It’s a single row of four items which makes it a prime Flexbox candidate.

.work-places__items {
  display: flex;
  justify-content: space-evenly;
}

.work-places__item {
  @include box-shadow--alt();
  flex: 1;
  margin-right: 1em;
  padding: 1em;

  &:last-child {
    margin-right: 0;
  }

  article {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;

    svg {
      margin-bottom: 1em;
      height: 100px;
      width: 100px;
    }
  }
}

Yeah, I’m nesting in there a little more than I’d like, but am keeping it to three levels. Anything beyond that probably means the code is too complex and can be written better.

The .work-places-items element is the parent container. Each item flexes in equal proportion along the horizontal axis and is spaced evenly. Even the items are flex elements that lay their contents (which consists of an image and a label) into a vertical column.

I left that box-shadow--alt mixin in there because that’s something different from the mockup. I decided that each of these is really more of a button, so I styled them using a box-shadow that makes them raise off the page a little which is something I got from this article by Michael Malewicz.

@mixin box-shadow--alt {
  border: 1px solid rgba(255, 255, 255, 0.30);
  border-radius: 15px;
  box-shadow: 
    -6px -6px 26px 0 rgba(255, 255, 255, 1),
    6px 6px 16px 0 rgba(217, 210, 200, 0.75);
}

Lovely.

Next up…

Now that I’ve got the header and homepage in a pretty good spot, I’ll probably move on to the blog archive. I have a rough design for that as well and will share it and how I approach it in the next installment.