Redesign: Page Layout

Now it's time to throw away my temporary CSS and start to work on my own. This post will focus on the overall page layout. Mainly having the entire page corresponding to a general width, and the aside area in a column to the right of the main content.

To do this, I did need to make one change to the HTML structure of the page to accommodate the index page, which lists multiple posts.

<!-- former layout -->
  <main>
    -- main content --
    <aside>
      -- sidebar content --
    </aside>
  </main>

<!-- updated layout -->
  <main>
    <section>
      -- main content --
    </section>
    <aside>
      -- sidebar content --
    </aside>
  </main>

While the former layout worked fine with a single article, the aside area it wouldn't play nicely. The updated layout makes a bit more sense as you can clearly see that the section area is one column, and the aside is another.

The skip to main content link

I'm blatantly stealing some code from Garett Dimon's site for this. Even copying his comments with a brief change because he included his within his HTML for reasons explained in the comments.

/*
 This is the position-related CSS for the "Skip to Content" links. It can be included directly in
 the HTML document to ensure that the link isn't rendered within the viewable area and then
 abruptly and obtrusively moved off-screen after the CSS loads.
*/
a[href="#main-content"] {
  display: inline-block;
  position: absolute;
  transform: translateY(-300%);
  transition: transform 0.3s;
}

/*
 This CSS brings the "Skip to Content" link into the viewable area when it's focused. That
 way, if someone tabs into the site to navigate via keyboard, they'll see the link and can
 interact with it like any other control on the page.
*/
a[href="#main-content"]:focus { transform: translateY(0%); }

Setting up initial variables

Modern CSS finally has the ability for you to setup root level variables that you can reference in other parts of your CSS. I'm just setting up for a light theme right now, but since I do plan to add a dark color scheme, I'm just putting stuff for that in place now so I don't have to go digging for it later.

:root {
  /* https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme */
  color-scheme: light dark;
  --background-color: #f8f8f8;
  --text-color: #333;
  --link-color: #005ec6;
}
/*
@media (prefers-color-scheme: dark) {
  :root {
      --background-color: #??;
      --text-color: #ccc;
      --link-color: #005ec6;
  }
}
*/

Primary Block Layout

The three main areas of the page are the header, the main-content, and the footer. Here's the CSS that set's all this up.

body {
  background-color: var(--background-color);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  max-width: 89em;
}
/*
 This and the max-width above keep the width of the
 main content areas from getting too wide. The margin
 here centers everything once the max-width is reached.
*/
@media screen and (min-width: 90em) {
  body {
    margin: 0 auto;
  }
}

body > header, #main-content, body > footer {
  padding: 0 5vw 0 5vw;
}

/*
 I'll pay more attention to the header in a future post.
 for now, this grid just spreads it out evenly at the top.
*/
header nav ul {
  align-items: center;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}

footer {
  text-align: center;
}

The main content and aside areas

I found some magic that puts the aside area on the right of the page, but nicely flows it to the bottom on smaller screens.

The css keeps the main content section to a column taking 70% of the space. The aside taking 25% leaving a 5% space between the two.

The width calculation is the magic I was referring to. A negative width isn't understood, so it's defaulting to the min-width setting of 70% since it can't get lower than that. When the content is wider than 48em, width is set wide enough that the max-width setting of 100% kicks into gear.

#main-content {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
}

#main-content > section {
  max-width: 100%;
  min-width: 70%;
  width: calc((48em - 100%) * 1000);
}

#main-content > aside {
  max-width: 100%;
  min-width: 25%;
  width: calc((48em - 100%) * 1000);
}

Basic content styling

To round things out for now, I'm just using the color and styling I want for my links (at least for the light theme) and put a max-width for my article images so wide images don't break outside the area and throw off my layout!

a {
  color: var(--link-color);
  text-decoration: none;
}
a:hover {
  border-bottom: dotted 1px var(--link-color);
}

article img { 
  max-width: 100%;
}

That's it for this time. I'm not sure right now if I'll focus on the header area, or do something more with the colors or something for next time. Stay tuned.