My Research

Stage 6: My Research

Stage 6 is where your own work lives. Every era site you have built across Units 11 through 15 has included a My Research section. It is the same structure each time: a writing area where your analysis and synthesis go, and a source list where your citations are documented. The content changes by era. The design pattern stays the same.

The new CSS pattern for this stage is the source card flex layout. It solves a specific problem: a fixed-width label column that sits beside a body column that can hold any amount of text without pushing the label out of alignment. You have used flex before. This stage introduces two properties, flex-shrink: 0 and min-width: 0, that make flex columns behave predictably with text content of variable length.

The Source Card CSS

The source card uses a two-part flex row: a narrow, fixed-width type label on the left and an expanding body on the right. The key is that the label must never shrink, and the body must always fill the remaining space without overflowing.

Source card container

Source type label

• flex-shrink: 0: By default, flex items will shrink to fit available space. Setting this to 0 tells the label column: do not shrink under any circumstances. It will always be exactly 96px wide, regardless of how long the source title text in the body column gets.
• width: 96px: A fixed width set because flex-shrink: 0 is in place. Without flex-shrink: 0, setting a width on a flex item is a suggestion, not a guarantee, and the item can still compress.
• padding-top: 2px: A small optical adjustment. The label text and the source title are different sizes. A 2px offset brings them into visual alignment on the top edge.

Source body

• flex: 1: Shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0. The body column grows to fill all remaining space in the card row after the fixed-width label takes its 96px.
• min-width: 0: This is the less obvious property. By default, a flex item has min-width: auto, which means it will never shrink below the width of its own content. If a source title is very long, this causes the card to overflow its container rather than wrapping. Setting min-width: 0 overrides that default and allows the body to shrink, which in turn allows text to wrap normally within the column. Without it, long source titles break the layout.

The Research Writing Area CSS

The research writing area is a contained region within the My Research section where your analysis lives. It uses the --bg-section background to visually distinguish it from the surrounding page, the same way the policy section alternates backgrounds across the site.

• line-height: 1.85: Slightly more generous than the standard body line-height of 1.7. Long-form writing benefits from more breathing room between lines. The eye tracks longer horizontal runs of text more comfortably with increased leading.
• margin-bottom: 1.25em with :last-child { margin-bottom: 0 }: The em unit means 1.25 times the current font size. Spacing paragraphs in em keeps the spacing proportional to the text size. Removing the margin from the last paragraph prevents extra space at the bottom of the container.
• padding: 48px: Equal padding on all sides. Research writing needs generous whitespace to feel like a document. The 48px matches the padding used on hero-area sections, which is the most generous padding value in the design system.

Fill In Your Content

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

• Section intro: 2 to 3 sentences framing what your research covers. What is your focus within the Indian Reorganization Era? What question or theme drives your analysis?
• Research writing area: Paste from your Google Docs research paper, or write directly in the editor. This is your analysis of the era: what happened, what the consequences were, and what it means for the present. Write in paragraphs, not bullet points.
• Source cards: Three pre-built source cards are provided for the National Archives IRA document, the Indian Land Tenure Foundation, and the Smithsonian NMAI. Add your own source cards for every additional source you used. Replace the source type label, title, and metadata with your actual citation information. Source types include Government, Website, Book, Journal, Newspaper, and Archive.

Why Source Structure Matters

The source card layout does something specific: it makes the type of source immediately visible before the reader reaches the citation text. A reader scanning your source list can see at a glance whether you used government documents, Tribal nation websites, academic journals, or a mix. That visible diversity of sources tells a story about the quality of your research before the content is read.

The fixed-width label column is part of that communication. When every type label sits in the same 96px column, they align vertically. The reader's eye can scan the labels as a column, not hunt for them across inconsistently positioned text.