mirror of https://github.com/jpanther/congo.git
152 lines
13 KiB
HTML
152 lines
13 KiB
HTML
<!doctype html><html lang=en-au><head>
|
|
<meta charset=utf-8>
|
|
<meta http-equiv=content-language content="en-AU">
|
|
<meta name=viewport content="width=device-width,initial-scale=1">
|
|
<meta http-equiv=x-ua-compatible content="ie=edge">
|
|
<title>Advanced Customisation · Congo</title>
|
|
<meta name=title content="Advanced Customisation · Congo">
|
|
<meta name=description content="Learn how to build Congo manually.">
|
|
<link rel=canonical href=https://jpanther.github.io/congo/docs/advanced-customisation/>
|
|
<link type=text/css rel=stylesheet href=/congo/css/schemes/congo.min.b48d6ba061dc77186a2524fb8aac5ac3823b2679a9299ca60325abbccc9c1764c884715f0ba24b4e2776cb3814df4af1f4c854b87207cd5d4c7a254da9b55751.css integrity="sha512-tI1roGHcdxhqJST7iqxaw4I7JnmpKZymAyWrvMycF2TIhHFfC6JLTid2yzgU30rx9MhUuHIHzV1MeiVNqbVXUQ==">
|
|
<link type=text/css rel=stylesheet href=/congo/css/compiled/main.min.ea854f5324e6f022fce8a455002c667df804536940ec2e12411e4a8cab77790e8403bc0acc8feb64a7f08e3cac0e869a37f8cba59650d1fe3f3e83fe54a49c8a.css integrity="sha512-6oVPUyTm8CL86KRVACxmffgEU2lA7C4SQR5KjKt3eQ6EA7wKzI/rZKfwjjysDoaaN/jLpZZQ0f4/PoP+VKScig==">
|
|
<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:title" content="Advanced Customisation">
|
|
<meta property="og:description" content="Learn how to build Congo manually.">
|
|
<meta property="og:type" content="article">
|
|
<meta property="og:url" content="https://jpanther.github.io/congo/docs/advanced-customisation/"><meta property="article:section" content="docs">
|
|
<meta property="article:published_time" content="2020-08-09T00:00:00+00:00">
|
|
<meta property="article:modified_time" content="2020-08-09T00:00:00+00:00">
|
|
<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":"BlogPosting","articleSection":"Documentation","name":"Advanced Customisation","headline":"Advanced Customisation","description":"Learn how to build Congo manually.","inLanguage":"en-AU","author":{"@type":"Person","name":"Congo"},"creator":{"@type":"Person","name":"Congo"},"copyrightHolder":"Congo","copyrightYear":"2020","dateCreated":"2020-08-09T00:00:00\u002b00:00","datePublished":"2020-08-09T00:00:00\u002b00:00","dateModified":"2020-08-09T00:00:00\u002b00:00","url":"https:\/\/jpanther.github.io\/congo\/docs\/advanced-customisation\/","wordCount":"471","keywords":["advanced","css","docs"]}</script>
|
|
<meta name=generator content="Hugo 0.87.0">
|
|
<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="flex flex-col h-screen px-6 m-auto text-lg leading-7 bg-neutral text-neutral-900 sm:px-14 md:px-24 lg:px-32 dark:bg-neutral-800 dark:text-neutral max-w-7xl"><header class="flex justify-between py-6 font-semibold sm:py-10 text-neutral-800 dark:text-neutral">
|
|
<div>
|
|
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" rel=me href=/congo/>Congo</a>
|
|
</div>
|
|
<nav>
|
|
<ul class="flex flex-col list-none sm:flex-row">
|
|
<li class="mb-1 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
|
|
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/docs/ title=Documentation>Docs</a>
|
|
</li>
|
|
<li class="mb-1 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
|
|
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/samples/ title="Content Samples">Samples</a>
|
|
</li>
|
|
<li class="mb-1 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
|
|
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=/congo/users/ title=Users>Users</a>
|
|
</li>
|
|
<li class="mb-1 text-right sm:mb-0 sm:mr-7 sm:last:mr-0">
|
|
<a class="hover:underline hover:underline-primary-500 hover:underline-thickness-bold hover:underline-offset-small" href=https://github.com/jpanther/congo title>GitHub</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</header>
|
|
<main class=flex-grow>
|
|
<article class=max-w-prose>
|
|
<header>
|
|
<ol class="text-sm text-neutral-400 dark:text-neutral-500">
|
|
<li class="inline hidden">
|
|
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/>Welcome to Congo! :tada:</a><span class="px-1 text-primary-500">/</span>
|
|
</li>
|
|
<li class=inline>
|
|
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" href=/congo/docs/>Documentation</a><span class="px-1 text-primary-500">/</span>
|
|
</li>
|
|
<li class="inline hidden">
|
|
<a class="hover:underline hover:underline-neutral-300 dark:underline-neutral-600" 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-800 dark:text-neutral">
|
|
Advanced Customisation
|
|
</h1>
|
|
<div class="mt-8 mb-12 text-base text-neutral-400 dark:text-neutral-500">
|
|
<div class="flex flex-row items-center">
|
|
<span title="Reading time">3 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.md class="text-lg hover:text-primary-500" rel="noopener noreferrer" target=_blank title="Edit content"><span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="edit" class="svg-inline--fa fa-edit fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5.0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1.0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7.0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174 402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7-43.2-43.2c-4.1-4.1-10.8-4.1-14.8.0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z"/></svg>
|
|
</span>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<section class="prose dark:prose-light">
|
|
<p>There are a few ways you can make style changes to Congo.</p>
|
|
<h2 id=colour-schemes>Colour schemes <a class=heading-anchor href=#colour-schemes aria-label=Anchor>#</a></h2>
|
|
<p>Congo ships with a few colour schemes out of the box. To change the basic colour scheme, you can set the <code>colorScheme</code> theme parameter to one of the default configurations. Valid options are <code>congo</code> (the default), <code>avocado</code>, <code>fire</code> and <code>ocean</code>.</p>
|
|
<p>In addition to the default scheme, you can also create your own and restyle 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>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>Tailwind colour palette reference</a>.</p>
|
|
<h2 id=overriding-the-stylesheet>Overriding the stylesheet <a class=heading-anchor href=#overriding-the-stylesheet aria-label=Anchor>#</a></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 overrid 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>
|
|
<h2 id=building-from-source>Building from source <a class=heading-anchor href=#building-from-source aria-label=Anchor>#</a></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.</p>
|
|
<div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
|
|
<span class="pr-3 text-primary-400">
|
|
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937.0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154.0l239.94 416.028zM288 354c-25.405.0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346 7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373.0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884.0-12.356 5.78-11.981 12.654z"/></svg>
|
|
</span>
|
|
</span>
|
|
<span class="no-prose dark:text-neutral-300"><strong>Note:</strong> Building the theme manually is intended for advanced users.</span>
|
|
</div>
|
|
<p>Change into the <code>themes/congo/</code> folder and install the project dependencies.</p>
|
|
<div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash>npm install
|
|
</code></pre></div><p>Once installed, you can edit the <code>themes/congo/tailwind.config.js</code> to change the styles that are applied throughout the theme. You can also adjust specific styles in <code>themes/congo/assets/css/main.css</code>.</p>
|
|
<p>To allow for easy theme colour changes, 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. In order to change the colour across the entire theme, simply edit the <code>tailwind.config.js</code> file accordingly.</p>
|
|
<p>For a full list of colours available, and their corresponding configuration values, see the official <a href=https://tailwindcss.com/docs/customizing-colors#color-palette-reference>Tailwind docs</a>.</p>
|
|
<p>After editing the configuration, you need to rebuild the theme’s stylesheets. This will run the Tailwind JIT compiler in watch mode which aids with testing style changes.</p>
|
|
<div class=highlight><pre tabindex=0 class=chroma><code class=language-bash data-lang=bash>npm run dev
|
|
</code></pre></div><p>This will automatically output a CSS file to <code>/themes/congo/assets/css/compiled/main.css</code>.</p>
|
|
<div class="flex px-4 py-3 rounded-md bg-primary-100 dark:bg-primary-900">
|
|
<span class="pr-3 text-primary-400">
|
|
<span class="relative inline-block align-text-bottom icon"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="exclamation-triangle" class="svg-inline--fa fa-exclamation-triangle fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentcolor" d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937.0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154.0l239.94 416.028zM288 354c-25.405.0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346 7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373.0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884.0-12.356 5.78-11.981 12.654z"/></svg>
|
|
</span>
|
|
</span>
|
|
<span class="no-prose dark:text-neutral-300"><strong>Note:</strong> You should make manual edits to the compiled CSS file.</span>
|
|
</div>
|
|
<p>Now whenever you make a change, the CSS files will be rebuilt automatically. This mode is useful to run when using <code>hugo server</code> to preview your site during development. Asset files will be minified by Hugo at site build time.</p>
|
|
</section>
|
|
<footer class=pt-8>
|
|
<div class="pt-8 article-pagination">
|
|
<hr class="border-dotted border-neutral-300 dark:border-neutral-600">
|
|
<div class="flex justify-between pt-3">
|
|
<span>
|
|
<a class=flex href=/congo/docs/partials/>
|
|
<span class="mr-3 article-pagination-direction">←</span>
|
|
<span class="flex flex-col">
|
|
<span class=article-pagination-title>Partials</span>
|
|
<span class="-mt-1 text-xs text-neutral-400 dark:text-neutral-500">
|
|
</span>
|
|
</span>
|
|
</a>
|
|
</span>
|
|
<span>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</article>
|
|
</main><footer class="py-10 text-sm">
|
|
<p class="text-neutral-400 dark:text-neutral-500">
|
|
©
|
|
2021
|
|
Congo
|
|
</p>
|
|
<p class="text-xs text-neutral-300 dark:text-neutral-600">
|
|
Powered by
|
|
<a class="hover:underline hover:underline-primary-300 hover:text-primary-400" href=https://gohugo.io/ target=_blank rel="noopener noreferrer">Hugo</a>
|
|
&
|
|
<a class="hover:underline hover:underline-primary-300 hover:text-primary-400" href=https://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a>
|
|
</p>
|
|
</footer>
|
|
</body>
|
|
</html> |