owl icon

The Flower Conundrum

June 23, 2020

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.

flower navigation before

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.

flower navigation after

This is the HTML for my list of buttons:

            <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>

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.

Back to blog home