Key Features (Enhancements)
Exactly four enhancements are submitted for consideration. The rest of the website uses basic formatting. The required dropdown and native form validation are not claimed as enhancements.
1. Narrow-screen reading adaptations
Explanation:At narrow widths the right-hand field note returns to normal flow, table cells wrap, form controls fit the page and navigation remains usable.
Why it is beyond the basic requirement:The required baseline already uses fluid percentages. This extension changes several components at one breakpoint rather than only shrinking the page.
Script/Code:HTML and CSS only; no JavaScript.
@media (max-width: 700px) { aside { float: none; width: 100%; margin: 16px 0; } }Implemented on:Open the working example. Resize the window below 700px, then compare the aside, table and navigation.
Source:MDN reference. Project-specific code written for RimbaKita.
2. CSS-only family filter
Explanation:Radio buttons limit the species list to a selected family. All species restores the collection. A directly linked record remains visible even when a different family is selected.
Why it is beyond the basic requirement:Required taxonomy links are static. This adds a reversible page state using checked controls and sibling selectors, with keyboard operation and direct-link handling.
Script/Code:HTML and CSS only; no JavaScript.
#filter-lauraceae:checked ~ .species-list .species-record { display: none; }
#filter-lauraceae:checked ~ .species-list .lauraceae { display: block; }Implemented on:Open the working example. Choose each family: four records remain. Select All species: sixteen return.
Source:MDN reference. Project-specific code written for RimbaKita.
3. Linked reference-photo viewer
Explanation:Three thumbnails open larger credited photographs in the normal page flow. Next and Close links make the viewing state explicit; the observation comments stay visible.
Why it is beyond the basic requirement:A required figure only displays a picture. This adds selectable views, fragment-addressable state and previous browser history without scripts or a moving overlay.
Script/Code:HTML and CSS only; no JavaScript.
.gallery-view { display: none; }
.gallery-view:target { display: block; }Implemented on:Open the working example. Open each thumbnail, use Next, then Close. Tab and Enter also operate the links.
Source:MDN reference. Project-specific code written for RimbaKita.
4. Printable botanical field guide
Explanation:Print styles show every species regardless of the screen filter, remove navigation controls, keep captions and sources, reveal source URLs, and reduce image size for paper.
Why it is beyond the basic requirement:Normal screen formatting does not address paper output. This provides a separate reading medium with filter overrides, page-break rules, repeated table headings and preserved attribution.
Script/Code:HTML and CSS only; no JavaScript.
@media print {
.filter-control, .filter-label { display: none; }
.species-list .species-record { display: block !important; }
figure { break-inside: avoid; }
}Implemented on:Open the working example. Select one family, then open Print Preview: all sixteen records and their source URLs are included.
Source:MDN reference. Project-specific code written for RimbaKita.
Non-triviality and enhancement credit remain the tutor’s decision. These examples are documented separately because they go beyond the normal Lecture 4 page styling.