I’ve been wanting to kick this blog back off again after a few months’ break, but what was I going to write about? I can sometimes raise the bar a little too high for myself, so I ended up writing nothing.

Breaking with that trend completely, I’m going to dedicate this post to a minor styling bug on this site that has been annoying me for a good while. Unable to solve it by Google or reading documentation (it’s true, sometimes they can fail you), I am now putting it out here, hoping someone can shed some light on it for me.

The flower conundrum

This title was the first thing that came to mind when I thought to write this blog post, so I think I will stick with the silly names for a while.

This one isn’t really a bug as much as it is a lack of symmetry. On my homepage, I have this fun little vinyl flavoured navigation menu. It’s not the most state-of-the-art part of my webpage, but the record even spins and I just kinda love it.

Problem though, is that when hitting the button, I cannot get the navigation items, which are list items, to keep an even distance from the center of the vinyl button.

This is the HTML for my list of buttons:

    
    <nav>
        <ul>
            <li><a href=“https://angel.co/jakob-jan-kamminga" target=“blank”><span class=“fab fa-angellist”></span></a></li>
            <li><a href=“https://codepen.io/jj-kamminga" target=“blank”><span class=“fab fa-codepen”></span></a></li>
            <li><a href=“https://www.linkedin.com/in/jakobjankamminga/" target=“blank”><span class=“fab fa-linkedin-in”></span></a></li>
            <li><a href=“https://twitter.com/JaJaKamminga" target=“blank”><span class=“fab fa-twitter”></span></a></li>
            <li><a href=“https://github.com/JJ-Kamminga" target=“blank”><span class=“fab fa-github”></span></a></li>
            <li><a href=“https://www.last.fm/user/andnino" target=“blank”><span class=“fab fa-lastfm”></span></a></li>
            <li><a href=“https://steamcommunity.com/id/AbstractDynamics/" target=“blank”><span class=“fab fa-steam”></span></a></li>
            <li><a href=“https://bandcamp.com/jjkamminga" target=“blank”><span class=“fab fa-bandcamp”></span></a></li>
        </ul>
    </nav>
    

For the scaling effect I use the css transform scale property:

    
    .cp-nav nav ul {
        transform: scale(1);
        transition: transform .35s cubic-bezier(0.68,-0.55,0.27,1.55);
    }
    

Then, using a little JavaScript, I change the value for scale to 1.5 when the outer <div> is clicked. But, as can be seen in the above screenshots, the element remains in its vertical position and only scales downward. Whereas I want it to expand evenly in all directions. Which makes me wonder…

"How do I maintain the scaling effect but apply it evenly?"

If you have any insights regarding this issue, please let me know! In addition to fixing the bug, I will update this article as a reference to hopefully help others.