michael/blowfish
1
0
Fork 0
mirror of https://github.com/nunocoracao/blowfish.git synced 2025-01-23 15:05:38 -06:00
Code Issues Projects Releases Packages Wiki Activity Actions 2
blowfish/public/docs/advanced-customisation/index.html
Nuno Coração 2b3b34fab9 fixe issue with analytics and new hugo update
2023-05-24 22:43:31 +01:00

142 lines
No EOL
95 KiB
HTML
Raw Blame History

<!doctype html><html lang=en dir=ltr class=scroll-smooth data-default-appearance=dark data-auto-appearance=true><head><meta charset=utf-8><meta http-equiv=content-language content="en"><meta name=viewport content="width=device-width,initial-scale=1"><meta http-equiv=x-ua-compatible content="ie=edge"><title>Advanced Customisation &#183; Blowfish</title><meta name=title content="Advanced Customisation &#183; Blowfish"><meta name=description content="Learn how to build Blowfish manually."><meta name=keywords content="advanced,css,docs,"><link rel=canonical href=https://nunocoracao.github.io/blowfish/docs/advanced-customisation/><link type=text/css rel=stylesheet href=/blowfish/css/main.bundle.min.c6116b9ed1c907a8c0eb015f377d3eecc07e448d75729e31fc3de5881465c6c172ba9fa9a6800c030116caf2a110d92242bb816639484ca791f7cd107a8d49b5.css integrity="sha512-xhFrntHJB6jA6wFfN30+7MB+RI11cp4x/D3liBRlxsFyup+ppoAMAwEWyvKhENkiQruBZjlITKeR980Qeo1JtQ=="><script type=text/javascript src=/blowfish/blowfish/js/appearance.min.516a16745bea5a9bd011138d254cc0fd3973cd55ce6e15f3dec763e7c7c2c7448f8fe7b54cca811cb821b0c7e12cd161caace1dd794ac3d34d40937cbcc9ee12.js integrity="sha512-UWoWdFvqWpvQERONJUzA/TlzzVXObhXz3sdj58fCx0SPj+e1TMqBHLghsMfhLNFhyqzh3XlKw9NNQJN8vMnuEg=="></script>
<script defer type=text/javascript id=script-bundle src=/blowfish/js/main.bundle.min.3ddcf04f5b0d4c32f72e726d3c12eebccd8c3c9f9daa9a13414808895de0ae1e1cdddda6849680d5bd96dbb60d0b1e0b24c29f5c83e5631e55e7e6bc02015490.js integrity="sha512-PdzwT1sNTDL3LnJtPBLuvM2MPJ+dqpoTQUgIiV3grh4c3d2mhJaA1b2W27YNCx4LJMKfXIPlYx5V5+a8AgFUkA==" data-copy data-copied></script>
<script src=/blowfish/js/zoom.min.js></script>
<link rel=apple-touch-icon sizes=180x180 href=/blowfish/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/blowfish/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/blowfish/favicon-16x16.png><link rel=manifest href=/blowfish/site.webmanifest><meta property="og:title" content="Advanced Customisation"><meta property="og:description" content="Learn how to build Blowfish manually."><meta property="og:type" content="article"><meta property="og:url" content="https://nunocoracao.github.io/blowfish/docs/advanced-customisation/"><meta property="og:image" content="https://nunocoracao.github.io/blowfish/docs/advanced-customisation/featured.png"><meta property="article:section" content="docs"><meta property="article:published_time" content="2020-08-08T00:00:00+00:00"><meta property="article:modified_time" content="2020-08-08T00:00:00+00:00"><meta property="og:see_also" content="https://nunocoracao.github.io/blowfish/docs/welcome/"><meta property="og:see_also" content="https://nunocoracao.github.io/blowfish/docs/installation/"><meta property="og:see_also" content="https://nunocoracao.github.io/blowfish/docs/getting-started/"><meta property="og:see_also" content="https://nunocoracao.github.io/blowfish/docs/configuration/"><meta property="og:see_also" content="https://nunocoracao.github.io/blowfish/docs/homepage-layout/"><meta property="og:see_also" content="https://nunocoracao.github.io/blowfish/docs/front-matter/"><meta name=twitter:card content="summary_large_image"><meta name=twitter:image content="https://nunocoracao.github.io/blowfish/docs/advanced-customisation/featured.png"><meta name=twitter:title content="Advanced Customisation"><meta name=twitter:description content="Learn how to build Blowfish manually."><script type=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Documentation","name":"Advanced Customisation","headline":"Advanced Customisation","description":"Learn how to build Blowfish manually.","abstract":"There are many ways you can make advanced changes to Blowfish. Read below to learn more about what can be customised and the best way of achieving your desired result.","inLanguage":"en","url":"https:\/\/nunocoracao.github.io\/blowfish\/docs\/advanced-customisation\/","author":{"@type":"Person","name":"Blowfish"},"copyrightYear":"2020","dateCreated":"2020-08-08T00:00:00\u002b00:00","datePublished":"2020-08-08T00:00:00\u002b00:00","dateModified":"2020-08-08T00:00:00\u002b00:00","keywords":["advanced","css","docs"],"mainEntityOfPage":"true","wordCount":"1768"}]</script><meta name=author content="Blowfish"><link href=https://twitter.com/burufugu rel=me><link href=https://masto.ai/@blowfish rel=me><link href=https://github.com/nunocoracao/blowfish rel=me><script src=/blowfish/lib/jquery/jquery.slim.min.js integrity></script><meta name=theme-color><script src=https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js></script>
<script src=https://www.gstatic.com/firebasejs/8.10.0/firebase-firestore.js></script>
<script src=https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js></script>
<script>const firebaseConfig={apiKey:"AIzaSyB5tqlqDky77Vb4Tc4apiHV4hRZI18KGiY",authDomain:"AIzaSyB5tqlqDky77Vb4Tc4apiHV4hRZI18KGiY",projectId:"blowfish-21fff",storageBucket:"blowfish-21fff.appspot.com",messagingSenderId:"60108104191",appId:"1:60108104191:web:039842ebe1370698b487ca",measurementId:"G-PEDMYR1V0K"};var app=firebase.initializeApp(firebaseConfig),db=firebase.firestore(),auth=firebase.auth()</script></head><body class="flex flex-col h-screen px-6 m-auto text-lg leading-7 max-w-7xl bg-neutral text-neutral-900 dark:bg-neutral-800 dark:text-neutral sm:px-14 md:px-24 lg:px-32"><div id=the-top class="absolute flex self-center"><a class="px-3 py-1 text-sm -translate-y-8 rounded-b-lg bg-primary-200 focus:translate-y-0 dark:bg-neutral-600" href=#main-content><span class="font-bold text-primary-600 ltr:pr-2 rtl:pl-2 dark:text-primary-400">&darr;</span>Skip to main content</a></div><div class=min-h-[148px]></div><div class="fixed inset-x-0 pl-[24px] pr-[24px]" style=z-index:100><div id=menu-blur class="absolute opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl shadow-2xl"></div><div class="relative max-w-[64rem] ml-auto mr-auto"><div style=padding-left:0;padding-right:0;padding-top:2px;padding-bottom:3px class="main-menu flex items-center justify-between px-4 py-6 sm:px-6 md:justify-start space-x-3"><div><a href=/blowfish class=flex><span class=sr-only>Blowfish</span>
<img src=/blowfish/img/blowfish_logo_transparent.png width=1000 height=1000 class="logo max-h-[5rem] max-w-[5rem] object-scale-down object-left nozoom" alt=Blowfish></a></div><div class="flex flex-1 items-center justify-between"><nav class="flex space-x-3"><a href=/blowfish class="text-base font-medium text-gray-500 hover:text-gray-900">Blowfish</a></nav><nav class="hidden md:flex items-center space-x-5 md:ml-12"><a href=/blowfish/docs/ class="flex items-center"><p class="text-base font-medium text-gray-500 hover:text-gray-900" title=Documentation>Docs</p></a><a href=/blowfish/samples/ class="flex items-center"><p class="text-base font-medium text-gray-500 hover:text-gray-900" title=Samples>Samples</p></a><a href=/blowfish/examples/ class="flex items-center"><p class="text-base font-medium text-gray-500 hover:text-gray-900" title=Showcase>Showcase</p></a><a href=/blowfish/guides/ class="flex items-center"><p class="text-base font-medium text-gray-500 hover:text-gray-900" title=Recipes>Recipes</p></a><a href=/blowfish/users/ class="flex items-center"><p class="text-base font-medium text-gray-500 hover:text-gray-900" title=Users>Users</p></a><a href=https://twitter.com/burufugu target=_blank class="flex items-center"><span><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645.0 138.72-105.583 298.558-298.558 298.558-59.452.0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055.0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421.0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391.0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04.0-57.828 46.782-104.934 104.934-104.934 30.213.0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg></span></span><p class="text-base font-medium text-gray-500 hover:text-gray-900" title></p></a><a href=https://masto.ai/@blowfish target=_blank class="flex items-center"><span><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentcolor" d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48.0.0.0-63.72 28.5-63.72 125.7.0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54.0 01-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg></span></span><p class="text-base font-medium text-gray-500 hover:text-gray-900" title></p></a><a href=https://github.com/nunocoracao/blowfish target=_blank class="flex items-center"><span><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentcolor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6.0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6.0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3.0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1.0-6.2-.3-40.4-.3-61.4.0.0-70 15-84.7-29.8.0.0-11.4-29.1-27.8-36.6.0.0-22.9-15.7 1.6-15.4.0.0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5.0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9.0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4.0 33.7-.3 75.4-.3 83.6.0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6.0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9.0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg></span></span><p class="text-base font-medium text-gray-500 hover:text-gray-900" title></p></a><button id=search-button aria-label=Search class="text-base hover:text-primary-600 dark:hover:text-primary-400" title>
<span class="relative block icon"><svg aria-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"><path fill="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><div class="ltr:mr-14 rtl:ml-14 cursor-pointer text-sm text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"><button id=appearance-switcher aria-label="Dark mode switcher" type=button><div class="flex items-center justify-center h-12 dark:hidden"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M32 256C32 132.2 132.3 32 255.8 32c11.36.0 29.7 1.668 40.9 3.746 9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3 9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480 132.1 480 32 379.6 32 256z"/></svg></span></div><div class="items-center justify-center hidden h-12 dark:flex"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M256 159.1c-53.02.0-95.1 42.98-95.1 95.1s41.2 96.9 95.1 96.9 95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347l-63.2-91.9 63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89 164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6 12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256 2.74 347.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7 19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109 109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69.0-127.1-57.31-127.1-127.1.0-70.69 57.31-127.1 127.1-127.1S383.1 186.2 383.1 256c0 70.7-56.4 127.1-127.1 127.1z"/></svg></span></div></button></div></nav><div class="flex md:hidden items-center space-x-5 md:ml-12"><span></span>
<button id=search-button-mobile aria-label=Search class="text-base hover:text-primary-600 dark:hover:text-primary-400" title>
<span class="relative block icon"><svg aria-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"><path fill="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>
<button id=appearance-switcher-mobile aria-label="Dark mode switcher" type=button style=margin-right:5px><div class="flex items-center justify-center h-12 dark:hidden"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M32 256C32 132.2 132.3 32 255.8 32c11.36.0 29.7 1.668 40.9 3.746 9.616 1.777 11.75 14.63 3.279 19.44C245 86.5 211.2 144.6 211.2 207.8c0 109.7 99.71 193 208.3 172.3 9.561-1.805 16.28 9.324 10.11 16.95C387.9 448.6 324.8 480 255.8 480 132.1 480 32 379.6 32 256z"/></svg></span></div><div class="items-center justify-center hidden h-12 dark:flex"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M256 159.1c-53.02.0-95.1 42.98-95.1 95.1s41.2 96.9 95.1 96.9 95.1-42.98 95.1-95.1S309 159.1 256 159.1zM509.3 347l-63.2-91.9 63.15-91.01c6.332-9.125 1.104-21.74-9.826-23.72l-109-19.7-19.7-109c-1.975-10.93-14.59-16.16-23.72-9.824L256 65.89 164.1 2.736c-9.125-6.332-21.74-1.107-23.72 9.824L121.6 121.6 12.56 141.3C1.633 143.2-3.596 155.9 2.736 164.1L65.89 256 2.74 347.01c-6.332 9.125-1.105 21.74 9.824 23.72l109 19.7 19.7 109c1.975 10.93 14.59 16.16 23.72 9.824L256 446.1l91.01 63.15c9.127 6.334 21.75 1.107 23.72-9.822l19.7-109 109-19.7C510.4 368.8 515.6 356.1 509.3 347zM256 383.1c-70.69.0-127.1-57.31-127.1-127.1.0-70.69 57.31-127.1 127.1-127.1S383.1 186.2 383.1 256c0 70.7-56.4 127.1-127.1 127.1z"/></svg></span></div></button></div></div><div class="-my-2 -mr-2 md:hidden"><label id=menu-button for=menu-controller class=block><input type=checkbox id=menu-controller class=hidden><div class="cursor-pointer hover:text-primary-600 dark:hover:text-primary-400"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentcolor" d="M0 96C0 78.33 14.33 64 32 64H416c17.7.0 32 14.33 32 32 0 17.7-14.3 32-32 32H32C14.33 128 0 113.7.0 96zM0 256c0-17.7 14.33-32 32-32H416c17.7.0 32 14.3 32 32s-14.3 32-32 32H32c-17.67.0-32-14.3-32-32zM416 448H32c-17.67.0-32-14.3-32-32s14.33-32 32-32H416c17.7.0 32 14.3 32 32s-14.3 32-32 32z"/></svg></span></div><div id=menu-wrapper style=padding-top:5px class="fixed inset-0 z-30 invisible w-screen h-screen m-auto overflow-auto transition-opacity opacity-0 cursor-default bg-neutral-100/50 backdrop-blur-sm dark:bg-neutral-900/50"><ul class="flex space-y-2 mt-3 flex-col items-end w-full px-6 py-6 mx-auto overflow-visible list-none ltr:text-right rtl:text-left max-w-7xl"><li><span class="cursor-pointer inline-block align-text-bottom hover:text-primary-600 dark:hover:text-primary-400"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentcolor" d="M310.6 361.4c12.5 12.5 12.5 32.75.0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3 54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75.0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75.0-45.25s32.75-12.5 45.25.0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25.0s12.5 32.75.0 45.25l-105.4 105.4L310.6 361.4z"/></svg></span></span></li><li class=mt-1><a href=/blowfish/docs/ class="flex items-center"><p class="text-bg font-bg text-gray-500 hover:text-gray-900" title=Documentation>Docs</p></a></li><li class=mt-1><a href=/blowfish/samples/ class="flex items-center"><p class="text-bg font-bg text-gray-500 hover:text-gray-900" title=Samples>Samples</p></a></li><li class=mt-1><a href=/blowfish/examples/ class="flex items-center"><p class="text-bg font-bg text-gray-500 hover:text-gray-900" title=Showcase>Showcase</p></a></li><li class=mt-1><a href=/blowfish/guides/ class="flex items-center"><p class="text-bg font-bg text-gray-500 hover:text-gray-900" title=Recipes>Recipes</p></a></li><li class=mt-1><a href=/blowfish/users/ class="flex items-center"><p class="text-bg font-bg text-gray-500 hover:text-gray-900" title=Users>Users</p></a></li><li class=mt-1><a href=https://twitter.com/burufugu target=_blank class="flex items-center"><div><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645.0 138.72-105.583 298.558-298.558 298.558-59.452.0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055.0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421.0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391.0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04.0-57.828 46.782-104.934 104.934-104.934 30.213.0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg></span></div><p class="text-bg font-bg text-gray-500 hover:text-gray-900" title></p></a></li><li class=mt-1><a href=https://masto.ai/@blowfish target=_blank class="flex items-center"><div><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentcolor" d="M433 179.11c0-97.2-63.71-125.7-63.71-125.7-62.52-28.7-228.56-28.4-290.48.0.0.0-63.72 28.5-63.72 125.7.0 115.7-6.6 259.4 105.63 289.1 40.51 10.7 75.32 13 103.33 11.4 50.81-2.8 79.32-18.1 79.32-18.1l-1.7-36.9s-36.31 11.4-77.12 10.1c-40.41-1.4-83-4.4-89.63-54a102.54 102.54.0 01-.9-13.9c85.63 20.9 158.65 9.1 178.75 6.7 56.12-6.7 105-41.3 111.23-72.9 9.8-49.8 9-121.5 9-121.5zm-75.12 125.2h-46.63v-114.2c0-49.7-64-51.6-64 6.9v62.5h-46.33V197c0-58.5-64-56.6-64-6.9v114.2H90.19c0-122.1-5.2-147.9 18.41-175 25.9-28.9 79.82-30.8 103.83 6.1l11.6 19.5 11.6-19.5c24.11-37.1 78.12-34.8 103.83-6.1 23.71 27.3 18.4 53 18.4 175z"/></svg></span></div><p class="text-bg font-bg text-gray-500 hover:text-gray-900" title></p></a></li><li class=mt-1><a href=https://github.com/nunocoracao/blowfish target=_blank class="flex items-center"><div><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentcolor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6.0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6.0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3.0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1.0-6.2-.3-40.4-.3-61.4.0.0-70 15-84.7-29.8.0.0-11.4-29.1-27.8-36.6.0.0-22.9-15.7 1.6-15.4.0.0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5.0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9.0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4.0 33.7-.3 75.4-.3 83.6.0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6.0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9.0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg></span></div><p class="text-bg font-bg text-gray-500 hover:text-gray-900" title></p></a></li></ul></div></label></div></div><script>(function(){var e=$(".main-menu"),t=window.location.pathname;e.find('a[href="'+t+'"]').each(function(e,t){$(t).children("p").addClass("active")})})()</script></div></div><script>window.addEventListener("scroll",function(){var t=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,n=document.getElementById("menu-blur");n.style.opacity=t/300})</script><div class="relative flex flex-col grow"><main id=main-content class=grow><article><div id=hero class="h-[150px] md:h-[200px]"></div><div class="fixed inset-x-0 top-0 h-[800px] single_hero_background nozoom" style=background-image:url(/blowfish/docs/advanced-customisation/featured_huc648350f543f5a6da75f60f86e4aecc9_625096_1200x0_resize_box_3.png)><div class="absolute inset-0 bg-gradient-to-t from-neutral dark:from-neutral-800 to-transparent mix-blend-normal"></div><div class="absolute inset-0 opacity-60 bg-gradient-to-t from-neutral dark:from-neutral-800 to-neutral-100 dark:to-neutral-800 mix-blend-normal"></div></div><div id=background-blur class="fixed opacity-0 inset-x-0 top-0 h-full single_hero_background nozoom backdrop-blur-2xl"></div><script>window.addEventListener("scroll",function(){var t=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop||0,n=document.getElementById("background-blur");n.style.opacity=t/300})</script><header id=single_header class="mt-5 max-w-prose"><ol class="text-sm text-neutral-500 dark:text-neutral-400 print:hidden"><li class="inline hidden"><a class="hover:underline decoration-neutral-300 dark:underline-neutral-600" href=/blowfish/>Welcome to Blowfish! :tada:</a><span class="px-1 text-primary-500">/</span></li><li class=inline><a class="hover:underline decoration-neutral-300 dark:underline-neutral-600" href=/blowfish/docs/>Documentation</a><span class="px-1 text-primary-500">/</span></li><li class="inline hidden"><a class="hover:underline decoration-neutral-300 dark:underline-neutral-600" href=/blowfish/docs/advanced-customisation/>Advanced Customisation</a><span class="px-1 text-primary-500">/</span></li></ol><h1 class="mt-0 text-4xl font-extrabold text-neutral-900 dark:text-neutral">Advanced Customisation</h1><div class="mt-1 mb-6 text-base text-neutral-500 dark:text-neutral-400 print:hidden"><div class="flex flex-row flex-wrap items-center"><span title="Reading time">9 mins</span><span class="px-2 text-primary-500">&#183;</span><span>
<span id=views_docs/advanced-customisation/index.md title=views>0</span>
<span class="inline-block align-text-bottom"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M288 32c-80.8.0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7.0 24.6C17.3 304 48.6 356 95.4 399.4 142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1 3.3-7.9 3.3-16.7.0-24.6-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM432 256c0 79.5-64.5 144-144 144s-144-64.5-144-144 64.5-144 144-144 144 64.5 144 144zM288 192c0 35.3-28.7 64-64 64-11.5.0-22.3-3-31.6-8.4-.2 2.8-.4 5.5-.4 8.4.0 53 43 96 96 96s96-43 96-96-43-96-96-96c-2.8.0-5.6.1-8.4.4 5.3 9.3 8.4 20.1 8.4 31.6z"/></svg></span></span></span><span class="px-2 text-primary-500">&#183;</span><span>
<span id=likes_docs/advanced-customisation/index.md title=likes>0</span>
<span class="inline-block align-text-bottom"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M47.6 300.4 228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6.0 115.2.0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg></span></span></span><span class="px-2 text-primary-500">&#183;</span><span>
<button id=likes_button class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400" onclick=process_article()>
<span id=likes_button_heart style=display:none class="inline-block align-text-bottom"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M47.6 300.4 228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6.0 115.2.0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg></span></span><span id=likes_button_emtpty_heart class="inline-block align-text-bottom"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M244 84l11.1 12 12-11.98C300.6 51.37 347 36.51 392.6 44.1 461.5 55.58 512 115.2 512 185.1V190.9c0 41.5-17.2 81.2-47.6 109.5L283.7 469.1c-7.5 7-17.4 10.9-27.7 10.9S235.8 476.1 228.3 469.1L47.59 300.4C17.23 272.1.0 232.4.0 190.9V185.1c0-69.9 50.52-129.52 119.4-141 44.7-7.59 92 7.27 124.6 39.9C243.1 84 244 84.01 244 84zm11.1 79.9-45-46.8c-21.7-20.82-52.5-30.7-82.8-25.66C81.55 99.07 48 138.7 48 185.1V190.9c0 28.2 11.71 55.2 32.34 74.4L256 429.3l175.7-164c20.6-19.2 32.3-46.2 32.3-74.4V185.1c0-46.4-33.6-86.03-79.3-93.66C354.4 86.4 323.6 96.28 301.9 117.1l-46.8 46.8z"/></svg></span></span><span id=likes_button_text>&nbsp;Like</span></button>
</span><span class="px-2 text-primary-500">&#183;</span>
<span class=mb-[2px]><a href=https://github.com/nunocoracao/blowfish/tree/main/exampleSite/content/docs/advanced-customisation/index.md class="text-lg hover:text-primary-500" rel="noopener noreferrer" target=_blank title="Edit content"><span class="inline-block align-text-bottom"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M490.3 40.4c21.9 21.87 21.9 57.33.0 79.2l-30 30.1-98-97.98 30.1-30.06C414.3-.2135 449.7-.2135 471.6 21.66L490.3 40.4zM172.4 241.7 339.7 74.34l98 97.96L270.3 339.6C264.2 345.8 256.7 350.4 248.4 353.2l-88.8 29.6C150.1 385.6 141.5 383.4 135 376.1 128.6 370.5 126.4 361 129.2 352.4l29.6-88.8C161.6 255.3 166.2 247.8 172.4 241.7v0zM192 63.1c17.7.0 32 15.23 32 32 0 18.6-14.3 32-32 32H96c-17.67.0-32 15.2-32 32V416c0 17.7 14.33 32 32 32H352c17.7.0 32-14.3 32-32V319.1c0-16.8 14.3-32 32-32s32 15.2 32 32V416c0 53-43 96-96 96H96c-53.02.0-96-43-96-96V159.1c0-53 42.98-96 96-96h96z"/></svg></span></span></a></span></div><div class="flex flex-row flex-wrap items-center"></div><div class="flex flex-row flex-wrap items-center"><span style=margin-top:.5rem class=mr-2 onclick='window.open("/blowfish/tags/advanced/","_self")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">Advanced</span></span></span>
<span style=margin-top:.5rem class=mr-2 onclick='window.open("/blowfish/tags/css/","_self")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">css</span></span></span>
<span style=margin-top:.5rem class=mr-2 onclick='window.open("/blowfish/tags/docs/","_self")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">docs</span></span></span></div></div></header><section class="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row"><div class="order-first sm:max-w-prose lg:ml-auto px-0 lg:order-last lg:max-w-xs ltr:lg:pl-8 rtl:lg:pr-8"><div class="toc ltr:pl-5 rtl:pr-5 print:hidden lg:sticky lg:top-10"><details open class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 hidden lg:block"><summary class="block py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">Table of Contents</summary><div class="min-w-[220px] py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><nav id=TableOfContents><ul><li><a href=#hugo-project-structure>Hugo project structure</a></li><li><a href=#change-image-optimization-settings>Change image optimization settings</a></li><li><a href=#colour-schemes>Colour schemes</a></li><li><a href=#overriding-the-stylesheet>Overriding the stylesheet</a><ul><li><a href=#using-additional-fonts>Using additional fonts</a></li><li><a href=#adjusting-the-font-size>Adjusting the font size</a></li></ul></li><li><a href=#building-the-theme-css-from-source>Building the theme CSS from source</a><ul><li><a href=#tailwind-configuration>Tailwind configuration</a></li><li><a href=#project-structure>Project structure</a></li><li><a href=#install-dependencies>Install dependencies</a></li><li><a href=#run-the-tailwind-compiler>Run the Tailwind compiler</a></li><li><a href=#make-a-build-script>Make a build script</a></li></ul></li></ul></nav></div></details><details class="mt-0 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 lg:hidden"><summary class="py-1 text-lg font-semibold cursor-pointer bg-neutral-100 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">Table of Contents</summary><div class="py-2 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><nav id=TableOfContents><ul><li><a href=#hugo-project-structure>Hugo project structure</a></li><li><a href=#change-image-optimization-settings>Change image optimization settings</a></li><li><a href=#colour-schemes>Colour schemes</a></li><li><a href=#overriding-the-stylesheet>Overriding the stylesheet</a><ul><li><a href=#using-additional-fonts>Using additional fonts</a></li><li><a href=#adjusting-the-font-size>Adjusting the font size</a></li></ul></li><li><a href=#building-the-theme-css-from-source>Building the theme CSS from source</a><ul><li><a href=#tailwind-configuration>Tailwind configuration</a></li><li><a href=#project-structure>Project structure</a></li><li><a href=#install-dependencies>Install dependencies</a></li><li><a href=#run-the-tailwind-compiler>Run the Tailwind compiler</a></li><li><a href=#make-a-build-script>Make a build script</a></li></ul></li></ul></nav></div></details><script>(function(){var t,e=$("#TableOfContents");if(e.length>0){t=$(window);function n(){var s,o=t.scrollTop(),i=$(".anchor"),n="";if(i.each(function(e,t){t=$(t),t.offset().top-$(window).height()/3<=o&&(n=t.attr("id"))}),s=e.find("a.active"),s.length==1&&s.eq(0).attr("href")=="#"+n)return!0;s.each(function(e,t){$(t).removeClass("active").siblings("ul").hide()}),e.find('a[href="#'+n+'"]').addClass("active"),e.find('a[href="#'+n+'"]').parentsUntil("#TableOfContents").each(function(e,t){$(t).children("a").parents("ul").show()})}t.on("scroll",n),$(document).ready(function(){e.find("a").parent("li").find("ul").hide(),n()})}})()</script></div></div><div class="min-w-0 min-h-0 max-w-prose"><details style=margin-left:0 class="mt-2 mb-5 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5"><summary class="py-1 text-lg font-semibold cursor-pointer bg-primary-200 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-primary-800 dark:text-neutral-100">Documentation - This article is part of a series.</summary><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/welcome/>Part 1: Welcome to Blowfish</a></div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/installation/>Part 2: Installation</a></div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/getting-started/>Part 3: Getting Started</a></div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/configuration/>Part 4: Configuration</a></div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/homepage-layout/>Part 5: Homepage Layout</a></div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/thumbnails/>Part 6: Thumbnails</a></div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/front-matter/>Part 7: Front Matter</a></div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/shortcodes/>Part 8: Shortcodes</a></div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/partials/>Part 9: Partials</a></div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/multi-author/>Part 10: Multiple Authors</a></div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/series/>Part 11: Series</a></div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/content-examples/>Part 12: Content Examples</a></div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600">Part 13: This Article</div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/hosting-deployment/>Part 14: Hosting & Deployment</a></div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/firebase-views/>Part 15: Firebase: Views & Likes</a></div></details><p>There are many ways you can make advanced changes to Blowfish. Read below to learn more about what can be customised and the best way of achieving your desired result.</p><p>If you need further advice, post your questions on <a href=https://github.com/nunocoracao/blowfish/discussions target=_blank>GitHub Discussions</a>.</p><div id=hugo-project-structure class=anchor></div><h2 class="relative group">Hugo project structure
<span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#hugo-project-structure aria-label=Anchor>#</a></span></h2><p>Before leaping into it, first a quick note about <a href=https://gohugo.io/getting-started/directory-structure/ target=_blank>Hugo project structure</a> and best practices for managing your content and theme customisations.</p><div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900"><span class="text-primary-400 ltr:pr-3 rtl:pl-3 flex items-center"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M506.3 417 293 53c-16.33-28-57.54-28-73.98.0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6c32.76.0 53.26-35 36.96-63zM232 168c0-13.25 10.75-24 24-24s24 10.8 24 24v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zm24 248c-17.36.0-31.44-14.08-31.44-31.44s14.07-31.44 31.44-31.44 31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg></span></span><span class=dark:text-neutral-300><strong>In summary:</strong> Never directly edit the theme files. Only make customisations in your Hugo project&rsquo;s sub-directories, not in the themes directory itself.</span></div><p>Blowfish is built to take advantage of all the standard Hugo practices. It is designed to allow all aspects of the theme to be customised and overriden without changing any of the core theme files. This allows for a seamless upgrade experience while giving you total control over the look and feel of your website.</p><p>In order to achieve this, you should never manually adjust any of the theme files directly. Whether you install using Hugo modules, as a git submodule or manually include the theme in your <code>themes/</code> directory, you should always leave these files intact.</p><p>The correct way to adjust any theme behaviour is by overriding files using Hugo&rsquo;s powerful <a href=https://gohugo.io/templates/lookup-order/ target=_blank>file lookup order</a>. In summary, the lookup order ensures any files you include in your project directory will automatically take precedence over any theme files.</p><p>For example, if you wanted to override the main article template in Blowfish, you can simply create your own <code>layouts/_default/single.html</code> file and place it in the root of your project. This file will then override the <code>single.html</code> from the theme without ever changing the theme itself. This works for any theme files - HTML templates, partials, shortcodes, config files, data, assets, etc.</p><p>As long as you follow this simple practice, you will always be able to update the theme (or test different theme versions) without worrying that you will lose any of your custom changes.</p><div id=change-image-optimization-settings class=anchor></div><h2 class="relative group">Change image optimization settings
<span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#change-image-optimization-settings aria-label=Anchor>#</a></span></h2><p>Hugo has various builtin methods to resize, crop and optimize images.</p><p>As an example - in <code>layouts/partials/article-link/card.html</code>, you have the following code:</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-go data-lang=go><span class=line><span class=cl><span class=p>{{</span> <span class=nx>with</span> <span class=p>.</span><span class=nx>Resize</span> <span class=s>&#34;600x&#34;</span> <span class=p>}}</span>
</span></span><span class=line><span class=cl><span class=p>&lt;</span><span class=nx>div</span> <span class=nx>class</span><span class=p>=</span><span class=s>&#34;w-full thumbnail_card nozoom&#34;</span> <span class=nx>style</span><span class=p>=</span><span class=s>&#34;background-image:url({{ .RelPermalink }});&#34;</span><span class=p>&gt;&lt;</span><span class=o>/</span><span class=nx>div</span><span class=p>&gt;</span>
</span></span><span class=line><span class=cl><span class=p>{{</span> <span class=nx>end</span> <span class=p>}}</span>
</span></span></code></pre></div><p>The default behavior of Hugo here is to resize the image to 600px keeping the ratio.</p><p>It is worth noting here that default image configurations such as <a href=https://gohugo.io/content-management/image-processing/#anchor target=_blank>anchor point</a> can also be set in your <a href=https://gohugo.io/content-management/image-processing/#processing-options target=_blank>site configuration</a> as well as in the template itself.</p><p>See the <a href=https://gohugo.io/content-management/image-processing/#image-processing-methods target=_blank>Hugo docs on image processing</a> for more info.</p><div id=colour-schemes class=anchor></div><h2 class="relative group">Colour schemes
<span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#colour-schemes aria-label=Anchor>#</a></span></h2><p>Blowfish ships with a number of colour schemes out of the box. To change the basic colour scheme, you can set the <code>colorScheme</code> theme parameter. Refer to the <a href=https://nunocoracao.github.io/blowfish/docs/getting-started/#colour-schemes>Getting Started</a> section to learn more about the built-in schemes.</p><p>In addition to the default schemes, you can also create your own and re-style the entire website to your liking. Schemes are created by by placing a <code>&lt;scheme-name>.css</code> file in the <code>assets/css/schemes/</code> folder. Once the file is created, simply refer to it by name in the theme configuration.</p><div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900"><span class="text-primary-400 ltr:pr-3 rtl:pl-3 flex items-center"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentcolor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6.0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6.0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3.0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1.0-6.2-.3-40.4-.3-61.4.0.0-70 15-84.7-29.8.0.0-11.4-29.1-27.8-36.6.0.0-22.9-15.7 1.6-15.4.0.0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5.0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9.0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4.0 33.7-.3 75.4-.3 83.6.0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6.0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9.0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg></span></span><span class=dark:text-neutral-300><strong>Note:</strong> generating these files manually can be hard, I&rsquo;ve built a <code>nodejs</code> terminal tool to help with that, <a href=https://github.com/nunocoracao/fugu target=_blank>Fugu</a>. In a nutshell, you pass the main three <code>hex</code> values of your color pallette and the program will output a css file that can be imported directly into Blowfish.</span></div><p>Blowfish defines a three-colour palette that is used throughout the theme. The three colours are defined as <code>neutral</code>, <code>primary</code> and <code>secondary</code> variants, each containing ten shades of colour.</p><p>Due to the way Tailwind CSS 3.0 calculates colour values with opacity, the colours specified in the scheme need to <a href=https://github.com/adamwathan/tailwind-css-variable-text-opacity-demo target=_blank>conform to a particular format</a> by providing the red, green and blue colour values.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-css data-lang=css><span class=line><span class=cl><span class=p>:</span><span class=nd>root</span> <span class=p>{</span>
</span></span><span class=line><span class=cl> <span class=nv>--color-primary-500</span><span class=p>:</span> <span class=mi>139</span><span class=p>,</span> <span class=mi>92</span><span class=p>,</span> <span class=mi>246</span><span class=p>;</span>
</span></span><span class=line><span class=cl><span class=p>}</span>
</span></span></code></pre></div><p>This example defines a CSS variable for the <code>primary-500</code> colour with a red value of <code>139</code>, green value of <code>92</code> and blue value of <code>246</code>.</p><p>Use one of the existing theme stylesheets as a template. You are free to define your own colours, but for some inspiration, check out the official <a href=https://tailwindcss.com/docs/customizing-colors#color-palette-reference target=_blank>Tailwind colour palette reference</a>.</p><div id=overriding-the-stylesheet class=anchor></div><h2 class="relative group">Overriding the stylesheet
<span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#overriding-the-stylesheet aria-label=Anchor>#</a></span></h2><p>Sometimes you need to add a custom style to style your own HTML elements. Blowfish provides for this scenario by allowing you to override the default styles in your own CSS stylesheet. Simply create a <code>custom.css</code> file in your project&rsquo;s <code>assets/css/</code> folder.</p><p>The <code>custom.css</code> file will be minified by Hugo and loaded automatically after all the other theme styles which means anything in your custom file will take precedence over the defaults.</p><div id=using-additional-fonts class=anchor></div><h3 class="relative group">Using additional fonts
<span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#using-additional-fonts aria-label=Anchor>#</a></span></h3><p>Blowfish allows you to easily change the font for your site. After creating a <code>custom.css</code> file in your project&rsquo;s <code>assets/css/</code> folder, place you font file inside a <code>fonts</code> folder withing the <code>static</code> root folder.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell><span class=line><span class=cl>.
</span></span><span class=line><span class=cl>├── assets
</span></span><span class=line><span class=cl>│ └── css
</span></span><span class=line><span class=cl>│ └── custom.css
</span></span><span class=line><span class=cl>...
</span></span><span class=line><span class=cl>└─── static
</span></span><span class=line><span class=cl> └── fonts
</span></span><span class=line><span class=cl> └─── font.ttf
</span></span></code></pre></div><p>This makes the font available to the website. Now, the font can just import it in your <code>custom.css</code> and replaced wherever you see fit. The example below shows what replacing the font for the entire <code>html</code> would look like.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-css data-lang=css><span class=line><span class=cl><span class=p>@</span><span class=k>font-face</span> <span class=p>{</span>
</span></span><span class=line><span class=cl> <span class=nt>font-family</span><span class=o>:</span> <span class=nt>font</span><span class=o>;</span>
</span></span><span class=line><span class=cl> <span class=nt>src</span><span class=o>:</span> <span class=nt>url</span><span class=o>(</span><span class=s1>&#39;/fonts/font.ttf&#39;</span><span class=o>);</span>
</span></span><span class=line><span class=cl><span class=p>}</span>
</span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl><span class=nt>html</span> <span class=p>{</span>
</span></span><span class=line><span class=cl> <span class=k>font-family</span><span class=p>:</span> <span class=k>font</span><span class=p>;</span>
</span></span><span class=line><span class=cl><span class=p>}</span>
</span></span></code></pre></div><div id=adjusting-the-font-size class=anchor></div><h3 class="relative group">Adjusting the font size
<span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#adjusting-the-font-size aria-label=Anchor>#</a></span></h3><p>Changing the font size of your website is one example of overriding the default stylesheet. Blowfish makes this simple as it uses scaled font sizes throughout the theme which are derived from the base HTML font size. By default, Tailwind sets the default size to <code>12pt</code>, but it can be changed to whatever value you prefer.</p><p>Create a <code>custom.css</code> file using the <a href=#overriding-the-stylesheet>instructions above</a> and add the following CSS declaration:</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-css data-lang=css><span class=line><span class=cl><span class=c>/* Increase the default font size */</span>
</span></span><span class=line><span class=cl><span class=nt>html</span> <span class=p>{</span>
</span></span><span class=line><span class=cl> <span class=k>font-size</span><span class=p>:</span> <span class=mi>13</span><span class=kt>pt</span><span class=p>;</span>
</span></span><span class=line><span class=cl><span class=p>}</span>
</span></span></code></pre></div><p>Simply by changing this one value, all the font sizes on your website will be adjusted to match this new size. Therefore, to increase the overall font sizes used, make the value greater than <code>12pt</code>. Similarly, to decrease the font sizes, make the value less than <code>12pt</code>.</p><div id=building-the-theme-css-from-source class=anchor></div><h2 class="relative group">Building the theme CSS from source
<span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#building-the-theme-css-from-source aria-label=Anchor>#</a></span></h2><p>If you&rsquo;d like to make a major change, you can take advantage of Tailwind CSS&rsquo;s JIT compiler and rebuild the entire theme CSS from scratch. This is useful if you want to adjust the Tailwind configuration or add extra Tailwind classes to the main stylesheet.</p><div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900"><span class="text-primary-400 ltr:pr-3 rtl:pl-3 flex items-center"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M506.3 417 293 53c-16.33-28-57.54-28-73.98.0l-213.2 364C-10.59 444.9 9.849 480 42.74 480h426.6c32.76.0 53.26-35 36.96-63zM232 168c0-13.25 10.75-24 24-24s24 10.8 24 24v128c0 13.25-10.75 24-23.1 24S232 309.3 232 296V168zm24 248c-17.36.0-31.44-14.08-31.44-31.44s14.07-31.44 31.44-31.44 31.44 14.08 31.44 31.44C287.4 401.9 273.4 416 256 416z"/></svg></span></span><span class=dark:text-neutral-300><strong>Note:</strong> Building the theme manually is intended for advanced users.</span></div><p>Let&rsquo;s step through how building the Tailwind CSS works.</p><div id=tailwind-configuration class=anchor></div><h3 class="relative group">Tailwind configuration
<span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#tailwind-configuration aria-label=Anchor>#</a></span></h3><p>In order to generate a CSS file that only contains the Tailwind classes that are actually being used the JIT compiler needs to scan through all the HTML templates and Markdown content files to check which styles are present in the markup. The compiler does this by looking at the <code>tailwind.config.js</code> file which is included in the root of the theme directory:</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-js data-lang=js><span class=line><span class=cl><span class=c1>// themes/blowfish/tailwind.config.js
</span></span></span><span class=line><span class=cl><span class=c1></span>
</span></span><span class=line><span class=cl><span class=nx>module</span><span class=p>.</span><span class=nx>exports</span> <span class=o>=</span> <span class=p>{</span>
</span></span><span class=line><span class=cl> <span class=nx>content</span><span class=o>:</span> <span class=p>[</span>
</span></span><span class=line><span class=cl> <span class=s2>&#34;./layouts/**/*.html&#34;</span><span class=p>,</span>
</span></span><span class=line><span class=cl> <span class=s2>&#34;./content/**/*.{html,md}&#34;</span><span class=p>,</span>
</span></span><span class=line><span class=cl> <span class=s2>&#34;./themes/blowfish/layouts/**/*.html&#34;</span><span class=p>,</span>
</span></span><span class=line><span class=cl> <span class=s2>&#34;./themes/blowfish/content/**/*.{html,md}&#34;</span><span class=p>,</span>
</span></span><span class=line><span class=cl> <span class=p>],</span>
</span></span><span class=line><span class=cl>
</span></span><span class=line><span class=cl> <span class=c1>// and more...
</span></span></span><span class=line><span class=cl><span class=c1></span><span class=p>};</span>
</span></span></code></pre></div><p>This default configuration has been included with these content paths so that you can easily generate your own CSS file without needing to modify it, provided you follow a particular project structure. Namely, <strong>you have to include Blowfish in your project as a subdirectory at <code>themes/blowfish/</code></strong>. This means you cannot easily use Hugo Modules to install the theme and you must go down either the git submodule (recommended) or manual install routes. The <a href=https://nunocoracao.github.io/blowfish/docs/installation/>Installation docs</a> explain how to install the theme using either of these methods.</p><div id=project-structure class=anchor></div><h3 class="relative group">Project structure
<span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#project-structure aria-label=Anchor>#</a></span></h3><p>In order to take advantage of the default configuration, your project should look something like this&mldr;</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell><span class=line><span class=cl>.
</span></span><span class=line><span class=cl>├── assets
</span></span><span class=line><span class=cl>│ └── css
</span></span><span class=line><span class=cl>│ └── compiled
</span></span><span class=line><span class=cl>│ └── main.css <span class=c1># this is the file we will generate</span>
</span></span><span class=line><span class=cl>├── config <span class=c1># site config</span>
</span></span><span class=line><span class=cl>│ └── _default
</span></span><span class=line><span class=cl>├── content <span class=c1># site content</span>
</span></span><span class=line><span class=cl>│ ├── _index.md
</span></span><span class=line><span class=cl>│ ├── projects
</span></span><span class=line><span class=cl>│ │ └── _index.md
</span></span><span class=line><span class=cl>│ └── blog
</span></span><span class=line><span class=cl>│ └── _index.md
</span></span><span class=line><span class=cl>├── layouts <span class=c1># custom layouts for your site</span>
</span></span><span class=line><span class=cl>│ ├── partials
</span></span><span class=line><span class=cl>│ │ └── extend-article-link/simple.html
</span></span><span class=line><span class=cl>│ ├── projects
</span></span><span class=line><span class=cl>│ │ └── list.html
</span></span><span class=line><span class=cl>│ └── shortcodes
</span></span><span class=line><span class=cl>│ └── disclaimer.html
</span></span><span class=line><span class=cl>└── themes
</span></span><span class=line><span class=cl> └── blowfish <span class=c1># git submodule or manual theme install</span>
</span></span></code></pre></div><p>This example structure adds a new <code>projects</code> content type with its own custom layout along with a custom shortcode and extended partial. Provided the project follows this structure, all that&rsquo;s required is to recompile the <code>main.css</code> file.</p><div id=install-dependencies class=anchor></div><h3 class="relative group">Install dependencies
<span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#install-dependencies aria-label=Anchor>#</a></span></h3><p>In order for this to work you&rsquo;ll need to change into the <code>themes/blowfish/</code> directory and install the project dependencies. You&rsquo;ll need <a href=https://docs.npmjs.com/cli/v7/configuring-npm/install target=_blank>npm</a> on your local machine for this step.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell><span class=line><span class=cl><span class=nb>cd</span> themes/blowfish
</span></span><span class=line><span class=cl>npm install
</span></span></code></pre></div><div id=run-the-tailwind-compiler class=anchor></div><h3 class="relative group">Run the Tailwind compiler
<span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#run-the-tailwind-compiler aria-label=Anchor>#</a></span></h3><p>With the dependencies installed all that&rsquo;s left is to use <a href=https://v2.tailwindcss.com/docs/installation#using-tailwind-cli target=_blank>Tailwind CLI</a> to invoke the JIT compiler. Navigate back to the root of your Hugo project and issue the following command:</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-shell data-lang=shell><span class=line><span class=cl><span class=nb>cd</span> ../..
</span></span><span class=line><span class=cl>./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit
</span></span></code></pre></div><p>It&rsquo;s a bit of an ugly command due to the paths involved but essentially you&rsquo;re calling Tailwind CLI and passing it the location of the Tailwind config file (the one we looked at above), where to find the theme&rsquo;s <code>main.css</code> file and then where you want the compiled CSS file to be placed (it&rsquo;s going into the <code>assets/css/compiled/</code> folder of your Hugo project).</p><p>The config file will automatically inspect all the content and layouts in your project as well as all those in the theme and build a new CSS file that contains all the CSS required for your website. Due to the way Hugo handles file hierarchy, this file in your project will now automatically override the one that comes with the theme.</p><p>Each time you make a change to your layouts and need new Tailwind CSS styles, you can simply re-run the command and generate the new CSS file. You can also add <code>-w</code> to the end of the command to run the JIT compiler in watch mode.</p><div id=make-a-build-script class=anchor></div><h3 class="relative group">Make a build script
<span class="absolute top-0 w-6 transition-opacity opacity-0 ltr:-left-6 rtl:-right-6 not-prose group-hover:opacity-100"><a class="group-hover:text-primary-300 dark:group-hover:text-neutral-700" style=text-decoration-line:none!important href=#make-a-build-script aria-label=Anchor>#</a></span></h3><p>To fully complete this solution, you can simplify this whole process by adding aliases for these commands, or do what I do and add a <code>package.json</code> to the root of your project which contains the necessary scripts&mldr;</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-js data-lang=js><span class=line><span class=cl><span class=c1>// package.json
</span></span></span><span class=line><span class=cl><span class=c1></span>
</span></span><span class=line><span class=cl><span class=p>{</span>
</span></span><span class=line><span class=cl> <span class=s2>&#34;name&#34;</span><span class=o>:</span> <span class=s2>&#34;my-website&#34;</span><span class=p>,</span>
</span></span><span class=line><span class=cl> <span class=s2>&#34;version&#34;</span><span class=o>:</span> <span class=s2>&#34;1.0.0&#34;</span><span class=p>,</span>
</span></span><span class=line><span class=cl> <span class=s2>&#34;description&#34;</span><span class=o>:</span> <span class=s2>&#34;&#34;</span><span class=p>,</span>
</span></span><span class=line><span class=cl> <span class=s2>&#34;scripts&#34;</span><span class=o>:</span> <span class=p>{</span>
</span></span><span class=line><span class=cl> <span class=s2>&#34;server&#34;</span><span class=o>:</span> <span class=s2>&#34;hugo server -b http://localhost -p 8000&#34;</span><span class=p>,</span>
</span></span><span class=line><span class=cl> <span class=s2>&#34;dev&#34;</span><span class=o>:</span> <span class=s2>&#34;NODE_ENV=development ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit -w&#34;</span><span class=p>,</span>
</span></span><span class=line><span class=cl> <span class=s2>&#34;build&#34;</span><span class=o>:</span> <span class=s2>&#34;NODE_ENV=production ./themes/blowfish/node_modules/tailwindcss/lib/cli.js -c ./themes/blowfish/tailwind.config.js -i ./themes/blowfish/assets/css/main.css -o ./assets/css/compiled/main.css --jit&#34;</span>
</span></span><span class=line><span class=cl> <span class=p>},</span>
</span></span><span class=line><span class=cl> <span class=c1>// and more...
</span></span></span><span class=line><span class=cl><span class=c1></span><span class=p>}</span>
</span></span></code></pre></div><p>Now when you want to work on designing your site, you can invoke <code>npm run dev</code> and the compiler will run in watch mode. When you&rsquo;re ready to deploy, run <code>npm run build</code> and you&rsquo;ll get a clean Tailwind CSS build.</p><p>🙋‍♀️ If you need help, feel free to ask a question on <a href=https://github.com/nunocoracao/blowfish/discussions target=_blank>GitHub Discussions</a>.</p></br></br><details style=margin-left:0 class="mt-2 mb-5 overflow-hidden rounded-lg ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5"><summary class="py-1 text-lg font-semibold cursor-pointer bg-primary-200 text-neutral-800 ltr:-ml-5 ltr:pl-5 rtl:-mr-5 rtl:pr-5 dark:bg-primary-800 dark:text-neutral-100">Documentation - This article is part of a series.</summary><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/welcome/>Part 1: Welcome to Blowfish</a></div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/installation/>Part 2: Installation</a></div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/getting-started/>Part 3: Getting Started</a></div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/configuration/>Part 4: Configuration</a></div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/homepage-layout/>Part 5: Homepage Layout</a></div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/thumbnails/>Part 6: Thumbnails</a></div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/front-matter/>Part 7: Front Matter</a></div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/shortcodes/>Part 8: Shortcodes</a></div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/partials/>Part 9: Partials</a></div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/multi-author/>Part 10: Multiple Authors</a></div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/series/>Part 11: Series</a></div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/content-examples/>Part 12: Content Examples</a></div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600">Part 13: This Article</div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/hosting-deployment/>Part 14: Hosting & Deployment</a></div><div class="py-1 border-dotted border-neutral-300 ltr:-ml-5 ltr:border-l ltr:pl-5 rtl:-mr-5 rtl:border-r rtl:pr-5 dark:border-neutral-600"><a href=https://nunocoracao.github.io/blowfish/docs/firebase-views/>Part 15: Firebase: Views & Likes</a></div></details></div><script>var oid="views_docs/advanced-customisation/index.md",oid_likes="likes_docs/advanced-customisation/index.md"</script><script type=text/javascript src=/blowfish/js/page.min.0e49973b4ad0a382c7c6012d8bff8226316642daabc4f8a20477bd08674f3da6e2fa993bc20ad4f51e7c5bb68e6f913a207a7c4fe37ea0e7b806894afce0a64e.js integrity="sha512-DkmXO0rQo4LHxgEti/+CJjFmQtqrxPiiBHe9CGdPPabi+pk7wgrU9R58W7aOb5E6IHp8T+N+oOe4BolK/OCmTg=="></script></section><footer class="pt-8 max-w-prose print:hidden"><section class="flex flex-row flex-wrap justify-center pt-4 text-xl"><a target=_blank class="m-1 rounded bg-neutral-300 p-1.5 text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800" href="https://www.linkedin.com/shareArticle?mini=true&amp;url=https://nunocoracao.github.io/blowfish/docs/advanced-customisation/&amp;title=Advanced%20Customisation" title="Share on LinkedIn" aria-label="Share on LinkedIn"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentcolor" d="M416 32H31.9C14.3 32 0 46.5.0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6.0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3.0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2.0 38.5 17.3 38.5 38.5.0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6.0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2.0 79.7 44.3 79.7 101.9V416z"/></svg></span></a><a target=_blank class="m-1 rounded bg-neutral-300 p-1.5 text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800" href="https://twitter.com/intent/tweet/?url=https://nunocoracao.github.io/blowfish/docs/advanced-customisation/&amp;text=Advanced%20Customisation" title="Tweet on Twitter" aria-label="Tweet on Twitter"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M459.37 151.716c.325 4.548.325 9.097.325 13.645.0 138.72-105.583 298.558-298.558 298.558-59.452.0-114.68-17.219-161.137-47.106 8.447.974 16.568 1.299 25.34 1.299 49.055.0 94.213-16.568 130.274-44.832-46.132-.975-84.792-31.188-98.112-72.772 6.498.974 12.995 1.624 19.818 1.624 9.421.0 18.843-1.3 27.614-3.573-48.081-9.747-84.143-51.98-84.143-102.985v-1.299c13.969 7.797 30.214 12.67 47.431 13.319-28.264-18.843-46.781-51.005-46.781-87.391.0-19.492 5.197-37.36 14.294-52.954 51.655 63.675 129.3 105.258 216.365 109.807-1.624-7.797-2.599-15.918-2.599-24.04.0-57.828 46.782-104.934 104.934-104.934 30.213.0 57.502 12.67 76.67 33.137 23.715-4.548 46.456-13.32 66.599-25.34-7.798 24.366-24.366 44.833-46.132 57.827 21.117-2.273 41.584-8.122 60.426-16.243-14.292 20.791-32.161 39.308-52.628 54.253z"/></svg></span></a><a target=_blank class="m-1 rounded bg-neutral-300 p-1.5 text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800" href="https://reddit.com/submit/?url=https://nunocoracao.github.io/blowfish/docs/advanced-customisation/&amp;resubmit=true&amp;title=Advanced%20Customisation" title="Submit to Reddit" aria-label="Submit to Reddit"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M201.5 305.5c-13.8.0-24.9-11.1-24.9-24.6.0-13.8 11.1-24.9 24.9-24.9 13.6.0 24.6 11.1 24.6 24.9.0 13.6-11.1 24.6-24.6 24.6zM504 256c0 137-111 248-248 248S8 393 8 256 119 8 256 8s248 111 248 248zm-132.3-41.2c-9.4.0-17.7 3.9-23.8 10-22.4-15.5-52.6-25.5-86.1-26.6l17.4-78.3 55.4 12.5c0 13.6 11.1 24.6 24.6 24.6 13.8.0 24.9-11.3 24.9-24.9s-11.1-24.9-24.9-24.9c-9.7.0-18 5.8-22.1 13.8l-61.2-13.6c-3-.8-6.1 1.4-6.9 4.4l-19.1 86.4c-33.2 1.4-63.1 11.3-85.5 26.8-6.1-6.4-14.7-10.2-24.1-10.2-34.9.0-46.3 46.9-14.4 62.8-1.1 5-1.7 10.2-1.7 15.5.0 52.6 59.2 95.2 132 95.2 73.1.0 132.3-42.6 132.3-95.2.0-5.3-.6-10.8-1.9-15.8 31.3-16 19.8-62.5-14.9-62.5zM302.8 331c-18.2 18.2-76.1 17.9-93.6.0-2.2-2.2-6.1-2.2-8.3.0-2.5 2.5-2.5 6.4.0 8.6 22.8 22.8 87.3 22.8 110.2.0 2.5-2.2 2.5-6.1.0-8.6-2.2-2.2-6.1-2.2-8.3.0zm7.7-75c-13.6.0-24.6 11.1-24.6 24.9.0 13.6 11.1 24.6 24.6 24.6 13.8.0 24.9-11.1 24.9-24.6.0-13.8-11-24.9-24.9-24.9z"/></svg></span></a><a target=_blank class="m-1 rounded bg-neutral-300 p-1.5 text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800" href="https://api.whatsapp.com/send?text=https://nunocoracao.github.io/blowfish/docs/advanced-customisation/&amp;resubmit=true&amp;title=Advanced%20Customisation" title aria-label><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentcolor" d="M380.9 97.1C339 55.1 283.2 32 223.9 32c-122.4.0-222 99.6-222 222 0 39.1 10.2 77.3 29.6 111L0 480l117.7-30.9c32.4 17.7 68.9 27 106.1 27h.1c122.3.0 224.1-99.6 224.1-222 0-59.3-25.2-115-67.1-157zm-157 341.6c-33.2.0-65.7-8.9-94-25.7l-6.7-4-69.8 18.3L72 359.2l-4.4-7c-18.5-29.4-28.2-63.3-28.2-98.2.0-101.7 82.8-184.5 184.6-184.5 49.3.0 95.6 19.2 130.4 54.1 34.8 34.9 56.2 81.2 56.1 130.5.0 101.8-84.9 184.6-186.6 184.6zm101.2-138.2c-5.5-2.8-32.8-16.2-37.9-18-5.1-1.9-8.8-2.8-12.5 2.8s-14.3 18-17.6 21.8c-3.2 3.7-6.5 4.2-12 1.4-32.6-16.3-54-29.1-75.5-66-5.7-9.8 5.7-9.1 16.3-30.3 1.8-3.7.9-6.9-.5-9.7-1.4-2.8-12.5-30.1-17.1-41.2-4.5-10.8-9.1-9.3-12.5-9.5-3.2-.2-6.9-.2-10.6-.2s-9.7 1.4-14.8 6.9c-5.1 5.6-19.4 19-19.4 46.3.0 27.3 19.9 53.7 22.6 57.4 2.8 3.7 39.1 59.7 94.8 83.8 35.2 15.2 49 16.5 66.6 13.9 10.7-1.6 32.8-13.4 37.4-26.4 4.6-13 4.6-24.1 3.2-26.4-1.3-2.5-5-3.9-10.5-6.6z"/></svg></span></a><a target=_blank class="m-1 rounded bg-neutral-300 p-1.5 text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800" href="https://t.me/share/url?url=https://nunocoracao.github.io/blowfish/docs/advanced-customisation/&amp;resubmit=true&amp;title=Advanced%20Customisation" title aria-label><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentcolor" d="M248 8C111.033 8 0 119.033.0 256S111.033 504 248 504 496 392.967 496 256 384.967 8 248 8zM362.952 176.66c-3.732 39.215-19.881 134.378-28.1 178.3-3.476 18.584-10.322 24.816-16.948 25.425-14.4 1.326-25.338-9.517-39.287-18.661-21.827-14.308-34.158-23.215-55.346-37.177-24.485-16.135-8.612-25 5.342-39.5 3.652-3.793 67.107-61.51 68.335-66.746.153-.655.3-3.1-1.154-4.384s-3.59-.849-5.135-.5q-3.283.746-104.608 69.142-14.845 10.194-26.894 9.934c-8.855-.191-25.888-5.006-38.551-9.123-15.531-5.048-27.875-7.717-26.8-16.291q.84-6.7 18.45-13.7 108.446-47.248 144.628-62.3c68.872-28.647 83.183-33.623 92.511-33.789 2.052-.034 6.639.474 9.61 2.885a10.452 10.452.0 013.53 6.716A43.765 43.765.0 01362.952 176.66z"/></svg></span></a><a target=_blank class="m-1 rounded bg-neutral-300 p-1.5 text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800" href="https://pinterest.com/pin/create/bookmarklet/?url=https://nunocoracao.github.io/blowfish/docs/advanced-customisation/&amp;description=Advanced%20Customisation" title="Pin on Pinterest" aria-label="Pin on Pinterest"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path fill="currentcolor" d="M496 256c0 137-111 248-248 248-25.6.0-50.2-3.9-73.4-11.1 10.1-16.5 25.2-43.5 30.8-65 3-11.6 15.4-59 15.4-59 8.1 15.4 31.7 28.5 56.8 28.5 74.8.0 128.7-68.8 128.7-154.3.0-81.9-66.9-143.2-152.9-143.2-107 0-163.9 71.8-163.9 150.1.0 36.4 19.4 81.7 50.3 96.1 4.7 2.2 7.2 1.2 8.3-3.3.8-3.4 5-20.3 6.9-28.1.6-2.5.3-4.7-1.7-7.1-10.1-12.5-18.3-35.3-18.3-56.6.0-54.7 41.4-107.6 112-107.6 60.9.0 103.6 41.5 103.6 100.9.0 67.1-33.9 113.6-78 113.6-24.3.0-42.6-20.1-36.7-44.8 7-29.5 20.5-61.3 20.5-82.6.0-19-10.2-34.9-31.4-34.9-24.9.0-44.9 25.7-44.9 60.2.0 22 7.4 36.8 7.4 36.8s-24.5 103.8-29 123.2c-5 21.4-3 51.6-.9 71.2C65.4 450.9.0 361.1.0 256 0 119 111 8 248 8s248 111 248 248z"/></svg></span></a><a target=_blank class="m-1 rounded bg-neutral-300 p-1.5 text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800" href="https://www.facebook.com/sharer/sharer.php?u=https://nunocoracao.github.io/blowfish/docs/advanced-customisation/&amp;quote=Advanced%20Customisation" title="Share on Facebook" aria-label="Share on Facebook"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14.0 55.52 4.84 55.52 4.84v61h-31.28c-30.8.0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/></svg></span></a><a target=_blank class="m-1 rounded bg-neutral-300 p-1.5 text-neutral-700 hover:bg-primary-500 hover:text-neutral dark:bg-neutral-700 dark:text-neutral-300 dark:hover:bg-primary-400 dark:hover:text-neutral-800" href="mailto:?body=https://nunocoracao.github.io/blowfish/docs/advanced-customisation/&amp;subject=Advanced%20Customisation" title="Send via email" aria-label="Send via email"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M207.8 20.73c-93.45 18.32-168.7 93.66-187 187.1-27.64 140.9 68.65 266.2 199.1 285.1 19.01 2.888 36.17-12.26 36.17-31.49l1e-4-.6631c0-15.74-11.44-28.88-26.84-31.24-84.35-12.98-149.2-86.13-149.2-174.2.0-102.9 88.61-185.5 193.4-175.4 91.54 8.869 158.6 91.25 158.6 183.2v16.16c0 22.09-17.94 40.05-40 40.05s-40.01-17.96-40.01-40.05v-120.1c0-8.847-7.161-16.02-16.01-16.02l-31.98.0036c-7.299.0-13.2 4.992-15.12 11.68-24.85-12.15-54.24-16.38-86.06-5.106-38.75 13.73-68.12 48.91-73.72 89.64-9.483 69.01 43.81 128 110.9 128 26.44.0 50.43-9.544 69.59-24.88 24 31.3 65.23 48.69 109.4 37.49C465.2 369.3 496 324.1 495.1 277.2V256.3c0-149.2-133.9-265.632-287.3-235.57zM239.1 304.3c-26.47.0-48-21.56-48-48.05s21.53-48.05 48-48.05 48 21.56 48 48.05-20.6 48.05-48 48.05z"/></svg></span></a></section><h2 class="mt-8 text-2xl font-extrabold mb-10">Related</h2><section class="w-full grid gap-4 sm:grid-cols-2 md:grid-cols-3"><a href=/blowfish/docs/hosting-deployment/ class=min-w-full><div class="min-h-full border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative backdrop-blur"><div class="w-full thumbnail_card_related nozoom" style=background-image:url(/blowfish/docs/hosting-deployment/featured_hu64bf821b067f4f95fc394dc0a744aa3f_4868715_600x0_resize_box_3.png)></div><div class="px-6 py-4"><div class="font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral" href=/blowfish/docs/hosting-deployment/>Hosting & Deployment</div><div class="text-sm text-neutral-500 dark:text-neutral-400"><div class="flex flex-row flex-wrap items-center"><span title="Reading time">4 mins</span><span class="px-2 text-primary-500">&#183;</span><span>
<span id=views_docs/hosting-deployment/index.md title=views>0</span>
<span class="inline-block align-text-bottom"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M288 32c-80.8.0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7.0 24.6C17.3 304 48.6 356 95.4 399.4 142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1 3.3-7.9 3.3-16.7.0-24.6-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM432 256c0 79.5-64.5 144-144 144s-144-64.5-144-144 64.5-144 144-144 144 64.5 144 144zM288 192c0 35.3-28.7 64-64 64-11.5.0-22.3-3-31.6-8.4-.2 2.8-.4 5.5-.4 8.4.0 53 43 96 96 96s96-43 96-96-43-96-96-96c-2.8.0-5.6.1-8.4.4 5.3 9.3 8.4 20.1 8.4 31.6z"/></svg></span></span></span><span class="px-2 text-primary-500">&#183;</span><span>
<span id=likes_docs/hosting-deployment/index.md title=likes>0</span>
<span class="inline-block align-text-bottom"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M47.6 300.4 228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6.0 115.2.0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg></span></span></span></div><div class="flex flex-row flex-wrap items-center"></div><div class="flex flex-row flex-wrap items-center"><span style=margin-top:.5rem class=mr-2 onclick='window.open("/blowfish/tags/docs/","_self")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">docs</span></span></span>
<span style=margin-top:.5rem class=mr-2 onclick='window.open("/blowfish/tags/hosting/","_self")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">hosting</span></span></span>
<span style=margin-top:.5rem class=mr-2 onclick='window.open("/blowfish/tags/deployment/","_self")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">deployment</span></span></span>
<span style=margin-top:.5rem class=mr-2 onclick='window.open("/blowfish/tags/github/","_self")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">github</span></span></span>
<span style=margin-top:.5rem class=mr-2 onclick='window.open("/blowfish/tags/netlify/","_self")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">netlify</span></span></span>
<span style=margin-top:.5rem class=mr-2 onclick='window.open("/blowfish/tags/render/","_self")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">render</span></span></span></div></div></div><div class="px-6 pt-4 pb-2"></div></div></a><a href=/blowfish/samples/markdown/ class=min-w-full><div class="min-h-full border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative backdrop-blur"><div class="w-full thumbnail_card_related nozoom" style=background-image:url(/blowfish/samples/markdown/featured_hu3d03a01dcc18bc5be0e67db3d8d209a6_6532481_600x0_resize_q75_box.jpg)></div><div class="px-6 py-4"><div class="font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral" href=/blowfish/samples/markdown/>Markdown</div><div class="text-sm text-neutral-500 dark:text-neutral-400"><div class="flex flex-row flex-wrap items-center"><span title="Reading time">3 mins</span><span class="px-2 text-primary-500">&#183;</span><span>
<span id=views_samples/markdown/index.md title=views>0</span>
<span class="inline-block align-text-bottom"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M288 32c-80.8.0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7.0 24.6C17.3 304 48.6 356 95.4 399.4 142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1 3.3-7.9 3.3-16.7.0-24.6-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM432 256c0 79.5-64.5 144-144 144s-144-64.5-144-144 64.5-144 144-144 144 64.5 144 144zM288 192c0 35.3-28.7 64-64 64-11.5.0-22.3-3-31.6-8.4-.2 2.8-.4 5.5-.4 8.4.0 53 43 96 96 96s96-43 96-96-43-96-96-96c-2.8.0-5.6.1-8.4.4 5.3 9.3 8.4 20.1 8.4 31.6z"/></svg></span></span></span><span class="px-2 text-primary-500">&#183;</span><span>
<span id=likes_samples/markdown/index.md title=likes>0</span>
<span class="inline-block align-text-bottom"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M47.6 300.4 228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6.0 115.2.0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg></span></span></span></div><div class="flex flex-row flex-wrap items-center"></div><div class="flex flex-row flex-wrap items-center"><span style=margin-top:.5rem class=mr-2 onclick='window.open("/blowfish/tags/markdown/","_self")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">markdown</span></span></span>
<span style=margin-top:.5rem class=mr-2 onclick='window.open("/blowfish/tags/css/","_self")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">css</span></span></span>
<span style=margin-top:.5rem class=mr-2 onclick='window.open("/blowfish/tags/html/","_self")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">html</span></span></span>
<span style=margin-top:.5rem class=mr-2 onclick='window.open("/blowfish/tags/sample/","_self")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">sample</span></span></span></div></div></div><div class="px-6 pt-4 pb-2"></div></div></a><a href=/blowfish/docs/firebase-views/ class=min-w-full><div class="min-h-full border border-neutral-200 dark:border-neutral-700 border-2 rounded overflow-hidden shadow-2xl relative backdrop-blur"><div class="w-full thumbnail_card_related nozoom" style=background-image:url(/blowfish/docs/firebase-views/featured_hu893b4009285a3fc236e74f3cf6b73d3e_4462659_600x0_resize_box_3.png)></div><div class="px-6 py-4"><div class="font-bold text-xl text-neutral-800 decoration-primary-500 hover:underline hover:underline-offset-2 dark:text-neutral" href=/blowfish/docs/firebase-views/>Firebase: Views & Likes</div><div class="text-sm text-neutral-500 dark:text-neutral-400"><div class="flex flex-row flex-wrap items-center"><span title="Reading time">2 mins</span><span class="px-2 text-primary-500">&#183;</span><span>
<span id=views_docs/firebase-views/index.md title=views>0</span>
<span class="inline-block align-text-bottom"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M288 32c-80.8.0-145.5 36.8-192.6 80.6C48.6 156 17.3 208 2.5 243.7c-3.3 7.9-3.3 16.7.0 24.6C17.3 304 48.6 356 95.4 399.4 142.5 443.2 207.2 480 288 480s145.5-36.8 192.6-80.6c46.8-43.5 78.1-95.4 93-131.1 3.3-7.9 3.3-16.7.0-24.6-14.9-35.7-46.2-87.7-93-131.1C433.5 68.8 368.8 32 288 32zM432 256c0 79.5-64.5 144-144 144s-144-64.5-144-144 64.5-144 144-144 144 64.5 144 144zM288 192c0 35.3-28.7 64-64 64-11.5.0-22.3-3-31.6-8.4-.2 2.8-.4 5.5-.4 8.4.0 53 43 96 96 96s96-43 96-96-43-96-96-96c-2.8.0-5.6.1-8.4.4 5.3 9.3 8.4 20.1 8.4 31.6z"/></svg></span></span></span><span class="px-2 text-primary-500">&#183;</span><span>
<span id=likes_docs/firebase-views/index.md title=likes>0</span>
<span class="inline-block align-text-bottom"><span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M47.6 300.4 228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6.0 115.2.0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z"/></svg></span></span></span></div><div class="flex flex-row flex-wrap items-center"></div><div class="flex flex-row flex-wrap items-center"><span style=margin-top:.5rem class=mr-2 onclick='window.open("/blowfish/tags/firebase/","_self")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">firebase</span></span></span>
<span style=margin-top:.5rem class=mr-2 onclick='window.open("/blowfish/tags/views/","_self")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">views</span></span></span>
<span style=margin-top:.5rem class=mr-2 onclick='window.open("/blowfish/tags/likes/","_self")'><span class=flex><span class="rounded-md border border-primary-400 px-1 py-[1px] text-xs font-normal text-primary-700 dark:border-primary-600 dark:text-primary-400">likes</span></span></span></div></div></div><div class="px-6 pt-4 pb-2"></div></div></a></section><div class=pt-8><hr class="border-dotted border-neutral-300 dark:border-neutral-600"><div class="flex justify-between pt-3"><span><a class="flex group mr-3" href=/blowfish/docs/series/><span class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400">&larr;</span>
<span class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400">&rarr;</span>
<span class="flex flex-col"><span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Series</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400"></span></span></a></span><span><a class="flex text-right group ml-3" href=/blowfish/docs/hosting-deployment/><span class="flex flex-col"><span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Hosting & Deployment</span>
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400"></span></span><span class="ml-3 text-neutral-700 group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400">&rarr;</span>
<span class="mr-3 text-neutral-700 group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400">&larr;</span></a></span></div></div></footer></article><div id=top-scroller class="pointer-events-none absolute top-[110vh] bottom-0 w-12 ltr:right-0 rtl:left-0"><a href=#the-top class="pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 mb-16 items-center justify-center rounded-full bg-neutral/50 text-xl text-neutral-700 backdrop-blur hover:text-primary-600 dark:bg-neutral-800/50 dark:text-neutral dark:hover:text-primary-400" aria-label="Scroll to top" title="Scroll to top">&uarr;</a></div></main><footer id=site-footer class="py-10 print:hidden"><nav class="flex flex-row pb-4 text-base font-medium text-neutral-500 dark:text-neutral-400"><ul class="flex flex-col list-none sm:flex-row"><li class="flex mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/blowfish/tags/ title=Tags>Tags</a></li><li class="flex mb-1 ltr:text-right rtl:text-left sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" href=/blowfish/authors/ title="Authors Taxonomy Listing Example">Authors</a></li></ul></nav><div class="flex items-center justify-between"><p class="text-sm text-neutral-500 dark:text-neutral-400">&copy;
2023
Blowfish</p><p class="text-xs text-neutral-500 dark:text-neutral-400">Powered by <a class="hover:underline hover:decoration-primary-400 hover:text-primary-500" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a> & <a class="hover:underline hover:decoration-primary-400 hover:text-primary-500" href=https://blowfish.page/ target=_blank rel="noopener noreferrer">Blowfish</a></p></div><script>mediumZoom(document.querySelectorAll("img:not(.nozoom)"),{margin:24,background:"rgba(0,0,0,0.5)",scrollOffset:0})</script><script type=text/javascript src=/blowfish/js/process.min.35c1113bcc16c5a59bf031082f9e63822aa95280423881a7847a7ff33a16e6299ce6a840d9ef4e10d947e030a18f3f20359afb2ec0f35967484b9a9360ac3145.js integrity="sha512-NcERO8wWxaWb8DEIL55jgiqpUoBCOIGnhHp/8zoW5imc5qhA2e9OENlH4DChjz8gNZr7LsDzWWdIS5qTYKwxRQ=="></script>
<a rel=me href=https://masto.ai/@blowfish></a></footer><div id=search-wrapper class="invisible fixed inset-0 flex h-screen w-screen cursor-default flex-col bg-neutral-500/50 p-4 backdrop-blur-sm dark:bg-neutral-900/50 sm:p-6 md:p-[10vh] lg:p-[12vh]" data-url=https://nunocoracao.github.io/blowfish style=z-index:500><div id=search-modal class="flex flex-col w-full max-w-3xl min-h-0 mx-auto border rounded-md shadow-lg top-20 border-neutral-200 bg-neutral dark:border-neutral-700 dark:bg-neutral-800"><header class="relative z-10 flex items-center justify-between flex-none px-2"><form class="flex items-center flex-auto min-w-0"><div class="flex items-center justify-center w-8 h-8 text-neutral-400"><span class="relative block icon"><svg aria-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"><path fill="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></div><input type=search id=search-query class="flex flex-auto h-12 mx-1 bg-transparent appearance-none focus:outline-dotted focus:outline-2 focus:outline-transparent" placeholder=Search tabindex=0></form><button id=close-search-button class="flex items-center justify-center w-8 h-8 text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400" title="Close (Esc)">
<span class="relative block icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="currentcolor" d="M310.6 361.4c12.5 12.5 12.5 32.75.0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3 54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75.0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75.0-45.25s32.75-12.5 45.25.0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25.0s12.5 32.75.0 45.25l-105.4 105.4L310.6 361.4z"/></svg></span></button></header><section class="flex-auto px-2 overflow-auto"><ul id=search-results></ul></section></div></div></div></body><script data-name=BMC-Widget data-cfasync=false src=https://cdnjs.buymeacoffee.com/1.0.0/widget.prod.min.js data-id=nunocoracao data-description="Support me on Buy me a coffee!" data-message data-color=#FFDD00 data-position=Right data-x_margin=18 data-y_margin=18></script></html>
Reference in a new issue View git blame Copy permalink