http://beacon-demo.starry-s.moe/tags/design/Recent content in Design on Beacon DemoHugoen-USSun, 12 Jul 2026 21:00:00 +0800http://beacon-demo.starry-s.moe/posts/image-preview/Sun, 12 Jul 2026 21:00:00 +0800http://beacon-demo.starry-s.moe/posts/image-preview/<p>Every image in a post is <strong>click-to-zoom</strong>. Click (or focus and press Enter on) any picture below to open it full-screen; press <kbd>Esc</kbd> or click the backdrop to close. When a post has several images, use the arrows or the <kbd>←</kbd> / <kbd>→</kbd> keys to move between them.</p> <h2 id="the-theme-at-a-glance">The theme at a glance</h2> <p>Here is Beacon&rsquo;s homepage in dark mode — a two-column card layout with a profile sidebar and a paginated post list.</p>http://beacon-demo.starry-s.moe/posts/minimal-dark-palette/Sat, 04 Jul 2026 20:00:00 +0800http://beacon-demo.starry-s.moe/posts/minimal-dark-palette/<p>A good dark theme is not just &ldquo;invert the light one&rdquo;. It is a set of small decisions that add up to something you can read for an hour without eye strain.</p> <h2 id="avoid-pure-black">Avoid pure black</h2> <p>Deep charcoal (<code>#1d1e20</code>) is softer than <code>#000</code> and lets cards sit <em>above</em> the background using nothing but a lighter grey. Contrast comes from layering, not from hard borders.</p> <h2 id="one-accent-used-sparingly">One accent, used sparingly</h2> <p>Pick a single calm accent — a soft blue works well — and reserve it for links and interactive states. Everything else stays in the greyscale.</p>