Stage 2: Mobile First | Unit 20

UNIT

STEP 1

Mobile First: Writing CSS in Reverse

Every media query you have written before this unit used max-width. That means you wrote desktop CSS first and then used max-width breakpoints to scale down for smaller screens. That is called desktop-first.

Mobile-first is the opposite: you write the default styles for small screens, then use min-width breakpoints to layer in enhancements for wider screens. The browser reads CSS top to bottom, so whatever is outside a media query is the base. Whatever is inside a min-width query only activates when the screen is wide enough.

// Desktop-first (what you have done before) .era-entry {
flex-direction: row; /* desktop layout as default */
}
@media (max-width: 768px) {
.era-entry { flex-direction: column; }
}

// Mobile-first (what you will do in this unit) .era-entry {
flex-direction: column; /* mobile layout as default */
}
@media (min-width: 768px) {
.era-entry { flex-direction: row; }
}

Both produce the same result. The difference is which is the starting point. Mobile-first is considered the better practice because most web traffic is on phones, so phones get the fastest, leanest CSS and wider screens get extras added on top.

The breakpoints for this unit

min-width: 768px, tablets and larger: era entries switch from stacked to side-by-side layout.
min-width: 1024px, desktops: wider padding, larger era numbers, more generous spacing.

STEP 2

Add the Series Intro

Between the hero and the era entries, add a brief framing paragraph. This is where students tell the reader what the series is, in their own words. The HTML is a section with a single paragraph. The CSS gives it a left-border accent and constrains its width.

// Series intro, left border accent, full width on mobile #series-intro {
  padding: 80px 32px 0;
  max-width: 900px;
  margin: 0 auto;
}
.intro-text {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--text-dim);
  border-left: 2px solid var(--gold-border);
  padding-left: 24px;
}

STEP 3

Build the Era Entries

The core of the homepage is a list of eight era entries. Each entry presents one research site. The design is an editorial stack: a numbered list where each entry has a large faded era number, the era name, year range, a student-written summary, and an "Explore the Record" link.

// Era entries section, max-width container with padding #era-entries {
  padding: 64px 32px 120px;
  max-width: 900px;
  margin: 0 auto;
}

// Each entry, mobile: stacked column / desktop: side-by-side row .era-entry {
  display: flex;
  flex-direction: column;  /* mobile: stacked */
  gap: 16px;
  padding: 48px 0;
  border-bottom: 1px solid var(--gold-border);
}
@media (min-width: 768px) {
  .era-entry {
    flex-direction: row;  /* tablet+: side by side */
    gap: 40px;
    align-items: flex-start;
    padding: 64px 0;
  }
}

// The era number, large Playfair, very faded, fixed width on desktop .era-number {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 4.5rem;  /* mobile: smaller */
  font-weight: 900;
  color: var(--text-light);
  opacity: 0.08;  /* very faded, decorative texture */
  line-height: 1;
  flex-shrink: 0;
  user-select: none;  /* not selectable, it is decoration */
}
@media (min-width: 768px) {
  .era-number {
    font-size: 7rem;  /* desktop: larger */
    width: 140px;  /* fixed column width */
    text-align: right;
    padding-top: 4px;
  }
}

// Era name, dates, summary, and explore link .era-content { flex: 1; }
.era-dates { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; display: block; }
.era-name { font-family: 'Playfair Display', Georgia, serif; font-size: 1.75rem; font-weight: 700; line-height: 1.2; margin-bottom: 16px; }
.era-summary { font-size: 0.9375rem; line-height: 1.75; color: var(--text-dim); margin-bottom: 20px; }
.era-explore { display: inline-flex; align-items: center; gap: 8px; color: var(--gold-light); text-decoration: none; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.04em; }
.era-explore:hover { color: var(--text-light); }

Write a 1 to 2 sentence summary for each era in the placeholder comment. What is the core story of that era? What was the defining law or event? These are your words, based on your eight research sites. The reading experience should feel like a guide written by someone who actually did the research, because you did.

Stage 2 Complete!

The homepage is taking shape: hero, framing paragraph, and all eight era entries. Stage 3 introduces clamp(), fluid type that scales smoothly between mobile and desktop without needing separate font-size declarations in every media query.

Code Editor

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Federal Indian Policy Series</title>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>

/* ---- STAGE 1: Design Tokens, Nav, Hero ---- */
    :root {--bg-main:#0D1B2A;--bg-section:#1B263B;--bg-card:#0D1B2A;--text-light:#E0E1DD;--text-dim:#778DA9;--text-muted:#506070;--gold:#778DA9;--gold-light:#A8BDD0;--gold-dim:rgba(65,90,119,0.14);--gold-border:rgba(119,141,169,0.22);--rust:#415A77;}
    *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
    html{scroll-behavior:smooth;}
    body{background:var(--bg-main);color:var(--text-light);font-family:'Inter',system-ui,sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;}
    nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(13,27,42,0.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--gold-border);height:64px;display:flex;align-items:center;padding:0 32px;gap:16px;}
    .nav-brand{font-size:0.6875rem;font-weight:700;letter-spacing:0.14em;text-transform:uppercase;color:var(--gold);text-decoration:none;white-space:nowrap;flex-shrink:0;}
    .nav-eras{display:flex;gap:6px;list-style:none;overflow-x:auto;scrollbar-width:none;}
    .nav-eras::-webkit-scrollbar{display:none;}
    .nav-eras a{white-space:nowrap;color:var(--text-dim);text-decoration:none;font-size:0.75rem;font-weight:500;padding:6px 12px;border-radius:100px;border:1px solid transparent;transition:all 0.2s;}
    .nav-eras a:hover{color:var(--text-light);border-color:var(--gold-border);background:var(--gold-dim);}
    #hero{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:120px 32px 80px;max-width:760px;margin:0 auto;}
    .series-label{font-size:0.6875rem;font-weight:700;letter-spacing:0.16em;text-transform:uppercase;color:var(--text-muted);margin-bottom:24px;}
    .series-title{font-family:'Playfair Display',Georgia,serif;font-size:clamp(2.5rem,6vw,5rem);font-weight:900;line-height:1.06;letter-spacing:-0.02em;margin-bottom:28px;}
    .series-byline{font-size:0.875rem;color:var(--text-muted);letter-spacing:0.06em;text-transform:uppercase;font-weight:500;margin-bottom:32px;}
    .series-byline span{color:var(--gold);}
    .series-description{font-size:1.0625rem;line-height:1.8;color:var(--text-dim);max-width:560px;margin:0 auto 48px;}
    .hero-divider{width:48px;height:2px;background:var(--gold-border);}

/* ======================================================
       STAGE 2: Mobile First, Series Intro + Era Entries
       New concept: min-width media queries (mobile-first)
       ====================================================== */

/* -- Series Intro -- */
    #series-intro {
      padding: 80px 32px 0;
      max-width: 900px;
      margin: 0 auto;
    }
    .intro-text {
      font-size: 1.0625rem;
      line-height: 1.85;
      color: var(--text-dim);
      border-left: 2px solid var(--gold-border);
      padding-left: 24px;
    }

/* -- Era Entries -- */
    #era-entries {
      padding: 64px 32px 120px;
      max-width: 900px;
      margin: 0 auto;
    }
    .era-entry {
      display: flex;
      flex-direction: column; /* mobile: stacked */
      gap: 16px;
      padding: 48px 0;
      border-bottom: 1px solid var(--gold-border);
    }
    @media (min-width: 768px) {
      .era-entry {
        flex-direction: row; /* tablet+: side by side */
        gap: 40px;
        align-items: flex-start;
        padding: 64px 0;
      }
    }
    .era-number {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 4.5rem; /* mobile: smaller */
      font-weight: 900;
      color: var(--text-light);
      opacity: 0.08;
      line-height: 1;
      flex-shrink: 0;
      user-select: none;
    }
    @media (min-width: 768px) {
      .era-number {
        font-size: 7rem; /* desktop: larger */
        width: 140px;
        text-align: right;
        padding-top: 4px;
      }
    }
    .era-content { flex: 1; }
    .era-dates {
      font-size: 0.75rem;
      font-weight: 600;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--text-muted);
      margin-bottom: 10px;
      display: block;
    }
    .era-name {
      font-family: 'Playfair Display', Georgia, serif;
      font-size: 1.75rem;
      font-weight: 700;
      line-height: 1.2;
      margin-bottom: 16px;
    }
    .era-summary {
      font-size: 0.9375rem;
      line-height: 1.75;
      color: var(--text-dim);
      margin-bottom: 20px;
    }
    .era-explore {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--gold-light);
      text-decoration: none;
      font-size: 0.875rem;
      font-weight: 600;
      letter-spacing: 0.04em;
    }
    .era-explore:hover { color: var(--text-light); }

</style>
</head>
<body>

<nav>
    <a href="#hero" class="nav-brand">Federal Indian Policy Series</a>
    <ul class="nav-eras">
      <li><a href="#">Treaty Making</a></li>
      <li><a href="#">Removal</a></li>
      <li><a href="#">Reservation</a></li>
      <li><a href="#">Allotment</a></li>
      <li><a href="#">New Deal</a></li>
      <li><a href="#">Termination</a></li>
      <li><a href="#">Self-Determination</a></li>
      <li><a href="#">Nation Rebuilding</a></li>
    </ul>
  </nav>

<section id="hero">
    <p class="series-label">A Digital Research Publication</p>
    <h1 class="series-title">The Federal Indian<br>Policy Series</h1>
    <p class="series-byline">
      Researched and Written by <span></span>
    </p>
    <p class="series-description">
      
    </p>
    <div class="hero-divider"></div>
  </section>

<section id="series-intro">
    <p class="intro-text">
      
    </p>
  </section>

<section id="era-entries">

<article class="era-entry">
      <span class="era-number">01</span>
      <div class="era-content">
        <span class="era-dates">1778 – 1871</span>
        <h2 class="era-name">Treaty-Making Era</h2>
        <p class="era-summary">
          
        </p>
        <a href="#" class="era-explore">Explore the Record →</a>
      </div>
    </article>

<article class="era-entry">
      <span class="era-number">02</span>
      <div class="era-content">
        <span class="era-dates">1830 – 1850</span>
        <h2 class="era-name">Removal Era</h2>
        <p class="era-summary">
          
        </p>
        <a href="#" class="era-explore">Explore the Record →</a>
      </div>
    </article>

<article class="era-entry">
      <span class="era-number">03</span>
      <div class="era-content">
        <span class="era-dates">1850 – 1887</span>
        <h2 class="era-name">Reservation System Era</h2>
        <p class="era-summary">
          
        </p>
        <a href="#" class="era-explore">Explore the Record →</a>
      </div>
    </article>

<article class="era-entry">
      <span class="era-number">04</span>
      <div class="era-content">
        <span class="era-dates">1887 – 1934</span>
        <h2 class="era-name">Allotment and Assimilation Era</h2>
        <p class="era-summary">
          
        </p>
        <a href="#" class="era-explore">Explore the Record →</a>
      </div>
    </article>

<article class="era-entry">
      <span class="era-number">05</span>
      <div class="era-content">
        <span class="era-dates">1934 – 1953</span>
        <h2 class="era-name">Indian New Deal Era</h2>
        <p class="era-summary">
          
        </p>
        <a href="#" class="era-explore">Explore the Record →</a>
      </div>
    </article>

<article class="era-entry">
      <span class="era-number">06</span>
      <div class="era-content">
        <span class="era-dates">1953 – 1968</span>
        <h2 class="era-name">Termination Era</h2>
        <p class="era-summary">
          
        </p>
        <a href="#" class="era-explore">Explore the Record →</a>
      </div>
    </article>

<article class="era-entry">
      <span class="era-number">07</span>
      <div class="era-content">
        <span class="era-dates">1968 – 1994</span>
        <h2 class="era-name">Self-Determination Era</h2>
        <p class="era-summary">
          
        </p>
        <a href="#" class="era-explore">Explore the Record →</a>
      </div>
    </article>

<article class="era-entry">
      <span class="era-number">08</span>
      <div class="era-content">
        <span class="era-dates">1995 – Present</span>
        <h2 class="era-name">Nation Rebuilding Era</h2>
        <p class="era-summary">
          
        </p>
        <a href="#" class="era-explore">Explore the Record →</a>
      </div>
    </article>

</section>

<div id="about"></div>

</body>
</html>

Live Preview