Key Features (Enhancements)

Exactly four enhancements are submitted for consideration. The rest of the website uses basic formatting. The required dropdown, native form validation and retained print utility are not additional submitted 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. Explore category hover and focus reveal

Explanation:Hover over Families, Genera or Species to reveal a direct starting link. The main category link and description stay visible. Keyboard focus also opens the details; touch and narrow screens show them normally.

Why it is beyond the basic requirement:Ordinary navigation only links pages. This adds contextual discovery with a keyboard equivalent and a touch-friendly fallback, without requiring an extra click. The reveal now uses the archived dropdown’s 180ms fade and upward-offset entrance.

Script/Code:HTML and CSS only. These display rules apply only inside a desktop hover-capable media query.

.explore-category .category-details { display: none; }
.explore-category:hover .category-details,
.explore-category:focus-within .category-details { display: block; }

Implemented on:Explorer classification choices. Hover over each category, then try Tab. On a touch screen or below 701px, all supplementary links remain visible.

Source:MDN focus-within and MDN hover media feature. Project-specific code written for RimbaKita.

3. Photo viewer and subtle hover feedback

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. Plant photographs use the original RimbaKita 6px lift and gentle 1.055-scale zoom on desktop pointer hover, with the original 260ms transition. Linked photographs respond to keyboard focus. Touch and narrow screens keep photographs still; enlarged viewer photographs lift without zooming. Reduced-motion preferences disable motion throughout the site.

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; }
/* Lift rules are limited to hover-capable screens. */
.plant-photo { transition: transform 260ms; }
.plant-photo:hover, a:focus .plant-photo { transform: translateY(-6px) scale(1.055); }

Implemented on:Open the working example. Open each thumbnail, use Next, then Close. Tab and Enter also operate the links. Hover over plant photographs on the Species page to see the small lift.

Source:MDN target reference, MDN transform and MDN reduced motion. Project-specific code written for RimbaKita.

4. 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.

The archived RimbaKita stylesheet supplies the restored 180ms link/button feedback, 220ms page/record entrances and 260ms photo motion. These supporting effects are not additional submitted enhancements. The original archives contain no scroll-driven timeline, parallax or animated background implementation. The original page and record entrances are preserved in Chrome and Firefox. A newer scroll-timeline adaptation was evaluated but omitted because the available CSS validator does not support its properties; no JavaScript substitute is included.

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.