UNIT 16 • STAGE 7 OF 7

Today

Build the Today section connecting the IRA era to present-day work, add your own reflection, and complete the site footer

Home All Units Unit 16 ← Stage 6 Unit Complete ✓
UNIT
STEP 1

Stage 7: Today

Stage 7 is the final stage of Unit 16. It adds two things to your era site: the Today section, which connects the Indian Reorganization Era to work happening in Indian Country right now, and the site footer, which closes the page with navigation links and attribution.

The Today section follows the same pattern you have built in Units 11 through 14. Three content cards document ongoing consequences and active responses. A reflection card holds your own writing about how this era connects to the present. Together they close the historical argument with a clear forward-looking note: this is not over, and people are working on it.

Unit 16 is the last era unit before the capstone

Units 11 through 15 cover the five eras of federal Indian policy: Removal, Reservation, Allotment, Reorganization, and Termination. Unit 18 is the capstone, where you bring the full arc of this history into a single project. The five era sites you have built are the archive you will draw from. Make sure Today is specific and grounded: what you write here will matter when you return to it for the capstone.

STEP 2

The Today Cards CSS

The Today section uses a three-column card grid. Each card has a "today-tag" label that identifies the type of connection: Land, Governance, or Federal Trust. The cards follow the same base pattern as all cards in this site, with one addition: the today-tag uses a small colored label above the card title.

// Three-column grid: each card covers one present-day connection. .today-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 48px;
}

.today-card {
  background: var(--bg-card);
  border: 1px solid var(--gold-border);
  border-radius: 12px;
  padding: 32px 28px;
}

.today-tag {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin-bottom: 12px;
}
  • The today-tag is the same visual element as the section-label and source-type patterns you have already used. A small all-caps gold label above the main title. Applied here it signals the category of present-day connection before the reader reaches the card title.
  • repeat(3, 1fr): Three equal columns. Three cards, one per column. The same column repeat syntax you used in the policy-grid (four columns) and land-grid (three columns), applied to a different count.
STEP 3

The Site Footer CSS

The site footer is the final CSS pattern of Unit 16. It is a three-column grid inside a bordered footer element: a wide brand column on the left and two narrower navigation columns on the right. Below that, a thin divider separates a bottom row with a left-aligned site name and right-aligned copyright.

Footer outer and inner structure

// The footer sits below the last section, bordered at the top. .site-footer {
  background: var(--bg-section);
  border-top: 1px solid var(--gold-border);
  padding: 64px 48px 48px;
}

.footer-inner {
  max-width: 1160px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
  • border-top: 1px solid var(--gold-border): A top border on the footer creates a visible horizontal boundary between the last section and the footer. The same border pattern used for the nav at the top of the page, applied at the bottom.
  • grid-template-columns: 2fr 1fr 1fr: Asymmetric three-column grid. The brand column is twice as wide as each nav column. Total: 2 + 1 + 1 = 4 units. The brand column takes half the available width, each nav column takes a quarter. This is the same proportional thinking as the 1fr 2fr reform callout, applied in reverse to a footer.
  • padding: 64px 48px 48px: Three-value shorthand: 64px top, 48px left/right, 48px bottom. The extra top padding creates breathing room between the border and the first footer content.

Footer bottom row

// A thin divider and a flex row for site name and copyright. .footer-bottom {
  max-width: 1160px;
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid var(--gold-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
  • justify-content: space-between: The two items in the bottom row (site name on the left, copyright on the right) are pushed to opposite ends of the container. This is the standard footer bottom-row pattern: left attribution, right legal note, maximum visual separation.
  • The second border-top inside the footer creates a second divider between the main footer columns and the bottom row. This is the same pattern as the outer footer border-top, applied at a smaller scale within the footer itself. One border separates the footer from the page. Another border separates the bottom row from the footer content above it.

Two borders, two roles

The outer .site-footer has border-top on the element itself. The inner .footer-bottom has a second border-top on the inner container. Both use the same var(--gold-border) value. The same visual element used twice at different levels of the layout to mark two distinct transitions: page to footer, and footer content to footer bottom. Recognizing when to reuse a pattern versus when to introduce a new one is a core design judgment.

STEP 4

Fill In Your Content

Find the <!-- REPLACE: ... --> comments in the editor.

  • Section intro: 2 to 3 sentences connecting the Indian Reorganization Era to the present. What from this era is still unresolved? What work is underway?
  • Today cards: Three cards are pre-written on land consolidation, constitutional reform, and the Cobell Settlement legacy. If your research found more specific or more current information about any of these, update the card content.
  • Reflection card: Your own writing about how this era connects to your present. This is not a summary of the history. It is your own analysis: what does knowing this history change, challenge, or clarify for you?
  • Footer nav links: The footer navigation links point to the same section IDs used throughout the site. Verify the href values match your actual section IDs.

The reflection card is not a conclusion

A conclusion summarizes what was already said. The reflection card is something different: it is your position. What do you see differently now? What question does this era leave you with? What work matters to you as a result of this research? Write in first person. Be specific. Vague reflection ("This history is important and we should remember it") is less useful than a specific observation or question.

STEP 5

Unit 16 Complete

Your Indian Reorganization Era site is built. It documents the end of allotment and the beginning of a new federal framework for Tribal governance. It shows what the IRA did and what it did not do. It situates specific Tribal nations in the regional context of that era. It connects the 1934 policy to land status and governance questions that remain open today. And it holds your own research and analysis throughout.

This is the fifth era site in the sequence. Units 11 through 15 now cover: Removal (1830-1850), Reservation (1851-1887), Allotment (1887-1934), Indian Reorganization (1934-1953), and Termination (1953-1968). Each site documents one major shift in federal policy toward Tribal nations. Each site connects that shift to its lasting consequences. Together they form the research archive you will bring to the capstone.

Unit 16 Complete!

Unit 16 covers the Termination Era (1953–1968): the federal policy of withdrawing recognition from Tribal nations, terminating federal trust responsibilities, and relocating Tribal citizens to urban areas. The Termination Era ended the reorganization framework and introduced a different set of consequences that continue to affect Tribal nations today.

Code Editor
Live Preview
Relentless Feather © 2026 Relentless Feather. All rights reserved.