There are bugs associated with initial CSS I added here.
A test rule overwrote Markdown one. Deleted.
I added the CDN version of https://github.com/sindresorhus/github-markdown-css/blob/main/github-markdown.css.
This selects between a dark and light color scheme depending on user setting.
This setting changes automatically for most on phones and desktops as it’s tied to OS.
This only works for the rendered .markdown, and not everything else.
So I need to recreate some of the GHM style for the rest of the site.
Now is a good time to catch up with the world of CSS.
From CSS: Cascading Style Sheets:
Previously, the development of various parts of CSS specification was done synchronously, which allowed the versioning of the latest recommendations. You might have heard about CSS1, CSS2.1, or even CSS3. There will never be a CSS3 or a CSS4; rather, everything is now CSS without a version number.
Looks like I’m going to have to figure out what is new!
This is cool: https://developer.mozilla.org/en-US/docs/Learn/CSS/Howto.
I once implemented something like object-fit!
The first two things I noticed from github-markdown-css are variables and how they are used in media tag.
From _Using CSS custom properties (variables) :
Variables are called “custom properties”.
They are set using custom property notation (e.g., –main-color: black;) and are accessed using the var() function (e.g., color: var(–main-color);).
/* Selector given to the ruleset defines the property's scope. */
element {
--main-bg-color: brown;
}
/* Like <html> but with higher specificity */
/* https://developer.mozilla.org/en-US/docs/Web/CSS/:root */
:root {
--main-bg-color: brown;
}
/* Example usage */
element {
background-color: var(--main-bg-color);
}
.two {
/* Defaults to brown if var is not defined */
background-color: var(--main-bg-color, brown);
}
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Media_queries
Media queries look the same.
There is just so many more media feature rules,
like prefers-color-scheme.
Where does .markdown-body belong?
I want most of that theming for myself,
but thing like the codeblocks are “broken”,
because github uses pygments and we are using chroma.
The “github” theme for chroma doesn’t really seem to be working.
It could be .markdown-body overwriting key rules.
I’ll have to explore further.
Thing look a little better now though.