A Year of Showing My Work: Day 2

I have been trying for the last few months to re-do my writing website. I have three websites—one is my personal programming portfolio, one is The Edge of Uncertainty, a blog about adventure books, and one is my personal writing portfolio—and my writing one is the only one I haven’t redesigned since I learned to code. Up until a couple of months ago, it was a Wordpress site, but now if you go to katybowman.com, there’s nothing there.

I need to change that.

The work has not been going quickly, though, and I’m hoping that starting this project will push me to spend more time on the site and get it done.

So far, I have designed and coded the mobile version of the home page and it’s working out all right, but it could be better.

For tonight, I’m looking at the navigation menu at the top. For reference, here’s the HTML:

<div class=”menu”>
    <ul class=”nav”>
         <li><a class=”left” href=”katybowman.com”>Home</a></li>
         <li><a class=”middle” href=”/work”>My Work</a></li>
         <li><a class=”left” href=”/mystory”>My Story</a></li>
         <li><a href=”/blog”>My Blog</a></li>
     </ul>
 </div>

When I first coded it, I used margins and floats to make it work, like this:

ul {
    width: 300px;
    list-style: none;
    overflow: hidden;
    margin: -90px auto 0 auto;
    padding: 0;
    text-align: center;
}

li a {
    width: 100px;
    float: left;
    margin-top: 20px;
}

.left {
    margin-right: 100px;
}

But I kept thinking about it and I realized I could probably make it work even better if I used Flexbox. Plus, using Flexbox might make it easier as I make the site look better on larger screens.

It took a bit of playing, but Flexbox did turn out to be a much better implementation. I used columns, I was able to do away with the width, margin, and float on the list items, and I got rid of that “left” class. Here’s what my CSS looks like now:

ul {
    display: flex;
    flex-flow: column wrap;
    width: 90%;
    height: 75px;
    margin: -75px auto 0 auto;
    align-content: space-between;
    justify-content: space-between;
}

And the site itself looks nicer as well: