New Logo

I have been thinking about replacing my name in the header navigation with a monagram now for a while. After sketching I landed on a capital C with a capital H centered on top. Now I’m experimenting with exactly how to implement the H. Not currently sold on the current implementation but I’m going to try iterating on it going forward. Not letting the perfect be the enemy of the good.

First idea was to start with the C and use the same forms from that character to build the H. There are certainly some places in this created character that are not as successful as I would have hoped.

Then I was just experimenting with different placement of the H and really liked the way it landed in the current configuration. While not perfect it does have a certain balance that I like. It reminds me of something but I have not been able to place it yet.

This is the tenth version of the logo and I have decided to ship it finally. This required some changes to the header and that was more of a struggle than I expected. The logo is an SVG and a link which caused me some issues. Mainly the padding on the SVG and link were interacting in strange ways causing a taller than expected element on page.

To solve them I created a div that contained the SVG and set the dimensions of that div. The SVG scales to fill the container it is in. This allows for the SVG and link to be one solid object with no bleed from the link. This div is then placed inside another div to set the placement without changing the size of the SVG.

This took longer than I expected. During working this out I created a dynamic way to play with the sizing of the div that contains the SVG.

    --multiplier: 6;
    --ratio: 0.48362;
    width:  calc(var(--multiplier) * 1em);
    height: calc(var(--multiplier) * var(--ratio) * 1em); 

The –multiplier is the scale factor that can be used to change the width and height of the div by changing one value. The –ratio is the width to height ratio of the SVG. If in the future the SVG changes the ratio will need to be updated. This is probably over engineering for the current situation but I wanted to experiment with calculation in CSS.