It has been 2 weeks since my last update and my designer and I have continued working on the site as a whole, from top to bottom.

In my last update, I discussed the masthead which was in a position for me to start implementing in code.

When working on new functionality, in many ways away from the existing HTML / JSX and CSS, it's easy to forget how much there is to unravel. When thinking about what we're currently doing, I wonder if I'd be better off deleting every CSS file and simply starting with a clean slate. Although even this idea wouldn't be that simple due to the proliferation of inline styles that have been implemented. There are days where I would very much like to give up and accept defeat - thinking that perhaps the design is beyond saving... then my designer's enthusiasm for the project gives me another boost of energy to keep trying.

Essentially, the people who have previously worked on the site have tried to be too clever. By working modularly with their components, which of course makes a lot of sense, they also took a modular approach with much of the CSS, ignoring the fact that CSS elements are in their own right components themselves and should therefore be plugged in to the JSX components. Not repeated and redefined (i.e. copied) into new CSS files, with adjusted names, and identical definitions.

This is what I'm now trying to unravel. A button style doesn't need to be repeated in 20 different CSS files. If it's a "primaryButton", then it's a "primaryButton", regardless of context. Maybe you'll want to tweak the size or adapt it for different scenarios - in which case it should be extended. Not rewritten. This is very much why front-end development is a skill in its own right and should be treated as such.

At the moment, the CSS is quite simply a rather large clusterfuck.

---

Now that I've got that off my chest. Here's a progress report.

---

Design

The masthead design is tight now. We've simplified it to 2 breakpoints, fitting in with Foundation's 3 that have been implemented out of the box. This essentially means we've got;

1. Mobile
2. Everything else

In his last design, my designer didn't include the scenario where somebody has an avatar so this has now been included.

Tokens

This is all with a view to "tokenising" the design. Giving every style created its clear use case so if you want to implement a big clear call to action, then you use the "primaryButton" style. If it's less important, "secondaryButton", etc.

This continues to be a work in progress. A painful work in progress but we'll get there. There's a lot more in the Figma files so here are a few screenshot dumps of that - particularly looking at what Foundation does 'out of the box' and icons, styles, etc.

Implementation

This is now a work in progress and continues to prove itself to be challenging.

Plenty of colourful borders are a God-send in trying to figure out what's going on with the existing code. This might not look like huge progress, but deleting code without breaking something else is about as much fun as it sounds.

The implementation of the existing burger menu was also interesting. Instead of just using a simple SVG file, some smart arse decided to draw a line and then use CSS to draw 2 more lines. Whoever thought this was a good idea needs to meet a crowbar and have some sense knocked into them. I'm sure they had fun implementing it though. That's why the design above has 2 burger menus. They currently do the same thing and I'm currently wrestling with the implementation of the outline in such a way that it'll work elsewhere and won't be unique to this single scenario. In the end, there'll obviously only be 1. My one. Which will become a piece of piss to maintain and use elsewhere if required.

Next Steps

Keep plodding along with the design and implementing it. I know that the current design and implementation difficulties are temporary... and once overcome, everything will fall into place nicely, especially once more of the site has been redesigned and reusing the core styles that I'm currently working on can be implemented.

Oh, and I've commented out the search bar. It hasn't worked for about 3 years so it doesn't make much sense to leave it there.

The roadofrich Design

I also created a web3 design for @roadofrich so that Steemit could be consistent with Crypt ID Hunter.

Update (added 9 minutes after initial posting)

I almost forgot, there's a logged out state too which is also a pain in the arse to implement.