Enhancements

What it does and who it helps

Photo grids regroup from asymmetric layouts to single columns. The floating glass menu becomes a sideways-scrolling capsule on phones, with the Profiles links joining the row. Floated sidebars stack, the taxonomy tree becomes an indented list, and wide tables scroll within their own frame.

How it works

Fluid clamp() type and spacing, intrinsic CSS Grid columns (auto-fill with minmax()) and Flexbox adapt the page without a breakpoint for every component. Four coordinated media queries (tablet, phone menu, phone and small phone) then restructure the menu, heroes, forms, asides and tile grids. display: contents lets the drop-down’s list items join the phone menu row.

Why it extends the basics

This combines coordinated navigation, form, image, table and sidebar behaviour; it goes beyond a single fluid width.

Key code

/* Species grid: 4 to 1 columns with no media query */
.species-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
}

/* Phones: the Profiles links join the scrolling menu row */
@media (max-width: 52em) {
    .dropdown-menu { display: contents; }
}

Technique reference: MDN Web Docs. Project-specific HTML and CSS were written for this site.

Responsive species collection

What it does and who it helps

The home page shows the whole collection as one tree: four families on the left, eight genera in the middle and sixteen species on the right, joined by coloured branch lines. Pointing at a family lights its branch, dims the other three and opens a glass card describing it; pointing at a genus or a species narrows the highlight further. Keyboard users get the same effect when Tab focus moves through the names, and every name links to its page.

How it works

The tree is ordinary nested <ul> lists, so it stays meaningful without CSS. Grid columns line the three levels up under their headings, and ::before and ::after pseudo-elements draw the branch lines. The relational selector :has() lets a parent react to the pointer or focus inside it: .tree:has(.tree-family:hover) dims every other family, and the same pattern works one level down for genera and species.

Why it extends the basics

It turns the site’s information architecture into an interactive diagram with no JavaScript, and it uses a selector (:has()) that goes well beyond the tutorials.

Key code

/* Dim every family except the one being explored */
.tree:has(.tree-family:is(:hover, :focus-within))
    .tree-family:not(:hover, :focus-within) {
    opacity: .22;
}

/* Show that family's glass card */
.tree-family:is(:hover, :focus-within) .tree-card {
    visibility: visible;
    opacity: 1;
}

Technique reference: MDN Web Docs. Project-specific HTML and CSS were written for this site.

Explore the tree on the home page

What it does and who it helps

Choose one family to show its four species, or All species to restore sixteen. The selected pill, its colour and the result count change together. Hidden cards leave the layout and keyboard order.

How it works

A native radio group supplies checked state and arrow-key behaviour. Explicit #family-name:checked general-sibling rules hide cards from other families and reveal the matching status message. Adjacent label selectors show selection and keyboard focus; CSS Grid arranges the remaining cards.

Why it extends the basics

This creates meaningful state and content filtering rather than a cosmetic hover effect. A short entrance animation is disabled for reduced-motion users.

Key code

/* Hide every card that is not in the chosen family */
#family-lauraceae:checked ~ .species-grid .plant-card:not(.lauraceae) {
    display: none;
}

/* The chosen family label becomes the filled pill */
.filter-input:checked + label {
    background-color: var(--btn-bg);
    color: var(--btn-ink);
}

Technique reference: MDN Web Docs. Project-specific HTML and CSS were written for this site.

Try the species filter

What it does and who it helps

Required fields, email formatting, name patterns and exact postcode length are checked by the browser. Labels and helpers explain the expected format. Error colours and messages appear after interaction rather than on first arrival, and valid fields receive a quiet confirmation tick.

How it works

required, maxlength, minlength, pattern and appropriate input types implement the constraints. :focus styles active editing; :user-invalid and :user-valid add post-interaction feedback. Native method="dialog" submission closes a non-modal dialog only after validation and reveals an honest local completion panel via a sibling selector.

Why it extends the basics

Several constraints, accessible guidance, non-colour error text and a privacy-preserving completion state work together. Neither persistence nor authentication is simulated.

Key code

<input id="postcode" type="text" pattern="[0-9]{5}"
       minlength="5" maxlength="5" required>

.form-group input:user-invalid ~ .field-error { display: block; }
.form-dialog[open] ~ .form-receipt { display: none; }

Technique reference: MDN Web Docs. Project-specific HTML and CSS were written for this site.

Test the enquiry form