Apr. 22nd, 2017

marahmarie: Sheep go to heaven, goats go to hell (Default)

ETA, 4-23-17: Swapped to gendered pronouns upon request, clarified [personal profile] solarbird's changes to the navbar were live CSS edits, not "mock-ups", fixed broken navbar section for Firefox on Mac (for all changes please see comments).


So except for mostly minor "fix it as we go along" stuff, I've not seriously updated my CSS in over a year, which I know because the last time I went through my code I didn't live here. :)

Though I've wrangled with the idea of switching up the layout, I've adapted Craigslist's attitude of, "If it's not broke, don't fix it" along with, "Anything we want can be added, so why change the whole damn thing", which means yes, this page will probably remain in the aughts forever, because Craigslist is right.

In the meantime I was busy never editing my CSS again when I ran across a new suggestion for adding a drop-down to the top navbar's Inbox, which by itself didn't cause me to edit or change anything. But then [personal profile] solarbird, the suggestion author, began talking about changing the top navbar in general, pointing out what I'd been too kind to mention when I commented: that it needs to get hit by a car a serious update for modern, non-table-based times (it's all tables. Tables, tables and tables. All taaaaabbbbbbllllles. Even those of us who come from LJ (all tables, until Russia took over) can have a hard time with tables. I learned to make web pages one way: in CSS. Not tables).

After mentioning she'd love for the text to at least align on it (simple enough, right? Y'all wouldn't believe how hard it is) I gave her most of my navbar code, which was nothing and looked something like this, which is from a much older style sheet.

Of course, I can't share my code without wondering what inspired me, because I hate everything I code, so I started picking my navbar CSS apart based on some of the things [personal profile] solarbird wanted, then compared what I had to what she later posted pictures of after adding the CSS to her DW. The code knocked mine clean out of the water, so then I guess I had to make a better navbar - if only for myself - because I'm not going to admit I'm kind of competitive, because I'm totally, absolutely not anything like that and anyone who thinks so is delusional.

Comment exchange went on as Denise more or less tried to hire [personal profile] solarbird right from the web page (she's a designer, from what I gather) before I decided to tear my navbar code apart and re-write it; hopefully the end result is better than what it was. It wraps on mobile based on back-end code put in place by DW; while I'm not happy with the wrap (it collapses to one column while there's still room for two; I keep my wrapping parameters somewhat tighter) it's relatively fail-safe, which is why I don't change it.

So I kept a few lines of my original navbar edits and just started over: even my last update to [personal profile] solarbird is obsolete because like anything else, I'll edit until I just can't stand to anymore.

Now what we have is:

  • new navbar background
  • better navbar text alignment
  • navbar font-size increase
  • navbar "search for interests" text field (it needs a label - some forgotten code elsewhere in my style sheet had kept this text field hidden altogether)

Additionally...

The navbar, though you wouldn't know it, has three sections: 1) user/user links, 2) name of journal you're viewing/related links, 3) interest search and reload page: light|original. While my thought was to spread those sections out more evenly, there's too much whitespace, so I simply spread them out more than they were.

Parallax scrolling: I've wanted it forever so now I have it - but only in (logged-in view) Firefox; in Webkit/Edge/IE and logged-out Fx it falls over (or, more precisely, falls under the header about 10-15px, where it stays until it goes away altogether on smaller mobile views) so after hours of fiddling, finally I was like "the heck with it" and set three views for the navbar. Yes, three, all at once:

In logged-in Firefox it's set to parallax (position:fixed); in Webkit/logged-out Fx it's sticky (position:sticky - still in experimental W3C status) and in IE10/11/Edge it's set to normal (position:relative). Parallax *almost* works in Edge, except same as Webkit/logged-out FX, I can't get the navbar to stay behind the header until your first downward scroll completes.

Since I was in the CSS editor, anyhow, I fixed maybe half a dozen funky little things - like the username and usericon on edit comment forms floating around in the middle of them like, "Huh? Where am I?" That's been an issue for years, and for some reason it was finally starting to drive me nuts.