https://prule.github.io/pauls-blog/categories/web/Recent content in Web on Pauls BlogHugoen-usMon, 20 Apr 2026 00:00:00 +0000https://prule.github.io/pauls-blog/post/coding/2026/hugo-simple-beauty-theme/Mon, 20 Apr 2026 00:00:00 +0000https://prule.github.io/pauls-blog/post/coding/2026/hugo-simple-beauty-theme/<div class="notice info"> <div class="notice-title">Github</div> <div class="notice-content"> <a href="https://github.com/prule/hugo-simple-beauty" target="_blank" rel="noopener">https://github.com/prule/hugo-simple-beauty</a> </div> </div> <h1 id="hugo-simple-beauty-theme">Hugo Simple Beauty Theme</h1> <p>A minimalist, clean, and highly readable Hugo theme designed for personal blogs, book summaries, and technical writing.</p> <h2 id="features">Features</h2> <h3 id="-design--ui">🎨 Design &amp; UI</h3> <ul> <li><strong>Minimalist Aesthetic</strong>: Focuses on typography and whitespace for an editorial feel.</li> <li><strong>System-based Dark Mode</strong>: Automatically respects OS preferences with a dedicated manual toggle.</li> <li><strong>Responsive</strong>: Fully optimized for mobile, tablet, and desktop.</li> <li><strong>Typography</strong>: Uses the modern <strong>Inter</strong> font for UI and the elegant <strong>Lora</strong> serif for long-form reading.</li> <li><strong>Smooth Interaction</strong>: Built-in smooth scrolling and subtle transitions.</li> </ul> <h3 id="-technical-features">🛠 Technical Features</h3> <ul> <li><strong>Adaptive Syntax Highlighting</strong>: Custom-themed code blocks that adjust colors for light and dark modes.</li> <li><strong>Related Writing</strong>: Built-in engine suggests related posts based on tags and categories.</li> <li><strong>Reading Time</strong>: Automatically calculates and displays the estimated reading time for each post.</li> <li><strong>SEO Optimized</strong>: Pre-configured with Open Graph, Twitter Cards, and Canonical URLs.</li> <li><strong>Back to Top</strong>: A smart floating button that appears as you scroll.</li> </ul> <h3 id="-shortcodes">🧩 Shortcodes</h3> <ul> <li><strong>Notice/Callouts</strong>: Beautiful styled boxes for <code>info</code> or <code>warning</code> messages.</li> </ul> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-markdown" data-lang="markdown"><span class="line"><span class="cl">{{&lt; notice type=&#34;info&#34; title=&#34;Pro Tip&#34; &gt;}} </span></span><span class="line"><span class="cl">Your content here... </span></span><span class="line"><span class="cl">{{&lt; /notice &gt;}} </span></span></code></pre></div><p>renders as</p>