diff options
Diffstat (limited to '.superpowers/brainstorm/26102-1776256459/content/layout-mockups.html')
| -rw-r--r-- | .superpowers/brainstorm/26102-1776256459/content/layout-mockups.html | 154 |
1 files changed, 154 insertions, 0 deletions
diff --git a/.superpowers/brainstorm/26102-1776256459/content/layout-mockups.html b/.superpowers/brainstorm/26102-1776256459/content/layout-mockups.html new file mode 100644 index 0000000..776b786 --- /dev/null +++ b/.superpowers/brainstorm/26102-1776256459/content/layout-mockups.html @@ -0,0 +1,154 @@ +<h2>Page Layouts & Visual Hierarchy</h2> +<p class="subtitle">Desktop and mobile layouts for key pages</p> + +<div class="section"> + <h3>Landing Page (Homepage)</h3> + <div class="mockup" style="padding: 0;"> + <div class="mockup-header">Homepage / _index.md</div> + <div class="mockup-body" style="background: linear-gradient(180deg, rgba(6, 11, 16, 0.8), rgba(16, 30, 45, 0.8)); padding: 2rem;"> + <div style="text-align: center; padding: 3rem 0;"> + <div style="width: 80px; height: 80px; margin: 0 auto 1.5rem; background: rgba(168, 85, 247, 0.3); border-radius: 50%; border: 2px solid #a855f7; display: flex; align-items: center; justify-content: center;"> + <span style="font-size: 2rem;">📷</span> + </div> + <h1 style="font-family: 'Oxanium', sans-serif; font-size: 2rem; margin-bottom: 0.5rem; color: #a855f7;">Danilo Macrì</h1> + <p style="color: #c4d6e8; font-size: 1rem; margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; line-height: 1.8;">Brief introduction about yourself, your focus, what you do. Keep it concise and personal. (From _index.md)</p> + <div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;"> + <div style="padding: 0.6rem 1.5rem; background: #a855f7; color: white; border-radius: 0.3rem; font-size: 0.9rem; cursor: pointer;">Read Articles</div> + <div style="padding: 0.6rem 1.5rem; border: 1px solid #a855f7; color: #a855f7; border-radius: 0.3rem; font-size: 0.9rem; cursor: pointer;">Get in Touch</div> + </div> + </div> + </div> + </div> +</div> + +<div class="section"> + <h3>Articles List Page</h3> + <div class="mockup" style="padding: 0;"> + <div class="mockup-header">Articles / List View</div> + <div class="mockup-body" style="background: rgba(6, 11, 16, 0.5); padding: 2rem;"> + <div style="max-width: 800px; margin: 0 auto;"> + <h1 style="font-size: 1.8rem; color: #a855f7; margin-bottom: 2rem; font-family: 'Oxanium', sans-serif;">Articles</h1> + + <!-- Pinned post --> + <div style="padding: 1.2rem; background: rgba(168, 85, 247, 0.12); border: 1px solid rgba(168, 85, 247, 0.3); border-radius: 0.4rem; margin-bottom: 1.5rem;"> + <div style="display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;"> + <span style="font-size: 0.75rem; color: #00ff88; font-weight: bold;">📌 PINNED</span> + </div> + <h3 style="color: #c4d6e8; margin-bottom: 0.5rem; cursor: pointer;">Why I Started This Blog</h3> + <div style="display: flex; gap: 1rem; font-size: 0.8rem; color: #7a9bb8;"> + <span>Apr 14, 2026</span> + <span>•</span> + <span style="color: #a855f7;">Life</span> + </div> + </div> + + <!-- Regular posts --> + <div style="border-top: 1px solid rgba(168, 85, 247, 0.15); padding: 1.2rem 0;"> + <h3 style="color: #c4d6e8; margin-bottom: 0.5rem; cursor: pointer;">Building a Go CLI Tool</h3> + <div style="display: flex; gap: 1rem; font-size: 0.8rem; color: #7a9bb8;"> + <span>Apr 12, 2026</span> + <span>•</span> + <span style="color: #00ff88;">Tech</span> + </div> + </div> + + <div style="border-top: 1px solid rgba(168, 85, 247, 0.15); padding: 1.2rem 0;"> + <h3 style="color: #c4d6e8; margin-bottom: 0.5rem; cursor: pointer;">Mountain Hiking Adventure</h3> + <div style="display: flex; gap: 1rem; font-size: 0.8rem; color: #7a9bb8;"> + <span>Apr 10, 2026</span> + <span>•</span> + <span style="color: #a855f7;">Photo</span> + </div> + </div> + + <div style="border-top: 1px solid rgba(168, 85, 247, 0.15); padding: 1.2rem 0;"> + <h3 style="color: #c4d6e8; margin-bottom: 0.5rem; cursor: pointer;">On Simplicity</h3> + <div style="display: flex; gap: 1rem; font-size: 0.8rem; color: #7a9bb8;"> + <span>Apr 8, 2026</span> + <span>•</span> + <span style="color: #a855f7;">Quote</span> + </div> + </div> + + <div style="border-top: 1px solid rgba(168, 85, 247, 0.15); padding: 1.2rem 0;"> + <h3 style="color: #c4d6e8; margin-bottom: 0.5rem; cursor: pointer;">Interesting Read: The Unix Philosophy</h3> + <div style="display: flex; gap: 1rem; font-size: 0.8rem; color: #7a9bb8;"> + <span>Apr 5, 2026</span> + <span>•</span> + <span style="color: #00ff88;">Link</span> + </div> + </div> + </div> + </div> + </div> +</div> + +<div class="section"> + <h3>Single Article Page (Tech Example)</h3> + <div class="mockup" style="padding: 0;"> + <div class="mockup-header">Article View / Single</div> + <div class="mockup-body" style="background: rgba(6, 11, 16, 0.5); padding: 2rem;"> + <div style="max-width: 700px; 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.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>Article content goes here. This is where your markdown is rendered with proper typography and spacing.</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; color: #00ff88; overflow-x: auto;"> + <div>$ go run main.go</div> + <div>Hello, CLI!</div> + </div> + + <p>More content and explanation about the code...</p> + </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> + </div> + </div> +</div> + +<div class="section"> + <h3>Static Pages (About, Contact, Privacy)</h3> + <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;"> + <p style="font-size: 0.85rem; line-height: 1.8;">Static pages use a clean single-column layout. Content managed via markdown files in <code>content/</code>. All pages share the same template with consistent styling.</p> + <p style="font-size: 0.85rem; margin-top: 1rem;"><strong>Example:</strong> <code>/is</code> (About), <code>/is/here</code> (Contact), <code>/is/legal</code> (Privacy) — all defined in hugo.toml for easy management.</p> + </div> +</div> + +<div class="section" style="border-top: 2px solid rgba(168, 85, 247, 0.2); padding-top: 1.5rem;"> + <h3>Responsive Behavior</h3> + <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;">Desktop (1024px+)</h4> + <ul style="font-size: 0.8rem; line-height: 1.8; margin-left: 1.2rem;"> + <li>Full navigation visible</li> + <li>Max content width ~800px</li> + <li>Comfortable spacing</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;">Mobile (<768px)</h4> + <ul style="font-size: 0.8rem; line-height: 1.8; margin-left: 1.2rem;"> + <li>Hamburger menu toggle</li> + <li>Full-screen overlay on tap</li> + <li>Optimized spacing</li> + </ul> + </div> + </div> +</div>
\ No newline at end of file |