📋 List Styles Design Guide

Lists (unordered <ul> та ordered <ol>) є fundamental HTML elements для organizing information hierarchically. Custom list styling transforms boring bullet points into engaging, visually distinctive content markers що align з brand aesthetics. Для mushroom education site, thoughtfully designed lists improve readability у cultivation guides (step-by-step processes), safety checklists, species characteristics, та research findings. Цей comprehensive guide охоплює CSS techniques для custom markers, nested lists, icon integration, spacing optimization, та accessibility maintenance.

🎨 List Style Variations

Style 1: Custom Colored Bullets

  • Psilocybe cubensis (Golden Teacher strain)
  • Optimal temperature: 75-81°F (24-27°C)
  • Relative humidity: 90-95% during fruiting
  • First flush typically most productive
  • Spore prints best taken від mature caps

Style 2: Checkmark Icons (Safety Checklist)

  • Start з low dose (1-2g dried for beginners)
  • Ensure comfortable, safe environment
  • Have trusted trip sitter present
  • Clear schedule (8+ hours uninterrupted)
  • Avoid mixing з other substances
  • Skip if family history of psychosis

Style 3: Themed Icons (Mushroom Emoji)

  • P. cubensis — Most common, beginner-friendly
  • P. azurescens — Highly potent, outdoor cultivation
  • P. semilanceata — Liberty Cap, wild-growing European species
  • P. cyanescens — Wavy Cap, wood-loving species

Style 4: Custom Numbered Circles

  1. Sterilize substrate using pressure cooker (90 minutes, 15 PSI)
  2. Inoculate sterile jars з spore syringe у laminar flow hood
  3. Incubate at 75-80°F until full colonization (2-4 weeks)
  4. Birth colonized cakes та place у fruiting chamber
  5. Maintain high humidity та provide fresh air exchange
  6. Harvest когда veils break, before spore drop

Style 5: Nested Lists з Different Markers

  • Cultivation Phases
    • Preparation (sterilization, setup)
    • Inoculation (spore introduction)
    • Colonization (mycelium growth)
    • Fruiting (mushroom formation)
  • Safety Protocols
    • Set та setting considerations
    • Dosage guidelines
    • Integration practices

Style 6: Bordered Card-Style Lists

  • Temperature: Maintain 75-81°F (24-27°C) throughout fruiting phase
  • Humidity: Keep relative humidity між 90-95% using perlite або humidifier
  • Light: 12-hour light cycle sufficient (indirect sunlight або LED)
  • Air Exchange: Fresh air 4-6 times daily prevents contamination

💻 CSS Implementation

1. Custom Colored Bullets:

/* Remove default bullets, add custom */
.custom-bullets {
  list-style: none;
  padding-left: 0;
}

.custom-bullets li {
  padding-left: 30px;
  margin: 12px 0;
  position: relative;
}

.custom-bullets li::before {
  content: "●"; /* або "■", "▶", "◆" */
  color: #93a5cf;
  font-size: 1.2em;
  position: absolute;
  left: 0;
  top: 0;
}

2. Icon Lists (Unicode або Emoji):

/* Checkmarks */
.checkmarks li::before {
  content: "✓";
  color: #66bb6a;
  font-weight: 700;
}

/* X marks */
.xmarks li::before {
  content: "✗";
  color: #dc3545;
}

/* Emoji markers */
.emoji-list li::before {
  content: "🍄"; /* або any emoji */
  font-size: 1.2em;
}

3. Custom Numbered Circles:

/* Counter-based numbering */
.custom-numbers {
  list-style: none;
  counter-reset: item-counter;
  padding-left: 0;
}

.custom-numbers li {
  padding-left: 45px;
  margin: 16px 0;
  position: relative;
  counter-increment: item-counter;
}

.custom-numbers li::before {
  content: counter(item-counter);
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  background: linear-gradient(135deg, #93a5cf, #e4efe9);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.9em;
}

4. Nested Lists:

/* Parent list */
.nested-list > li::before {
  content: "■";
  color: #93a5cf;
}

/* Child list (different marker) */
.nested-list ul li::before {
  content: "◆";
  color: #a5b8d4;
  font-size: 0.8em;
}

/* Third level */
.nested-list ul ul li::before {
  content: "•";
  font-size: 0.7em;
}

5. Image-Based Markers:

/* Using background image */
.image-markers li {
  padding-left: 35px;
  background: url('/icons/mushroom.svg') no-repeat left 3px;
  background-size: 20px 20px;
}

📏 Spacing & Typography

Vertical Spacing

  • List margin: 20-25px від paragraphs
  • Item spacing: 10-15px між items
  • Nested indent: 25-35px
  • Tight lists: 6-8px (technical data)

Marker Positioning

  • Left padding: 25-35px (room для marker)
  • Marker position: left: 0
    • marker
  • Vertical align: top: 0 або top: 3px
  • Size: 1.0-1.3em relative

Font Adjustments

  • Size: Slightly smaller (0.95em) okay
  • Line-height: 1.6-1.8
  • Weight: Normal (400) або medium (500)
  • Color: Slightly lighter than body для hierarchy

Accessibility

  • ✅ Semantic <ul>/<ol> maintained
  • ✅ Screen readers announce list structure
  • ✅ Color не єдиний indicator
  • ✅ Sufficient contrast (4.5:1 minimum)

🍄 Mushroom Hub Use Cases

Cultivation Instructions (Ordered List):

<ol class="cultivation-steps">
  <li>Sterilize substrate (90 min, 15 PSI)</li>
  <li>Inoculate jars у laminar flow hood</li>
  <li>Incubate at 75-80°F (2-4 weeks)</li>
  <li>Birth cakes, place у fruiting chamber</li>
</ol>

Safety Checklist (Checkmarks):

<ul class="safety-checklist">
  <li>Start з low dose (1-2g)</li>
  <li>Ensure safe, comfortable setting</li>
  <li>Have trusted trip sitter</li>
</ul>

Species Characteristics (Custom Icons):

<ul class="species-list">
  <li><strong>Cap:</strong> 2-8cm, golden-brown</li>
  <li><strong>Stem:</strong> 5-15cm, white, bruises blue</li>
  <li><strong>Spores:</strong> Purple-brown print</li>
</ul>

✅ List Styling Checklist

Implementation Checklist:

  • ☐ Semantic HTML (<ul>/<ol>) maintained
  • ☐ Custom markers visually distinct
  • ☐ Proper padding-left (25-35px) для marker space
  • ☐ Consistent spacing між items (10-15px)
  • ☐ Nested lists clearly indented (25-35px deeper)
  • ☐ Marker color complements brand
  • ☐ Marker size appropriate (not overwhelming)
  • ☐ Color contrast sufficient (WCAG AA)
  • ☐ Screen readers announce list structure properly
  • ☐ Responsive: Adjusted spacing на mobile
  • ☐ Hover states (if interactive)
  • ☐ Tested across browsers