UNIT 19 • STAGE 7 OF 7 • COMPLETE

Today

Complete the site: scroll-margin-top, scroll-driven animation, the era closing statement, and the Unit 19 teaser

Home All Units Unit 19 ← Stage 6
UNIT
STEP 1

CSS Technique: scroll-margin-top

You have a fixed navigation bar that is 64px tall. When a user clicks a nav link like href="#the-courts", the browser scrolls that element's top edge to the very top of the viewport, directly behind the nav bar. The section heading is hidden under it.

scroll-margin-top adds invisible space above an element that the browser accounts for when scrolling to it as an anchor target. Set it slightly larger than your nav height to give comfortable breathing room.

// One rule fixes anchor scrolling for the entire site /* The [id] attribute selector targets every element with an id */
/* This applies scroll-margin-top to all anchor targets at once */
section[id] {
  scroll-margin-top: 80px; /* nav is 64px, 80px gives breathing room */
}
  • scroll-margin-top does not add visual space. It is invisible offset only used by the browser when navigating to an element as an anchor target. The layout looks the same; the scroll destination changes.
  • Set it on the element that has the id attribute you're linking to, not on the nav itself.
  • The section[id] selector reads: "every <section> element that has an id attribute." This covers all your sections at once without repeating the rule. You could also write #the-courts, #the-laws, #the-nations etc., section[id] is just more efficient.
  • Full browser support: Chrome 69+, Firefox 68+, Safari 14.1+.
STEP 2

Pre-Built Feature: Scroll-Driven Animation

Scroll-driven animation ties CSS animations to scroll position rather than to time. As the user scrolls and elements enter the viewport, they animate in automatically. No JavaScript. No scroll event listeners. No Intersection Observer. Pure CSS.

This feature is in your starter code and already working. Read the declarations and understand what each one does. In a future unit you will write this from scratch, for now, the goal is to see it working and understand the pattern.

// scroll-driven animation, 4 declarations that work together @keyframes fade-in-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

.today-card {
  animation-name: fade-in-up;
  /* duration: auto means scroll position drives timing, not the clock */
  animation-duration: auto;
  animation-fill-mode: both;
  /* view() ties animation to element's position in the viewport */
  animation-timeline: view();
  /* play the keyframes as the element moves from 0% to 35% into view */
  animation-range: entry 0% entry 35%;
}
  • animation-timeline: view() creates a timeline tied to when the element enters the browser's visible area. As the user scrolls and the element comes into view, the animation plays.
  • animation-duration: auto means the scroll position drives the animation progress, there is no fixed time. The animation completes when the element has traveled the defined animation-range.
  • animation-range: entry 0% entry 35% means: start the animation when the element first enters the viewport (entry 0%) and finish it when 35% of the element has entered (entry 35%). The element reaches full opacity and position at that point.
  • animation-fill-mode: both holds the start state before animation begins and the end state after it completes, so elements don't snap back.
  • Browser support: Chrome 115+, Firefox 114+, Safari 17.2+. Older browsers show elements without animation, the content is still readable.

Why separate the animation shorthand?

Using the animation shorthand resets animation-timeline back to the default (auto, time-based). Always set animation-name, animation-duration, and animation-timeline as separate properties when using scroll-driven animations so they don't override each other.

STEP 3

Today: The State of the Era

Four cards document what is true about the Nation Rebuilding Era right now. The section background is --bg-main, alternating from My Research's --bg-section. Each card gets the scroll-driven animation from the pre-built CSS, they fade in as the user scrolls to them.

Card 1: McGirt and Reservation Status

McGirt v. Oklahoma (2020) stands. The Five Tribes of Oklahoma have reservation status confirmed by the Supreme Court. Federal and Tribal courts, not state courts, have primary criminal jurisdiction over Indians on those lands. Oklahoma v. Castro-Huerta (2022) held 5-4 that states may also prosecute non-Indians for crimes against Indians on reservations, a partial limit on McGirt's reach. But the core ruling is intact: the reservations were never disestablished. The legal principle applies beyond Oklahoma to any reservation established by treaty and never formally ended by Congress.

Card 2: ICWA at Work

Haaland v. Brackeen (2023) settled ICWA's constitutionality 7-2. The Indian Child Welfare Act's legal foundation is intact. BIA finalized strengthened ICWA implementation regulations in 2023. Enforcement intensity can vary with administrations, but the law itself stands. The political classification framework for federal Indian legislation, reaffirmed by Brackeen, continues to protect ICWA and other federal Indian laws from equal protection challenges.

Card 3: Sovereignty and Funding

Tribal self-governance compacts and Title 638 contracts operate through annual federal appropriations. BIA and Indian Health Service funding has been chronically below treaty obligations for decades. When federal budgets face pressure, programs run through self-governance arrangements are among the first to feel it. Sovereignty is exercised through institutions. Those institutions require resources. The structural authority to self-govern and the funding to actually do it are two different questions.

Card 4: The Work Continues

None of the gains of the Nation Rebuilding Era are self-executing. Courts confirm reservation status; Tribal courts must handle the cases. Congress extends jurisdiction; Tribal police and prosecutors must exercise it. Nations write new constitutions; those constitutions must govern effectively. The Harvard Project's core finding applies here: sovereignty without capable institutions does not produce outcomes. Tribal nations are building those institutions right now. The era is not over.

STEP 4

The Era Closing Statement and Unit 19 Teaser

After the four Today cards, the site closes with two final elements. The era closing statement recaps what the eight-unit series has documented. The Unit 19 teaser looks forward: the era sites are finished, and the next unit assembles them all into a single multi-page publication.

Both elements use the same scroll-driven animation, they fade up as the user scrolls to them. The era closing statement uses a full-width centered layout with large Playfair Display type. The Unit 19 teaser uses a two-column grid showing the era series pills on one side and the teaser text on the other.

Unit 19 Complete. Eight eras. Eight sites. One series.

You have built a complete Nation Rebuilding Era website across seven stages. Scroll-snap, text-wrap: balance, gradient text, grid spanning, CSS counters, scroll-margin-top, and scroll-driven animation. Each technique is in use in a site that documents real history. In Unit 19, all eight era sites become one.

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