MediaWiki talk:Mobile.css: Difference between revisions

From Tardis Wiki, the free Doctor Who reference
(Created page with "== Various div#article-type issues == For context, this is the div that templates like Template:Rename, Template:Spoiler, etc. place on the page. === Text colour === Firstly, it's ''genuinely unclear'' to me why, in the snippet below, the color is set to <span style="white-space:nowrap;">--alt-</span>text-color. @media screen and (max-width: 720px) { div#article-type p { margin-left: 0; color: var(--alt-text-color); } div#art...")
Tags: Mobile edit Mobile web edit
 
(Remembered a better solution in a place)
Tags: Mobile edit Mobile web edit
 
Line 33: Line 33:
I propose replacing that line with something like this:
I propose replacing that line with something like this:
     min-width: 528.5px;
     min-width: 528.5px;
     min-width: min(528.5px,90vw);
     min-width: min(528.5px,100%);


This would still look the same with large viewport widths, but would work with smaller widths as well. The min() function is supported in most browsers only since around 2020, so I've included the first line to fall back to the current behaviour if a browser doesn't support it.
This would still look the same with large viewport widths, but would work with smaller widths as well. The min() function is supported in most browsers only since around 2020, so I've included the first line to fall back to the current behaviour if a browser doesn't support it.

Latest revision as of 17:17, 3 April 2024

Various div#article-type issues[[edit source]]

For context, this is the div that templates like Template:Rename, Template:Spoiler, etc. place on the page.

Text colour[[edit source]]

Firstly, it's genuinely unclear to me why, in the snippet below, the color is set to --alt-text-color.

@media screen and (max-width: 720px) {
    div#article-type p {
        margin-left: 0;
        color: var(--alt-text-color);
    }
    div#article-type {
        max-width: 30%!important;
    }
}

In both the light and dark "Citizen" themes --alt-text-color is similar to the background colour enough to be unreadable (is #ffffff and #000000 respectively). Depending on what this variable's intended purpose is, they might have accidentally ended up the wrong way around between light mode and dark mode, but if they didn't...

It's also unclear why the color should depend on viewport width at all, but there might be a good reason for that!

I think, though, that this line could simply be left out.

Narrow widths[[edit source]]

Currently, the width of the div#article-type element is defined as

    min-width: 528.5px;

exactly.

This means that viewport widths less than that cut off a part of the div, making the text unreadable again, in another way!

I propose replacing that line with something like this:

    min-width: 528.5px;
    min-width: min(528.5px,100%);

This would still look the same with large viewport widths, but would work with smaller widths as well. The min() function is supported in most browsers only since around 2020, so I've included the first line to fall back to the current behaviour if a browser doesn't support it.


And yeah, T:DESK WINS, we've all seen it. But this is the CSS:MOBILE talk page, so I figure this is at least one place where suggestions like this are a good idea? Especially considering that since the migration the community does have that control over the mobile theme that T:DESK WINS mentions it not having. (That page should probably be reworked considering this circumstance, but I'm not sure enough about how this changes the wiki's priorities themselves to start thinking about that.)

jsmith5504talk to me 17:06, 3 April 2024 (UTC)