snf.wsring.net

Search

Items tagged with: css

Frio Dark Mode

I've just been playing with CSS media queries for system themes dark mode. These queries check for system wide dark mode being active. This is supported in Firefox (> v.67), Chrome (> v.76) and Safari and it's really easy to implement. My tweaks are far from being finished but work quite well already:

@media (prefers-color-scheme: dark) {
    … style definitions follow here …
}

Testing

To test it in Firefox you maybe have to tweak about:config:
Create an integer setting named ui.systemUsesDarkTheme with value 1.

On Firefox for Android there's already a setting in about:config. Just change it's value from -1 to 1.

Screenshots

Bild/FotoBild/FotoBild/Foto

#CSS #MediaQueries #DarkMode @Friendica Developers
 
Any Markdown / Pandoc mavens know how to tweak the HTML DOM generated for HTML pages?

I'm looking at one for an article which doesn't seem to generate

<

article> or elements, though if it did either, would make some layout / CSS issues a lot easier to deal with.

Problem now is that when I set additional margins within <blockquote> segements, they don't really or consistently differ from the adjacent <br> elements. I have a sad.

The CSS I'm using, in part (and yes, I can share the full stylesheet, though this seems to be the operative code):
body { 
  margin: 1rem auto; 
  max-width: 90rem; 
  padding: 0 4rem 0.5rem; 
  width: auto; 
  font-size: 1rem; 
  line-height: 1.4; 
} 

blockquote { 
    margin-left: 8em; 
    margin-right: 6em; 
} 

article, p, ol, ul, li, div { 
    width: auto; 
    max-width: 45rem; 
    margin: 0 auto; 
    line-height: 1.4; 
} 

p { 
    margin: 1em auto; 
}

What happens is that the blockquote margins are acting against the full page width, and push the blockquote block back and forth across the full page, rather than constraining it within the region bounded by the <br> blocks. Given that the blockquotes aren't within the <br> blocks, that makes sense, but it's not the effect I want.

I'd also like to preserve the option to be able to set elements (images, sidenotes, callouts) within the left or right margins.

I'm thinking that changing the DOM to include an article element would make that easier, as I could set the width of the article or main elements.

Present DOM:

* html
* head
* body
* header
* nav
* p
* blockquote
* p
* body /
* html /

That would better be:

* html
* head
* body
* header
* nav
* article
* p
* blockquote
* p
* article /
* body /
* html /

("element /" is being used for closing tags)

Looking at HTML5 semantic elements:

* \<section>
* \<nav>
* \<article>
* \<aside>
* \<hgroup>
* \<header>
* \<footer>
* \<time>
* \<mark>

... "article" is what I'm looking for.o

Though ... Dive in to HTML5 doesn't use these: <view-source:http://diveinto.html5doctor.com/past.html>

But yeah: if I could shim an <article> tag in there, I think I'd be happier.

And yes, I can (and probably will) CodePen this in a bit.

#pandoc #markdown #html #css
 
Later posts Earlier posts