mirror of https://github.com/jpanther/congo.git
73 lines
41 KiB
HTML
73 lines
41 KiB
HTML
<!doctype html><html lang=en-AU dir=ltr class=scroll-smooth data-default-appearance=light data-auto-appearance=true><head><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><meta name=theme-color content="rgb(255,255,255)"><title>Advanced Customisation · Congo</title>
|
|
<meta name=title content="Advanced Customisation · Congo"><script type=text/javascript src=/congo/js/appearance.min.74ad8406faea02f3e186ba5126249aaeed9073629e04b05037b903396b188724.js integrity="sha256-dK2EBvrqAvPhhrpRJiSaru2Qc2KeBLBQN7kDOWsYhyQ="></script><link type=text/css rel=stylesheet href=/congo/css/main.bundle.min.9602fe0216290b9ff0322c1fd14e88ab9fc0a13741f4de563f67831708d72bb2.css integrity="sha256-lgL+AhYpC5/wMiwf0U6Iq5/AoTdB9N5WP2eDFwjXK7I="><script defer type=text/javascript id=script-bundle src=/congo/js/main.bundle.min.5ff2b3a0b729a3f13a3d681740c924c9009e2be09e22a8458e486651e9e1af40.js integrity="sha256-X/KzoLcpo/E6PWgXQMkkyQCeK+CeIqhFjkhmUenhr0A=" data-copy=Copy data-copied=Copied></script><meta name=description content="
|
|
Learn how to build Congo manually.
|
|
"><link rel=canonical href=https://jpanther.github.io/congo/docs/advanced-customisation/><link rel=apple-touch-icon sizes=180x180 href=/congo/apple-touch-icon.png><link rel=icon type=image/png sizes=32x32 href=/congo/favicon-32x32.png><link rel=icon type=image/png sizes=16x16 href=/congo/favicon-16x16.png><link rel=manifest href=/congo/site.webmanifest><meta property="og:url" content="https://jpanther.github.io/congo/docs/advanced-customisation/"><meta property="og:site_name" content="Congo"><meta property="og:title" content="Advanced Customisation"><meta property="og:description" content="Learn how to build Congo manually."><meta property="og:locale" content="en-AU"><meta property="og:type" content="article"><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="article:tag" content="advanced"><meta property="article:tag" content="Css"><meta property="article:tag" content="Docs"><meta name=twitter:card content="summary"><meta name=twitter:title content="Advanced Customisation"><meta name=twitter:description content="Learn how to build Congo 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 Congo manually.","abstract":"Congo supports advanced customisations that include modifying the underlying Tailwind configuration, building the theme manually and providing custom CSS.","inLanguage":"en-AU","url":"https:\/\/jpanther.github.io\/congo\/docs\/advanced-customisation\/","author":{"@type":"Person","name":"Congo"},"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":"1509"}</script><meta name=author content="Congo"><link href=https://twitter.com/ rel=me><link href=https://facebook.com/ rel=me><link href=https://linkedin.com/ rel=me><link href=https://youtube.com/ rel=me></head><body class="m-auto flex h-screen max-w-7xl flex-col bg-neutral px-6 text-lg leading-7 text-neutral-900 sm:px-14 md:px-24 lg:px-32 dark:bg-neutral-800 dark:text-neutral"><div id=the-top class="absolute flex self-center"><a class="-translate-y-8 rounded-b-lg bg-primary-200 px-3 py-1 text-sm focus:translate-y-0 dark:bg-neutral-600" href=#main-content><span class="pe-2 font-bold text-primary-600 dark:text-primary-400">↓</span>Skip to main content</a></div><header class="py-6 font-semibold text-neutral-900 print:hidden sm:py-10 dark:text-neutral"><nav class="flex items-start justify-between sm:items-center"><div class="flex flex-row items-center"><a class="decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2" rel=me href=/congo/>Congo</a></div><ul class="flex list-none flex-col text-end sm:flex-row"><li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5"><a href=/congo/docs/ title><span class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2">Docs</span></a></li><li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5"><a href=/congo/samples/ title><span class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2">Samples</span></a></li><li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5"><a href=/congo/users/ title><span class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2">Users</span></a></li><li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5"><a href=https://github.com/jpanther/congo title target=_blank><span class="group-dark:hover:text-primary-400 transition-colors group-hover:text-primary-600"><span class="icon relative inline-block px-1 align-text-bottom"><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></a></li><li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5"><button id=search-button-1 title="Search (/)">
|
|
<span class="group-dark:hover:text-primary-400 transition-colors group-hover:text-primary-600"><span class="icon relative inline-block px-1 align-text-bottom"><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></span><span class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"></span></button></li><li class="group mb-1 sm:mb-0 sm:me-7 sm:last:me-0.5"><div class="group relative"><button class="group-dark:hover:text-primary-400 flex w-full items-center justify-end transition-colors group-hover:text-primary-600">
|
|
<span class="icon relative inline-block px-1 align-text-bottom"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="currentcolor" d="M4.545 6.714 4.11 8H3l1.862-5h1.284L8 8H6.833l-.435-1.286H4.545zm1.634-.736L5.5 3.956h-.049l-.679 2.022H6.18z"/><path fill="currentcolor" d="M0 2a2 2 0 012-2h7a2 2 0 012 2v3h3a2 2 0 012 2v7a2 2 0 01-2 2H7a2 2 0 01-2-2v-3H2A2 2 0 010 9V2zm2-1A1 1 0 001 2v7a1 1 0 001 1h7a1 1 0 001-1V2A1 1 0 009 1H2zm7.138 9.995c.193.301.402.583.63.846-.748.575-1.673 1.001-2.768 1.292.178.217.451.635.555.867 1.125-.359 2.08-.844 2.886-1.494.777.665 1.739 1.165 2.93 1.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747 1.222-1.651 1.621-2.757H14V8h-3v1.047h.765c-.318.844-.74 1.546-1.272 2.13a6.066 6.066.0 01-.415-.492 1.988 1.988.0 01-.94.31z"/></svg>
|
|
</span><span class=text-sm>EN</span><span class=text-[0.6rem]><span class="icon relative inline-block px-1 align-text-bottom"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentcolor" d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3.0l192-192c12.5-12.5 12.5-32.8.0-45.3s-32.8-12.5-45.3.0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3.0s-12.5 32.8.0 45.3l192 192z"/></svg></span></span></button><div class="invisible w-full bg-transparent group-hover:visible"></div><div class="invisible absolute z-50 flex flex-col whitespace-nowrap rounded border border-neutral-300 bg-neutral text-start text-base shadow group-hover:visible ltr:right-0 rtl:left-0 dark:border-neutral-600 dark:bg-neutral-800"><div class="flex flex-grow"><a href=/congo/docs/advanced-customisation/ class="flex w-full items-center justify-between bg-primary-100 px-2 py-1 dark:bg-primary-900">English (Australia)<span class="ms-2 w-6 text-primary-600 dark:text-primary-400"><span class="icon relative inline-block px-1 align-text-bottom"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentcolor" d="M438.6 105.4c12.5 12.5 12.5 32.7.0 45.2l-256 256c-12.5 12.5-32.7 12.5-45.2.0L9.372 278.6c-12.496-12.5-12.496-32.7.0-45.2 12.498-12.5 32.758-12.5 45.258.0L159.1 338.7 393.4 105.4c12.5-12.52 32.7-12.52 45.2.0h0z"/></svg></span></span></a></div><div class="flex flex-grow"><a href=/congo/ja/docs/advanced-customisation/ class="w-full py-1 pe-10 ps-2 decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2">日本語</a></div><div class="flex flex-grow"><a href=/congo/zh-cn/docs/advanced-customisation/ class="w-full py-1 pe-10 ps-2 decoration-primary-500 hover:underline hover:decoration-2 hover:underline-offset-2">简体中文</a></div></div></div></li></ul></nav></header><div class="relative flex grow flex-col"><main id=main-content class=grow><article><header class=max-w-prose><ol class="text-sm text-neutral-500 print:hidden dark:text-neutral-400"><li class="hidden inline"><a class="dark:underline-neutral-600 decoration-neutral-300 hover:underline" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span></li><li class=inline><a class="dark:underline-neutral-600 decoration-neutral-300 hover:underline" href=/congo/docs/>Documentation</a><span class="px-1 text-primary-500">/</span></li><li class="hidden inline"><a class="dark:underline-neutral-600 decoration-neutral-300 hover:underline" href=/congo/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="mb-12 mt-8 text-base text-neutral-500 print:hidden dark:text-neutral-400"><div class="flex flex-row flex-wrap items-center"><span title="Reading time">8 mins</span><span class="px-2 text-primary-500">·</span>
|
|
<span class=mb-[2px]><a href=https://github.com/jpanther/congo/tree/dev/exampleSite/content/docs/advanced-customisation/index.md class="text-lg hover:text-primary-500" rel="noopener noreferrer" target=_blank title="Edit content"><span class="icon relative inline-block px-1 align-text-bottom"><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></a></span></div></div></header><section class="prose mt-0 flex max-w-full flex-col dark:prose-invert lg:flex-row"><div class="order-first px-0 lg:order-last lg:max-w-xs lg:ps-8"><div class="toc pe-5 print:hidden lg:sticky lg:top-10"><details open class="-ms-5 mt-0 overflow-hidden rounded-lg ps-5"><summary class="block cursor-pointer bg-neutral-100 py-1 ps-5 text-lg font-semibold text-neutral-800 dark:bg-neutral-700 dark:text-neutral-100 lg:hidden">Table of Contents</summary><div class="border-s border-dotted border-neutral-300 py-2 ps-5 dark:border-neutral-600"><nav id=TableOfContents><ul><li><a href=#hugo-project-structure>Hugo project structure</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=#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></div></div><div class="min-h-0 min-w-0 max-w-prose grow"><p>There are many ways you can make advanced changes to Congo. 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/jpanther/congo/discussions target=_blank rel=noreferrer>GitHub Discussions</a>.</p><h2 id=hugo-project-structure class="relative group">Hugo project structure <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-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 rel=noreferrer>Hugo project structure</a> and best practices for managing your content and theme customisations.</p><div class="flex rounded-md bg-primary-100 px-4 py-3 dark:bg-primary-900"><span class="pe-3 text-primary-400"><span class="icon relative inline-block px-1 align-text-bottom"><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’s sub-directories, not in the themes directory itself.</span></div><p>Congo 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 overridden 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’s powerful <a href=https://gohugo.io/templates/lookup-order/ target=_blank rel=noreferrer>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 Congo, 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><h2 id=colour-schemes class="relative group">Colour schemes <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-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>Congo 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://jpanther.github.io/congo/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><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><p>Congo 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 rel=noreferrer>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 rel=noreferrer>Tailwind colour palette reference</a>.</p><h2 id=overriding-the-stylesheet class="relative group">Overriding the stylesheet <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-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. Congo 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’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><h3 id=adjusting-the-font-size class="relative group">Adjusting the font size <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-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. Congo 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><h2 id=building-the-theme-css-from-source class="relative group">Building the theme CSS from source <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-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’d like to make a major change, you can take advantage of Tailwind CSS’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 rounded-md bg-primary-100 px-4 py-3 dark:bg-primary-900"><span class="pe-3 text-primary-400"><span class="icon relative inline-block px-1 align-text-bottom"><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’s step through how building the Tailwind CSS works.</p><h3 id=tailwind-configuration class="relative group">Tailwind configuration <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-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/congo/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>"./layouts/**/*.html"</span><span class=p>,</span>
|
|
</span></span><span class=line><span class=cl> <span class=s2>"./content/**/*.{html,md}"</span><span class=p>,</span>
|
|
</span></span><span class=line><span class=cl> <span class=s2>"./themes/congo/layouts/**/*.html"</span><span class=p>,</span>
|
|
</span></span><span class=line><span class=cl> <span class=s2>"./themes/congo/content/**/*.{html,md}"</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 Congo in your project as a subdirectory at <code>themes/congo/</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://jpanther.github.io/congo/docs/installation/>Installation docs</a> explain how to install the theme using either of these methods.</p><h3 id=project-structure class="relative group">Project structure <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-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…</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.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> └── congo <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’s required is to recompile the <code>main.css</code> file.</p><h3 id=install-dependencies class="relative group">Install dependencies <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-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’ll need to change into the <code>themes/congo/</code> directory and install the project dependencies. You’ll need <a href=https://docs.npmjs.com/cli/v7/configuring-npm/install target=_blank rel=noreferrer>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/congo
|
|
</span></span><span class=line><span class=cl>npm install
|
|
</span></span></code></pre></div><h3 id=run-the-tailwind-compiler class="relative group">Run the Tailwind compiler <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-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’s left is to use <a href=https://v2.tailwindcss.com/docs/installation#using-tailwind-cli target=_blank rel=noreferrer>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/congo/node_modules/tailwindcss/lib/cli.js -c ./themes/congo/tailwind.config.js -i ./themes/congo/assets/css/main.css -o ./assets/css/compiled/main.css --jit
|
|
</span></span></code></pre></div><p>It’s a bit of an ugly command due to the paths involved but essentially you’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’s <code>main.css</code> file and then where you want the compiled CSS file to be placed (it’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><h3 id=make-a-build-script class="relative group">Make a build script <span class="absolute top-0 w-6 transition-opacity opacity-0 -start-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…</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>"name"</span><span class=o>:</span> <span class=s2>"my-website"</span><span class=p>,</span>
|
|
</span></span><span class=line><span class=cl> <span class=s2>"version"</span><span class=o>:</span> <span class=s2>"1.0.0"</span><span class=p>,</span>
|
|
</span></span><span class=line><span class=cl> <span class=s2>"description"</span><span class=o>:</span> <span class=s2>""</span><span class=p>,</span>
|
|
</span></span><span class=line><span class=cl> <span class=s2>"scripts"</span><span class=o>:</span> <span class=p>{</span>
|
|
</span></span><span class=line><span class=cl> <span class=s2>"server"</span><span class=o>:</span> <span class=s2>"hugo server -b http://localhost -p 8000"</span><span class=p>,</span>
|
|
</span></span><span class=line><span class=cl> <span class=s2>"dev"</span><span class=o>:</span> <span class=s2>"NODE_ENV=development ./themes/congo/node_modules/tailwindcss/lib/cli.js -c ./themes/congo/tailwind.config.js -i ./themes/congo/assets/css/main.css -o ./assets/css/compiled/main.css --jit -w"</span><span class=p>,</span>
|
|
</span></span><span class=line><span class=cl> <span class=s2>"build"</span><span class=o>:</span> <span class=s2>"NODE_ENV=production ./themes/congo/node_modules/tailwindcss/lib/cli.js -c ./themes/congo/tailwind.config.js -i ./themes/congo/assets/css/main.css -o ./assets/css/compiled/main.css --jit"</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’re ready to deploy, run <code>npm run build</code> and you’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/jpanther/congo/discussions target=_blank rel=noreferrer>GitHub Discussions</a>.</p></div></section><footer class="max-w-prose pt-8 print:hidden"><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="group flex" href=/congo/docs/content-examples/><span class="me-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 dark:text-neutral dark:group-hover:text-primary-400"><span class="ltr:inline rtl:hidden">←</span><span class="ltr:hidden rtl:inline">→</span></span>
|
|
<span class="flex flex-col"><span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Content Examples</span>
|
|
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400"></span></span></a></span><span><a class="group flex text-right" href=/congo/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="ms-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 dark:text-neutral dark:group-hover:text-primary-400"><span class="ltr:inline rtl:hidden">→</span><span class="ltr:hidden rtl:inline">←</span></span></a></span></div></div></footer></article><div class="pointer-events-none absolute bottom-0 end-0 top-[100vh] w-12"><a href=#the-top class="pointer-events-auto sticky top-[calc(100vh-5.5rem)] flex h-12 w-12 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">↑</a></div></main><footer class="py-10 print:hidden"><div class="flex items-center justify-between"><div><p class="text-sm text-neutral-500 dark:text-neutral-400">© 2023 Congo contributors</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://github.com/jpanther/congo target=_blank rel="noopener noreferrer">Congo</a></p></div><div class="flex flex-row items-center"><div class="me-14 cursor-pointer text-sm text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400"><button id=appearance-switcher-0 type=button aria-label="appearance switcher"><div class="flex h-12 w-12 items-center justify-center dark:hidden" title="Switch to dark appearance"><span class="icon relative inline-block px-1 align-text-bottom"><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="hidden h-12 w-12 items-center justify-center dark:flex" title="Switch to light appearance"><span class="icon relative inline-block px-1 align-text-bottom"><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></footer><div id=search-wrapper class="invisible fixed inset-0 z-50 flex h-screen w-screen cursor-default flex-col bg-neutral-500/50 p-4 backdrop-blur-sm sm:p-6 md:p-[10vh] lg:p-[12vh] dark:bg-neutral-900/50" data-url=https://jpanther.github.io/congo/><div id=search-modal class="top-20 mx-auto flex min-h-0 w-full max-w-3xl flex-col rounded-md border border-neutral-200 bg-neutral shadow-lg dark:border-neutral-700 dark:bg-neutral-800"><header class="relative z-10 flex flex-none items-center justify-between px-2"><form class="flex min-w-0 flex-auto items-center"><div class="flex h-8 w-8 items-center justify-center text-neutral-400"><span class="icon relative inline-block px-1 align-text-bottom"><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="mx-1 flex h-12 flex-auto appearance-none bg-transparent focus:outline-dotted focus:outline-2 focus:outline-transparent" placeholder=Search tabindex=0></form><button id=close-search-button class="flex h-8 w-8 items-center justify-center text-neutral-700 hover:text-primary-600 dark:text-neutral dark:hover:text-primary-400" title="Close (Esc)">
|
|
<span class="icon relative inline-block px-1 align-text-bottom"><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 overflow-auto px-2"><ul id=search-results></ul></section></div></div></div></body></html> |