UNIT 15 • STAGE 7 OF 7

Today

Close the unit with a then/now comparison and the era series footer

← Stage 6 Unit 15
UNIT
STEP 1

Closing the Unit

Stage 7 adds the Today section and the era series footer. The Today section uses a then/now comparison pattern: four topic pairs, each with a "Then" card documenting conditions at the end of the allotment era (1934) and a "Now" card documenting current status. The footer shows the four era units you have built , Units 11 through 14 , with Unit 15 marked as current.

The new CSS in Stage 7 is the directional top-border accent. You have used border-left for the personal research card pattern. Here, border-top does a different job: it signals time direction. The "Then" cards use a muted color top border; the "Now" cards use the gold top border. Same mechanism, different meaning.

The Cobell Settlement (2010)

Elouise Cobell, a Blackfeet Nation member and financial professional, filed a class action lawsuit in 1996 on behalf of approximately 500,000 Individual Indian Money account holders. The lawsuit documented the federal government's mismanagement of trust funds originating from the allotment era , funds that should have been paid to allottees and their descendants from leases of allotted land. After 14 years of litigation, the Obama administration settled the case for $3.4 billion. Of that, $1.9 billion went directly to account holders; $1.5 billion was allocated for a Tribal land consolidation fund to buy back fractionated allotment interests and return land to Tribal ownership. The settlement is the largest class action settlement against the federal government in U.S. history and is a direct consequence of the allotment policy.

STEP 2

New CSS: The Then/Now Pair

The then/now pair uses a two-column grid with two differently styled cards. The visual distinction between "then" and "now" is communicated entirely through the top border color.

// Each pair: a two-column grid with one then-card and one now-card. .then-now-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}
.then-card {
  background: var(--bg-section);
  border: 1px solid var(--gold-border);
  border-top: 3px solid var(--text-muted);
  border-radius: 0 0 12px 12px;
  padding: 28px 24px;
}
.now-card {
  background: var(--bg-card);
  border: 1px solid var(--gold-border);
  border-top: 3px solid var(--gold);
  border-radius: 0 0 12px 12px;
  padding: 28px 24px;
}
  • border-top: 3px solid var(--text-muted): When you write border-top after border, it overrides only the top side. The other three sides keep the 1px solid var(--gold-border) from the border rule. This is CSS specificity in order: a later, more specific rule overrides an earlier, less specific one.
  • border-radius: 0 0 12px 12px: The top corners are sharp (0) because the colored border provides the visual edge there. The bottom corners are rounded. The pattern mirrors Stage 5's border-radius: 0 12px 12px 0 logic: round where the card floats free, sharp where the border anchors it.
  • var(--text-muted) vs var(--gold): The then-card top border uses the darkest text color in the system , the dimmest. The now-card uses gold. The color contrast alone signals past vs. present without any label.

The card header inside each card

// Era label and topic title inside the card. .card-era {
  font-size: 0.625rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.now-card .card-era { color: var(--gold); }
.card-topic {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 14px;
}
.then-card p, .now-card p { font-size: 0.9375rem; line-height: 1.72; color: var(--text-dim); margin-bottom: 10px; }
.then-card p:last-child, .now-card p:last-child { margin-bottom: 0; }
  • .now-card .card-era { color: var(--gold); }: A descendant selector. It targets .card-era only when it is inside a .now-card. This overrides the base .card-era color rule for now-cards only. You set a default, then specialize it based on context. This is the same principle as .nav-links a:hover from Stage 1.
STEP 3

Your Task

The Today section is pre-built with four then/now pairs. The pairs document: the land base, language, Tribal governance, and the boarding school record.

  • Read all four pairs. They are factual and pre-sourced. You do not need to rewrite them.
  • Find the <!-- ADD YOUR NATION --> comment after the four pairs. Add a fifth then/now pair documenting your nation specifically: what was the land base in 1934, and what is it today? Were there boarding schools in your region, and what is the current language status for that nation? Use your Stage 5 and Stage 6 research.
  • Read the era series footer at the bottom. The four era units , 11 through 14 , are listed. Unit 15 is marked class="era-unit current". This is the finished footer.

The fifth pair is yours to write

The fifth then/now pair should be specific to the nation you researched. Use numbers where you have them. "Then: The [Nation] Reservation held [X] acres in 1934 after allotment. Now: The current Tribal land base is approximately [X] acres, with ongoing land-into-trust efforts." Specificity is what makes a research site different from a general reference.

STEP 4

Unit 15 Complete

You have built a seven-section research site documenting the Allotment and Assimilation era from 1887 to 1934. The site covers: the design system, section structure, four policy cards, four land-loss stat callouts with the display-scale number pattern, a boarding school section with a featured card and fact list, a nations section with a resistance callout and personal research card, a source list, and a then/now closing comparison.

The CSS you have written across this unit: the Prussian blue design system, two-column and four-column grids, the clamp() function at display scale, the horizontal flex fact item pattern, asymmetric grid columns (1fr 2fr), border-left as a personal accent, border-top as a temporal signal, and the source card as a research documentation tool.

The era series so far

Unit 11 , Indigenous Nations. Unit 12 , The Treaty Era. Unit 13 , The Reservation System. Unit 15 , Allotment and Assimilation. Each unit covers one federal Indian policy era and builds on the same CSS design system introduced in Unit 11. The next era , the Indian New Deal through Termination and Self-Determination , continues the record from 1934 forward.

Unit 15 Complete!

Your site documents the Allotment and Assimilation era: 90 million acres transferred, 408 boarding schools, the resistance of Red Lake Nation, and the Indian Reorganization Act that ended 47 years of federal allotment policy. The site is yours. The research is documented. The next unit begins from here.

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