The Foundation

Unit 20: The Federal Indian Policy Series

You built eight research sites. Each one documents a federal Indian policy era from 1778 to the present. Each one uses the same Prussian blue design system, the same typography, the same archival voice. They look and feel like they belong together because they were designed as a series from the beginning.

Unit 20 is the capstone of that series. You are building a homepage that presents all eight sites as one publication: The Federal Indian Policy Series. This is the page you share with family, classmates, and anyone who wants to understand the full arc of federal Indian policy from the Treaty-Making Era to the Nation Rebuilding Era.

What Are Design Tokens?

Look at the :root block at the top of the starter code. You have seen this block in every unit from 11 to 18. Every custom property in that block is a design token: a named variable that holds a visual decision.

• --bg-main: #0D1B2A, the decision that "page backgrounds are Ink Black"
• --text-light: #E0E1DD, the decision that "primary text is Alabaster"
• --gold: #778DA9, the decision that "the series accent is Lavender Grey"

When you use background: var(--bg-main) instead of background: #0D1B2A, you are referencing the token instead of the raw value. That matters when you have nine files that all need the same decision.

Right now, each of your eight era sites defines its own :root block. In Stage 7 you will move those tokens into one shared tokens.css file and link all nine pages to it. For now, understand what a token is. Every --custom-property you have used since Unit 01 has been a token, you were already thinking this way.

Build the Nav

The homepage nav is different from the era unit navs. Instead of linking to sections within the page, it links to all eight era sites. Eight links is a lot for a small screen. The solution is overflow-x: auto, which lets the link list scroll horizontally when it does not fit.

The two scrollbar rules do the same thing for different browsers. scrollbar-width: none is the Firefox standard. ::-webkit-scrollbar { display: none } targets Chrome and Safari. You write both so the scrollbar stays hidden everywhere but the list is still scrollable with a finger or trackpad.

The nav HTML has two elements: a brand link on the left and the era list on the right. The brand link should be flex-shrink: 0 so it never shrinks as the list takes up space, and white-space: nowrap so the title stays on one line.

Build the Hero

The homepage hero is centered, not two-column. This is intentional, the era sites are documentary records. The homepage is a publication cover. It should feel quieter and more editorial than the era heroes.

• Series label: "A Digital Research Publication", small caps, muted color, sets the frame
• Title: "The Federal Indian Policy Series", large Playfair Display, the primary identifier
• Byline: "Researched and Written by [Your Name]", replace the placeholder with your actual name
• Description: 2 to 3 sentences describing what the series is. What eight eras does it cover? What is its purpose?
• Divider: a thin horizontal line that marks the end of the hero before the series entries begin

The max-width: 760px keeps the hero from getting too wide on large screens. Long centered text on a wide viewport is hard to read. A narrower column keeps the reading comfortable.