Miscellaneous Code Cheats and Memos

Accordion Boilerplate for Code-Driven Memos

🧾 Memo to Self: Accordion Boilerplate for Code-Driven Memos Subject: Base Template for Consistent Accordion Construction Context: Paste this scaffold into new content drops to keep structure and styles consistent. ✅ HOW TO USE – Paste the entire block into your HTML – Replace the `accordion-header` title – Assign a unique `id` to the `accordion-content` div – Insert your memo content inside the content div – Keep the `copyToClipboard(‘id’, this)` syntax intact for full functionality 📦 COPYABLE TEMPLATE:

<div class="accordion">
  <div class="accordion-header">[REPLACE WITH TITLE]</div>
  <div class="accordion-content" id="[REPLACE-WITH-UNIQUE-ID]">
    <button class="copy-btn" onclick="copyToClipboard('[REPLACE-WITH-UNIQUE-ID]', this)">Copy</button>
[INSERT MEMO CONTENT HERE — use bullets, headings, or paragraphs]
  </div>
</div>

📐 Notes: – Font: `Fira Code`, `Courier New`, or `Menlo` for code blocks – Palette: #1D3557, #457B9D, #F8FAFB – `white-space: pre-wrap` preserves formatting – Button responds visually on copy (✓ Copied! + color twinkle) – JavaScript must be loaded **once** per page

How to Create a Cheat Sheet Accordion Guide

🧾 Memo to Self: Building Cheat Sheet Accordions Subject: Creating Modular, Reusable Reference Blocks in WordPress Context: Used for internal style guides, developer notes, or step-by-step walkthroughs ✅ PRIMARY PURPOSE Create collapsible content sections that are visually integrated with our theme, modular across the site, and support a one-click copy-to-clipboard feature. 📌 COMPONENT STRUCTURE 1. **`.cheat-section` wrapper** 2. **`.accordion` container** 3. **`.accordion-header`** 4. **`.accordion-content`** 5. **`.copy-btn` button** 📐 BEST PRACTICES – Use ‘Inter’ for text, ‘Fira Code’ or ‘Courier New’ for code blocks – Use unique IDs per accordion – Load JavaScript once per page 🛠 SAMPLE USES – Typography & layout references – Workflow documentation – HTML boilerplate

Typography & Custom HTML Consistency

🧾 Memo to Self: Typography & Custom HTML Consistency Subject: Global Typography Reference for Yates Custom HTML Blocks Context: Astra Theme + Spectra Blocks (2025 Disaster Relief Page) ✅ PRIMARY OBJECTIVE Ensure full visual and typographic consistency with Spectra-generated blocks and the global site settings. 🔡 Font Families by Element: – h1: ‘Raleway’, sans-serif — 700 – h2/h3: ‘Raleway’, sans-serif — 600 – Body: ‘Inter’, sans-serif — 400 – Buttons: ‘Inter’, sans-serif — 500 📐 Font Sizes: – h1: 2.25rem (36px) – h2: 1.75rem (28px) – h3: 1.5rem (24px) – p: 1.0625rem (~17px) – Buttons: 1rem (16px) 🧱 Key Coding Rules: 1. Wrap content in max-width containers 2. Use consistent font stacks and weights 3. Buttons should use Inter 500 with soft radius 4. Links: underline + #1D3557 / hover #457B9D 5. Keep code override-resistant and scalable

Color & Tokens

:root {
  --ivory:#FAF9F6; --white:#FFFFFF;
  --charcoal:#2B2B2B; --sage:#768C76; --gold:#C8921F;
  --sand:#F2ECE4; --sage-300:#A2B5A2; --sage-700:#5A6A5A;
  --gold-300:#E2BE6C; --gold-700:#9B6D14;
  --charcoal-700:#3A3A3A; --charcoal-900:#161616; --stone:#E9E5DF;
}

Use locally to style new pages without flipping Global.

Utilities

.bg-ivory{background:var(--ivory)!important;}
.bg-sand{background:var(--sand)!important;}
.text-charcoal{color:var(--charcoal)!important;}
.btn-gold{background:var(--gold)!important;color:#1f1400!important;}
.btn-gold:hover{background:var(--gold-700)!important;color:#fff6e6!important;}
.link-sage a{color:var(--sage)!important;text-decoration-color:rgba(0,0,0,.2)!important;}
.link-sage a:hover{color:var(--charcoal)!important;text-decoration-color:var(--charcoal)!important;}

Drop these on sections/cards/buttons for instant palette consistency.

Section Template (Ivory + Sand)



  
    
      
        Section Title
      
      Short intro line.
    

    
      Body copy in charcoal with a Sage link.
      
        Primary CTA
        Secondary
      
    
  




  
    Band Title
    Use bands to set page rhythm.

AA: text stays charcoal on light backgrounds; gold/sage used for BG/CTAs.

Accessibility Quick-Check (WCAG 2.1 AA)

☑ Body text: charcoal on white/ivory (≥16–18px).
☑ Headings: charcoal; avoid gold/sage for headings on light BG.
☑ Links: sage default → charcoal hover; underlines visible.
☑ Buttons: gold BG + dark text; hover darkens for contrast.
☑ Focus: visible focus ring (keyboard test: Tab through).
☑ Images: alt text present; avoid text baked into images.
☑ Motion: keep subtle; respect prefers-reduced-motion.

Image Specs

Hero: 2400×1200 (2:1) JPG quality 70–80; lazy-load below fold.
Cards: 1200×800 (3:2) or 1600×900 (16:9) consistent per grid.
Staff portraits: 800×1000 (4:5) consistent crop/background.
Compress: TinyJPG/Squoosh; serve WebP if theme supports.