Misc on tessa marie soap http://tessamariesoap.netlify.app/misc/ Recent content in Misc on tessa marie soap Hugo en-US Components http://tessamariesoap.netlify.app/misc/components/ Mon, 01 Jan 0001 00:00:00 +0000 http://tessamariesoap.netlify.app/misc/components/ <h2 id="table-with-the-zebra-table-and-responsive-table-components-classes">Table with the &ldquo;zebra-table&rdquo; and &ldquo;responsive-table&rdquo; components classes</h2> <table class="zebra-table responsive-table"> <thead> <tr> <th style="text-align: left">SSG</th> <th style="text-align: left">Stars</th> <th style="text-align: left">Description</th> <th style="text-align: left">Lang</th> <th style="text-align: left">Licence</th> </tr> </thead> <tbody> <tr> <td style="text-align: left">Next.js</td> <td style="text-align: left">97399</td> <td style="text-align: left">Next.js is a minimalistic framework for server-rendered React applications as well as statically exported React apps.</td> <td style="text-align: left">JavaScript</td> <td style="text-align: left">MIT</td> </tr> <tr> <td style="text-align: left">Hugo</td> <td style="text-align: left">64086</td> <td style="text-align: left">Hugo is a static site generator written in Go. It is optimized for speed, easy use and configurability.</td> <td style="text-align: left">Go</td> <td style="text-align: left">Apache-2.0</td> </tr> <tr> <td style="text-align: left">Gatsby</td> <td style="text-align: left">53896</td> <td style="text-align: left">Build blazing-fast, modern apps and websites with React</td> <td style="text-align: left">JavaScript</td> <td style="text-align: left">MIT</td> </tr> <tr> <td style="text-align: left">Jekyll</td> <td style="text-align: left">45696</td> <td style="text-align: left">Jekyll is a simple, blog-aware, static site generator perfect for personal, project, or organization sites.</td> <td style="text-align: left">Ruby</td> <td style="text-align: left">MIT</td> </tr> <tr> <td style="text-align: left">Nuxt</td> <td style="text-align: left">41678</td> <td style="text-align: left">An easy way to export your Vue.js Web Application into a static website.</td> <td style="text-align: left">JavaScript</td> <td style="text-align: left">MIT</td> </tr> <tr> <td style="text-align: left">Docusaurus</td> <td style="text-align: left">40245</td> <td style="text-align: left">Save time and focus on your project&rsquo;s documentation.</td> <td style="text-align: left">JavaScript</td> <td style="text-align: left">MIT</td> </tr> </tbody> </table> <h2 class="mt--xl" id="using-the-box-components-class">Using the &ldquo;box&rdquo; components class</h2> <div class="box"><h3 id="this-is-a-box">This is a box</h3> <p>Lorem ipsum dolor sit amet.</p></div> <div class="box box--highlight"><h3 id="this-is-a-box-with-highlight">This is a box with highlight</h3> <p>Lorem ipsum dolor sit amet.</p></div> <div class="box box--inverted"><h3 id="this-is-a-inverted-box">This is a inverted box</h3> <p>Lorem ipsum dolor sit amet.</p></div> <h2 class="mt--xl" id="messages-colour-display">Messages colour display</h2> <h3 id="status">Status</h3> <div class="message status">Lorem ipsum dolor sit amet.</div> <h3 id="warning">Warning</h3> <div class="message warning">Lorem ipsum dolor sit amet.</div> <h3 id="error">Error</h3> <div class="message error">Lorem ipsum dolor sit amet.</div> <h2 class="mt--xl" id="using-the-cards-and-card-components-classes">Using the &ldquo;cards&rdquo; and &ldquo;card&rdquo; components classes</h2> <p>Cards in turn extends the &ldquo;grid-group&rdquo; component.</p> <div class="cards"><div class="card"><h3 id="card-1">Card 1</h3> <p>Lorem ipsum dolor sit amet.</p></div> <div class="card"><h3 id="card-2">Card 2</h3> <p>Lorem ipsum dolor sit amet.</p></div> <div class="card"><h3 id="card-3">Card 3</h3> <p>Lorem ipsum dolor sit amet.</p></div> <div class="card"><h3 id="card-4">Card 4</h3> <p>Lorem ipsum dolor sit amet.</p></div> <div class="card"><h3 id="card-5">Card 5</h3> <p>Lorem ipsum dolor sit amet.</p></div> <div class="card"><h3 id="card-6">Card 6</h3> <p>Lorem ipsum dolor sit amet.</p></div> <div class="card"><h3 id="card-7">Card 7</h3> <p>Lorem ipsum dolor sit amet.</p></div> <div class="card"><h3 id="card-8">Card 8</h3> <p>Lorem ipsum dolor sit amet.</p></div> </div> Layout with grid http://tessamariesoap.netlify.app/misc/layout/ Mon, 01 Jan 0001 00:00:00 +0000 http://tessamariesoap.netlify.app/misc/layout/ <p>Examples of using stretch and breakout classes.</p> Math http://tessamariesoap.netlify.app/misc/math/ Mon, 01 Jan 0001 00:00:00 +0000 http://tessamariesoap.netlify.app/misc/math/ <h2 id="math-typesetting-with-katex">Math typesetting with KaTeX</h2> <p>I got a contribution that added math typesetting with KaTeX.</p> <p>Something you either have little clue about or really need. But math is fun and it was easy to add.</p> <p>Some math examples:</p> <p>$$x^2 + y^2 = z^2$$</p> <p>$$\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} \equiv 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } }$$</p> <p>$$\left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right)$$</p>