🖥️ Desktop Layout Design (> 1024px)

1. The 3-Column "Holy Grail" Layout

A classic pattern for information-heavy sites like Psilobase. The three-column layout separates navigation, primary content, and supplementary material into distinct visual zones that desktop users can scan at a glance.

When implementing this for educational content about psilocybin, consider the reader's state of mind. Users researching harm reduction may be anxious or processing complex feelings. A clear, predictable layout reduces cognitive load and signals that the site is well-organised and trustworthy.

Left Column — Persistent Navigation

A sticky left sidebar works well for deep content hierarchies. On Psilobase this might contain the section navigation (Species, Safety, Growing, Microdosing, Research) with the current section highlighted. Keep it at 220–260px wide to leave adequate room for the article column.

Centre Column — Primary Reading Area

The article column is the most important. Constrain it to 680–800px for comfortable reading even on a wide monitor. This is approximately 65–75 characters per line — the typographic sweet spot for sustained reading.

Right Column — Context and Navigation

A right sidebar (280–320px) can hold a sticky table of contents for long articles, related articles, a dosage quick-reference card, or a safety checklist. These elements complement the article without competing with it.

2. Managing Whitespace

Just because you have space doesn't mean you should fill it. Use max-width on your main content container to prevent lines from becoming too long. This is one of the most common desktop layout mistakes: text spanning 1400px is almost unreadable.

.main-content {
  max-width: 800px;    /* Optimal reading width */
  margin: 0 auto;      /* Center within its column */
  padding: 0 24px;     /* Breathing room on the sides */
}

/* Three-column wrapper */
.page-layout {
  display: grid;
  grid-template-columns: 250px minmax(0, 800px) 300px;
  gap: 40px;
  max-width: 1400px;
  margin: 0 auto;
  padding: 40px 20px;
}

Intentional Whitespace vs. Wasted Space

• Intentional: Generous padding around section headings, breathing room between cards, clear visual separation between sidebar and content.
• Wasted: A single narrow content column centred on a 1920px monitor with nothing filling the flanks. Either add sidebar columns or use a wider max-width.
• Decorative: Large background images or patterns in the margins can make whitespace feel purposeful rather than accidental.

3. Hover Effects and Interactive States

Desktop users have a mouse cursor, which means you can use hover states to reveal information, signal interactivity, and add personality. Hover effects should be:

• Immediate but smooth: Use CSS transitions of 150–250ms. Longer feels sluggish; instant feels abrupt.
• Reversible: Remove all hover styling when the cursor leaves. Never leave hover state "stuck".
• Meaningful: Only add hover effects to elements that are interactive. Static text should not change on hover.

Common Hover Patterns on Psilobase

• Species cards: Lift with translateY(-4px) and deepen the box shadow. Signals the card is clickable.
• Navigation links: Underline slides in from left to right using a CSS pseudo-element animation.
• Buttons: Darken background by 10–15%, add inner glow with box-shadow.
• Tooltips: A tooltip appears on hover over technical terms (e.g., "psilocin", "serotonin receptor"). Use position: absolute within a position: relative parent, revealed via opacity transition.
• Image galleries: A zoom-in effect (transform: scale(1.03) on the img inside an overflow: hidden container) signals enlargeability.

/* Card hover — lift effect */
.species-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.species-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}

/* Navigation underline slide-in */
.nav-link {
  position: relative;
  text-decoration: none;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 2px;
  background: currentColor;
  transition: width 0.2s ease;
}
.nav-link:hover::after { width: 100%; }

4. Sticky Elements on Desktop

Desktop layouts have room for multiple sticky elements. Use them strategically to keep key navigation and context always accessible.

Sticky Header

A compact sticky header that shrinks on scroll keeps the logo and main navigation accessible. On desktop this can include a search bar and the primary nav links. Shrink it from 80px to 56px on scroll using a class added via JavaScript and a CSS transition on height/padding.

Sticky Sidebar Table of Contents

For long articles (anything over 1,500 words), a sticky right-sidebar table of contents dramatically improves navigation. Active sections are highlighted as the user scrolls using an Intersection Observer.

Sticky "Back to Top" Button

Appears after the user scrolls 600–800px. A simple fixed-position button in the bottom-right corner. Keep it small (44×44px) and unobtrusive — it should help without blocking content.

/* Sticky right sidebar */
.sidebar-toc {
  position: sticky;
  top: 80px;          /* Below the sticky header */
  max-height: calc(100vh - 120px);
  overflow-y: auto;
}

/* Active TOC item */
.toc-link.active {
  color: var(--color-primary);
  font-weight: 600;
  border-left: 3px solid var(--color-primary);
  padding-left: 12px;
}

5. Desktop Typography Considerations

Desktop screens are typically viewed at arm's length (50–70 cm), unlike phones held at 25–35 cm. This means you can use slightly larger base font sizes without feeling overwhelming.

• Base font size: 17–18px for body copy. This reads comfortably at arm's length.
• Heading hierarchy: H1 at 2.25–2.75rem, H2 at 1.75–2rem, H3 at 1.25–1.5rem. Desktop allows more dramatic heading sizes than mobile.
• Line length: Strictly enforce 65–75 characters per line using max-width: 65ch or a fixed pixel width on the text column.
• Paragraph spacing: 1.5–2× the line height between paragraphs. On desktop, users read longer stretches without losing their place if paragraphs are well-separated.

6. CSS Implementation

/* Desktop layout — applied at ≥ 1024px */
@media (min-width: 1024px) {
  .page-wrapper {
    display: grid;
    grid-template-columns: 250px 1fr 300px;
    grid-template-areas: "sidebar-left content sidebar-right";
    gap: 40px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
  }

  .sidebar-left  { grid-area: sidebar-left; }
  .main-content  { grid-area: content; max-width: 800px; }
  .sidebar-right { grid-area: sidebar-right; }

  /* Sticky sidebar */
  .sidebar-left,
  .sidebar-right {
    position: sticky;
    top: 80px;
    align-self: start;
  }
}

/* Hover effects — desktop only */
@media (hover: hover) {
  .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  }
}