[INFRA] fix draft rendering css on mobile or when browser window is narrow

[sappelhoff]

fixes #491

it's probably (I think) the nav__title element's background that needs to be changed --> BUT ONLY when the width of the browser is of a certain width or below, see screenshot from browser console (in Chrome):

I applied red color to nav__title but:

1. this results in unwanted coloring on wide screens, see screenshot:
   

2. this gets overridden when the screen is narrow (or the browser window is made narrow), see the "strike-through" CSS from the first screenshot in this thread, ... and then what we want to be red is blue again.

So we somehow need to edit/customize the logic that kicks in for narrow browser windows --> and to have that add the red color.

EDIT: tried that via https://stackoverflow.com/questions/13979443/if-screen-resolution-is-less-than-x-append-css/13979463 in fc1f272 ... will revert if it doesn't work.

---

An alternative might be to set the colors via :root {}, see: https://squidfunk.github.io/mkdocs-material/setup/changing-the-colors/#custom-colors

[sappelhoff]

yeah, that works ... but it changes ALL previously blue text to red, including the links.

I think it's okay, ... and I think I've had enough fiddling with this for this Saturday.

WDYT @effigies ?

[sappelhoff]

okay, that works! conditionally applying CSS when screens are narrow ... and preventing that to be overridden, using !important:

I think that's what we wanted originally and in #491 ... and it's better than the alternative solution from 1b5d2bc (and corresponding comment #889 (comment))

[effigies]

Looks good on my phone. Haven't looked from a laptop.

[Remi-Gau]

From what I can on the different responsive designs options of my browser this looks good to me.