# Science Worksheet Audit — Formatting & Style Reference
## File Structure
- **Base directory:** `~/Home_School/2nd_Grade/Science/`
- **Week directories:** `Week01/`, `Week02/`, etc.
- **File naming:** `W[NN]_[Day]_[Topic].pdf`
- **Days per week:** Monday, Wednesday, Friday (3 lessons)
- **Pages per lesson:** 3 pages (consistent)
- **Conversion:** `weasyprint` (NOT xhtml2pdf) — matches original styling
---
## Page Setup
```css
@page { size: 8.5in 11in; margin: 0.5in; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Georgia', serif; color: #333; font-size: 11pt; line-height: 1.5; }
```
- **Paper:** US Letter (8.5 x 11in), 0.5in margins all sides
- **Font:** Georgia, serif, 11pt body, dark gray (#333)
- **Line height:** 1.5
---
## Color Palettes (Two Schemes)
### Legacy Scheme (Weeks 1-5)
| Element | Color | Hex |
|---------|-------|-----|
| Primary headings | Blue | `#4a6fa5` |
| Sub headings | Light blue | `#6a8fb5` |
| Reading box background | Cream | `#faf8f0` |
| Reading box border | Tan | `#c9b99a` |
| Table header background | Light blue | `#e8edf5` |
| Table borders | Blue | `#4a6fa5` |
| Body text | Dark gray | `#333` |
### Green Scheme (Weeks 6+)
| Element | Color | Hex |
|---------|-------|-----|
| H1/H3 headings | Dark green | `#2e7d32` |
| H2 subtitle | Gray | `#555` |
| Reading box background | Light green | `#e8f5e9` |
| Reading box left border | Medium green | `#43a047` |
| Table header background | Light green | `#e8f5e9` |
| Table header text | Dark green | `#2e7d32` |
| Table borders | Light green | `#c8e6c9` |
| Activity boxes | Blue | `#42a5f5` |
| Draw boxes | Blue dashed | `#42a5f5` |
| Answer lines | Light blue-gray | `#b0bec5` |
| Even table rows | Light yellow-green | `#f9fbe7` |
| Body text | Near black | `#1a1a1a` |
---
## Typography
### Legacy (W1-5)
| Element | Size | Style | Color |
|---------|------|-------|-------|
| H1 | 18pt | Bold, centered | `#4a6fa5` |
| H2 | 13pt | Italic, centered | `#6a8fb5` |
| H3 | 12pt | Bold, underline border | `#4a6fa5` |
| Body | 11pt | Normal | `#333` |
### Green Scheme (W6+)
| Element | Size | Style | Color |
|---------|------|-------|-------|
| H1 | 22px | Bold, left | `#2e7d32` |
| H2 | 13px | Italic, normal weight, left | `#555` |
| H3 | 14px | Bold, no underline | `#2e7d32` |
| Body | 12px | Normal | `#1a1a1a` |
---
## CSS Classes — Complete Reference
### Headings
```css
/* Green scheme (W6+) */
h1 { font-size: 22px; color: #2e7d32; margin-bottom: 2px; }
h2 { font-size: 13px; color: #555; font-weight: normal; font-style: italic; margin-bottom: 6px; }
h3 { font-size: 14px; color: #2e7d32; margin: 6px 0 3px; page-break-after: avoid; }
```
### Reading Box
```css
.reading-box {
/* Green scheme (W6+) */
background: #e8f5e9;
border-left: 5px solid #43a047;
border-radius: 0 8px 8px 0;
padding: 8px 12px;
margin-bottom: 6px;
font-size: 11.5px;
line-height: 1.35;
}
.reading-box p { margin-bottom: 3px; text-indent: 1em; }
.reading-box p:last-child { margin-bottom: 0; }
```
- Green left-accent bar (NOT full border)
- Paragraphs indented like a real reading passage
- `#e8f5e9` background, `#43a047` accent
### Answer Lines
```css
.answer-line { border-bottom: 1px solid #b0bec5; height: 22px; }
.answer-lines-triple .line-row { border-bottom: 1px solid #b0bec5; height: 18px; }
```
**Usage rule:**
- Questions 1-3 (short answers) → single `.answer-line`
- Question 4 (extended/essay) → `.answer-lines-triple` with 3 `.line-row` divs
- Hypothesis/explanation questions → `.answer-lines-triple`
### Vocabulary Grid (CSS Grid — W6+)
```css
.vocab-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4px;
margin-bottom: 6px;
/* NOTE: Do NOT use page-break-after: always — use explicit .page divs instead */
}
.vocab-card {
border: 2px solid #42a5f5;
border-radius: 6px;
padding: 4px 7px;
}
.vocab-card strong {
display: block;
color: #1565c0;
font-size: 12px;
margin-bottom: 2px;
}
.vocab-card .line-row {
border-bottom: 1px solid #b0bec5;
height: 16px;
}
```
- 2-column CSS grid (NOT table-based)
- Each card: term on top (bold, blue), 3 definition lines below
- **Do NOT use `page-break-after: always`** — it isolates vocab on its own page and pushes Reading Time to page 2. Use explicit `<div class="page">` wrappers for page control instead. Vocab grid + Reading Time belong together on page 1.
### Tables (Sort, Chart, Compare)
```css
table {
width: 100%;
border-collapse: collapse;
margin-bottom: 6px;
font-size: 11px;
page-break-inside: avoid; /* CRITICAL: prevents table splitting across pages */
}
th {
background: #e8f5e9;
color: #2e7d32;
padding: 3px 5px;
text-align: left;
font-size: 10.5px;
border: 1px solid #c8e6c9;
}
td { padding: 3px 5px; border: 1px solid #e0e0e0; }
tr:nth-child(even) { background: #f9fbe7; }
```
- **ALWAYS use `page-break-inside: avoid`** on tables — without this, sort tables split across pages causing orphaned rows
### Activity Box
```css
.activity-box {
border: 2px solid #42a5f5;
border-radius: 6px;
padding: 7px 10px;
margin-bottom: 6px;
}
```
- Blue bordered container for experiments, hunts, and multi-step activities
### Draw Box
```css
.draw-box {
border: 2px dashed #42a5f5;
border-radius: 6px;
height: 70px;
background: #fafafa;
margin-bottom: 6px;
}
```
- Dashed blue border, light gray fill
- Use 3-column grid for side-by-side draw boxes
### True/False (Circle Style — W6+)
```css
.circle-box {
display: inline-block;
width: 14px; height: 14px;
border: 2px solid #42a5f5;
border-radius: 50%;
margin-right: 3px;
vertical-align: middle;
}
```
- Each statement gets its own line with a circle for checking
- Format: `<span class="circle-box"></span> <strong>N.</strong> Statement`
### Word Bank (Fill-in-blank — W6+)
```css
.wordbank span {
background: #e3f2fd;
border: 1px solid #42a5f5;
border-radius: 4px;
padding: 1px 5px;
font-size: 10.5px;
margin-right: 2px;
display: inline-block;
margin-bottom: 2px;
}
```
- Blue-tinted pill-shaped tags for word bank words
### Legacy Classes (W1-5 reference)
```css
/* Legacy chart table */
.chart-table td { border: 2px solid #4a6fa5; padding: 6px; }
.chart-table td:first-child { width: 12%; font-weight: bold; text-align: center; background: #e8edf5; }
/* Legacy box container (scavenger hunt) */
.box-container { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.box { border: 2px solid #4a6fa5; border-radius: 8px; padding: 8px; width: 31%; min-height: 80px; }
/* Legacy check line (inline fill-in) */
.check-line { border-bottom: 1px solid #999; display: inline-block; width: 80px; }
/* Legacy T/F table */
.tf-table td:first-child { width: 25%; text-align: center; font-weight: bold; background: #e8edf5; }
/* Legacy journal box */
.journal-box { border: 2px solid #c9b99a; border-radius: 8px; padding: 12px; min-height: 120px; }
.journal-line { border-bottom: 1px solid #ccc; height: 26px; }
```
### Page Control
```css
/* Method 1: Explicit page divs (W6+ preferred) */
.page { width: 7.5in; min-height: 10in; position: relative; }
.page + .page { page-break-before: always; }
/* Method 2: Page break divs (legacy W1-5) */
.page-break { page-break-before: always; }
.page + .page { page-break-before: always; }
/* Critical rules — apply to both schemes */
.no-break { page-break-inside: avoid; }
h3 { page-break-after: avoid; }
table { page-break-inside: avoid; } /* Prevents sort/chart tables from splitting */
/* REMOVED: .vocab-grid { page-break-after: always; } — pushes Reading Time to page 2. Use .page divs instead. */
```
---
## Lesson Structure by Day
### MONDAY — Introduction / Reading Focus
**Legacy (W1-5) — 3 pages:**
1. **H1 Title** + **H2 Week/Day subtitle**
2. **H3 "📖 Reading Time"** → `.reading-box` passage
3. **H3 "✏️ Reading Questions"** → 4 questions (Q1-3 single line, Q4 triple lines)
4. **[PAGE BREAK]**
5. **H3 "📝 Vocabulary Grid"** → `.vocab-grid` (6 terms)
6. **H3 Activity chart** → `.chart-table` or `.sort-table`
7. **[PAGE BREAK]**
8. **H3 Hunt activity** → `.check-line` inline answers
9. **H3 Sort activity** → `.sort-table`
**Green Scheme (W6+) — 3 pages, explicit `<div class="page">` wrappers:**
1. **Page 1:** H1 + H2 → Reading → Questions (4) → Vocabulary Grid (6 cards)
2. **Page 2:** Sort Table → True/False (circles) → Draw boxes (3 columns) → Compare chart → Think questions
3. **Page 3:** Fill-in-blanks (word bank) → Matter Hunt table → Experiment → Review table
**Monday structure (correct — W13+):**
1. **Page 1:** H1 + H2 → Vocabulary Grid (6 cards) → Reading Time → Reading Questions
2. **Page 2:** Remaining activities (matching, draw, etc.)
3. **Page 3:** Fill-in-blanks → True/False → Observe → Think About It
**Page overflow troubleshooting (learned W13):**
- If a page renders to 4+ pages: check total content height. Draw boxes (160px+) and large tables are the usual culprits.
- Reduce draw-box `height` inline style or merge adjacent activity sections.
- Always verify with `pdfinfo file.pdf | grep Pages` after changes.
### WEDNESDAY — Hands-On / Experiment
1. **H1 Title** + **H2 subtitle**
2. **H3 Reading section** → `.reading-box` passage
3. **H3 Short questions** → answer lines
4. **H3 Activity** → `.box-container` scavenger hunt or experiment chart
5. **[PAGE BREAK]**
6. **H3 Sort activity** → `.sort-table`
7. **H3 Test/observation chart** → `.chart-table` with answer lines
8. **[PAGE BREAK]**
9. **H3 Drawing/creative activity** → empty bordered box
10. **H3 Extended writing** → `.answer-lines-triple`
### FRIDAY — Review / Application
1. **H1 Title** + **H2 subtitle**
2. **H3 Reading section** → `.reading-box` passage
3. **H3 Reading Questions** → Q1-3 single, Q4 triple lines
4. **[PAGE BREAK]**
5. **H3 "🔧 Best Material for the Job"** or similar chart → `.chart-table`
6. **H3 "✅ True or False"** → `.tf-table` (6 items, italic True/False)
7. **[PAGE BREAK]**
8. **H3 Design/Creative challenge** → bordered draw box + `.answer-lines-triple`
9. **H3 "📓 Science Journal"** → `.journal-box` with 3 prompts, 3 lines each
10. **H3 Week Review** → `.check-line` inline answers
---
## Emojis Used (Section Headers)
| Emoji | Context |
|-------|---------|
| 🔬 | Scientific observation, experiments |
| 🔍 | Investigation, sorting |
| 🧱 | Materials, building |
| 🌳 | Nature, textures |
| 🏗️ | Engineering, construction |
| 📖 | Reading time |
| ✏️ | Written questions |
| 📝 | Vocabulary, writing |
| 🧪 | Experiments |
| 📊 | Data/results |
| 📚 | Review |
| ✅ | True/False |
| 🔗 | Matching |
| 🧠 | Challenge questions |
| 📓 | Journal |
| ⭐ | Review/checklist |
| 🎨 | Drawing/design |
| 🎯 | Target/goal activities |
| 🙈 | Blind/sensory tests |
| 🌿 | Nature sorting |
| 🏠 | Home-based activities |
---
## HTML Structure Template
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- CSS inserted here -->
</head>
<body>
<h1>[Emoji] Lesson Title</h1>
<h2>Week [N] — [Day] | [Topic]</h2>
<h3>[Emoji] Section Title</h3>
<div class="reading-box">
<p>Reading passage with <strong>key terms</strong>...</p>
</div>
<h3>✏️ Reading Questions</h3>
<p><strong>1. Question text?</strong></p>
<div class="answer-line"></div>
<p><strong>4. Extended question?</strong></p>
<div class="answer-lines-triple">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</div>
<div class="page-break"></div>
<!-- Page 2 content -->
<div class="page-break"></div>
<!-- Page 3 content -->
</body>
</html>
```
---
## Rules & Constraints
1. **Reading Time comes first** — When a lesson has a Reading Time section and Reading Questions, they MUST appear before anything else (including Vocabulary Grid). Structure: H1 → H2 → 📖 Reading Time → ✏️ Reading Questions → then all other sections.
2. **3 pages per lesson** — enforce with explicit `<div class="page">` wrappers (NOT `.page-break` divs or `page-break-after`)
3. **No emojis in output text** — only in section headers
4. **No code blocks** in the rendered PDFs
5. **Words 3+ letters only** — no single/double letter words
6. **No Rainbow Writing** — plain text formatting
7. **Answer line spacing:** single lines for short answers, triple lines for extended/essay questions (especially Q4)
8. **Consistent 3-lesson week structure:** Monday (intro), Wednesday (hands-on), Friday (review)
9. **Vocabulary Grid belongs on page 1 but after Reading Questions** — never before Reading Time
10. **Verify page counts** — always run `pdfinfo file.pdf` after HTML changes to confirm 3 pages