Site header

A blue square mark and a white site name sit on a dark charcoal bar. The topic you are on shows as a slightly lighter pill inside the bar, and corners are only lightly rounded (about 6px). bar keeps the name on one line with the menu on the right, folding into a “Menu” button on phones. stacked adds a white row under the dark one, so topic tabs look like a repository’s tabs, each with its post count in a small grey badge. compact shows a single “Full menu” button that opens a panel with a one-line description and post count per topic.

If you want topic tabs always visible with counts, stacked is the most Primer-like; on phones the tabs scroll sideways instead of folding. The dark bar can feel stiff for a warm parenting site. In dark mode the bar gets close to the page background, so the line between header and body fades. The full-menu panel splits into two columns only when the number of topics is even; with an odd number one cell is left empty.

The GitHub logo and name are not used; the site’s own mark and name take their place.

Use it when — Variants 3

1. barSingle bar When 3–5 topics fit on one line next to the name. On phones the menu folds open.Used by 3: babyplay, babysick, feeding
2. stackedTwo rows When topic tabs should always be visible — on phones they scroll sideways instead of folding.Used by 4: babyfood, toddlerfood, vaccination, 허브
3. compactFull menu When there are many topics, or each topic deserves a one-line description and post count.Used by 4: babysleep, birthprep, milestone, newborn