📏 Responsive Breakpoints Strategy

1. Why Breakpoints Matter for Psilobase

Psilobase's content ranges from short species identification keys (best scanned quickly on a phone) to lengthy research article summaries (often read on a laptop with notes open alongside). The breakpoint system must serve these radically different reading contexts. A single rigid layout fails users on either end of the spectrum.

The principle behind good breakpoint design: let the content dictate the breakpoints, not the device. Rather than targeting specific devices (which change every year), target the widths at which your content naturally becomes uncomfortable — where lines become too wide, cards become too narrow, or the sidebar stops fitting.

2. The Breakpoint System

3. CSS Implementation (Mobile-First)

Psilobase uses a mobile-first approach. Base styles (outside any media query) apply to the smallest screens. Media queries using min-width progressively enhance the layout for larger screens. This approach means the smallest, most constrained layout is the default — browsers on limited devices don't have to parse and then override desktop styles.

/* === BASE STYLES — Mobile / XS (< 576px) === */
.container {
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
}

.card-grid {
  display: grid;
  grid-template-columns: 1fr;   /* Single column */
  gap: 16px;
}

nav .nav-menu { display: none; }  /* Hide desktop nav */
.nav-toggle   { display: block; } /* Show hamburger */

/* === SM — Large phones, small tablets (≥ 576px) === */
@media (min-width: 576px) {
  .container { max-width: 540px; margin: 0 auto; }

  .card-grid {
    grid-template-columns: 1fr 1fr;  /* 2 columns */
    gap: 20px;
  }
}

/* === MD — Tablet (≥ 768px) === */
@media (min-width: 768px) {
  .container { max-width: 720px; }

  nav .nav-menu { display: flex; }  /* Show nav items */
  .nav-toggle   { display: none; }  /* Hide hamburger */

  .sidebar { display: block; }      /* Show sidebar */

  .card-grid { grid-template-columns: repeat(3, 1fr); }
}

/* === LG — Desktop (≥ 1024px) === */
@media (min-width: 1024px) {
  .container { max-width: 1100px; }

  .page-layout {
    display: grid;
    grid-template-columns: 240px 1fr 280px; /* 3-column */
    gap: 40px;
  }

  html { font-size: 17px; }
}

/* === XL — Wide screens (≥ 1440px) === */
@media (min-width: 1440px) {
  .container { max-width: 1320px; }

  .card-grid { grid-template-columns: repeat(4, 1fr); }

  html { font-size: 18px; }
}

4. Breakpoints Applied to Psilobase Components

Species Cards Grid

• XS (<576px): 1 card per row — full-width card with photo top, text below.
• SM (≥576px): 2 cards per row — photos are smaller, text is concise.
• MD (≥768px): 3 cards per row — standard grid layout.
• LG (≥1024px): 3 cards per row with wider container — more whitespace.
• XL (≥1440px): 4 cards per row.

Article Layout

• XS–SM: Full-width single column. No sidebar. TOC collapses to an expandable drawer.
• MD (≥768px): Article + right sidebar for summary card. TOC in sidebar.
• LG (≥1024px): Left nav + Article + Right sidebar with sticky TOC. Maximum reading comfort.

Navigation Bar

• XS–SM: Logo + hamburger menu icon only. Menu opens as full-screen overlay.
• MD (≥768px): Logo + up to 5 top-level nav items. Remaining items in "More" dropdown.
• LG (≥1024px): Full navigation bar with all primary links and optional search bar.

5. Beyond Width: Other Media Features

Breakpoints based on viewport width are the foundation, but modern responsive design also uses other media features:

Input Method: hover and pointer

/* Only enable hover effects when a mouse is present */
@media (hover: hover) and (pointer: fine) {
  .card:hover { transform: translateY(-4px); }
  .nav-item:hover .dropdown { display: block; }
}

/* Touch-optimised elements for coarse pointers (fingers) */
@media (pointer: coarse) {
  .filter-chip { min-height: 44px; padding: 0 16px; }
}

User Preferences: prefers-reduced-motion

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Dark Mode: prefers-color-scheme

/* System-level dark mode */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #1a1a1a;
    --color-text: #e2e8f0;
    --color-surface: #2d2d2d;
  }
}

Orientation

/* Adjust layout for landscape orientation on narrow screens */
@media (max-height: 500px) and (orientation: landscape) {
  /* Phone in landscape — very little vertical space */
  .hero { min-height: 200px; }   /* Reduce hero height */
  .sticky-header { height: 48px; }  /* Compact header */
}

6. Common Layout Patterns at Each Breakpoint

• Content grids: 1 column (XS) → 2 columns (SM) → 3 columns (MD/LG) → 4 columns (XL).
• Page sidebar: Moved to bottom or hidden (XS/SM) → Right sidebar (MD) → Two sidebars (LG+).
• Typography scale: Base 16px (XS) → 16px (SM/MD) → 17px (LG) → 18px (XL).
• Navigation: Hamburger (XS/SM) → Top nav with 5 items (MD) → Full nav with search (LG+).
• Images: Full-width (XS/SM) → 50% width (MD) → Fixed max-width (LG+).
• Dosage tables: Horizontal scroll on container (XS/SM) → Full width display (MD+).