Add callouts to LocallyGrown series for enhanced readability

Applied strategic callouts across all 4 posts in the LocallyGrown series: - Info, success, warning, danger, tip, quote, and example callouts - Improved visual hierarchy and information highlighting - Better mobile readability with structured content blocks 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-09-23 10:02:52 -04:00
parent b8b663d64b
commit 8ac2a6ad8c
7 changed files with 344 additions and 68 deletions
--- a/assets/css/_callouts.scss
+++ b/assets/css/_callouts.scss
@@ -0,0 +1,185 @@
+// Callout blocks for important information
+.callout {
+  margin: 1.5rem 0;
+  padding: 0;
+  border-radius: 0.5rem;
+  border-left: 4px solid;
+  background-color: rgba(255, 255, 255, 0.05);
+
+  .callout-title {
+    padding: 0.75rem 1rem;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+
+    .callout-icon {
+      font-size: 1.2em;
+      line-height: 1;
+    }
+  }
+
+  .callout-content {
+    padding: 1rem;
+
+    > *:first-child {
+      margin-top: 0;
+    }
+
+    > *:last-child {
+      margin-bottom: 0;
+    }
+
+    p {
+      margin: 0.5rem 0;
+    }
+
+    ul, ol {
+      margin: 0.5rem 0;
+      padding-left: 1.5rem;
+    }
+
+    code {
+      background-color: rgba(0, 0, 0, 0.2);
+      padding: 0.125rem 0.25rem;
+      border-radius: 0.25rem;
+    }
+
+    pre {
+      background-color: rgba(0, 0, 0, 0.3);
+      padding: 0.75rem;
+      border-radius: 0.25rem;
+      overflow-x: auto;
+    }
+  }
+}
+
+// Note - Default
+.callout-note {
+  border-left-color: #6b7280;
+  background-color: rgba(107, 114, 128, 0.1);
+
+  .callout-title {
+    color: #d1d5db;
+    background-color: rgba(107, 114, 128, 0.15);
+  }
+}
+
+// Tip
+.callout-tip {
+  border-left-color: #fbbf24;
+  background-color: rgba(251, 191, 36, 0.1);
+
+  .callout-title {
+    color: #fef3c7;
+    background-color: rgba(251, 191, 36, 0.15);
+  }
+}
+
+// Info
+.callout-info {
+  border-left-color: #60a5fa;
+  background-color: rgba(96, 165, 250, 0.1);
+
+  .callout-title {
+    color: #dbeafe;
+    background-color: rgba(96, 165, 250, 0.15);
+  }
+}
+
+// Warning
+.callout-warning {
+  border-left-color: #fb923c;
+  background-color: rgba(251, 146, 60, 0.1);
+
+  .callout-title {
+    color: #fed7aa;
+    background-color: rgba(251, 146, 60, 0.15);
+  }
+}
+
+// Danger
+.callout-danger {
+  border-left-color: #f87171;
+  background-color: rgba(248, 113, 113, 0.1);
+
+  .callout-title {
+    color: #fecaca;
+    background-color: rgba(248, 113, 113, 0.15);
+  }
+}
+
+// Success
+.callout-success {
+  border-left-color: #4ade80;
+  background-color: rgba(74, 222, 128, 0.1);
+
+  .callout-title {
+    color: #d1fae5;
+    background-color: rgba(74, 222, 128, 0.15);
+  }
+}
+
+// Question
+.callout-question {
+  border-left-color: #c084fc;
+  background-color: rgba(192, 132, 252, 0.1);
+
+  .callout-title {
+    color: #e9d5ff;
+    background-color: rgba(192, 132, 252, 0.15);
+  }
+}
+
+// Quote
+.callout-quote {
+  border-left-color: #94a3b8;
+  background-color: rgba(148, 163, 184, 0.1);
+  font-style: italic;
+
+  .callout-title {
+    color: #e2e8f0;
+    background-color: rgba(148, 163, 184, 0.15);
+  }
+}
+
+// Example
+.callout-example {
+  border-left-color: #06b6d4;
+  background-color: rgba(6, 182, 212, 0.1);
+
+  .callout-title {
+    color: #cffafe;
+    background-color: rgba(6, 182, 212, 0.15);
+  }
+}
+
+// Bug
+.callout-bug {
+  border-left-color: #dc2626;
+  background-color: rgba(220, 38, 38, 0.1);
+
+  .callout-title {
+    color: #fee2e2;
+    background-color: rgba(220, 38, 38, 0.15);
+  }
+}
+
+// Responsive adjustments
+@media (max-width: 640px) {
+  .callout {
+    margin: 1rem 0;
+    border-radius: 0.375rem;
+
+    .callout-title {
+      padding: 0.625rem 0.875rem;
+      font-size: 0.95rem;
+    }
+
+    .callout-content {
+      padding: 0.875rem;
+      font-size: 0.95rem;
+    }
+  }
+}