A Year of Showing My Work: Day 3

I’m working on my website again today. I’d like to get the home page styled for a tablet in landscape mode. It shouldn’t take too much, mainly making the fonts larger.

Here’s what it looks like in tablet-mode before I’ve done any styling:

Site header in tablet-mode before styling

The navigation is to spread out and everything in the header could stand to be bigger.

The first thing I did was change my Flexbox settings from column to row so that the navigation text would spread itself out across the top of the header. But even after I did that, the text just wouldn’t line up the way I wanted it to. There were two problems: the menu items are all different sizes and I wanted them to spread out evenly with the owl in the middle.

I ended up solving the first problem by finding the width of the largest item and then setting all of the menu items to be that length. The second problem was a little more difficult, though. What I ended up doing was adding a hidden menu item with nothing in it to act as a helper. It has no text, but it is still given the same width as the rest of the menu items.

This worked great, but it caused another problem. I had to somehow hide it completely, have it be given no space on the page, when the page is loaded on a smaller screen so it didn’t mess up the styling I did last night. I ended up accomplishing this by setting it to display: none in the CSS for smaller screen widths.

So here is what it looks like now:

Site header in tablet mode after styling

Here’s my HTML now:

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

And here’s my SASS:

.menu {
    height: 80px;
text-align: center;
    ul {
display: flex;
flex-flow: column wrap;
width: 90%;
height: 75px;
margin: -75px auto 0 auto;
align-content: space-between;
justify-content: space-between;
        li a {
font-family: $heading-stack;
font-size: $modular-scale-1;
color: $base-font-color;
text-shadow: 0 1px 2px rgba(255, 255, 255, .25);
}
        .hidden {
display: none;
}
        a:hover, :focus {
border-bottom: 2px solid $orange;
}
}
    @media (min-width: $tablet-portrait-width) {
ul {
height: 40px;
            li {
width: 121px;
}
            li a {
font-size: $modular-scale-2;
}
            .hidden {
display: inline-flex;
}
}
}
}
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.