mirror of https://github.com/jpanther/congo.git
106 lines
46 KiB
HTML
106 lines
46 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 http-equiv=content-language content="en-au"><meta name=viewport content="width=device-width,initial-scale=1"><meta name=theme-color content="rgb(255,255,255)"><meta http-equiv=x-ua-compatible content="ie=edge"><title>Getting Started · Congo</title><meta name=title content="Getting Started · Congo"><meta name=description content="Learn how to get started using the Congo theme."><link rel=canonical href=https://jpanther.github.io/congo/docs/getting-started/><link type=text/css rel=stylesheet href=/congo/css/main.bundle.min.79cb311e3318c597d2d4aba94f37f83796cc518a1d67bfbf472832a175d16e58979598b1977e0e1e6b866ec6057d1c3c92fe5988c7cf3c3dade75da702d07b73.css integrity="sha512-ecsxHjMYxZfS1KupTzf4N5bMUYodZ7+/RygyoXXRbliXlZixl34OHmuGbsYFfRw8kv5ZiMfPPD2t512nAtB7cw=="><script type=text/javascript src=/congo/js/appearance.min.c6198a5ecbc6c7b35a8568d29315f50cf5d775d4461c515a476359767f1a745c245aa83fa96b0c7d83da976cf77481e1fc29537a2391a53ffe69a991638802e6.js integrity="sha512-xhmKXsvGx7NahWjSkxX1DPXXddRGHFFaR2NZdn8adFwkWqg/qWsMfYPal2z3dIHh/ClTeiORpT/+aamRY4gC5g=="></script>
|
|
<script defer type=text/javascript id=script-bundle src=/congo/js/main.bundle.min.6d78c827ca7bcbf72056dbf698bf9aeb759a08966686187deb23f5949f73eca5f39b461284900cdfc08e2976d99eb80a8663648de778ba2a83e633ae16dbfc25.js integrity="sha512-bXjIJ8p7y/cgVtv2mL+a63WaCJZmhhh96yP1lJ9z7KXzm0YShJAM38COKXbZnrgKhmNkjed4uiqD5jOuFtv8JQ==" data-copy=Copy data-copied=Copied></script>
|
|
<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="Getting Started"><meta property="og:description" content="Learn how to get started using the Congo theme."><meta property="og:type" content="article"><meta property="og:url" content="https://jpanther.github.io/congo/docs/getting-started/"><meta property="article:section" content="docs"><meta property="article:published_time" content="2020-08-15T00:00:00+00:00"><meta property="article:modified_time" content="2020-08-15T00:00:00+00:00"><meta property="og:site_name" content="Congo"><meta name=twitter:card content="summary"><meta name=twitter:title content="Getting Started"><meta name=twitter:description content="Learn how to get started using the Congo theme."><script type=application/ld+json>[{"@context":"https://schema.org","@type":"Article","articleSection":"Documentation","name":"Getting Started","headline":"Getting Started","description":"Learn how to get started using the Congo theme.","abstract":"This section assumes you have already installed the Congo theme and are ready to start with basic configuration tasks like selecting a colour scheme, menu and content structure.","inLanguage":"en-au","url":"https:\/\/jpanther.github.io\/congo\/docs\/getting-started\/","author":{"@type":"Person","name":"Congo"},"copyrightYear":"2020","dateCreated":"2020-08-15T00:00:00\u002b00:00","datePublished":"2020-08-15T00:00:00\u002b00:00","dateModified":"2020-08-15T00:00:00\u002b00:00","keywords":["installation","docs"],"mainEntityOfPage":"true","wordCount":"1413"}]</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="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">↓</span>Skip to main content</a></div><header class="py-6 font-semibold text-neutral-900 dark:text-neutral print:hidden sm:py-10"><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 flex-col list-none ltr:text-right rtl:text-left sm:flex-row"><li class="mb-1 group sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a href=/congo/docs/ title=Documentation><span class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2">Docs</span></a></li><li class="mb-1 group sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a href=/congo/samples/ title="Content Samples"><span class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2">Samples</span></a></li><li class="mb-1 group sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a href=/congo/users/ title=Users><span class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2">Users</span></a></li><li class="mb-1 group sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><a href=https://github.com/jpanther/congo title target=_blank><span class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"><span class="relative inline-block align-text-bottom 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></a></li><li class="mb-1 group sm:mb-0 ltr:sm:mr-7 ltr:sm:last:mr-0 rtl:sm:ml-7 rtl:sm:last:ml-0"><button id=search-button-1 title="Search (/)">
|
|
<span class="transition-colors group-dark:hover:text-primary-400 group-hover:text-primary-600"><span class="relative inline-block align-text-bottom 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></span><span class="decoration-primary-500 group-hover:underline group-hover:decoration-2 group-hover:underline-offset-2"></span></button></li></ul></nav></header><div class="relative flex flex-col grow"><main id=main-content class=grow><article><header class=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=/congo/>Welcome to Congo! :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=/congo/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=/congo/docs/getting-started/>Getting Started</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">Getting Started</h1><div class="mt-8 mb-12 text-base text-neutral-500 dark:text-neutral-400 print:hidden"><div class="flex flex-row flex-wrap items-center"><span title="Reading time">7 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/getting-started/index.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 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="flex flex-col max-w-full mt-0 prose dark:prose-invert lg:flex-row"><div class="order-first 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"><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="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=#basic-configuration>Basic configuration</a></li><li><a href=#colour-schemes>Colour schemes</a><ul><li></li></ul></li><li><a href=#organising-content>Organising content</a><ul><li><a href=#directory-structure>Directory structure</a></li><li><a href=#feature-cover-and-thumbnail-images>Feature, cover and thumbnail images</a></li><li><a href=#taxonomies>Taxonomies</a></li></ul></li><li><a href=#menus>Menus</a><ul><li><a href=#basic-links>Basic links</a></li><li><a href=#action-links>Action links</a></li></ul></li><li><a href=#detailed-configuration>Detailed configuration</a></li></ul></nav></div></details></div></div><div class="min-w-0 min-h-0 max-w-prose grow"><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"><span class="relative inline-block align-text-bottom 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>This section assumes you have already <a href=https://jpanther.github.io/congo/docs/installation/ target=_blank>installed the Congo theme</a>.</span></div><p>The config files that ship with Congo contain all of the possible settings that the theme recognises. By default, many of these are commented out but you can simply uncomment them to activate or change a specific feature.</p><h2 id=basic-configuration class="relative group">Basic 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=#basic-configuration aria-label=Anchor>#</a></span></h2><p>Before creating any content, there are a few things you should set for a new installation. Starting in the <code>config.toml</code> file, set the <code>baseURL</code> and <code>languageCode</code> parameters. The <code>languageCode</code> should be set to the main language that you will be using to author your content.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-toml data-lang=toml><span class=line><span class=cl><span class=c># config/_default/config.toml</span>
|
|
</span></span><span class=line><span class=cl>
|
|
</span></span><span class=line><span class=cl><span class=nx>baseURL</span> <span class=p>=</span> <span class=s2>"https://your_domain.com/"</span>
|
|
</span></span><span class=line><span class=cl><span class=nx>languageCode</span> <span class=p>=</span> <span class=s2>"en"</span>
|
|
</span></span></code></pre></div><p>The next step is to configure the language settings. Although Congo supports multilingual setups, for now, just configure the main language.</p><p>Locate the <code>languages.en.toml</code> file in the config folder. If your main language is English you can use this file as is. Otherwise, rename it so that it includes the correct language code in the filename. For example, for French, rename the file to <code>languages.fr.toml</code>.</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"><span class="relative inline-block align-text-bottom 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>The language code in the language config filename should match the <code>languageCode</code> setting in <code>config.toml</code>.</span></div><div class=highlight><pre tabindex=0 class=chroma><code class=language-toml data-lang=toml><span class=line><span class=cl><span class=c># config/_default/languages.en.toml</span>
|
|
</span></span><span class=line><span class=cl>
|
|
</span></span><span class=line><span class=cl><span class=nx>title</span> <span class=p>=</span> <span class=s2>"My awesome website"</span>
|
|
</span></span><span class=line><span class=cl>
|
|
</span></span><span class=line><span class=cl><span class=p>[</span><span class=nx>author</span><span class=p>]</span>
|
|
</span></span><span class=line><span class=cl><span class=nx>name</span> <span class=p>=</span> <span class=s2>"My name"</span>
|
|
</span></span><span class=line><span class=cl><span class=nx>image</span> <span class=p>=</span> <span class=s2>"img/author.jpg"</span>
|
|
</span></span><span class=line><span class=cl><span class=nx>headline</span> <span class=p>=</span> <span class=s2>"A generally awesome human"</span>
|
|
</span></span><span class=line><span class=cl><span class=nx>bio</span> <span class=p>=</span> <span class=s2>"A little bit about me"</span>
|
|
</span></span><span class=line><span class=cl><span class=nx>links</span> <span class=p>=</span> <span class=p>[</span>
|
|
</span></span><span class=line><span class=cl> <span class=p>{</span> <span class=nx>twitter</span> <span class=p>=</span> <span class=s2>"https://twitter.com/username"</span> <span class=p>}</span>
|
|
</span></span><span class=line><span class=cl><span class=p>]</span>
|
|
</span></span></code></pre></div><p>The <code>[author]</code> configuration determines how the author information is displayed on the website. The image should be placed in the site’s <code>assets/</code> folder. Links will be displayed in the order they are listed.</p><p>If you need extra detail, further information about each of these configuration options, is covered in the <a href=https://jpanther.github.io/congo/docs/configuration/>Configuration</a> section.</p><h2 id=colour-schemes 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>Congo ships with a number of colour schemes out of the box. To change the scheme, simply set the <code>colorScheme</code> theme parameter. Valid options are <code>congo</code> (default), <code>avocado</code>, <code>cherry</code>, <code>fire</code>, <code>ocean</code>, <code>sapphire</code> and <code>slate</code>.</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"><span class="relative inline-block align-text-bottom 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>The <code>colourScheme</code> value should be provided in lowercase.</span></div><div class=highlight><pre tabindex=0 class=chroma><code class=language-toml data-lang=toml><span class=line><span class=cl><span class=c># config/_default/params.toml</span>
|
|
</span></span><span class=line><span class=cl>
|
|
</span></span><span class=line><span class=cl><span class=nx>colorScheme</span> <span class=p>=</span> <span class=s2>"congo"</span>
|
|
</span></span></code></pre></div><p>Congo defines a three-colour palette that is used throughout the theme. Each main colour contains ten shades which are based upon the colours that are included in <a href=https://tailwindcss.com/docs/customizing-colors#color-palette-reference target=_blank>Tailwind</a>.</p><h4 id=congo-default class="relative group">Congo (default) <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=#congo-default aria-label=Anchor>#</a></span></h4><div class="flex justify-between"><span class="w-full py-6 mr-2 rounded-md" style=background-color:#71717a></span>
|
|
<span class="w-full py-6 mr-2 rounded-md" style=background-color:#8b5cf6></span>
|
|
<span class="w-full py-6 mr-2 rounded-md" style=background-color:#d946ef></span></div><h4 id=avocado class="relative group">Avocado <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=#avocado aria-label=Anchor>#</a></span></h4><div class="flex justify-between"><span class="w-full py-6 mr-2 rounded-md" style=background-color:#78716c></span>
|
|
<span class="w-full py-6 mr-2 rounded-md" style=background-color:#84cc16></span>
|
|
<span class="w-full py-6 mr-2 rounded-md" style=background-color:#10b981></span></div><h4 id=cherry class="relative group">Cherry <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=#cherry aria-label=Anchor>#</a></span></h4><div class="flex justify-between"><span class="w-full py-6 mr-2 rounded-md" style=background-color:#737373></span>
|
|
<span class="w-full py-6 mr-2 rounded-md" style=background-color:#f43f5e></span>
|
|
<span class="w-full py-6 mr-2 rounded-md" style=background-color:#22c55e></span></div><h4 id=fire class="relative group">Fire <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=#fire aria-label=Anchor>#</a></span></h4><div class="flex justify-between"><span class="w-full py-6 mr-2 rounded-md" style=background-color:#78716c></span>
|
|
<span class="w-full py-6 mr-2 rounded-md" style=background-color:#f97316></span>
|
|
<span class="w-full py-6 mr-2 rounded-md" style=background-color:#f43f5e></span></div><h4 id=ocean class="relative group">Ocean <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=#ocean aria-label=Anchor>#</a></span></h4><div class="flex justify-between"><span class="w-full py-6 mr-2 rounded-md" style=background-color:#64748b></span>
|
|
<span class="w-full py-6 mr-2 rounded-md" style=background-color:#3b82f6></span>
|
|
<span class="w-full py-6 mr-2 rounded-md" style=background-color:#06b6d4></span></div><h4 id=sapphire class="relative group">Sapphire <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=#sapphire aria-label=Anchor>#</a></span></h4><div class="flex justify-between"><span class="w-full py-6 mr-2 rounded-md" style=background-color:#64748b></span>
|
|
<span class="w-full py-6 mr-2 rounded-md" style=background-color:#6366f1></span>
|
|
<span class="w-full py-6 mr-2 rounded-md" style=background-color:#ec4899></span></div><h4 id=slate class="relative group">Slate <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=#slate aria-label=Anchor>#</a></span></h4><div class="flex justify-between"><span class="w-full py-6 mr-2 rounded-md" style=background-color:#6b7280></span>
|
|
<span class="w-full py-6 mr-2 rounded-md" style=background-color:#64748b></span>
|
|
<span class="w-full py-6 mr-2 rounded-md" style=background-color:#6b7280></span></div><p>Although these are the default schemes, you can also create your own. Refer to the <a href=https://jpanther.github.io/congo/docs/advanced-customisation/#colour-schemes>Advanced Customisation</a> section for details.</p><h2 id=organising-content class="relative group">Organising content <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=#organising-content aria-label=Anchor>#</a></span></h2><p>By default, Congo doesn’t force you to use a particular content type. In doing so you are free to define your content as you wish. You might prefer <em>pages</em> for a static site, <em>posts</em> for a blog, or <em>projects</em> for a portfolio.</p><h3 id=directory-structure class="relative group">Directory 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=#directory-structure aria-label=Anchor>#</a></span></h3><p>Here’s a quick overview of a basic Congo project. All content is placed within the <code>content</code> 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>│ └── img
|
|
</span></span><span class=line><span class=cl>│ └── author.jpg
|
|
</span></span><span class=line><span class=cl>├── config
|
|
</span></span><span class=line><span class=cl>│ └── _default
|
|
</span></span><span class=line><span class=cl>├── content
|
|
</span></span><span class=line><span class=cl>│ ├── _index.md
|
|
</span></span><span class=line><span class=cl>│ ├── about.md
|
|
</span></span><span class=line><span class=cl>│ └── posts
|
|
</span></span><span class=line><span class=cl>│ ├── _index.md
|
|
</span></span><span class=line><span class=cl>│ ├── first-post.md
|
|
</span></span><span class=line><span class=cl>│ └── another-post
|
|
</span></span><span class=line><span class=cl>│ ├── aardvark.jpg
|
|
</span></span><span class=line><span class=cl>│ └── index.md
|
|
</span></span><span class=line><span class=cl>└── themes
|
|
</span></span><span class=line><span class=cl> └── congo
|
|
</span></span></code></pre></div><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"><span class="relative inline-block align-text-bottom 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>The key thing to note here is that within the content directory, normal article pages are named <code>index.md</code> while list pages are named <code>_index.md</code>. Any assets that go along with the article should be placed in a sub-directory alongside the index file.</span></div><p>It’s important to have a firm grasp of how Hugo expects content to be organised as the theme is designed to take full advantage of Hugo page bundles. Be sure to read the <a href=https://gohugo.io/content-management/organization/ target=_blank>official Hugo docs</a> for more information.</p><h3 id=feature-cover-and-thumbnail-images class="relative group">Feature, cover and thumbnail images <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=#feature-cover-and-thumbnail-images aria-label=Anchor>#</a></span></h3><p>The Congo theme supports displaying images on article listings and at the top of individual article pages. There are three types of images supported, each with their own use case: <code>feature</code>, <code>cover</code> and <code>thumb</code>.</p><p>In the example below, a cover and thumb image have been provided for the <code>first-post</code> article:</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>└── content
|
|
</span></span><span class=line><span class=cl> └── posts
|
|
</span></span><span class=line><span class=cl> ├── _index.md
|
|
</span></span><span class=line><span class=cl> └── first-post
|
|
</span></span><span class=line><span class=cl> ├── cover.jpg
|
|
</span></span><span class=line><span class=cl> ├── index.md
|
|
</span></span><span class=line><span class=cl> └── thumb.jpg
|
|
</span></span></code></pre></div><p>The <code>thumb</code> image is used as the article thumbnail and will be displayed in article lists, and the <code>cover</code> image will be displayed at the top of the article content on individual article pages.</p><p><figure><img class="mx-auto my-0 rounded-md" srcset="/congo/docs/getting-started/article-screenshot_hua3d13341519c77890d7321a79f2cdac7_45153_330x0_resize_q75_box.jpg 330w,
|
|
/congo/docs/getting-started/article-screenshot_hua3d13341519c77890d7321a79f2cdac7_45153_660x0_resize_q75_box.jpg 660w,
|
|
/congo/docs/getting-started/article-screenshot_hua3d13341519c77890d7321a79f2cdac7_45153_1024x0_resize_q75_box.jpg 1024w,
|
|
/congo/docs/getting-started/article-screenshot_hua3d13341519c77890d7321a79f2cdac7_45153_1320x0_resize_q75_box.jpg 2x" src=/congo/docs/getting-started/article-screenshot_hua3d13341519c77890d7321a79f2cdac7_45153_660x0_resize_q75_box.jpg alt="A screenshot of an article with a thumbnail image"><figcaption class=text-center>This example shows an article with a thumbnail image.</figcaption></figure></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"><span class="relative inline-block align-text-bottom 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>In order to provide maximum performance, thumbnail images are automatically cropped and resized to a 4:3 ratio. Cover images will be automatically resized to fit their content, but any ratio is permitted.</span></div><p>The <code>feature</code> image is a special type, and when present, it will be used in place of <em>both</em> the <code>thumb</code> and <code>cover</code> images. Feature images are also present in the article metadata, which is included when content is shared to third-party networks like Facebook and Twitter.</p><p>The theme will intelligently detect article images and automatically add them to your site. You don’t have to refer to them in the front matter and simply need to place an appropriately named file within the page resources. If the term <code>feature</code>, <code>cover</code> or <code>thumb</code> is found anywhere in the image filename, then it will be used for that purpose.</p><p>The <a href=https://jpanther.github.io/congo/samples/>Samples section</a> provides a number of examples of these images (and you can view the <a href=https://github.com/jpanther/congo/tree/dev/exampleSite/content/samples target=_blank>source code</a> to see the file structure).</p><h3 id=taxonomies class="relative group">Taxonomies <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=#taxonomies aria-label=Anchor>#</a></span></h3><p>Congo is also flexible when it comes to taxonomies. Some people prefer to use <em>tags</em> and <em>categories</em> to group their content, others prefer to use <em>topics</em>.</p><p>Hugo defaults to using posts, tags and categories out of the box and this will work fine if that’s what you want. If you wish to customise this, however, you can do so by creating a <code>taxonomies.toml</code> configuration file:</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-toml data-lang=toml><span class=line><span class=cl><span class=c># config/_default/taxonomies.toml</span>
|
|
</span></span><span class=line><span class=cl>
|
|
</span></span><span class=line><span class=cl><span class=nx>topic</span> <span class=p>=</span> <span class=s2>"topics"</span>
|
|
</span></span></code></pre></div><p>This will replace the default <em>tags</em> and <em>categories</em> with <em>topics</em>. Refer to the <a href=https://gohugo.io/content-management/taxonomies/ target=_blank>Hugo Taxonomy docs</a> for more information on naming taxonomies.</p><p>When you create a new taxonomy, you will need to adjust the navigation links on the website to point to the correct sections, which is covered below.</p><h2 id=menus class="relative group">Menus <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=#menus aria-label=Anchor>#</a></span></h2><p>Congo has two menus that can be customised to suit the content and layout of your site. The <code>main</code> menu appears in the site header and the <code>footer</code> menu appears at the bottom of the page just above the copyright notice.</p><p>Both menus are configured in the <code>menus.en.toml</code> file. Similarly to the languages config file, if you wish to use another language, rename this file and replace <code>en</code> with the language code you wish to use. Menu links will be sorted from lowest to highest <code>weight</code>, and then alphabetically by <code>name</code>.</p><div class=highlight><pre tabindex=0 class=chroma><code class=language-toml data-lang=toml><span class=line><span class=cl><span class=c># config/_default/menus.en.toml</span>
|
|
</span></span><span class=line><span class=cl>
|
|
</span></span><span class=line><span class=cl><span class=p>[[</span><span class=nx>main</span><span class=p>]]</span>
|
|
</span></span><span class=line><span class=cl> <span class=nx>name</span> <span class=p>=</span> <span class=s2>"Blog"</span>
|
|
</span></span><span class=line><span class=cl> <span class=nx>pageRef</span> <span class=p>=</span> <span class=s2>"posts"</span>
|
|
</span></span><span class=line><span class=cl> <span class=nx>weight</span> <span class=p>=</span> <span class=mi>10</span>
|
|
</span></span><span class=line><span class=cl>
|
|
</span></span><span class=line><span class=cl><span class=p>[[</span><span class=nx>main</span><span class=p>]]</span>
|
|
</span></span><span class=line><span class=cl> <span class=nx>name</span> <span class=p>=</span> <span class=s2>"Topics"</span>
|
|
</span></span><span class=line><span class=cl> <span class=nx>pageRef</span> <span class=p>=</span> <span class=s2>"topics"</span>
|
|
</span></span><span class=line><span class=cl> <span class=nx>weight</span> <span class=p>=</span> <span class=mi>20</span>
|
|
</span></span><span class=line><span class=cl>
|
|
</span></span><span class=line><span class=cl><span class=p>[[</span><span class=nx>main</span><span class=p>]]</span>
|
|
</span></span><span class=line><span class=cl> <span class=nx>name</span> <span class=p>=</span> <span class=s2>"GitHub"</span>
|
|
</span></span><span class=line><span class=cl> <span class=nx>url</span> <span class=p>=</span> <span class=s2>"https://github.com/jpanther/congo"</span>
|
|
</span></span><span class=line><span class=cl> <span class=nx>weight</span> <span class=p>=</span> <span class=mi>30</span>
|
|
</span></span><span class=line><span class=cl> <span class=p>[</span><span class=nx>main</span><span class=p>.</span><span class=nx>params</span><span class=p>]</span>
|
|
</span></span><span class=line><span class=cl> <span class=nx>icon</span> <span class=p>=</span> <span class=s2>"github"</span>
|
|
</span></span><span class=line><span class=cl> <span class=nx>showName</span> <span class=p>=</span> <span class=kc>false</span>
|
|
</span></span><span class=line><span class=cl> <span class=nx>target</span> <span class=p>=</span> <span class=s2>"_blank"</span>
|
|
</span></span><span class=line><span class=cl>
|
|
</span></span><span class=line><span class=cl><span class=p>[[</span><span class=nx>main</span><span class=p>]]</span>
|
|
</span></span><span class=line><span class=cl> <span class=nx>identifier</span> <span class=p>=</span> <span class=s2>"search"</span>
|
|
</span></span><span class=line><span class=cl> <span class=nx>weight</span> <span class=p>=</span> <span class=mi>99</span>
|
|
</span></span><span class=line><span class=cl> <span class=p>[</span><span class=nx>main</span><span class=p>.</span><span class=nx>params</span><span class=p>]</span>
|
|
</span></span><span class=line><span class=cl> <span class=nx>action</span> <span class=p>=</span> <span class=s2>"search"</span>
|
|
</span></span><span class=line><span class=cl> <span class=nx>icon</span> <span class=p>=</span> <span class=s2>"search"</span>
|
|
</span></span><span class=line><span class=cl>
|
|
</span></span><span class=line><span class=cl><span class=p>[[</span><span class=nx>footer</span><span class=p>]]</span>
|
|
</span></span><span class=line><span class=cl> <span class=nx>name</span> <span class=p>=</span> <span class=s2>"Privacy"</span>
|
|
</span></span><span class=line><span class=cl> <span class=nx>pageRef</span> <span class=p>=</span> <span class=s2>"privacy"</span>
|
|
</span></span></code></pre></div><h3 id=basic-links class="relative group">Basic links <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=#basic-links aria-label=Anchor>#</a></span></h3><p>The <code>name</code> parameter specifies the text that is used in the menu link. You can also optionally provide a <code>title</code> which fills the HTML title attribute for the link.</p><p>The <code>pageRef</code> parameter allows you to easily reference Hugo content pages and taxonomies. It is the quickest way to configure the menu as you can simply refer to any Hugo content item and it will automatically build the correct link. To link to external URLs, the <code>url</code> parameter can be used.</p><p>Further customisation can be achieved through the use of special theme parameters. Providing <code>params</code> within a link allows the addition of an <code>icon</code>, the ability to toggle the link text with <code>showName</code> and to optionally set a <code>target</code> for the URL. In the example above, the GitHub link will only display as an icon and will open the link in a new window.</p><h3 id=action-links class="relative group">Action links <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=#action-links aria-label=Anchor>#</a></span></h3><p>There is a special case for creating menu items for links that take theme actions. These are denoted using the <code>action</code> parameter, and a value of the action the link should perform. Action links allow for all the same custom parameters as other links and can be styled with an icon or text name.</p><p>There are two valid theme actions:</p><ul><li><code>appearance</code> will create a link to the appearance switcher</li><li><code>search</code> will create a link to the site search</li></ul><p>Both menus are completely optional and can be commented out if not required. Use the template provided in the default file as a guide.</p><h2 id=detailed-configuration class="relative group">Detailed 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=#detailed-configuration aria-label=Anchor>#</a></span></h2><p>The steps above are the bare minimum configuration. If you now run <code>hugo server</code> you will be presented with a blank Congo website. Detailed configuration is covered in the <a href=https://jpanther.github.io/congo/docs/configuration/>Configuration</a> section.</p></div></section><footer class="pt-8 max-w-prose 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/installation/><span class="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400">←</span>
|
|
<span class="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400">→</span>
|
|
<span class="flex flex-col"><span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Installation</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/configuration/><span class="flex flex-col"><span class="mt-[0.1rem] leading-6 group-hover:underline group-hover:decoration-primary-500">Configuration</span>
|
|
<span class="mt-[0.1rem] text-xs text-neutral-500 dark:text-neutral-400"></span></span><span class="ml-2 text-neutral-700 transition-transform group-hover:translate-x-[2px] group-hover:text-primary-600 ltr:inline rtl:hidden dark:text-neutral dark:group-hover:text-primary-400">→</span>
|
|
<span class="mr-2 text-neutral-700 transition-transform group-hover:-translate-x-[2px] group-hover:text-primary-600 ltr:hidden rtl:inline dark:text-neutral dark:group-hover:text-primary-400">←</span></a></span></div></div></footer></article><div class="pointer-events-none absolute top-[100vh] 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 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://git.io/hugo-congo target=_blank rel="noopener noreferrer">Congo</a></p></div><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-0 type=button aria-label="appearance switcher"><div class="flex items-center justify-center w-12 h-12 dark:hidden" title="Switch to dark appearance"><span class="relative inline-block align-text-bottom 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 w-12 h-12 dark:flex" title="Switch to light appearance"><span class="relative inline-block align-text-bottom 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></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 dark:bg-neutral-900/50 sm:p-6 md:p-[10vh] lg:p-[12vh]" data-url=https://jpanther.github.io/congo/><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 inline-block align-text-bottom 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 inline-block align-text-bottom 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></html> |