<!doctype html><htmllang=endir=ltrclass=scroll-smoothdata-default-appearance=darkdata-auto-appearance=false><head><metacharset=utf-8><metahttp-equiv=content-languagecontent="en"><metaname=viewportcontent="width=device-width,initial-scale=1"><metahttp-equiv=x-ua-compatiblecontent="ie=edge"><title>Content Samples · Blowfish</title><metaname=titlecontent="Content Samples · Blowfish"><metaname=descriptioncontent="A powerful, lightweight theme for Hugo built with Tailwind CSS."><linkrel=canonicalhref=https://nunocoracao.github.io/blowfish/samples/><linkrel=alternatetype=application/rss+xmlhref=/blowfish/samples/index.xmltitle=Blowfish><linktype=text/cssrel=stylesheethref=/blowfish/css/main.bundle.min.3f7a3d89b943c3dacb033ff4448c83a5b58692eb75f99e903ee759443c690298da06dc2cc7adc967ae51bb50103acfa1b65f99a428ef2ff09176f2519b277273.cssintegrity="sha512-P3o9iblDw9rLAz/0RIyDpbWGkut1+Z6QPudZRDxpApjaBtwsx63JZ65Ru1AQOs+htl+ZpCjvL/CRdvJRmydycw=="><scripttype=text/javascriptsrc=/blowfish/js/main.min.cf83e1357eefb8bdf1542850d66d8007d620e4050b5715dc83f4a921d36ce9ce47d0d13c5d85f2b0ff8318d2877eec2f63b931bd47417a81a538327af927da3e.jsintegrity="sha512-z4PhNX7vuL3xVChQ1m2AB9Yg5AULVxXcg/SpIdNs6c5H0NE8XYXysP+DGNKHfuwvY7kxvUdBeoGlODJ6+SfaPg=="></script>
<linkrel=apple-touch-iconsizes=180x180href=/blowfish/apple-touch-icon.png><linkrel=icontype=image/pngsizes=32x32href=/blowfish/favicon-32x32.png><linkrel=icontype=image/pngsizes=16x16href=/blowfish/favicon-16x16.png><linkrel=manifesthref=/blowfish/site.webmanifest><metaproperty="og:title"content="Content Samples"><metaproperty="og:description"content="See what's possible with Blowfish."><metaproperty="og:type"content="website"><metaproperty="og:url"content="https://nunocoracao.github.io/blowfish/samples/"><metaproperty="og:site_name"content="Blowfish"><metaname=twitter:cardcontent="summary"><metaname=twitter:titlecontent="Content Samples"><metaname=twitter:descriptioncontent="See what's possible with Blowfish."><metaname=authorcontent="Blowfish"><linkhref=https://twitter.com/burufugurel=me><linkhref=https://github.com/nunocoracao/blowfishrel=me><scriptasyncsrc="https://www.googletagmanager.com/gtag/js?id=G-PEDMYR1V0K"></script>
<spanclass="relative inline-block align-text-bottom icon"><svgaria-hidden="true"focusable="false"data-prefix="fas"data-icon="search"class="svg-inline--fa fa-search fa-w-16"role="img"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 512 512"><pathfill="currentcolor"d="M505 442.7 405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9.0 208 0S0 93.1.0 208s93.1 208 208 208c48.3.0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9.0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7.0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7.0 128 57.2 128 128 0 70.7-57.2 128-128 128z"/></svg></span></button></li></ul></div><divclass="relative flex flex-col grow"><mainid=main-contentclass=grow><header><h1class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">Content Samples</h1></header><sectionclass="mt-0 prose flex max-w-full flex-col dark:prose-invert lg:flex-row"><divclass="min-w-0 min-h-0 max-w-prose"><divclass="lead !mb-9 text-xl">Blowfish brings your content to life. 😍</div><p>This section contains some demo pages that show how Blowfish renders different types of content. You can also see an example <ahref=https://nunocoracao.github.io/blowfish/tags/>taxonomy listing</a> page.</p><p><em><strong>Sidenote:</strong> This page is just a standard Blowfish article listing and Hugo has been configured to generate a <code>samples</code> content type and display article summaries.</em></p><hr></div></section><sectionclass=space-y-10><aclass="sm:flex mb-10 article"href=/blowfish/samples/icons/><divclass="mb-[5rem] md:mb-0"><h3class="flex items-center text-xl font-semibold"><pclass="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"href=/blowfish/samples/icons/>Icons</p></h3><divclass="text-sm text-neutral-500 dark:text-neutral-400"><divclass="flex flex-row flex-wrap items-center"><timedatetime="2020-08-14 00:00:00 +0000 UTC">14 August 2020</time><spanclass="px-2 text-primary-500">·</span><span>140 words</span><spanclass="px-2 text-primary-500">·</span><spantitle="Reading time">1 min</span><spanclass="px-2 text-primary-500">·</span><spanid=views_samples/icons.mdtitle=views>0 views</span></div></div><divclass="py-1 prose dark:prose-invert">Blowfish has built-in support for a number of FontAwesome 6 icons. These can be included in your website through either the icon partial or icon shortcode.
Additionally, custom icons are also fully supported.</div></div></a><aclass="sm:flex mb-10 article"href=/blowfish/samples/markdown/><divclass="mb-[5rem] md:mb-0"><h3class="flex items-center text-xl font-semibold"><pclass="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"href=/blowfish/samples/markdown/>Markdown</p></h3><divclass="text-sm text-neutral-500 dark:text-neutral-400"><divclass="flex flex-row flex-wrap items-center"><timedatetime="2019-03-11 00:00:00 +0000 UTC">11 March 2019</time><spanclass="px-2 text-primary-500">·</span><span>472 words</span><spanclass="px-2 text-primary-500">·</span><spantitle="Reading time">3 mins</span><spanclass="px-2 text-primary-500">·</span><spanid=views_samples/markdown.mdtitle=views>0 views</span></div></div><divclass="py-1 prose dark:prose-invert"><p>This article offers a sample of basic Markdown formatting that can be used in Blowfish, also it shows how some basic HTML elements are decorated.</p></div></div></a><aclass="sm:flex mb-10 article"href=/blowfish/samples/rich-content/><divclass="mb-[5rem] md:mb-0"><h3class="flex items-center text-xl font-semibold"><pclass="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"href=/blowfish/samples/rich-content/>Rich Content</p></h3><divclass="text-sm text-neutral-500 dark:text-neutral-400"><divclass="flex flex-row flex-wrap items-center"><timedatetime="2019-03-10 00:00:00 +0000 UTC">10 March 2019</time><spanclass="px-2 text-primary-500">·</span><span>145 words</span><spanclass="px-2 text-primary-500">·</span><spantitle="Reading time">1 min</span><spanclass="px-2 text-primary-500">·</span><spanid=views_samples/rich-content.mdtitle=views>0 views</span></div></div><divclass="py-1 prose dark:prose-invert">This is an <em>example</em> of a <strong>rich</strong> content summary.</div></div></a><aclass="sm:flex mb-10 article"href=/blowfish/samples/mathematical-notation/><divclass="mb-[5rem] md:mb-0"><h3class="flex items-center text-xl font-semibold"><pclass="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"href=/blowfish/samples/mathematical-notation/>Mathematical notation</p></h3><divclass="text-sm text-neutral-500 dark:text-neutral-400"><divclass="flex flex-row flex-wrap items-center"><timedatetime="2019-03-08 00:00:00 +0000 UTC">8 March 2019</time><spanclass="px-2 text-primary-500">·</span><span>145 words</span><spanclass="px-2 text-primary-500">·</span><spantitle="Reading time">1 min</span><spanclass="px-2 text-primary-500">·</span><spanid=views_samples/mathematical-notation.mdtitle=views>0 views</span></div></div><divclass="py-1 prose dark:prose-invert"><p>KaTeX can be used to render mathematical notation within articles.</p></div></div></a><aclass="sm:flex mb-10 article"href=/blowfish/samples/diagrams-flowcharts/><divclass="mb-[5rem] md:mb-0"><h3class="flex items-center text-xl font-semibold"><pclass="text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral"href=/blowfish/samples/diagrams-flowcharts/>Diagrams and Flowcharts</p></h3><divclass="text-sm text-neutral-500 dark:text-neutral-400"><divclass="flex flex-row flex-wrap items-center"><timedatetime="2019-03-06 00:00:00 +0000 UTC">6 March 2019</time><spanclass="px-2 text-primary-500">·</span><span>250 words</span><spanclass="px-2 text-primary-500">·</span><spantitle="Reading time">2 mins</span><spanclass="px-2 text-primary-500">·</span><spanid=views_samples/diagrams-flowcharts.mdtitle=views>0 views</span></div></div><divclass="py-1 prose dark:prose-invert">It’s easy to add diagrams and flowcharts to articles using Mermaid.</div></div></a><aclass="sm:flex mb-10 article"href=/blowfish/samples/charts/><divclass="mb-[5rem] md:mb-0"><h3class="flex items-center text-xl font-semibold"><pclass="text-neutral-800decoration-primary-500hover:underlinehover:underline-offset-2dark
