marahmarie: my initials (MM) (Default)

That we're fixing for a friend (the trackpad needs a new circuit board, but he doesn't really want the laptop, so we've been tossing it back and forth) and Other Person was like, "Oh my God, there's room for more stuff! Look at all the room! You could have like, more sidebars and stuff!" and I'm laughing, but I'm also like 0_o, because the last thing I want is to add more code.

But he's right; on widescreens there's enough room to make this into a four column layout (if you're viewing this in your own style, it currently runs one of two, two-column styles depending on your res; on mobile it has one column and nearly no graphics - my favorite of all three).

But - and this is why sometimes I wish everyone knew CSS, so they'd know just what a nightmare it is, and why "bloat" and "page load times" and so on matter - going to a four-column layout for widescreens would mean adding more code, and technically, I consider any background or column changes "a new layout", which would bring me to four of them on a blog maybe a few hundred people a year ever see, and of those, I'd gander 2/3s of them don't see my style thanks to DW's excellent tools to help you never see anyone's.

Plus what would I put in the third and fourth columns? Recipes? Thought of the day? Word of the day? Poems? I could get creative, but...I'd want the extra space on a blog where I could automate the changing of content on a daily basis, but even then, I'm minimalist enough I don't even want the only sidebar I have, so I'd have to think that over. On another website. Because this one doesn't have default support for automated content changing unless I really twist someone's arm to write me some s2 (I know it can be done from the things I saw done on LJ, I just don't know how to convert the code to work on Dreamwidth).

Without automated content changing, if I ever do mess with it - which I'd do only because at anything over 15" wide, the design reminds me of nothing so much as the letter "T", which is why I've taken great pains to widen it over the years, though only up to a certain point - it would be to further widen the main content, but along the same lines as my one-column, with the difference that text would be readable from about three feet away, with no background, maybe just dark text on a plain white page. Maybe some neat typography. Maybe I could use the wider screen to play with the flexbox spec (I almost said "and columns" but no, I really don't think a newspaper or magazine style would suit a personal blog).

Maybe as a winter project.

marahmarie: my initials (MM) (Default)

Thinking that...

  • Browserstacks does the worst mock-up of a Nokia phone. It's supposed to be flat with no 3D bezel. Specifically, the 930 (which runs Windows; I know there's some new ones out, and yes, even if they run Android, you might want to get one; I know I want to) has no 3D bezel. Yet Browsertacks shows me this and tells me it's a 930 and I'm like 0_o:

    Non-existent Nokia featuring 3D bezels - it's supposed to be, but is not, the 930

    Btw, this is what a 930 really looks like - not so bad.
  • That the net might be doomed.
  • That I don't understand why browsers can't write @media CSS on the fly. They write other CSS rules ("default styles"; literally the only reason why you know Eric Meyer's name - unless you're [personal profile] theferrett, his real-life friend). It seems browsers could be set up to "read" style sheets for size rules and custom-scale them automatically (brought to you by my coding a new style sheet and realizing I used more CSS to scale mobile than I did to put the whole style together - such a tedious, let-me-stab-my-eyes-out-just-to-check-if-I'm-alive waste of time.)
  • If nothing else, there should be a bot we could let loose in Notepad++ to just write the @media for us. *pauses* Y'all think I'm kidding.
  • That somebody makes t-shirts with custom logos, right? Because someday when I have a few dollars I want a sky-blue t-shirt with white lettering on it that says: *:not(what you think), which might be an abstract joke about the universal selector.
marahmarie: my initials (MM) (Default)

ETA: asked.

--ask around for s2 to move (back to) Top link from $this->print_body(); to $this->print_module_section("two"); - specifically, it should land right after .module-section-two but still within the same code block. More specifically, it should land after .module-section-two but before <div style="clear:both"> in the HTML above the footer (find screencap showing exactly where, if you post this).

This could fail spectacularly, but based on what I see in the live HTML editor, if I move the link where I say it should work and it actually works, it'll clear the page entirely on resized/mobile CSS (and on pages with very little content, which it currently can't clear even with CSS hacks) and stay where I put it - a 3-for-1 which, so far, has not been doable any other way.

marahmarie: my initials (MM) (Default)

Firefox actually has the weirdest performance in some areas:

  • clearing comment forms on entry pages (the whitespace between entry and form works as it should in _every_other_browser_; in Firefox the form doesn't clear by more than a few pixels unless I about triple the top margin).
  • arranging cell space on comment forms under 360px width on mobile is not going very well (our comment forms are actually tables nested within tables, which doesn't make it any easier)
  • displaying padding in text fields (for example, the search box in the navigation bar above the header is the wrong shape/size in _every_other_browser_ because Firefox)
  • certain CSS properties/values work in Firefox but in no other browser, which led to this thing today where my comment forms looked like someone shook all my pages really hard and let the form fields land where they would. Such fun.

I think I'd need about a thousand hacks for every possible browser/OS/device configuration to work around some of this, or to simply hack Firefox to allow better display in other browsers. And I could hack Firefox, because there are hacks for it.

The other thing is how needless it is to test page display on multiple versions of modern Webkit (only speaking of Windows browsers). If you check a web page in Chromium or Google Chrome, it seems you've checked it in every modern Webkit browser including Safari for Windows - which stopped at v.5 some years ago - except modern (non-Presto) Opera, which has its own ideas about CSS.

I'm not sure if this applies to Chrome on Android, as well, but as far as desktop testing goes, yeah, it does seem that way.

marahmarie: my initials (MM) (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.

marahmarie: my initials (MM) (Default)

Itsa coming. Saying so because while I don't like to admit suggestions I filed 3,000 years ago still mean something to me, they do, and I was just looking at my Tags page, and holy Mother of God, I don't even know what's on it.

Mainly, I need a way to target locked posts and a way to style other effluvia that helps me get/keep things straight - neither idea is getting implemented beyond what we already have, but at least I can fix views on some other stuff - the tag count in the sidebar and comment counts on the Month page, which admittedly are more aesthetic than practical issues.

Right now I'm trying (and failing O_o) to find a post about eBay made around Christmastime; it's not under my eBay tag but should be. If I had a way to parse protected posts from public posts (it's protected) that would narrow it down a bit. And while technically there *is* a way (there's some CSS I can pull and target; I've done so in the past but don't even think I own a copy of that version of this style anymore) it's limited in scope because so many of my tags encompass both public and protected posts that there's no way for the CSS to target one or the other - so no, the CSS can't say: "Tada, here are only locked posts made under this tag."

Which is exactly what I need it to do, and doesn't seem like an unreasonable thing for it to do, but probably requires so many orders of magnitude of rewriting the backend tag publishing system that it's not worth doing (and while I don't think I can prove it as I don't know if I kept a local copy of this suggestion, I'm pretty much 100% sure I've suggested this functionality in the past).

The changes rolling out won't address that, but I almost don't care, as the CSS I can currently target will still say: "There has ever been a locked post under this tag"; it just takes longer to trawl through the results, as public posts will still be mixed in with protected (because the CSS will always, if I recall correctly, default to targeting the pseudo selector for any protected posts that fall under each tag).

ETA, next night: and that's fine and well, but the logic for deciding which tags get the public or protected parameter looks like it tends toward "whatever parameter has the most posts is Winner Takes All", which means a majority of my locked posts won't show up merely by exposing whatever tags do get the visibility protected selector assigned to them. In fact, adding such CSS would be equivalent to hiding even more posts on myself than I do now simply by mis-tagging or forgetting to tag.

But that means finding and targeting the exact CSS again, then adding it to my style sheet and updating it - I mean, to find one freaking post (there are probably others, which is why I find myself bitching about Tag page CSS in general - I know I'll have to go back and find and re-tag more stuff, not to mention change some posts from protected to public, as I accidentally forget to change the access level on more of them than I care to admit).

It would just be so nice to have a way to sort out public posts from protected ones, as that's sort of an informal filing system in itself - at least for me.

ETA2: just checked Archive Year and Month: Year doesn't parse public from protected posts via CSS, while Month shows a lock next to each protected post, so I'm not sure what else it would need - if anything - to make it more useful. (Maybe unhiding tags on that page would help - will try that next to see what can be manipulated, if anything).

ETA2a: Month doesn't parse between public and protected filters, it just slaps an .access-filter selector on anything not public, which wheeee, why don't we have standardization across our CSS, I think that kind of bugs me. Unfortunately (if you're looking to hack in some sort of workaround) the CSS is semantic, so there's no sneaking in say, dt .access-filter + tag {do this:now} and making it work. I can target surrounding CSS, but that just changes all instances of it on the page without targeting merely the protected tags I'm after.

ETA3: [personal profile] brainwane points out a few ways to parse public from protected posts, namely by using URL parameters like so: "https://marahmarie.dreamwidth.org/?security=access" or choosing from a list of parameters:

If you try a value for "security" that doesn't exist, like "custom", e.g.,
https://marahmarie.dreamwidth.org/?security=custom

you get a list:

"You can filter entries by the following security level:

Public [link]
Access List [link]
Private [link]

[personal profile] darkoshi adds that you can combine tag names and security parameters like so: "https://marahmarie.dreamwidth.org/tag/websites:+ebay?security=access". The page they saw that on also has this suggestion from [personal profile] chagrined:

you can already search for two tags at a time also but I'm on my phone and don't remember the syntax for that ottomh, I can look it up l8r if u want. I think it is limited to only 2 right now tho. but still handy.

eta: nm found it in faq it's tag/tag1name,tag2name?mode=MODE

and where I wrote MODE put either "or" or "and" (and gives only posts with both tags)

iirc can stack with security level filtering too I think

/tag/tagA,tagB?mode=and&security=private

All of these tricks are lovely and useful, but not what I want. I'm just looking for a way to parse - in particular - what's public from what's private without having to scroll through pages of posts found under each tag. Lists of posts found under each tag, sorted by public or protected parameters, would be better - an internal, non-public way to get search results for my posts, in other words, in simple list form, with dates besides the posts under each security parameter in question to help determine which is the lost post (or posts) I'm after.

Basically, I want a system so simple it works for people suffering from memory loss. I'm not claiming that might be me, but there are days it feels like it.