Theming - Zen

Theming

←24 / 30→

11) Images and mediaURL copied

Copied

img {
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

figure > img {
  width: 100%;
  height: auto;
}

2	✦
3	✦ > 1) Where to put your CSS
4	✦ > 1) Where to put your CSS > Root-level CSS (site-wide)
5	✦ > 1) Where to put your CSS > Folder-level CSS (scoped)
6	✦ > 1) Where to put your CSS > Folder-level global CSS
7	✦ > 1) Where to put your CSS > Example mental model
8	✦ > 2a) Built-in previous/next navigation
9	✦ > 2) How to find the section scope class
10	✦ > 3) DOM map (what you can target)
11	✦ > 3) DOM map (what you can target) > How to find selectors for obscure elements
12	✦ > 3) DOM map (what you can target) > What to do after you find a selector
13	✦ > 3) DOM map (what you can target) > Page structure
14	✦ > 3) DOM map (what you can target) > Sidebars
15	✦ > 3) DOM map (what you can target) > Mobile panels
16	✦ > 3) DOM map (what you can target) > Markdown content
17	✦ > 4) Global theming (background, typography, links)
18	✦ > 5) Navbar and footer
19	✦ > 6) Sidebars and TOC
20	✦ > 7) Code blocks and inline code
21	✦ > 8) Mermaid diagrams
22	✦ > 9) Footnotes / sidenotes
23	✦ > 10) Tabs
24	✦ > 11) Images and media
25	✦ > 12) Change behavior (JS + HTML)
26	✦ > 12) Change behavior (JS + HTML) > Option A: Custom JS
27	✦ > 12) Change behavior (JS + HTML) > Option B: Inline HTML/JS in Markdown
28	✦ > 13) Advanced: change the HTML structure
29	✦ > 14) Troubleshooting