diff options
Diffstat (limited to '.superpowers/brainstorm/26102-1776256459/content/layout-with-sidebar.html')
| -rw-r--r-- | .superpowers/brainstorm/26102-1776256459/content/layout-with-sidebar.html | 188 |
1 files changed, 188 insertions, 0 deletions
diff --git a/.superpowers/brainstorm/26102-1776256459/content/layout-with-sidebar.html b/.superpowers/brainstorm/26102-1776256459/content/layout-with-sidebar.html new file mode 100644 index 0000000..894751a --- /dev/null +++ b/.superpowers/brainstorm/26102-1776256459/content/layout-with-sidebar.html @@ -0,0 +1,188 @@ +<h2>Article & Static Page Layouts with Sidebar</h2> +<p class="subtitle">Two-column desktop layout, responsive sidebar that moves to bottom on mobile</p> + +<div class="section"> + <h3>Single Article Page (Tech Example) — Desktop View</h3> + <div class="mockup" style="padding: 0;"> + <div class="mockup-header">Article View / Single (Desktop 1024px+)</div> + <div class="mockup-body" style="background: rgba(6, 11, 16, 0.5); padding: 2rem;"> + <div style="display: grid; grid-template-columns: 1fr 300px; gap: 2rem; max-width: 1100px; margin: 0 auto;"> + <!-- Main Content --> + <div> + <div style="margin-bottom: 1.5rem;"> + <span style="display: inline-block; padding: 0.3rem 0.8rem; background: rgba(0, 255, 136, 0.15); color: #00ff88; border-radius: 0.3rem; font-size: 0.75rem; font-weight: bold;">TECH</span> + </div> + <h1 style="font-size: 1.8rem; color: #a855f7; margin-bottom: 1rem; font-family: 'Oxanium', sans-serif;">Building a Go CLI Tool</h1> + <div style="display: flex; gap: 1rem; font-size: 0.85rem; color: #7a9bb8; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(168, 85, 247, 0.15);"> + <span>Apr 12, 2026</span> + <span>•</span> + <span>5 min read</span> + </div> + + <div style="line-height: 1.8; color: #c4d6e8; font-size: 0.95rem;"> + <p>Building command-line tools in Go is straightforward and powerful. Let's explore how to create a simple CLI application.</p> + + <div style="margin: 1.5rem 0; padding: 1rem; background: rgba(6, 11, 16, 0.8); border-left: 3px solid #00ff88; border-radius: 0.3rem; font-family: 'JetBrains Mono', monospace; font-size: 0.8rem; overflow-x: auto;"> + <div style="color: #a855f7;">package</div><div style="display: inline; color: #c4d6e8;"> main</div> + <br><br> + <div style="color: #a855f7;">import</div><div style="display: inline; color: #c4d6e8;"> (</div> + <br><div style="margin-left: 2rem;"><span style="color: #00ff88;">"fmt"</span></div> + <br><div style="color: #c4d6e8;">)</div> + <br><br> + <div style="color: #a855f7;">func</div><div style="display: inline; color: #c4d6e8;"> main() {</div> + <br><div style="margin-left: 2rem; color: #a855f7;">fmt</div><div style="display: inline; color: #c4d6e8;">.Println(</div><div style="display: inline; color: #00ff88;">"Hello, CLI!"</div><div style="display: inline; color: #c4d6e8;">)</div> + <br><div style="color: #c4d6e8;">}</div> + </div> + + <p>This simple example demonstrates the basics. For larger projects, consider using the <code style="background: rgba(168, 85, 247, 0.2); padding: 0.2rem 0.4rem; border-radius: 0.2rem; color: #a855f7;">cobra</code> library for more advanced CLI features.</p> + + <p style="margin-top: 1rem;">The key advantages of Go for CLI tools are:</p> + <ul style="margin-left: 1.5rem; margin-top: 0.5rem;"> + <li style="margin-bottom: 0.5rem;">Single binary compilation (no runtime dependencies)</li> + <li style="margin-bottom: 0.5rem;">Cross-platform builds</li> + <li style="margin-bottom: 0.5rem;">Fast execution</li> + <li>Rich standard library</li> + </ul> + </div> + + <div style="margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(168, 85, 247, 0.15);"> + <div style="font-size: 0.8rem; color: #7a9bb8;">Tags:</div> + <div style="display: flex; gap: 0.5rem; margin-top: 0.5rem; flex-wrap: wrap;"> + <span style="padding: 0.3rem 0.8rem; background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem; font-size: 0.8rem;">#golang</span> + <span style="padding: 0.3rem 0.8rem; background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem; font-size: 0.8rem;">#cli</span> + <span style="padding: 0.3rem 0.8rem; background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem; font-size: 0.8rem;">#programming</span> + </div> + </div> + </div> + + <!-- Sidebar --> + <aside style="padding: 1.5rem; background: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.4rem; height: fit-content; position: sticky; top: 2rem;"> + <h3 style="font-size: 0.85rem; font-weight: bold; color: #a855f7; text-transform: uppercase; margin-bottom: 1rem; letter-spacing: 0.5px;">Share</h3> + <div style="display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.5rem;"> + <div style="padding: 0.5rem 0.8rem; background: rgba(0, 85, 200, 0.15); border: 1px solid rgba(0, 85, 200, 0.3); border-radius: 0.3rem; font-size: 0.8rem; cursor: pointer; text-align: center; color: #5ba3e8;">𝕏 / Twitter</div> + <div style="padding: 0.5rem 0.8rem; background: rgba(30, 144, 255, 0.15); border: 1px solid rgba(30, 144, 255, 0.3); border-radius: 0.3rem; font-size: 0.8rem; cursor: pointer; text-align: center; color: #5ba3e8;">📘 Facebook</div> + <div style="padding: 0.5rem 0.8rem; background: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem; font-size: 0.8rem; cursor: pointer; text-align: center; color: #a855f7;">🔗 Copy Link</div> + </div> + + <hr style="border: none; border-top: 1px solid rgba(168, 85, 247, 0.15); margin: 1.5rem 0;"> + + <h3 style="font-size: 0.85rem; font-weight: bold; color: #a855f7; text-transform: uppercase; margin-bottom: 1rem; letter-spacing: 0.5px;">Article Info</h3> + <div style="font-size: 0.8rem; line-height: 2; color: #7a9bb8;"> + <div><strong style="color: #c4d6e8;">Published:</strong> Apr 12, 2026</div> + <div><strong style="color: #c4d6e8;">Updated:</strong> Apr 14, 2026</div> + <div><strong style="color: #c4d6e8;">Reading Time:</strong> 5 min</div> + <div><strong style="color: #c4d6e8;">Category:</strong> <span style="color: #00ff88;">Tech</span></div> + </div> + + <hr style="border: none; border-top: 1px solid rgba(168, 85, 247, 0.15); margin: 1.5rem 0;"> + + <h3 style="font-size: 0.85rem; font-weight: bold; color: #a855f7; text-transform: uppercase; margin-bottom: 1rem; letter-spacing: 0.5px;">Related</h3> + <div style="font-size: 0.8rem; color: #c4d6e8; line-height: 1.8;"> + <div style="margin-bottom: 0.8rem; padding-bottom: 0.8rem; border-bottom: 1px solid rgba(168, 85, 247, 0.15);"> + <div style="cursor: pointer; color: #a855f7;">Rust vs Go</div> + <div style="font-size: 0.75rem; color: #7a9bb8;">Apr 5, 2026</div> + </div> + <div> + <div style="cursor: pointer; color: #a855f7;">Python CLI Tools</div> + <div style="font-size: 0.75rem; color: #7a9bb8;">Mar 28, 2026</div> + </div> + </div> + </aside> + </div> + </div> + </div> +</div> + +<div class="section"> + <h3>Mobile View (Sidebar → Bottom)</h3> + <div class="mockup" style="padding: 0;"> + <div class="mockup-header">Article View / Mobile (<768px)</div> + <div class="mockup-body" style="background: rgba(6, 11, 16, 0.5); padding: 1.5rem; max-width: 500px; margin: 0 auto;"> + <div style="margin-bottom: 1.5rem;"> + <span style="display: inline-block; padding: 0.3rem 0.8rem; background: rgba(0, 255, 136, 0.15); color: #00ff88; border-radius: 0.3rem; font-size: 0.75rem; font-weight: bold;">TECH</span> + </div> + <h1 style="font-size: 1.5rem; color: #a855f7; margin-bottom: 1rem; font-family: 'Oxanium', sans-serif;">Building a Go CLI Tool</h1> + <div style="display: flex; gap: 1rem; font-size: 0.85rem; color: #7a9bb8; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(168, 85, 247, 0.15);"> + <span>Apr 12, 2026</span> + <span>•</span> + <span>5 min</span> + </div> + + <div style="line-height: 1.8; color: #c4d6e8; font-size: 0.95rem; margin-bottom: 2rem;"> + <p>Building command-line tools in Go is straightforward and powerful...</p> + <p style="margin-top: 1rem;">[Article content continues...]</p> + </div> + + <!-- Sidebar content moved to bottom on mobile --> + <div style="padding: 1.5rem; background: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.4rem; margin-top: 2rem;"> + <h3 style="font-size: 0.85rem; font-weight: bold; color: #a855f7; text-transform: uppercase; margin-bottom: 1rem; letter-spacing: 0.5px;">Share This</h3> + <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1.5rem;"> + <div style="padding: 0.5rem 0.8rem; background: rgba(0, 85, 200, 0.15); border: 1px solid rgba(0, 85, 200, 0.3); border-radius: 0.3rem; font-size: 0.75rem; cursor: pointer; text-align: center; color: #5ba3e8;">𝕏</div> + <div style="padding: 0.5rem 0.8rem; background: rgba(30, 144, 255, 0.15); border: 1px solid rgba(30, 144, 255, 0.3); border-radius: 0.3rem; font-size: 0.75rem; cursor: pointer; text-align: center; color: #5ba3e8;">FB</div> + </div> + + <hr style="border: none; border-top: 1px solid rgba(168, 85, 247, 0.15); margin: 1rem 0;"> + + <h3 style="font-size: 0.85rem; font-weight: bold; color: #a855f7; text-transform: uppercase; margin-bottom: 0.8rem; letter-spacing: 0.5px;">Info</h3> + <div style="font-size: 0.75rem; line-height: 1.8; color: #7a9bb8;"> + <div><strong style="color: #c4d6e8;">Published:</strong> Apr 12, 2026</div> + <div><strong style="color: #c4d6e8;">Category:</strong> Tech</div> + </div> + </div> + </div> + </div> +</div> + +<div class="section"> + <h3>Static Page Layout (Same Structure)</h3> + <p style="font-size: 0.85rem; margin-bottom: 1rem;">Static pages (/is, /is/here, /is/legal) use the same two-column layout with sidebar. The sidebar can contain:</p> + <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;"> + <div style="padding: 1rem; background: rgba(0, 255, 136, 0.08); border: 1px solid rgba(0, 255, 136, 0.2); border-radius: 0.3rem;"> + <h4 style="color: #00ff88; font-size: 0.9rem; margin-bottom: 0.5rem;">About Page Sidebar</h4> + <ul style="font-size: 0.8rem; line-height: 1.8; margin-left: 1.2rem;"> + <li>Social links</li> + <li>Contact info</li> + <li>Skills/expertise</li> + <li>CV download</li> + </ul> + </div> + <div style="padding: 1rem; background: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 0.3rem;"> + <h4 style="color: #a855f7; font-size: 0.9rem; margin-bottom: 0.5rem;">Contact Page Sidebar</h4> + <ul style="font-size: 0.8rem; line-height: 1.8; margin-left: 1.2rem;"> + <li>Email address</li> + <li>Social profiles</li> + <li>Response time</li> + <li>Availability</li> + </ul> + </div> + </div> +</div> + +<div class="section"> + <h3>Syntax Highlighting</h3> + <div style="padding: 1.5rem; background: rgba(0, 255, 136, 0.08); border-left: 3px solid #00ff88; border-radius: 0.3rem;"> + <p style="font-size: 0.85rem; margin-bottom: 1rem;"><strong>Implementation:</strong> Hugo + Chroma syntax highlighter (built-in)</p> + <ul style="font-size: 0.85rem; line-height: 1.8; margin-left: 1.5rem;"> + <li>Automatically highlights code blocks marked with language (```go, ```python, etc.)</li> + <li>Custom CSS theme integrated with danix.xyz color scheme (purple accent, green highlights for keywords)</li> + <li>Line numbers optional (configurable in hugo.toml)</li> + <li>Supports all major languages: Go, Python, Rust, JavaScript, Bash, etc.</li> + </ul> + <div style="margin-top: 1rem; padding: 1rem; background: rgba(6, 11, 16, 0.8); border-radius: 0.3rem; font-family: 'JetBrains Mono', monospace; font-size: 0.75rem;"> + <div style="color: #a855f7;">```go</div> + <div style="color: #7a9bb8;">// Code here gets automatic syntax highlighting</div> + <div style="color: #a855f7;">```</div> + </div> + </div> +</div> + +<div class="section" style="border-top: 2px solid rgba(168, 85, 247, 0.2); padding-top: 1.5rem;"> + <h3>Sidebar Implementation Details</h3> + <div style="padding: 1rem; background: rgba(168, 85, 247, 0.05); border: 1px solid rgba(168, 85, 247, 0.15); border-radius: 0.3rem;"> + <p style="font-size: 0.85rem; line-height: 1.8;"> + <strong>Desktop (1024px+):</strong> CSS Grid layout with main content + sticky sidebar. Sidebar remains visible while scrolling.<br><br> + <strong>Tablet/Mobile:</strong> Single column. Sidebar content rendered after main content using CSS <code>order</code> property or media query flexbox reorder.<br><br> + <strong>Content Source:</strong> Sidebar content defined via optional front-matter fields or template logic (e.g., <code>show_sharing: true</code>, <code>show_metadata: true</code>). + </p> + </div> +</div>
\ No newline at end of file |