page title - ~you

	tables q? answer collapsible, no JS semantic containers Oct 5 machine-readable dates ===== Forms ===== No server-side handling on most pubnixes: mailto forms or a shared file (''guestbook.txt'' with a "leave a note" instruction) is the convention. `Name` ===== CSS: The Useful 80% ===== /* selectors / p {} .class {} #id {} main p {} a:hover {} a[href^="http"] {} / custom properties: theming / :root { --bg: #282828; --fg: #ebdbb2; --accent: #fabd2f; } body { background: var(--bg); color: var(--fg); } / the small-web layout recipe / body { font-family: monospace; max-width: 80ch; / readable line length / margin: 0 auto; / centered / padding: 20px; line-height: 1.4; } / dark mode that follows the OS / @media (prefers-color-scheme: dark) { :root { --bg: #282828; --fg: #ebdbb2; } } Units: ''ch'' (character widths, the tilde layout unit), ''em''/''rem'', ''%'', ''px'' for hairlines and borders only. ===== Little Recipes ===== `pre { overflow-x: auto; } / code blocks don't break layout / img { max-width: 100%; } / images never overflow / a:visited { opacity: .7; } / subtle visited marker / nav a + a::before { content: "·"; margin: 0 .5ch; } / link separators /` ===== Validation and Testing ===== ''tidy -errors -q page.html'' (apt ''tidy'') catches unclosed tags * View in ''w3m'' or ''lynx'': if it is readable there, it is right for a pubnix. See [[indieweb:testing_nojs\|Testing Without JavaScript]]. * ''python3 -m http.server'' to preview locally ===== 88x31 Buttons ===== The small-web badge format. Copy the ones you like, save them to your site, and link back to the source. tilde.town's [[tilde:town_square\|town square]] has a web badge club directory. See also [[indieweb:web1_aesthetics\|Web 1.0 Aesthetics]]. ===== Accessibility That Costs Nothing ===== * ''alt'' on every ''img'', ''lang'' on ''html'', one ''h1'' per page * Semantic tags over divs * '''' on inputs * No fixed font sizes: use ''em'' or ''%'' ===== See Also ===== * [[indieweb:rss_by_hand\|RSS by Hand]] * [[indieweb:tiny_ssg\|Minimal Static Site Generators]] * [[indieweb:fun_accessible_small\|Fun, Accessible, and Small]] * [[indieweb:start\|IndieWeb Index]] * [[start\|Return to wiki home]]

semantic containers Oct 5 machine-readable dates ===== Forms ===== No server-side handling on most pubnixes: mailto forms or a shared file (''guestbook.txt'' with a "leave a note" instruction) is the convention. Name ===== CSS: The Useful 80% ===== /* selectors */ p {} .class {} #id {} main p {} a:hover {} a[href^="http"] {} /* custom properties: theming */ :root { --bg: #282828; --fg: #ebdbb2; --accent: #fabd2f; } body { background: var(--bg); color: var(--fg); } /* the small-web layout recipe */ body { font-family: monospace; max-width: 80ch; /* readable line length */ margin: 0 auto; /* centered */ padding: 20px; line-height: 1.4; } /* dark mode that follows the OS */ @media (prefers-color-scheme: dark) { :root { --bg: #282828; --fg: #ebdbb2; } } Units: ''ch'' (character widths, the tilde layout unit), ''em''/''rem'', ''%'', ''px'' for hairlines and borders only. ===== Little Recipes ===== pre { overflow-x: auto; } /* code blocks don't break layout */ img { max-width: 100%; } /* images never overflow */ a:visited { opacity: .7; } /* subtle visited marker */ nav a + a::before { content: "·"; margin: 0 .5ch; } /* link separators */ ===== Validation and Testing ===== * ''tidy -errors -q page.html'' (apt ''tidy'') catches unclosed tags * View in ''w3m'' or ''lynx'': if it is readable there, it is right for a pubnix. See [[indieweb:testing_nojs|Testing Without JavaScript]]. * ''python3 -m http.server'' to preview locally ===== 88x31 Buttons ===== The small-web badge format. Copy the ones you like, save them to your site, and link back to the source. tilde.town's [[tilde:town_square|town square]] has a web badge club directory. See also [[indieweb:web1_aesthetics|Web 1.0 Aesthetics]]. ===== Accessibility That Costs Nothing ===== * ''alt'' on every ''img'', ''lang'' on ''html'', one ''h1'' per page * Semantic tags over divs * '''' on inputs * No fixed font sizes: use ''em'' or ''%'' ===== See Also ===== * [[indieweb:rss_by_hand|RSS by Hand]] * [[indieweb:tiny_ssg|Minimal Static Site Generators]] * [[indieweb:fun_accessible_small|Fun, Accessible, and Small]] * [[indieweb:start|IndieWeb Index]] * [[start|Return to wiki home]]

…