2023-11-20 23:54:13 +00:00
<!DOCTYPE html>
< html lang = "en" dir = "ltr" >
< head >
< meta charset = "utf-8" >
< meta name = "viewport" content = "height=device-height, width=device-width, initial-scale=1.0, minimum-scale=1.0" >
2024-03-11 20:44:09 +00:00
< meta name = "generator" content = "Hugo 0.123.8" >
2024-02-29 19:52:06 +00:00
< meta name = "generator" content = "Relearn 5.25.0+tip" >
2023-11-20 23:54:13 +00:00
< meta name = "description" content = "Documentation for Hugo Relearn Theme" >
< meta name = "author" content = "Sören Weber" >
< meta name = "twitter:card" content = "summary_large_image" >
2024-02-24 13:03:50 +00:00
< meta name = "twitter:image" content = "https://mcshelby.github.io/hugo-theme-relearn/images/hero.png" >
2023-11-20 23:54:13 +00:00
< meta name = "twitter:title" content = "Branding :: Hugo Relearn Theme" >
< meta name = "twitter:description" content = "Documentation for Hugo Relearn Theme" >
< meta property = "og:title" content = "Branding :: Hugo Relearn Theme" >
< meta property = "og:description" content = "Documentation for Hugo Relearn Theme" >
< meta property = "og:type" content = "website" >
2024-02-24 13:03:50 +00:00
< meta property = "og:url" content = "https://mcshelby.github.io/hugo-theme-relearn/basics/branding/index.html" >
< meta property = "og:image" content = "https://mcshelby.github.io/hugo-theme-relearn/images/hero.png" >
2023-11-20 23:54:13 +00:00
< meta property = "og:site_name" content = "Hugo Relearn Theme" >
< title > Branding :: Hugo Relearn Theme< / title >
2024-02-24 13:03:50 +00:00
< link href = "https://mcshelby.github.io/hugo-theme-relearn/basics/branding/index.html" rel = "alternate" hreflang = "x-default" >
< link href = "https://mcshelby.github.io/hugo-theme-relearn/basics/branding/index.html" rel = "alternate" hreflang = "en" >
< link href = "https://mcshelby.github.io/hugo-theme-relearn/pir/basics/branding/index.html" rel = "alternate" hreflang = "art-pir" >
2024-02-24 12:50:21 +00:00
< link href = "/hugo-theme-relearn/basics/branding/index.xml" rel = "alternate" type = "application/rss+xml" title = "Branding :: Hugo Relearn Theme" >
< link href = "/hugo-theme-relearn/basics/branding/index.print.html" rel = "alternate" type = "text/html" title = "Branding :: Hugo Relearn Theme" >
2024-03-15 20:15:54 +00:00
< link href = "/hugo-theme-relearn/images/logo.svg?1710533746" rel = "icon" type = "image/svg+xml" >
2023-11-20 23:54:13 +00:00
<!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how - to - use -->
2024-03-15 20:15:54 +00:00
< link href = "/hugo-theme-relearn/css/fontawesome-all.min.css?1710533746" rel = "stylesheet" media = "print" onload = "this.media='all';this.onload=null;" > < noscript > < link href = "/hugo-theme-relearn/css/fontawesome-all.min.css?1710533746" rel = "stylesheet" > < / noscript >
< link href = "/hugo-theme-relearn/css/nucleus.css?1710533746" rel = "stylesheet" >
< link href = "/hugo-theme-relearn/css/auto-complete.css?1710533746" rel = "stylesheet" media = "print" onload = "this.media='all';this.onload=null;" > < noscript > < link href = "/hugo-theme-relearn/css/auto-complete.css?1710533746" rel = "stylesheet" > < / noscript >
< link href = "/hugo-theme-relearn/css/perfect-scrollbar.min.css?1710533746" rel = "stylesheet" >
< link href = "/hugo-theme-relearn/css/fonts.css?1710533746" rel = "stylesheet" media = "print" onload = "this.media='all';this.onload=null;" > < noscript > < link href = "/hugo-theme-relearn/css/fonts.css?1710533746" rel = "stylesheet" > < / noscript >
< link href = "/hugo-theme-relearn/css/theme.css?1710533746" rel = "stylesheet" >
< link href = "/hugo-theme-relearn/css/theme-relearn-auto.css?1710533746" rel = "stylesheet" id = "R-variant-style" >
< link href = "/hugo-theme-relearn/css/chroma-relearn-auto.css?1710533746" rel = "stylesheet" id = "R-variant-chroma-style" >
< link href = "/hugo-theme-relearn/css/variant.css?1710533746" rel = "stylesheet" >
< link href = "/hugo-theme-relearn/css/print.css?1710533746" rel = "stylesheet" media = "print" >
< link href = "/hugo-theme-relearn/css/ie.css?1710533746" rel = "stylesheet" >
< script src = "/hugo-theme-relearn/js/url.js?1710533746" > < / script >
< script src = "/hugo-theme-relearn/js/variant.js?1710533746" > < / script >
2023-11-20 23:54:13 +00:00
< script >
// hack to let hugo tell us how to get to the root when using relativeURLs, it needs to be called *url= for it to do its magic:
// https://github.com/gohugoio/hugo/blob/145b3fcce35fbac25c7033c91c1b7ae6d1179da8/transform/urlreplacers/absurlreplacer.go#L72
2024-02-24 12:50:21 +00:00
window.index_js_url="/hugo-theme-relearn/index.search.js";
var root_url="/";
2023-11-20 23:54:13 +00:00
var baseUri=root_url.replace(/\/$/, '');
window.relearn = window.relearn || {};
2024-02-24 13:03:50 +00:00
window.relearn.baseUriFull='https:\/\/mcshelby.github.io\/hugo-theme-relearn/';
2023-11-20 23:54:13 +00:00
// variant stuff
2023-12-03 14:23:32 +00:00
window.relearn.themeVariantModifier='';
2023-11-23 00:05:57 +00:00
window.variants & & variants.init( [ 'relearn-auto', 'relearn-light', 'relearn-dark', 'relearn-bright', 'zen-auto', 'zen-light', 'zen-dark', 'neon', 'learn', 'blue', 'green', 'red' ] );
2023-11-20 23:54:13 +00:00
// translations
window.T_Copy_to_clipboard = `Copy to clipboard`;
window.T_Copied_to_clipboard = `Copied to clipboard!`;
window.T_Copy_link_to_clipboard = `Copy link to clipboard`;
window.T_Link_copied_to_clipboard = `Copied link to clipboard!`;
window.T_Reset_view = `Reset view`;
window.T_View_reset = `View reset!`;
window.T_No_results_found = `No results found for "{0}"`;
window.T_N_results_found = `{1} results found for "{0}"`;
< / script >
< style >
#R-body img.bg-white {
background-color: white;
}
< / style >
< / head >
2024-02-24 12:50:21 +00:00
< body class = "mobile-support html disableInlineCopyToClipboard" data-url = "/hugo-theme-relearn/basics/branding/index.html" >
2023-11-20 23:54:13 +00:00
< div id = "R-body" class = "default-animation" >
< div id = "R-body-overlay" > < / div >
< nav id = "R-topbar" >
< div class = "topbar-wrapper" >
< div class = "topbar-sidebar-divider" > < / div >
< div class = "topbar-area topbar-area-start" data-area = "start" >
2023-12-05 07:41:41 +00:00
< div class = "topbar-button topbar-button-sidebar" data-content-empty = "disable" data-width-s = "show" data-width-m = "hide" data-width-l = "hide" > < button class = "topbar-control" onclick = "toggleNav()" type = "button" title = "Menu (CTRL+ALT+n)" > < i class = "fa-fw fas fa-bars" > < / i > < / button >
2023-11-20 23:54:13 +00:00
< / div >
2023-12-05 07:45:14 +00:00
< div class = "topbar-button topbar-button-toc" data-content-empty = "hide" data-width-s = "show" data-width-m = "show" data-width-l = "show" > < button class = "topbar-control" onclick = "toggleTopbarFlyout(this)" type = "button" title = "Table of Contents (CTRL+ALT+t)" > < i class = "fa-fw fas fa-list-alt" > < / i > < / button >
2023-11-20 23:54:13 +00:00
< div class = "topbar-content" >
< div class = "topbar-content-wrapper" >
< nav class = "TableOfContents" >
< ul >
< li > < a href = "#theme-variant" > Change the Variant (Simple)< / a >
< ul >
< li > < a href = "#single-variant" > Single Variant< / a > < / li >
< li > < a href = "#multiple-variants" > Multiple Variants< / a > < / li >
< / ul >
< / li >
< li > < a href = "#adjust-to-os-settings" > Adjust to OS Settings< / a > < / li >
< li > < a href = "#change-the-favicon" > Change the Favicon< / a > < / li >
< li > < a href = "#change-the-logo" > Change the Logo< / a > < / li >
2023-11-25 13:41:42 +00:00
< li > < a href = "#syntax-highlightning" > Syntax Highlightning< / a > < / li >
2023-11-20 23:54:13 +00:00
< li > < a href = "#theme-variant-advanced" > Change the Variant (Advanced)< / a >
< ul >
< li > < a href = "#parameter" > Parameter< / a > < / li >
2023-11-23 00:05:57 +00:00
< li > < a href = "#example-configuration-of-this-site" > Example Configuration of This Site< / a > < / li >
2023-11-20 23:54:13 +00:00
< / ul >
< / li >
2023-11-26 19:34:38 +00:00
< li > < a href = "#modify-shipped-variants" > Modify Shipped Variants< / a > < / li >
2023-11-20 23:54:13 +00:00
< / ul >
< / nav >
< / div >
< / div >
< / div >
< / div >
< ol class = "topbar-breadcrumbs breadcrumbs highlightable" itemscope itemtype = "http://schema.org/BreadcrumbList" > < li
2024-02-24 12:50:21 +00:00
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement">< a itemprop = "item" href = "/hugo-theme-relearn/basics/index.html" > < span itemprop = "name" > Basics< / span > < / a > < meta itemprop = "position" content = "1" > > < / li > < li
2023-11-20 23:54:13 +00:00
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement">< span itemprop = "name" > Branding< / span > < meta itemprop = "position" content = "2" > < / li >
< / ol >
< div class = "topbar-area topbar-area-end" data-area = "end" >
2023-12-05 07:41:41 +00:00
< div class = "topbar-button topbar-button-edit" data-content-empty = "disable" data-width-s = "area-more" data-width-m = "show" data-width-l = "show" > < a class = "topbar-control" href = "https://github.com/McShelby/hugo-theme-relearn/edit/main/exampleSite/content/basics/branding/_index.en.md" target = "_blank" title = "Edit (CTRL+ALT+w)" > < i class = "fa-fw fas fa-pen" > < / i > < / a >
2023-11-20 23:54:13 +00:00
< / div >
2024-02-24 12:50:21 +00:00
< div class = "topbar-button topbar-button-print" data-content-empty = "disable" data-width-s = "area-more" data-width-m = "show" data-width-l = "show" > < a class = "topbar-control" href = "/hugo-theme-relearn/basics/branding/index.print.html" title = "Print whole chapter (CTRL+ALT+p)" > < i class = "fa-fw fas fa-print" > < / i > < / a >
2023-11-20 23:54:13 +00:00
< / div >
2024-02-24 12:50:21 +00:00
< div class = "topbar-button topbar-button-prev" data-content-empty = "disable" data-width-s = "show" data-width-m = "show" data-width-l = "show" > < a class = "topbar-control" href = "/hugo-theme-relearn/basics/configuration/index.html" title = "Configuration (🡐)" > < i class = "fa-fw fas fa-chevron-left" > < / i > < / a >
2023-11-20 23:54:13 +00:00
< / div >
2024-02-24 12:50:21 +00:00
< div class = "topbar-button topbar-button-next" data-content-empty = "disable" data-width-s = "show" data-width-m = "show" data-width-l = "show" > < a class = "topbar-control" href = "/hugo-theme-relearn/basics/customization/index.html" title = "Customization (🡒)" > < i class = "fa-fw fas fa-chevron-right" > < / i > < / a >
2023-11-20 23:54:13 +00:00
< / div >
2023-12-05 07:41:41 +00:00
< div class = "topbar-button topbar-button-more" data-content-empty = "hide" data-width-s = "show" data-width-m = "show" data-width-l = "show" > < button class = "topbar-control" onclick = "toggleTopbarFlyout(this)" type = "button" title = "More" > < i class = "fa-fw fas fa-ellipsis-v" > < / i > < / button >
2023-11-20 23:54:13 +00:00
< div class = "topbar-content" >
< div class = "topbar-content-wrapper" >
< div class = "topbar-area topbar-area-more" data-area = "more" >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / nav >
< div id = "R-main-overlay" > < / div >
< main id = "R-body-inner" class = "highlightable default" tabindex = "-1" >
< div class = "flex-block-wrapper" >
< article class = "default" >
< header class = "headline" >
< / header >
< h1 id = "branding" > Branding< / h1 >
< p > The Relearn theme provides configuration options to change your your site’ s colors, favicon and logo. This allows you to easily align your site visuals to your desired style. Most of these options are exposed thru so called color variants.< / p >
2023-11-29 23:15:02 +00:00
< p > A color variant lets you customize various visual effects of your site like almost any color, used fonts, color schemes of print, syntax highligtning, Mermaid and the OpenAPI shortcode, etc. It contains of a CSS file and optional configuration options in your < code > hugo.toml< / code > .< / p >
2024-02-24 12:50:21 +00:00
< p > The Relearn theme ships with a wide set of different color variants. You can use them as-is, copy them over and use them as a starting point for your customizations or just create completely new variants unique to your site. The < a href = "/hugo-theme-relearn/basics/generator/index.html" > interactive variant generator< / a > may help you with this task.< / p >
2023-11-29 23:15:02 +00:00
< p > Once configured in your < code > hugo.toml< / code > , you can select them with the variant selector at the bottom of the menu.< / p >
2023-11-20 23:54:13 +00:00
< h2 id = "theme-variant" > Change the Variant (Simple)< / h2 >
< h3 id = "single-variant" > Single Variant< / h3 >
< p > Set the < code > themeVariant< / code > value to the name of your theme file. That’ s it! Your site will be displayed in this variant only.< / p >
2023-11-26 19:34:38 +00:00
2024-03-02 10:05:50 +00:00
< div class = "tab-panel" data-tab-group = "config-code" >
2023-11-26 19:34:38 +00:00
< div class = "tab-nav" >
2024-03-02 10:05:50 +00:00
< div class = "tab-nav-title" > hugo.< / div >
2023-11-26 19:34:38 +00:00
< button
2024-03-02 10:05:50 +00:00
data-tab-item="toml"
2023-11-26 19:34:38 +00:00
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2024-03-02 10:05:50 +00:00
onclick="switchTab('config-code','toml')"
>
< span class = "tab-nav-text" > toml< / span >
< / button >
< button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
2023-11-26 19:34:38 +00:00
>
2024-03-02 10:05:50 +00:00
< span class = "tab-nav-text" > yaml< / span >
< / button >
< button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
< span class = "tab-nav-text" > json< / span >
2023-11-26 19:34:38 +00:00
< / button >
< / div >
< div class = "tab-content-container" >
< div
2024-03-02 10:05:50 +00:00
data-tab-item="toml"
2023-11-26 19:34:38 +00:00
class="tab-content tab-panel-style cstyle initial active">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-toml" data-lang = "toml" > < span class = "line" > < span class = "cl" > < span class = "p" > [< / span > < span class = "nx" > params< / span > < span class = "p" > ]< / span >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > themeVariant< / span > < span class = "p" > =< / span > < span class = "s1" > ' relearn-light' < / span > < / span > < / span > < / code > < / pre > < / div > < / div >
< / div >
< div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-yaml" data-lang = "yaml" > < span class = "line" > < span class = "cl" > < span class = "nt" > params< / span > < span class = "p" > :< / span > < span class = "w" >
2024-03-02 10:05:50 +00:00
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > themeVariant< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "l" > relearn-light< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
< / div >
< div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-json" data-lang = "json" > < span class = "line" > < span class = "cl" > < span class = "p" > {< / span >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " params" < / span > < span class = "p" > :< / span > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " themeVariant" < / span > < span class = "p" > :< / span > < span class = "s2" > " relearn-light" < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
2023-11-26 19:34:38 +00:00
< / div >
< / div >
< / div >
2024-03-02 10:05:50 +00:00
2023-11-20 23:54:13 +00:00
< div class = "box notices cstyle note" >
< div class = "box-label" > < i class = "fa-fw fas fa-exclamation-circle" > < / i > Note< / div >
< div class = "box-content" >
< p > Your theme variant file must reside in your site’ s < code > static/css< / code > directory or in the theme’ s < code > static/css< / code > directory and the file name must start with < code > theme-< / code > and end wit < code > .css< / code > . In the above example, the path of your theme file must be < code > static/css/theme-relearn-light.css< / code > .< / p >
< p > If you want to make changes to a shipped color variant, create a copy in your site’ s < code > static/css< / code > directory. Don’ t edit the file in the theme’ s directory!< / p >
< / div >
< / div >
< h3 id = "multiple-variants" > Multiple Variants< / h3 >
< p > You can also set multiple variants. In this case, the first variant is the default chosen on first view and a variant selector will be shown in the menu footer if the array contains more than one entry.< / p >
2023-11-26 19:34:38 +00:00
2024-03-02 10:05:50 +00:00
< div class = "tab-panel" data-tab-group = "config-code" >
2023-11-26 19:34:38 +00:00
< div class = "tab-nav" >
2024-03-02 10:05:50 +00:00
< div class = "tab-nav-title" > hugo.< / div >
2023-11-26 19:34:38 +00:00
< button
2024-03-02 10:05:50 +00:00
data-tab-item="toml"
2023-11-26 19:34:38 +00:00
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2024-03-02 10:05:50 +00:00
onclick="switchTab('config-code','toml')"
>
< span class = "tab-nav-text" > toml< / span >
< / button >
< button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
< span class = "tab-nav-text" > yaml< / span >
< / button >
< button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
2023-11-26 19:34:38 +00:00
>
2024-03-02 10:05:50 +00:00
< span class = "tab-nav-text" > json< / span >
2023-11-26 19:34:38 +00:00
< / button >
< / div >
< div class = "tab-content-container" >
< div
2024-03-02 10:05:50 +00:00
data-tab-item="toml"
2023-11-26 19:34:38 +00:00
class="tab-content tab-panel-style cstyle initial active">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-toml" data-lang = "toml" > < span class = "line" > < span class = "cl" > < span class = "p" > [< / span > < span class = "nx" > params< / span > < span class = "p" > ]< / span >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > themeVariant< / span > < span class = "p" > =< / span > < span class = "p" > [< / span > < span class = "s1" > ' relearn-light' < / span > < span class = "p" > ,< / span > < span class = "s1" > ' relearn-dark' < / span > < span class = "p" > ]< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
< / div >
< div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-yaml" data-lang = "yaml" > < span class = "line" > < span class = "cl" > < span class = "nt" > params< / span > < span class = "p" > :< / span > < span class = "w" >
2024-03-02 10:05:50 +00:00
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > themeVariant< / span > < span class = "p" > :< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > - < span class = "l" > relearn-light< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > - < span class = "l" > relearn-dark< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
< / div >
< div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-json" data-lang = "json" > < span class = "line" > < span class = "cl" > < span class = "p" > {< / span >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " params" < / span > < span class = "p" > :< / span > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " themeVariant" < / span > < span class = "p" > :< / span > < span class = "p" > [< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "s2" > " relearn-light" < / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "s2" > " relearn-dark" < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < 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 class = "p" > }< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
2023-11-26 19:34:38 +00:00
< / div >
< / div >
< / div >
2024-03-02 10:05:50 +00:00
2023-11-20 23:54:13 +00:00
< div class = "box notices cstyle tip" >
< div class = "box-label" > < i class = "fa-fw fas fa-lightbulb" > < / i > Tip< / div >
< div class = "box-content" >
2024-02-12 23:01:25 +00:00
< p > The theme provides an advanced configuration mode, combining the functionality for multiple variants with the below possibilities of adjusting to your OS settings and syntax highlightning and even more!< / p >
2024-02-24 12:50:21 +00:00
< p > Although all options documented here are still working, the advanced configuration options are the recommended way to configure your color variants. < a href = "/hugo-theme-relearn/basics/branding/index.html#theme-variant-advanced" > See below< / a > .< / p >
2023-11-20 23:54:13 +00:00
< / div >
< / div >
< h2 id = "adjust-to-os-settings" > Adjust to OS Settings< / h2 >
2023-11-23 00:05:57 +00:00
< p > You can also cause the site to adjust to your OS settings for light/dark mode. Just set the < code > themeVariant< / code > to < code > auto< / code > to become an auto mode variant. That’ s it.< / p >
2023-11-20 23:54:13 +00:00
< p > You can use the < code > auto< / code > value with the single or multiple variants option. If you are using multiple variants, you can drop < code > auto< / code > at any position in the option’ s array, but usually it makes sense to set it in the first position and make it the default.< / p >
2023-11-26 19:34:38 +00:00
2024-03-02 10:05:50 +00:00
< div class = "tab-panel" data-tab-group = "config-code" >
2023-11-26 19:34:38 +00:00
< div class = "tab-nav" >
2024-03-02 10:05:50 +00:00
< div class = "tab-nav-title" > hugo.< / div >
2023-11-26 19:34:38 +00:00
< button
2024-03-02 10:05:50 +00:00
data-tab-item="toml"
2023-11-26 19:34:38 +00:00
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2024-03-02 10:05:50 +00:00
onclick="switchTab('config-code','toml')"
2023-11-26 19:34:38 +00:00
>
2024-03-02 10:05:50 +00:00
< span class = "tab-nav-text" > toml< / span >
< / button >
< button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
< span class = "tab-nav-text" > yaml< / span >
< / button >
< button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
< span class = "tab-nav-text" > json< / span >
2023-11-26 19:34:38 +00:00
< / button >
< / div >
< div class = "tab-content-container" >
< div
2024-03-02 10:05:50 +00:00
data-tab-item="toml"
2023-11-26 19:34:38 +00:00
class="tab-content tab-panel-style cstyle initial active">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-toml" data-lang = "toml" > < span class = "line" > < span class = "cl" > < span class = "p" > [< / span > < span class = "nx" > params< / span > < span class = "p" > ]< / span >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > themeVariant< / span > < span class = "p" > =< / span > < span class = "p" > [< / span > < span class = "s1" > ' auto' < / span > < span class = "p" > ,< / span > < span class = "s1" > ' red' < / span > < span class = "p" > ]< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
< / div >
< div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-yaml" data-lang = "yaml" > < span class = "line" > < span class = "cl" > < span class = "nt" > params< / span > < span class = "p" > :< / span > < span class = "w" >
2024-03-02 10:05:50 +00:00
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > themeVariant< / span > < span class = "p" > :< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > - < span class = "l" > auto< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > - < span class = "l" > red< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
< / div >
< div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-json" data-lang = "json" > < span class = "line" > < span class = "cl" > < span class = "p" > {< / span >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " params" < / span > < span class = "p" > :< / span > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " themeVariant" < / span > < span class = "p" > :< / span > < span class = "p" > [< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "s2" > " auto" < / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "s2" > " red" < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < 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 class = "p" > }< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
2023-11-26 19:34:38 +00:00
< / div >
< / div >
2024-03-02 10:05:50 +00:00
< / div >
< p > If you don’ t configure anything else, the theme will default to use < code > relearn-light< / code > for light mode and < code > relearn-dark< / code > for dark mode. These defaults are overwritten by the first two non-auto options of your < code > themeVariant< / code > option if present.< / p >
2023-11-20 23:54:13 +00:00
< p > In the above example, you would end with < code > red< / code > for light mode and the default of < code > relearn-dark< / code > for dark mode.< / p >
< p > If you don’ t like that behavior, you can explicitly set < code > themeVariantAuto< / code > . The first entry in the array is the color variant for light mode, the second for dark mode.< / p >
2023-11-26 19:34:38 +00:00
2024-03-02 10:05:50 +00:00
< div class = "tab-panel" data-tab-group = "config-code" >
2023-11-26 19:34:38 +00:00
< div class = "tab-nav" >
2024-03-02 10:05:50 +00:00
< div class = "tab-nav-title" > hugo.< / div >
2023-11-26 19:34:38 +00:00
< button
2024-03-02 10:05:50 +00:00
data-tab-item="toml"
2023-11-26 19:34:38 +00:00
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2024-03-02 10:05:50 +00:00
onclick="switchTab('config-code','toml')"
>
< span class = "tab-nav-text" > toml< / span >
< / button >
< button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
< span class = "tab-nav-text" > yaml< / span >
< / button >
< button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
2023-11-26 19:34:38 +00:00
>
2024-03-02 10:05:50 +00:00
< span class = "tab-nav-text" > json< / span >
2023-11-26 19:34:38 +00:00
< / button >
< / div >
< div class = "tab-content-container" >
< div
2024-03-02 10:05:50 +00:00
data-tab-item="toml"
2023-11-26 19:34:38 +00:00
class="tab-content tab-panel-style cstyle initial active">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-toml" data-lang = "toml" > < span class = "line" > < span class = "cl" > < span class = "p" > [< / span > < span class = "nx" > params< / span > < span class = "p" > ]< / span >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > themeVariantAuto< / span > < span class = "p" > =< / span > < span class = "p" > [< / span > < span class = "s1" > ' learn' < / span > < span class = "p" > ,< / span > < span class = "s1" > ' neon' < / span > < span class = "p" > ]< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
< / div >
< div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-yaml" data-lang = "yaml" > < span class = "line" > < span class = "cl" > < span class = "nt" > params< / span > < span class = "p" > :< / span > < span class = "w" >
2024-03-02 10:05:50 +00:00
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > themeVariantAuto< / span > < span class = "p" > :< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > - < span class = "l" > learn< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > - < span class = "l" > neon< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
< / div >
< div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-json" data-lang = "json" > < span class = "line" > < span class = "cl" > < span class = "p" > {< / span >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " params" < / span > < span class = "p" > :< / span > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " themeVariantAuto" < / span > < span class = "p" > :< / span > < span class = "p" > [< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "s2" > " learn" < / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "s2" > " neon" < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < 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 class = "p" > }< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
2023-11-26 19:34:38 +00:00
< / div >
< / div >
2024-03-02 10:05:50 +00:00
< / div >
< h2 id = "change-the-favicon" > Change the Favicon< / h2 >
2023-11-20 23:54:13 +00:00
< p > If your favicon is a SVG, PNG or ICO, just drop your image in your site’ s < code > static/images/< / code > directory and name it < code > favicon.svg< / code > , < code > favicon.png< / code > or < code > favicon.ico< / code > respectively.< / p >
< p > If you want to adjust your favicon according to your OS settings for light/dark mode, add the image files < code > static/images/favicon-light.svg< / code > and < code > static/images/favicon-dark.svg< / code > to your site’ s directory, respectively, corresponding to your file format. In case some of the files are missing, the theme falls back to < code > favicon.svg< / code > for each missing file. All supplied favicons must be of the same file format.< / p >
< p > If no favicon file is found, the theme will lookup the alternative filename < code > logo< / code > in the same location and will repeat the search for the list of supported file types.< / p >
< p > If you need to change this default behavior, create a new file < code > layouts/partials/favicon.html< / code > in your site’ s directory and write something like this:< / p >
2023-11-26 19:34:38 +00:00
2024-03-15 20:15:54 +00:00
< div class = "tab-panel" data-tab-group = "e324c16193cec21718147d6c37fefe32" >
2023-11-26 19:34:38 +00:00
< div class = "tab-nav" >
< div class = "tab-nav-title" > ​ < / div >
< button
data-tab-item="layoutspartialsfaviconhtml"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2024-03-15 20:15:54 +00:00
onclick="switchTab('e324c16193cec21718147d6c37fefe32','layoutspartialsfaviconhtml')"
2023-11-26 19:34:38 +00:00
>
< span class = "tab-nav-text" > layouts/partials/favicon.html< / span >
< / button >
< / div >
< div class = "tab-content-container" >
< div
data-tab-item="layoutspartialsfaviconhtml"
class="tab-content tab-panel-style cstyle initial active">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-html" data-lang = "html" > < span class = "line" > < span class = "cl" > < span class = "p" > < < / span > < span class = "nt" > link< / span > < span class = "na" > rel< / span > < span class = "o" > =< / span > < span class = "s" > " icon" < / span > < span class = "na" > href< / span > < span class = "o" > =< / span > < span class = "s" > " /images/favicon.bmp" < / span > < span class = "na" > type< / span > < span class = "o" > =< / span > < span class = "s" > " image/bmp" < / span > < span class = "p" > > < / span > < / span > < / span > < / code > < / pre > < / div > < / div >
2023-11-26 19:34:38 +00:00
< / div >
< / div >
< / div > < h2 id = "change-the-logo" > Change the Logo< / h2 >
2023-11-20 23:54:13 +00:00
< p > Create a new file in < code > layouts/partials/logo.html< / code > of your site. Then write any HTML you want. You could use an < code > img< / code > HTML tag and reference an image created under the < em > static< / em > folder, or you could paste a SVG definition!< / p >
< div class = "box notices cstyle note" >
< div class = "box-label" > < i class = "fa-fw fas fa-exclamation-circle" > < / i > Note< / div >
< div class = "box-content" >
< p > The size of the logo will adapt automatically.< / p >
< / div >
< / div >
2023-11-25 13:41:42 +00:00
< h2 id = "syntax-highlightning" > Syntax Highlightning< / h2 >
2023-11-25 13:24:49 +00:00
< p > If you want to switch the syntax highlighting theme together with your color variant, you need to configure your installation < a href = "https://gohugo.io/content-management/syntax-highlighting/" target = "_blank" > according to Hugo’ s documentation< / a > and provide a syntax highlighting stylesheet file.< / p >
< p > You can use a one of the shipped stylesheet files or use Hugo to generate a file for you. The file must be written to < code > static/css/chroma-< NAME> .css< / code > . To use it with your color variant you have to define < code > --CODE-theme: < NAME> < / code > in the color variant stylesheet file.< / p >
2023-11-29 23:15:02 +00:00
< p > For an example, take a look into < a href = "https://github.com/McShelby/hugo-theme-relearn/blob/main/static/css/theme-relearn-light.css" target = "_blank" > < code > theme-relearn-light.css< / code > < / a > and < a href = "https://github.com/McShelby/hugo-theme-relearn/blob/main/exampleSite/config/_default/hugo.toml" target = "_blank" > < code > hugo.toml< / code > < / a > of the exampleSite.< / p >
2023-11-20 23:54:13 +00:00
< h2 id = "theme-variant-advanced" > Change the Variant (Advanced)< / h2 >
< p > The theme offers a new way to configure theme variants and all of the aspects above inside of a single configuration item. This comes with some features previously unsupported.< / p >
2024-02-24 12:50:21 +00:00
< p > Like with the < a href = "/hugo-theme-relearn/basics/branding/index.html#multiple-variants" > multiple variants< / a > option, you are defining your theme variants in an array but now < em > not by simple strings< / em > < strong > but in a table with suboptions< / strong > .< / p >
2023-11-20 23:54:13 +00:00
< p > Again, in this case, the first variant is the default chosen on first view and a variant selector will be shown in the menu footer if the array contains more than one entry.< / p >
2023-11-26 19:34:38 +00:00
2024-03-02 10:05:50 +00:00
< div class = "tab-panel" data-tab-group = "config-code" >
2023-11-26 19:34:38 +00:00
< div class = "tab-nav" >
2024-03-02 10:05:50 +00:00
< div class = "tab-nav-title" > hugo.< / div >
2023-11-26 19:34:38 +00:00
< button
2024-03-02 10:05:50 +00:00
data-tab-item="toml"
2023-11-26 19:34:38 +00:00
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2024-03-02 10:05:50 +00:00
onclick="switchTab('config-code','toml')"
2023-11-26 19:34:38 +00:00
>
2024-03-02 10:05:50 +00:00
< span class = "tab-nav-text" > toml< / span >
< / button >
< button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
>
< span class = "tab-nav-text" > yaml< / span >
< / button >
< button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
< span class = "tab-nav-text" > json< / span >
2023-11-26 19:34:38 +00:00
< / button >
< / div >
< div class = "tab-content-container" >
< div
2024-03-02 10:05:50 +00:00
data-tab-item="toml"
2023-11-26 19:34:38 +00:00
class="tab-content tab-panel-style cstyle initial active">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-toml" data-lang = "toml" > < span class = "line" > < span class = "cl" > < span class = "p" > [< / span > < span class = "nx" > params< / span > < span class = "p" > ]< / span >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > themeVariant< / span > < span class = "p" > =< / span > < span class = "p" > [< / span > < span class = "s1" > ' relearn-light' < / span > < span class = "p" > ,< / span > < span class = "s1" > ' relearn-dark' < / span > < span class = "p" > ]< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
< / div >
< div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-yaml" data-lang = "yaml" > < span class = "line" > < span class = "cl" > < span class = "nt" > params< / span > < span class = "p" > :< / span > < span class = "w" >
2024-03-02 10:05:50 +00:00
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > themeVariant< / span > < span class = "p" > :< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > - < span class = "l" > relearn-light< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > - < span class = "l" > relearn-dark< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
< / div >
< div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-json" data-lang = "json" > < span class = "line" > < span class = "cl" > < span class = "p" > {< / span >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " params" < / span > < span class = "p" > :< / span > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " themeVariant" < / span > < span class = "p" > :< / span > < span class = "p" > [< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "s2" > " relearn-light" < / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "s2" > " relearn-dark" < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < 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 class = "p" > }< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
2023-11-26 19:34:38 +00:00
< / div >
< / div >
2024-03-02 10:05:50 +00:00
< / div >
< p > you now write it that way:< / p >
2023-11-26 19:34:38 +00:00
2024-03-02 10:05:50 +00:00
< div class = "tab-panel" data-tab-group = "config-code" >
2023-11-26 19:34:38 +00:00
< div class = "tab-nav" >
2024-03-02 10:05:50 +00:00
< div class = "tab-nav-title" > hugo.< / div >
2023-11-26 19:34:38 +00:00
< button
2024-03-02 10:05:50 +00:00
data-tab-item="toml"
2023-11-26 19:34:38 +00:00
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2024-03-02 10:05:50 +00:00
onclick="switchTab('config-code','toml')"
>
< span class = "tab-nav-text" > toml< / span >
< / button >
< button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
2023-11-26 19:34:38 +00:00
>
2024-03-02 10:05:50 +00:00
< span class = "tab-nav-text" > yaml< / span >
< / button >
< button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
< span class = "tab-nav-text" > json< / span >
2023-11-26 19:34:38 +00:00
< / button >
< / div >
< div class = "tab-content-container" >
< div
2024-03-02 10:05:50 +00:00
data-tab-item="toml"
2023-11-26 19:34:38 +00:00
class="tab-content tab-panel-style cstyle initial active">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-toml" data-lang = "toml" > < span class = "line" > < span class = "cl" > < span class = "p" > [< / span > < span class = "nx" > params< / span > < span class = "p" > ]< / span >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > [[< / span > < span class = "nx" > params< / span > < span class = "p" > .< / span > < span class = "nx" > themeVariant< / span > < span class = "p" > ]]< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > identifier< / span > < span class = "p" > =< / span > < span class = "s1" > ' relearn-light' < / span >
< / span > < / span > < span class = "line" > < span class = "cl" >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > [[< / span > < span class = "nx" > params< / span > < span class = "p" > .< / span > < span class = "nx" > themeVariant< / span > < span class = "p" > ]]< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > identifier< / span > < span class = "p" > =< / span > < span class = "s1" > ' relearn-dark' < / span > < / span > < / span > < / code > < / pre > < / div > < / div >
< / div >
< div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-yaml" data-lang = "yaml" > < span class = "line" > < span class = "cl" > < span class = "nt" > params< / span > < span class = "p" > :< / span > < span class = "w" >
2024-03-02 10:05:50 +00:00
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > themeVariant< / span > < span class = "p" > :< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > - < span class = "nt" > identifier< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "l" > relearn-light< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > - < span class = "nt" > identifier< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "l" > relearn-dark< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
< / div >
< div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-json" data-lang = "json" > < span class = "line" > < span class = "cl" > < span class = "p" > {< / span >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " params" < / span > < span class = "p" > :< / span > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " themeVariant" < / span > < span class = "p" > :< / 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 class = "nt" > " identifier" < / span > < span class = "p" > :< / span > < span class = "s2" > " relearn-light" < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < 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 class = "nt" > " identifier" < / span > < span class = "p" > :< / span > < span class = "s2" > " relearn-dark" < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < 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 class = "p" > }< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
2023-11-26 19:34:38 +00:00
< / div >
< / div >
2024-03-02 10:05:50 +00:00
< / div >
< p > The < code > identifier< / code > option is mandatory and equivalent to the string in the first example. Further options can be configured, see the table below.< / p >
2023-11-20 23:54:13 +00:00
< h3 id = "parameter" > Parameter< / h3 >
< table >
< thead >
< tr >
< th > Name< / th >
< th > Default< / th >
< th > Notes< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > identifier< / td >
< td > < em > < empty> < / em > < / td >
< td > Must correspond to the name of a color variant either in your site’ s or the theme’ s directory in the form < code > static/css/theme-< IDENTIFIER> .css< / code > .< / td >
< / tr >
< tr >
< td > name< / td >
< td > see notes< / td >
< td > The name to be displayed in the variant selector. If not set, the identifier is used in a human readable form.< / td >
< / tr >
2023-11-23 00:05:57 +00:00
< tr >
< td > auto< / td >
< td > < em > < empty> < / em > < / td >
2024-02-24 12:50:21 +00:00
< td > If set, the variant is treated as an < a href = "/hugo-theme-relearn/basics/branding/index.html#adjust-to-os-settings" > auto mode variant< / a > . It has the same behavior as the < code > themeVariantAuto< / code > option. The first entry in the array is the color variant for light mode, the second for dark mode. Defining auto mode variants with the advanced options has the benefit that you can now have multiple auto mode variants instead of just one with the simple options.< / td >
2023-11-23 00:05:57 +00:00
< / tr >
2023-11-20 23:54:13 +00:00
< / tbody >
< / table >
2023-11-23 00:05:57 +00:00
< h3 id = "example-configuration-of-this-site" > Example Configuration of This Site< / h3 >
2023-11-26 19:34:38 +00:00
2024-03-02 10:05:50 +00:00
< div class = "tab-panel" data-tab-group = "config-code" >
2023-11-26 19:34:38 +00:00
< div class = "tab-nav" >
2024-03-02 10:05:50 +00:00
< div class = "tab-nav-title" > hugo.< / div >
2023-11-26 19:34:38 +00:00
< button
2024-03-02 10:05:50 +00:00
data-tab-item="toml"
2023-11-26 19:34:38 +00:00
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2024-03-02 10:05:50 +00:00
onclick="switchTab('config-code','toml')"
>
< span class = "tab-nav-text" > toml< / span >
< / button >
< button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
2023-11-26 19:34:38 +00:00
>
2024-03-02 10:05:50 +00:00
< span class = "tab-nav-text" > yaml< / span >
< / button >
< button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
< span class = "tab-nav-text" > json< / span >
2023-11-26 19:34:38 +00:00
< / button >
< / div >
< div class = "tab-content-container" >
< div
2024-03-02 10:05:50 +00:00
data-tab-item="toml"
2023-11-26 19:34:38 +00:00
class="tab-content tab-panel-style cstyle initial active">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-toml" data-lang = "toml" > < span class = "line" > < span class = "cl" > < span class = "p" > [< / span > < span class = "nx" > params< / span > < span class = "p" > ]< / span >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > [[< / span > < span class = "nx" > params< / span > < span class = "p" > .< / span > < span class = "nx" > themeVariant< / span > < span class = "p" > ]]< / span >
2023-11-23 00:05:57 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > auto< / span > < span class = "p" > =< / span > < span class = "p" > []< / span >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > identifier< / span > < span class = "p" > =< / span > < span class = "s1" > ' relearn-auto' < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > name< / span > < span class = "p" > =< / span > < span class = "s1" > ' Relearn Light/Dark' < / span >
< / span > < / span > < span class = "line" > < span class = "cl" >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > [[< / span > < span class = "nx" > params< / span > < span class = "p" > .< / span > < span class = "nx" > themeVariant< / span > < span class = "p" > ]]< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > identifier< / span > < span class = "p" > =< / span > < span class = "s1" > ' relearn-light' < / span >
< / span > < / span > < span class = "line" > < span class = "cl" >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > [[< / span > < span class = "nx" > params< / span > < span class = "p" > .< / span > < span class = "nx" > themeVariant< / span > < span class = "p" > ]]< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > identifier< / span > < span class = "p" > =< / span > < span class = "s1" > ' relearn-dark' < / span >
< / span > < / span > < span class = "line" > < span class = "cl" >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > [[< / span > < span class = "nx" > params< / span > < span class = "p" > .< / span > < span class = "nx" > themeVariant< / span > < span class = "p" > ]]< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > auto< / span > < span class = "p" > =< / span > < span class = "p" > [< / span > < span class = "s1" > ' zen-light' < / span > < span class = "p" > ,< / span > < span class = "s1" > ' zen-dark' < / span > < span class = "p" > ]< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > identifier< / span > < span class = "p" > =< / span > < span class = "s1" > ' zen-auto' < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > name< / span > < span class = "p" > =< / span > < span class = "s1" > ' Zen Light/Dark' < / span >
< / span > < / span > < span class = "line" > < span class = "cl" >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > [[< / span > < span class = "nx" > params< / span > < span class = "p" > .< / span > < span class = "nx" > themeVariant< / span > < span class = "p" > ]]< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > identifier< / span > < span class = "p" > =< / span > < span class = "s1" > ' zen-light' < / span >
< / span > < / span > < span class = "line" > < span class = "cl" >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > [[< / span > < span class = "nx" > params< / span > < span class = "p" > .< / span > < span class = "nx" > themeVariant< / span > < span class = "p" > ]]< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > identifier< / span > < span class = "p" > =< / span > < span class = "s1" > ' zen-dark' < / span >
< / span > < / span > < span class = "line" > < span class = "cl" >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > [[< / span > < span class = "nx" > params< / span > < span class = "p" > .< / span > < span class = "nx" > themeVariant< / span > < span class = "p" > ]]< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > identifier< / span > < span class = "p" > =< / span > < span class = "s1" > ' neon' < / span > < / span > < / span > < / code > < / pre > < / div > < / div >
< / div >
< div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-yaml" data-lang = "yaml" > < span class = "line" > < span class = "cl" > < span class = "nt" > params< / span > < span class = "p" > :< / span > < span class = "w" >
2024-03-02 10:05:50 +00:00
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > themeVariant< / span > < span class = "p" > :< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > - < span class = "nt" > auto< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "p" > []< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > identifier< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "l" > relearn-auto< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > name< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "l" > Relearn Light/Dark< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > - < span class = "nt" > identifier< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "l" > relearn-light< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > - < span class = "nt" > identifier< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "l" > relearn-dark< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > - < span class = "nt" > auto< / span > < span class = "p" > :< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > - < span class = "l" > zen-light< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > - < span class = "l" > zen-dark< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > identifier< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "l" > zen-auto< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > name< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "l" > Zen Light/Dark< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > - < span class = "nt" > identifier< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "l" > zen-light< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > - < span class = "nt" > identifier< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "l" > zen-dark< / span > < span class = "w" >
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > - < span class = "nt" > identifier< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "l" > neon< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
< / div >
< div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-json" data-lang = "json" > < span class = "line" > < span class = "cl" > < span class = "p" > {< / span >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " params" < / span > < span class = "p" > :< / span > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " themeVariant" < / span > < span class = "p" > :< / 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 class = "nt" > " auto" < / span > < span class = "p" > :< / span > < span class = "p" > [],< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " identifier" < / span > < span class = "p" > :< / span > < span class = "s2" > " relearn-auto" < / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " name" < / span > < span class = "p" > :< / span > < span class = "s2" > " Relearn Light/Dark" < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < 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 class = "nt" > " identifier" < / span > < span class = "p" > :< / span > < span class = "s2" > " relearn-light" < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < 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 class = "nt" > " identifier" < / span > < span class = "p" > :< / span > < span class = "s2" > " relearn-dark" < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < 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 class = "nt" > " auto" < / span > < span class = "p" > :< / span > < span class = "p" > [< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "s2" > " zen-light" < / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "s2" > " zen-dark" < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > ],< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " identifier" < / span > < span class = "p" > :< / span > < span class = "s2" > " zen-auto" < / span > < span class = "p" > ,< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " name" < / span > < span class = "p" > :< / span > < span class = "s2" > " Zen Light/Dark" < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < 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 class = "nt" > " identifier" < / span > < span class = "p" > :< / span > < span class = "s2" > " zen-light" < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < 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 class = "nt" > " identifier" < / span > < span class = "p" > :< / span > < span class = "s2" > " zen-dark" < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < 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 class = "nt" > " identifier" < / span > < span class = "p" > :< / span > < span class = "s2" > " neon" < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < 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 class = "p" > }< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
2023-11-26 19:34:38 +00:00
< / div >
< / div >
2024-03-02 10:05:50 +00:00
< / div >
< h2 id = "modify-shipped-variants" > Modify Shipped Variants< / h2 >
2023-11-26 19:34:38 +00:00
< p > In case you like a shipped variant but only want to tweak some aspects, you have two choices:< / p >
< ol >
< li >
< p > Copy and change< / p >
2023-11-29 23:15:02 +00:00
< p > You can copy the shipped variant file from the theme’ s < code > static/css< / code > directory to the site’ s < code > static/css< / code > directory and either store it with the same name or give it a new name. Edit the settings and save the new file. Afterwards you can use it in your < code > hugo.toml< / code > by the choosen name.< / p >
2023-11-26 19:34:38 +00:00
< / li >
< li >
< p > Create and import< / p >
2023-11-29 23:15:02 +00:00
< p > You can create a new variant file in the site’ s < code > static/css< / code > directory and give it a new name. Import the shipped variant, add the settings you want to change and save the new file. Afterwards you can use it in your < code > hugo.toml< / code > by the choosen name.< / p >
2023-11-26 19:34:38 +00:00
< p > For example, you want to use the < code > relearn-light< / code > variant but want to change the syntax highlightning schema to the one used in the < code > neon< / code > variant. For that, create a new < code > static/css/theme-my-branding.css< / code > in your site’ s directory and add the following lines:< / p >
2024-03-15 20:15:54 +00:00
< div class = "tab-panel" data-tab-group = "585c0578881a9ed2086f119aca37a028" >
2023-11-26 19:34:38 +00:00
< div class = "tab-nav" >
< div class = "tab-nav-title" > ​ < / div >
< button
data-tab-item="staticcsstheme-my-brandingcss"
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2024-03-15 20:15:54 +00:00
onclick="switchTab('585c0578881a9ed2086f119aca37a028','staticcsstheme-my-brandingcss')"
2023-11-26 19:34:38 +00:00
>
< span class = "tab-nav-text" > static/css/theme-my-branding.css< / span >
< / button >
< / div >
< div class = "tab-content-container" >
< div
data-tab-item="staticcsstheme-my-brandingcss"
class="tab-content tab-panel-style cstyle initial active">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-css" data-lang = "css" > < span class = "line" > < span class = "cl" > < span class = "p" > @< / span > < span class = "k" > import< / span > < span class = "s2" > " theme-relearn-light.css" < / span > < span class = "p" > ;< / span >
2023-11-26 19:34:38 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > :< / span > < span class = "nd" > root< / span > < span class = "p" > {< / span >
2023-12-03 23:15:02 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nv" > --CODE-theme< / span > < span class = "p" > :< / span > < span class = "n" > neon< / span > < span class = "p" > ;< / span > < span class = "c" > /* name of the chroma stylesheet file */< / span >
2023-11-26 19:34:38 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nv" > --CODE-BLOCK-color< / span > < span class = "p" > :< / span > < span class = "nb" > rgba< / span > < span class = "p" > (< / span > < span class = "mi" > 226< / span > < span class = "p" > ,< / span > < span class = "mi" > 228< / span > < span class = "p" > ,< / span > < span class = "mi" > 229< / span > < span class = "p" > ,< / span > < span class = "mi" > 1< / span > < span class = "p" > );< / span > < span class = "c" > /* fallback color for code text */< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nv" > --CODE-BLOCK-BG-color< / span > < span class = "p" > :< / span > < span class = "nb" > rgba< / span > < span class = "p" > (< / span > < span class = "mi" > 40< / span > < span class = "p" > ,< / span > < span class = "mi" > 42< / span > < span class = "p" > ,< / span > < span class = "mi" > 54< / span > < span class = "p" > ,< / span > < span class = "mi" > 1< / span > < span class = "p" > );< / span > < span class = "c" > /* fallback color for code background */< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
< / div >
< / div >
2023-11-29 23:15:02 +00:00
< / div > < p > Afterwards put this in your < code > hugo.toml< / code > to use your new variant:< / p >
2023-11-26 19:34:38 +00:00
2024-03-02 10:05:50 +00:00
< div class = "tab-panel" data-tab-group = "config-code" >
2023-11-26 19:34:38 +00:00
< div class = "tab-nav" >
2024-03-02 10:05:50 +00:00
< div class = "tab-nav-title" > hugo.< / div >
2023-11-26 19:34:38 +00:00
< button
2024-03-02 10:05:50 +00:00
data-tab-item="toml"
2023-11-26 19:34:38 +00:00
class="tab-nav-button tab-panel-style cstyle initial active" tabindex="-1"
2024-03-02 10:05:50 +00:00
onclick="switchTab('config-code','toml')"
>
< span class = "tab-nav-text" > toml< / span >
< / button >
< button
data-tab-item="yaml"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','yaml')"
2023-11-26 19:34:38 +00:00
>
2024-03-02 10:05:50 +00:00
< span class = "tab-nav-text" > yaml< / span >
< / button >
< button
data-tab-item="json"
class="tab-nav-button tab-panel-style cstyle initial"
onclick="switchTab('config-code','json')"
>
< span class = "tab-nav-text" > json< / span >
2023-11-26 19:34:38 +00:00
< / button >
< / div >
< div class = "tab-content-container" >
< div
2024-03-02 10:05:50 +00:00
data-tab-item="toml"
2023-11-26 19:34:38 +00:00
class="tab-content tab-panel-style cstyle initial active">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-toml" data-lang = "toml" > < span class = "line" > < span class = "cl" > < span class = "p" > [< / span > < span class = "nx" > params< / span > < span class = "p" > ]< / span >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nx" > themeVariant< / span > < span class = "p" > =< / span > < span class = "s1" > ' my-branding' < / span > < / span > < / span > < / code > < / pre > < / div > < / div >
< / div >
< div
data-tab-item="yaml"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-yaml" data-lang = "yaml" > < span class = "line" > < span class = "cl" > < span class = "nt" > params< / span > < span class = "p" > :< / span > < span class = "w" >
2024-03-02 10:05:50 +00:00
< / span > < / span > < / span > < span class = "line" > < span class = "cl" > < span class = "w" > < / span > < span class = "nt" > themeVariant< / span > < span class = "p" > :< / span > < span class = "w" > < / span > < span class = "l" > my-branding< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
< / div >
< div
data-tab-item="json"
class="tab-content tab-panel-style cstyle initial">
< div class = "tab-content-text" >
2024-03-11 20:44:09 +00:00
< div class = "highlight wrap-code" > < pre tabindex = "0" class = "chroma" > < code class = "language-json" data-lang = "json" > < span class = "line" > < span class = "cl" > < span class = "p" > {< / span >
2024-03-02 10:05:50 +00:00
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " params" < / span > < span class = "p" > :< / span > < span class = "p" > {< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "nt" > " themeVariant" < / span > < span class = "p" > :< / span > < span class = "s2" > " my-branding" < / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span >
< / span > < / span > < span class = "line" > < span class = "cl" > < span class = "p" > }< / span > < / span > < / span > < / code > < / pre > < / div > < / div >
2023-11-26 19:34:38 +00:00
< / div >
< / div >
2024-03-02 10:05:50 +00:00
< / div >
< p > In comparison to < em > copy and change< / em > , this has the advantage that you profit from any adjustments to the < code > relearn-light< / code > variant but keep your modifications.< / p >
2023-11-26 19:34:38 +00:00
< / li >
< / ol >
2023-11-20 23:54:13 +00:00
< footer class = "footline" >
< div class = " taxonomy-categories term-list cstyle " title = "Categories" style = "--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);" >
< i class = "fa-fw fas fa-layer-group" > < / i >
< ul >
2024-02-24 12:50:21 +00:00
< li > < a class = "term-link" href = "/hugo-theme-relearn/categories/custom/index.html" > Custom< / a > < / li >
< li > < a class = "term-link" href = "/hugo-theme-relearn/categories/theming/index.html" > Theming< / a > < / li >
2023-11-20 23:54:13 +00:00
< / ul >
< / div >
< / footer >
< / article >
< / div >
< / main >
< / div >
< aside id = "R-sidebar" class = "default-animation showVisitedLinks" >
< div id = "R-header-topbar" class = "default-animation" > < / div >
< div id = "R-header-wrapper" class = "default-animation" >
< div id = "R-header" class = "default-animation" >
< style >
#R-logo svg,
#R-logo svg * {
color: #282828;
color: var(--MENU-SECTIONS-BG-color);
fill: #282828 !important;
fill: var(--MENU-SECTIONS-BG-color) !important;
opacity: .945;
}
a#R-logo {
color: #282828;
color: var(--MENU-SECTIONS-BG-color);
font-family: 'Work Sans', 'Helvetica', 'Tahoma', 'Geneva', 'Arial', sans-serif;
font-size: 1.875rem;
font-weight: 300;
margin-top: -.8125rem;
max-width: 60%;
text-transform: uppercase;
width: 14.125rem;
white-space: nowrap;
}
a#R-logo:hover {
color: #282828;
color: var(--MENU-SECTIONS-BG-color);
}
#R-logo svg {
margin-bottom: -1.25rem;
margin-inline-start: -1.47rem;
margin-inline-end: .5rem;
width: 40.5%;
}
@media only all and (max-width: 59.999rem) {
a#R-logo {
font-size: 1.5625rem;
margin-top: -.1875rem;
}
#R-logo svg {
margin-bottom: -.75rem;
margin-inline-start: -1.47rem;
margin-inline-end: .5rem;
}
}
@media all and (-ms-high-contrast:none) {
/* IE11s understanding of positioning is weird at best */
a#R-logo {
margin-top: -3.625rem;
}
#R-logo svg {
margin-bottom: -3.875rem;
margin-left: -1.47rem;
margin-right: .5rem;
}
}
@media only all and (-ms-high-contrast:none) and (max-width: 59.999rem) {
#R-logo svg {
margin-left: -1.47rem;
margin-right: .5rem;
}
}
< / style >
2024-02-24 12:50:21 +00:00
< a id = "R-logo" href = "/hugo-theme-relearn/index.html" >
2023-11-20 23:54:13 +00:00
< svg xmlns = "http://www.w3.org/2000/svg" viewBox = "0 0 64.044 64.044" >
< path d = "M46.103 136.34c-.642-.394-1.222-2.242-1.98-2.358-.76-.117-1.353.506-1.618 1.519-.266 1.012-.446 4.188.173 5.538.213.435.482.787 1.03.845.547.057.967-.504 1.45-1.027.482-.523.437-.9 1.142-.612.705.289 1.051.4 1.586 1.229.535.828 1.085 4.043.868 5.598-.241 1.458-.531 2.8-.59 4.088.26.075.517.148.772.217 2.68.724 5.373 1.037 7.873.02.001-.028.01-.105.008-.11-.048-.165-.18-.41-.36-.698-.18-.29-.414-.645-.586-1.114a3.212 3.212 0 0 1-.125-1.735c.056-.21.153-.342.249-.475 1.237-1.193 2.932-1.373 4.244-1.384.557-.004 1.389.016 2.198.255.809.239 1.706.724 2.068 1.843.187.578.114 1.17-.043 1.623-.153.438-.369.783-.545 1.091-.178.31-.329.6-.401.821-.007.02-.003.071-.005.094 2.256 1.008 4.716.91 7.189.398.55-.114 1.11-.247 1.673-.377.344-1.085.678-2.145.852-3.208.124-.752.158-2.311-.078-3.538-.118-.613-.306-1.15-.52-1.489-.221-.349-.413-.501-.747-.538-.243-.027-.51.013-.796.098-.67.223-1.33.606-1.966.76l-.008.002-.109.032c-.556.152-1.233.158-1.797-.36-.556-.51-.89-1.367-1.117-2.596-.283-1.528-.075-3.279.89-4.518l.071-.09h.07c.65-.71 1.485-.802 2.16-.599.706.213 1.333.629 1.772.84.736.354 1.185.319 1.475.171.291-.148.5-.439.668-.955.332-1.017.301-2.819.022-4.106-.148-.684-.13-1.292-.13-1.883-1.558-.463-3.067-.982-4.574-1.208-1.128-.169-2.263-.173-3.298.164-.13.046-.256.095-.38.15-.373.164-.633.342-.805.52-.077.098-.081.105-.087.21-.004.068.031.289.13.571.1.282.256.634.467 1.03.279.524.448 1.063.431 1.618a2.12 2.12 0 0 1-.499 1.309 1.757 1.757 0 0 1-.62.51h-.002c-.515.291-1.107.404-1.723.464-.86.083-1.787.026-2.598-.097-.806-.123-1.47-.28-1.948-.555-.444-.256-.79-.547-1.037-.925a2.273 2.273 0 0 1-.356-1.301c.029-.837.403-1.437.625-1.897.111-.23.191-.433.236-.583.045-.15.044-.25.046-.24-.005-.029-.127-.355-1.015-.741-1.138-.495-2.322-.673-3.533-.668h-.015a9.711 9.711 0 0 0-.521.016h-.002c-1.163.057-2.35.308-3.541.569.383 1.531.79 2.753.818 4.502-.096 1.297.158 2.114-1.03 2.935-.85.588-1.508.729-2.15.335" style = "fill:#282828;fill-opacity:1;stroke:none;stroke-width:1.03763;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform = "translate(-40.698 -95.175)" / >
< path d = "M61.472 101.34v.002c-.3-.003-.603.01-.894.04-.544.055-1.39.165-1.778.306-1.238.364.13 2.344.41 2.913.28.569.285 2.03.14 2.134-.144.103-.375.261-.934.345-.56.084.03-.037-1.589.086-1.62.122-5.506.29-8.265.248-.022.26-.036.521-.097.808-.309 1.442-.63 3.163-.494 4.074.071.473.168.65.414.8.23.14.737.235 1.62-.004.834-.227 1.3-.442 1.887-.456.595-.016 1.555.472 1.965.717.411.245-.03-.008.002 0s.128.05.176.102c.049.053-.276-.523.104.199.379.721.72 3.256.002 4.68-.46.913-1.01 1.49-1.64 1.711-.63.22-1.229.067-1.734-.135-.881-.353-1.584-.7-2.205-.647-1.199 1.94-1.186 4.17-.6 6.602.097.397.212.814.327 1.23 2.68-.556 5.542-1.016 8.337.132 1.064.437 1.73 1.015 1.902 1.857.169.831-.193 1.508-.438 1.986-.122.238-.23.46-.307.642-.07.164-.096.28-.104.324.069.429.309.723.686.945.385.227.89.355 1.35.423.723.104 1.567.152 2.287.086.693-.064 1.032-.338 1.241-.544a2.447 2.447 0 0 0 .303-.437.175.175 0 0 0 .013-.035c-.004-.066-.037-.246-.195-.527-.46-.816-.87-1.595-.817-2.51.028-.476.218-.938.529-1.288.304-.343.698-.586 1.186-.79 1.442-.606 2.96-.609 4.372-.409 1.525.216 2.963.679 4.378 1.083.226-2.09.784-3.9.592-5.77-.058-.565-.287-1.333-.598-1.827-.32-.508-.59-.717-1.036-.642-.648.11-1.472.935-2.707 1.078-.791.092-1.494-.267-1.95-.86-.45-.583-.678-1.335-.78-2.101-.202-1.525.031-3.229.89-4.27.615-.747 1.45-.887 2.15-.74.687.145 1.307.492 1.857.745v-.002c.546.252 1.033.388 1.281.344a.547.547 0 0 0 .353-.188c.113-.124.242-.35.384-.75.604-1.712.206-3.68-.303-5.654-.667.145-1.336.293-2.018.413-1.341.236-2.73.392-4.136.273-.656-.055-1.695-.085-2.58-.476-.442-.195-.903-.514-1.157-1.093-.259-.591-.205-1.313.08-2.014.223-.64 1.082-2.178.692-2.585-.391-.407-1.651-.56-2.554-.571z" style = "fill:#282828;fill-opacity:1;stroke:none;stroke-width:.992837;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform = "translate(-40.698 -95.175)" / >
< path d = "M83.128 98.116c-.484 1.875-1.057 3.757-2.486 5.033-.638.57-1.13.666-1.483.548-.401-.134-.715-.506-1.058-.973-.338-.461-.655-.97-1.076-1.332-.192-.165-.404-.315-.683-.38-.279-.066-.599-.02-.9.102-.489.196-.89.58-1.28 1.047a6.1 6.1 0 0 0-.985 1.632c-.234.591-.356 1.174-.277 1.713.072.487.392.977.905 1.185.463.187.926.156 1.36.154.433 0 .843.01 1.242.147.55.189.79.736.822 1.368.034.66-.145 1.412-.393 1.988l-.008.021c-.74 1.705-1.946 2.893-3.004 4.349l-.664.915.979.099c.924.092 1.788.26 2.468.675.46.281 1.806 1.205 2.794 2.222.497.513.888 1.031 1.047 1.502.078.231.095.422.05.6a.93.93 0 0 1-.345.474c-.301.223-.606.395-.864.532l-.354.186c-.107.058-.189.087-.345.228a.637.637 0 0 1 .062-.045l-.064.041-.209.236-.103.343s.003.126.007.152c.003.017.003.007.004.015v.002c.016.195.061.307.133.476a4.1 4.1 0 0 0 .32.596 5.7 5.7 0 0 0 2.8 2.258c.284.108.908.321 1.548.36.33.02.59.015.912-.13h.002c.08-.037.228-.095.382-.281.153-.186.19-.355.212-.445l.019-.075.003-.078c.023-.585-.037-1.296.072-1.899.153-.657.435-.956 1.009-.909 2.771.239 4.74 1.955 6.693 3.83l.742.714.279-1.155c.55-2.29 1.093-4.464 2.928-5.977.692-.57 1.184-.642 1.527-.509.39.151.676.536.996.995.319.458.605.926 1.07 1.212.194.119.464.232.784.209.32-.024.638-.163.988-.384 1.022-.645 1.778-1.756 2.086-2.942.136-.522.102-.991-.046-1.301-.158-.334-.433-.553-.754-.707-.653-.314-1.468-.373-2.094-.486-.825-.15-1.22-.475-1.345-.878-.13-.417 0-.953.335-1.61.6-1.173 1.887-2.602 3.13-3.911l.498-.526-.449-.432c-1.545-1.49-3.163-3.01-5.252-3.715h-.002c-.473-.16-1.097-.413-1.73-.424h-.003c-.311-.004-.596.04-.883.24v.002c-.22.155-.483.537-.583.937l-.008.036-.006.038c-.116.773-.06 1.467-.217 1.995-.063.212-.198.418-.359.507-.202.111-.492.153-.976.072-.582-.097-1.978-.69-3.021-1.503-.523-.407-.934-.85-1.117-1.3a1.153 1.153 0 0 1-.083-.63c.03-.184.1-.477.308-.593.21-.116.941-.32 1.377-.642h.002c.192-.141.403-.367.518-.64.114-.275.127-.526.123-.774-.006-.142-.036-.192-.08-.3a8.417 8.417 0 0 0-3-3.027c-1.226-.725-2.585-1.135-3.927-1.539-.434-.12-.844-.111-1.02.466zm.912.947c1.186.364 2.357.718 3.345 1.303 1.035.612 1.864 1.488 2.507 2.528-.514.263-1.095.5-1.44.79-.345.29-.729.914-.815 1.434-.084.509 0 .968.155 1.347.301.74.85 1.276 1.44 1.735 1.18.92 2.554 1.545 3.47 1.698.604.1 1.186.088 1.739-.216.594-.327.935-.911 1.088-1.427.264-.884.193-1.664.262-2.17h.1c.3.006.926.206 1.417.371 1.646.554 3.044 1.773 4.431 3.089-1.102 1.174-2.222 2.423-2.888 3.73-.42.823-.73 1.789-.453 2.687.283.913 1.1 1.415 2.138 1.603.691.126 1.472.226 1.84.403.19.091.258.182.278.223.03.064.058.075-.023.387-.21.804-.761 1.598-1.413 2.01-.247.155-.365.183-.407.187-.042.003-.061.002-.172-.066-.144-.088-.455-.473-.772-.929-.317-.454-.714-1.07-1.452-1.356-.783-.304-1.776-.022-2.713.75-1.942 1.6-2.626 3.764-3.146 5.8-1.802-1.676-3.772-3.138-6.589-3.517h-.002c-.346-.095-1.013-.031-1.293.143-.735.501-1.005 1.132-1.168 2.007-.125.69-.082 1.216-.074 1.659-.055.006-.046.01-.104.006-.42-.026-1.035-.215-1.244-.295-.947-.361-1.774-1.006-2.314-1.857-.054-.085-.072-.132-.109-.2l.027-.016c.284-.15.656-.36 1.045-.648.44-.327.789-.798.93-1.35a2.4 2.4 0 0 0-.068-1.379c-.254-.751-.753-1.353-1.295-1.911-1.09-1.124-2.452-2.049-2.99-2.378-.609-.372-1.303-.44-1.981-.56.875-1.094 1.878-2.251 2.596-3.921.294-.823.543-1.907.513-2.658-.049-.97-.489-2.013-1.52-2.367-.579-.2-1.131-.204-1.58-.203-.45.002-.786-.006-.97-.08h-.002c-.264-.107-.236-.108-.268-.33-.025-.17.021-.553.183-.962a4.67 4.67 0 0 1 .725-1.192c.29-.348.617-.59.705-.626.142-.057.176-.05.22-.04.045.011.127.052.263.17.235.201.56.671.92 1.161.354.484.791 1.08 1.543 1.33.8.267 1.784-.052 2.671-.846 1.594-1.424 2.235-3.317 2.714-5.051zm11.705 7.023c-.02.014.042-.002.042 0l-.008.035c.05-.2-.028-.04-.034-.035zM79.472 122.45a.198.198 0 0 1 .005.023v.014c-.002-.01-.003-.03-.005-.037zm-.29.732-.006.01-.044.027c.016-.01.033-.024.05-.036z" style = "color:#000;fill:#282828;stroke-width:1.02352;-inkscape-stroke:none" transform = "translate(-40.698 -95.175)" / >
< path d = "M76.694 128.845c-.85-.012-1.668.253-2.434.67-.01.592-.015 1.17.109 1.772.323 1.573.422 3.553-.07 5.147-.247.804-.684 1.535-1.347 1.891-.663.356-1.467.296-2.362-.159-.522-.266-1.059-.62-1.487-.757-.223-.072-.392-.096-.522-.069-.13.027-.232.094-.362.27-.53.719-.681 1.823-.497 2.876.177 1.012.418 1.438.543 1.56.143.137.26.154.604.055.548-.158 1.523-.857 2.573-.972l.02-.002.5.058c.686.081 1.247.562 1.622 1.19.372.62.591 1.37.73 2.136.279 1.532.25 3.16.083 4.232-.14.91-.394 1.72-.632 2.53 1.719-.385 3.485-.692 5.307-.36 1.174.214 2.749.574 3.762 1.977l.088.122.046.159c.162.551.16 1.114.024 1.578-.13.45-.348.772-.533 1.023-.181.246-.336.444-.437.606-.102.16-.141.275-.145.336-.01.17 0 .197.07.315.057.1.186.242.39.366.408.246 1.106.414 1.843.45a7.842 7.842 0 0 0 2.174-.21 4.28 4.28 0 0 0 .822-.296c.218-.106.385-.242.377-.233l.029-.031c.025-.035.05-.072.05-.068 0-.004 0-.017-.003-.05a2.733 2.733 0 0 0-.21-.579c-.26-.548-.839-1.333-.822-2.46.01-.657.27-1.21.598-1.576.32-.357.696-.575 1.074-.736.759-.323 1.57-.418 2.054-.458 1.653-.136 3.252.296 4.755.765.457.142.905.29 1.352.434.325-2.258.902-4.247.598-6.217-.071-.46-.25-1.169-.486-1.684-.238-.518-.495-.762-.675-.779-.351-.032-.716.14-1.174.418-.457.277-1.005.665-1.695.742-.745.082-1.406-.291-1.84-.908-.428-.608-.653-1.394-.754-2.196-.203-1.596.016-3.377.794-4.493.568-.813 1.358-.984 2.024-.835.65.146 1.243.51 1.769.779.524.267.99.413 1.237.365a.527.527 0 0 0 .346-.2c.11-.132.235-.373.37-.798.612-1.918.27-3.894-.246-6.054-2.815-.851-5.49-1.534-8.089-.267a.727.727 0 0 0-.223.148c-.024.028-.018.021-.026.056.001-.003-.01.178.07.44.162.522.611 1.29.911 1.978l.004.009.029.063.024.084V133c.162.635.016 1.297-.274 1.727-.272.404-.618.636-.952.81-.675.353-1.399.484-1.724.533a5.888 5.888 0 0 1-3.973-.795c-.512-.311-.876-.594-1.133-1.02-.282-.466-.318-1.084-.172-1.557.252-.814.715-1.266.971-1.89a.663.663 0 0 0 .047-.14c.001-.013 0-.006-.007-.037a.761.761 0 0 0-.184-.268c-.264-.267-.865-.595-1.54-.826-1.356-.462-3.07-.659-3.583-.686-.062-.002-.121-.006-.178-.006z" style = "fill:#282828;fill-opacity:1;stroke:none;stroke-width:.991342;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" transform = "translate(-40.698 -95.175)" / >
< / svg > Relearn
< / a >
< / div >
2024-02-24 12:50:21 +00:00
< form action = "/hugo-theme-relearn/search.html" method = "get" > < div class = "searchbox default-animation" >
2023-11-20 23:54:13 +00:00
< button class = "search-detail" type = "submit" title = "Search (CTRL+ALT+f)" > < i class = "fas fa-search" > < / i > < / button >
< label class = "a11y-only" for = "R-search-by" > Search< / label >
< input data-search-input id = "R-search-by" name = "search-by" class = "search-by" type = "search" placeholder = "Search..." >
< button class = "search-clear" type = "button" data-search-clear = "" title = "Clear search" > < i class = "fas fa-times" title = "Clear search" > < / i > < / button >
< / div > < / form >
< script >
var contentLangs=['en'];
< / script >
2024-03-15 20:15:54 +00:00
< script src = "/hugo-theme-relearn/js/auto-complete.js?1710533746" defer > < / script >
< script src = "/hugo-theme-relearn/js/lunr/lunr.min.js?1710533746" defer > < / script >
< script src = "/hugo-theme-relearn/js/lunr/lunr.stemmer.support.min.js?1710533746" defer > < / script >
< script src = "/hugo-theme-relearn/js/lunr/lunr.multi.min.js?1710533746" defer > < / script >
< script src = "/hugo-theme-relearn/js/lunr/lunr.en.min.js?1710533746" defer > < / script >
< script src = "/hugo-theme-relearn/js/search.js?1710533746" defer > < / script >
2023-11-20 23:54:13 +00:00
< / div >
< div id = "R-homelinks" class = "default-animation" >
< hr class = "padding" >
< / div >
< div id = "R-content-wrapper" class = "highlightable" >
< div id = "R-topics" >
< ul class = "enlarge morespace collapsible-menu" >
2024-02-24 12:50:21 +00:00
< li data-nav-id = "/hugo-theme-relearn/basics/index.html" class = "parent " > < input type = "checkbox" id = "R-section-a6deabe447afe1b2e1405bfc57ca61ff" aria-controls = "R-subsections-a6deabe447afe1b2e1405bfc57ca61ff" checked > < label for = "R-section-a6deabe447afe1b2e1405bfc57ca61ff" > < i class = "fas fa-chevron-down" > < / i > < i class = "fas fa-chevron-right" > < / i > < span class = "a11y-only" > Submenu Basics< / span > < / label > < a class = "padding" href = "/hugo-theme-relearn/basics/index.html" > < b style = "display: inline-block; font-weight: 200; padding-left: .3rem; text-align: left; width: 1.1rem;" > 1.< / b > Basics< i class = "fas fa-check read-icon" > < / i > < / a > < ul id = "R-subsections-a6deabe447afe1b2e1405bfc57ca61ff" class = "morespace collapsible-menu" >
< li data-nav-id = "/hugo-theme-relearn/basics/migration/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/basics/migration/index.html" > What' s New< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/basics/requirements/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/basics/requirements/index.html" > Requirements< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/basics/installation/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/basics/installation/index.html" > Installation< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/basics/configuration/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/basics/configuration/index.html" > Configuration< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/basics/branding/index.html" class = "active" > < a class = "padding" href = "/hugo-theme-relearn/basics/branding/index.html" > Branding< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/basics/customization/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/basics/customization/index.html" > Customization< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/basics/generator/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/basics/generator/index.html" > Stylesheet generator< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/basics/topbar/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/basics/topbar/index.html" > Topbar Modification< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/basics/history/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/basics/history/index.html" > History< i class = "fas fa-check read-icon" > < / i > < / a > < / li > < / ul > < / li >
< li data-nav-id = "/hugo-theme-relearn/cont/index.html" class = "" > < input type = "checkbox" id = "R-section-fa8195cb3a7fa53d39f9adae98977ba1" aria-controls = "R-subsections-fa8195cb3a7fa53d39f9adae98977ba1" > < label for = "R-section-fa8195cb3a7fa53d39f9adae98977ba1" > < i class = "fas fa-chevron-down" > < / i > < i class = "fas fa-chevron-right" > < / i > < span class = "a11y-only" > Submenu Content< / span > < / label > < a class = "padding" href = "/hugo-theme-relearn/cont/index.html" > < b style = "display: inline-block; font-weight: 200; padding-left: .3rem; text-align: left; width: 1.1rem;" > 2.< / b > Content< i class = "fas fa-check read-icon" > < / i > < / a > < ul id = "R-subsections-fa8195cb3a7fa53d39f9adae98977ba1" class = "morespace collapsible-menu" >
< li data-nav-id = "/hugo-theme-relearn/cont/pages/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/cont/pages/index.html" > Pages organization< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/cont/frontmatter/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/cont/frontmatter/index.html" > Frontmatter< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/cont/archetypes/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/cont/archetypes/index.html" > Archetypes< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/cont/markdown/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/cont/markdown/index.html" > Markdown syntax< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/cont/imageeffects/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/cont/imageeffects/index.html" > Image Effects< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/cont/menushortcuts/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/cont/menushortcuts/index.html" > Menu extra shortcuts< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/cont/i18n/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/cont/i18n/index.html" > Multilingual and i18n< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/cont/taxonomy/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/cont/taxonomy/index.html" > Taxonomy< i class = "fas fa-check read-icon" > < / i > < / a > < / li > < / ul > < / li >
< li data-nav-id = "/hugo-theme-relearn/shortcodes/index.html" class = "" > < input type = "checkbox" id = "R-section-3fd53efe5229f2c1a55795ee597d09d8" aria-controls = "R-subsections-3fd53efe5229f2c1a55795ee597d09d8" > < label for = "R-section-3fd53efe5229f2c1a55795ee597d09d8" > < i class = "fas fa-chevron-down" > < / i > < i class = "fas fa-chevron-right" > < / i > < span class = "a11y-only" > Submenu Shortcodes< / span > < / label > < a class = "padding" href = "/hugo-theme-relearn/shortcodes/index.html" > < b style = "display: inline-block; font-weight: 200; padding-left: .3rem; text-align: left; width: 1.1rem;" > 3.< / b > Shortcodes< i class = "fas fa-check read-icon" > < / i > < / a > < ul id = "R-subsections-3fd53efe5229f2c1a55795ee597d09d8" class = "morespace collapsible-menu" >
< li data-nav-id = "/hugo-theme-relearn/shortcodes/badge/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/shortcodes/badge/index.html" > Badge< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/shortcodes/button/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/shortcodes/button/index.html" > Button< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/shortcodes/children/index.html" class = "" > < input type = "checkbox" id = "R-section-d7ecedf0d1b5486d6a0c132e8a234d06" aria-controls = "R-subsections-d7ecedf0d1b5486d6a0c132e8a234d06" > < label for = "R-section-d7ecedf0d1b5486d6a0c132e8a234d06" > < i class = "fas fa-chevron-down" > < / i > < i class = "fas fa-chevron-right" > < / i > < span class = "a11y-only" > Submenu Children< / span > < / label > < a class = "padding" href = "/hugo-theme-relearn/shortcodes/children/index.html" > Children< i class = "fas fa-check read-icon" > < / i > < / a > < ul id = "R-subsections-d7ecedf0d1b5486d6a0c132e8a234d06" class = "morespace collapsible-menu" >
< li data-nav-id = "/hugo-theme-relearn/shortcodes/children/test/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/shortcodes/children/test/index.html" > page X< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/shortcodes/children/children-1/index.html" class = "" > < input type = "checkbox" id = "R-section-d3cff5da0d8420d4871c516833b2f97d" aria-controls = "R-subsections-d3cff5da0d8420d4871c516833b2f97d" > < label for = "R-section-d3cff5da0d8420d4871c516833b2f97d" > < i class = "fas fa-chevron-down" > < / i > < i class = "fas fa-chevron-right" > < / i > < span class = "a11y-only" > Submenu page 1< / span > < / label > < a class = "padding" href = "/hugo-theme-relearn/shortcodes/children/children-1/index.html" > page 1< i class = "fas fa-check read-icon" > < / i > < / a > < ul id = "R-subsections-d3cff5da0d8420d4871c516833b2f97d" class = "morespace collapsible-menu" >
< li data-nav-id = "/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/index.html" class = "alwaysopen" > < input type = "checkbox" id = "R-section-8c27e33b2765b18da99f6c8dc40400b8" aria-controls = "R-subsections-8c27e33b2765b18da99f6c8dc40400b8" checked > < label for = "R-section-8c27e33b2765b18da99f6c8dc40400b8" > < i class = "fas fa-chevron-down" > < / i > < i class = "fas fa-chevron-right" > < / i > < span class = "a11y-only" > Submenu page 1-1< / span > < / label > < a class = "padding" href = "/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/index.html" > page 1-1< i class = "fas fa-check read-icon" > < / i > < / a > < ul id = "R-subsections-8c27e33b2765b18da99f6c8dc40400b8" class = "morespace collapsible-menu" >
2024-02-21 19:28:07 +00:00
< li data-nav-id = "" class = "alwaysopen" > < input type = "checkbox" id = "R-section-51e1e8deb580f78714eca799da517f1d" aria-controls = "R-subsections-51e1e8deb580f78714eca799da517f1d" checked > < label for = "R-section-51e1e8deb580f78714eca799da517f1d" > < i class = "fas fa-chevron-down" > < / i > < i class = "fas fa-chevron-right" > < / i > < span class = "a11y-only" > Submenu page 1-1-2 (headless)< / span > < / label > < span class = "padding" > page 1-1-2 (headless)< / span > < ul id = "R-subsections-51e1e8deb580f78714eca799da517f1d" class = "morespace collapsible-menu" >
2024-02-24 12:50:21 +00:00
< li data-nav-id = "/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-1/index.html" > page 1-1-2-1< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-2/children-1-1-2-2/index.html" > page 1-1-2-2< i class = "fas fa-check read-icon" > < / i > < / a > < / li > < / ul > < / li >
< li data-nav-id = "/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/shortcodes/children/children-1/children-1-1/children-1-1-3/index.html" > page 1-1-3< i class = "fas fa-check read-icon" > < / i > < / a > < / li > < / ul > < / li > < / ul > < / li >
< li data-nav-id = "/hugo-theme-relearn/shortcodes/children/children-2/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/shortcodes/children/children-2/index.html" > page 2< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/shortcodes/children/children-3/index.html" class = "" > < input type = "checkbox" id = "R-section-c4351ae325c16fd2130d6c815bffc83f" aria-controls = "R-subsections-c4351ae325c16fd2130d6c815bffc83f" > < label for = "R-section-c4351ae325c16fd2130d6c815bffc83f" > < i class = "fas fa-chevron-down" > < / i > < i class = "fas fa-chevron-right" > < / i > < span class = "a11y-only" > Submenu page 3< / span > < / label > < a class = "padding" href = "/hugo-theme-relearn/shortcodes/children/children-3/index.html" > page 3< i class = "fas fa-check read-icon" > < / i > < / a > < ul id = "R-subsections-c4351ae325c16fd2130d6c815bffc83f" class = "morespace collapsible-menu" >
< li data-nav-id = "/hugo-theme-relearn/shortcodes/children/children-3/test3/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/shortcodes/children/children-3/test3/index.html" > page 3-1< i class = "fas fa-check read-icon" > < / i > < / a > < / li > < / ul > < / li > < / ul > < / li >
< li data-nav-id = "/hugo-theme-relearn/shortcodes/expand/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/shortcodes/expand/index.html" > Expand< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/shortcodes/highlight/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/shortcodes/highlight/index.html" > Highlight< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/shortcodes/icon/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/shortcodes/icon/index.html" > Icon< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/shortcodes/include/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/shortcodes/include/index.html" > Include< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/shortcodes/math/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/shortcodes/math/index.html" > Math< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/shortcodes/mermaid/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/shortcodes/mermaid/index.html" > Mermaid< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/shortcodes/notice/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/shortcodes/notice/index.html" > Notice< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/shortcodes/openapi/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/shortcodes/openapi/index.html" > OpenAPI< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
2024-02-29 19:46:39 +00:00
< li data-nav-id = "/hugo-theme-relearn/shortcodes/resources/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/shortcodes/resources/index.html" > Resources< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
2024-02-24 12:50:21 +00:00
< li data-nav-id = "/hugo-theme-relearn/shortcodes/siteparam/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/shortcodes/siteparam/index.html" > SiteParam< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/shortcodes/tab/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/shortcodes/tab/index.html" > Tab< i class = "fas fa-check read-icon" > < / i > < / a > < / li >
< li data-nav-id = "/hugo-theme-relearn/shortcodes/tabs/index.html" class = "" > < a class = "padding" href = "/hugo-theme-relearn/shortcodes/tabs/index.html" > Tabs< i class = "fas fa-check read-icon" > < / i > < / a > < / li > < / ul > < / li >
2023-11-20 23:54:13 +00:00
< / ul >
< / div >
< div id = "R-shortcuts" >
< div class = "nav-title padding" > More< / div >
< ul class = "space" >
< li > < a class = "padding" href = "https://github.com/McShelby/hugo-theme-relearn" > < i class = 'fab fa-fw fa-github' > < / i > GitHub repo< / a > < / li >
2024-02-24 12:50:21 +00:00
< li > < a class = "padding" href = "/hugo-theme-relearn/showcase/" > < i class = 'fas fa-fw fa-camera' > < / i > Showcases< / a > < / li >
< li > < a class = "padding" href = "/hugo-theme-relearn/more/credits/" > < i class = 'fas fa-fw fa-bullhorn' > < / i > Credits< / a > < / li >
< li > < a class = "padding" href = "/hugo-theme-relearn/tags/" > < i class = 'fas fa-fw fa-tags' > < / i > Tags< / a > < / li >
< li > < a class = "padding" href = "/hugo-theme-relearn/categories/" > < i class = 'fas fa-fw fa-layer-group' > < / i > Categories< / a > < / li >
2023-11-20 23:54:13 +00:00
< / ul >
< / div >
< div class = "padding footermargin footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter showLangSwitch showVariantSwitch showVisitedLinks showFooter" > < / div >
< div id = "R-menu-footer" >
< hr class = "padding default-animation footerLangSwitch footerVariantSwitch footerVisitedLinks footerFooter showLangSwitch showVariantSwitch showVisitedLinks showFooter" >
< div id = "R-prefooter" class = "footerLangSwitch footerVariantSwitch footerVisitedLinks showLangSwitch showVariantSwitch showVisitedLinks" >
< ul >
< li id = "R-select-language-container" class = "footerLangSwitch showLangSwitch" >
< div class = "padding menu-control" >
< i class = "fas fa-language fa-fw" > < / i >
< span > < / span >
< div class = "control-style" >
< label class = "a11y-only" for = "R-select-language" > Language< / label >
< select id = "R-select-language" onchange = "location = baseUri + this.value;" >
2024-02-24 12:50:21 +00:00
< option id = "R-en" value = "/hugo-theme-relearn/basics/branding/index.html" lang = "en" selected > English< / option >
< option id = "R-pir" value = "/hugo-theme-relearn/pir/basics/branding/index.html" lang = "art-pir" > Arrr! ☠ Pirrrates ☠< / option >
2023-11-20 23:54:13 +00:00
< / select >
< / div >
< div class = "clear" > < / div >
< / div >
< / li >
< li id = "R-select-variant-container" class = "footerVariantSwitch showVariantSwitch" >
< div class = "padding menu-control" >
< i class = "fas fa-paint-brush fa-fw" > < / i >
< span > < / span >
< div class = "control-style" >
< label class = "a11y-only" for = "R-select-variant" > Theme< / label >
< select id = "R-select-variant" onchange = "window.variants && variants.changeVariant( this.value );" >
2023-11-23 00:05:57 +00:00
< option id = "R-relearn-auto" value = "relearn-auto" selected > Relearn Light/Dark< / option >
2023-11-20 23:54:13 +00:00
< option id = "R-relearn-light" value = "relearn-light" > Relearn Light< / option >
< option id = "R-relearn-dark" value = "relearn-dark" > Relearn Dark< / option >
2023-11-23 00:05:57 +00:00
< option id = "R-relearn-bright" value = "relearn-bright" > Relearn Bright< / option >
< option id = "R-zen-auto" value = "zen-auto" > Zen Light/Dark< / option >
2023-11-20 23:54:13 +00:00
< option id = "R-zen-light" value = "zen-light" > Zen Light< / option >
< option id = "R-zen-dark" value = "zen-dark" > Zen Dark< / option >
< option id = "R-neon" value = "neon" > Neon< / option >
< option id = "R-learn" value = "learn" > Learn< / option >
< option id = "R-blue" value = "blue" > Blue< / option >
< option id = "R-green" value = "green" > Green< / option >
< option id = "R-red" value = "red" > Red< / option >
< / select >
< / div >
< div class = "clear" > < / div >
< / div >
< script > window . variants && variants . markSelectedVariant ( ) ; < / script >
< / li >
< li class = "footerVisitedLinks showVisitedLinks" >
< div class = "padding menu-control" >
< i class = "fas fa-history fa-fw" > < / i >
< span > < / span >
< div class = "control-style" >
< button onclick = "clearHistory();" > Clear History< / button >
< / div >
< div class = "clear" > < / div >
< / div >
< / li >
< / ul >
< / div >
< div id = "R-footer" class = "footerFooter showFooter" >
< span class = "github-buttons" > < / span >
< p > Built with < a href = "https://github.com/McShelby/hugo-theme-relearn" title = "love" > < i class = "fas fa-heart" > < / i > < / a > by < a href = "https://gohugo.io/" > Hugo< / a > < / p >
< script >
function githubButtonsScheme(){
var scheme = 'light';
var colorPropertyValue = window.getComputedStyle( document.querySelector( '#R-sidebar' ) ).getPropertyValue( 'background-color' );
var colorValues = colorPropertyValue.match( /\d+/g ).map( function( e ){ return parseInt(e,10); });
if( colorValues.length === 3 & & ((0.2126 * colorValues[0]) + (0.7152 * colorValues[1]) + (0.0722 * colorValues[2]) < 165 ) ) {
scheme = 'dark';
}
return scheme;
}
function githubButtonsInit(){
if( !window.githubButtons ){
setTimeout( githubButtonsInit, 50 );
return;
}
var scheme = githubButtonsScheme();
var githubButtonsHTML = `
< a class = "github-button" href = "https://github.com/McShelby/hugo-theme-relearn/archive/main.zip" data-color-scheme = "${scheme}" data-icon = "octicon-cloud-download" aria-label = "Download McShelby/hugo-theme-relearn on GitHub" > Download< / a >
< a class = "github-button" href = "https://github.com/McShelby/hugo-theme-relearn" data-color-scheme = "${scheme}" data-icon = "octicon-star" data-show-count = "true" aria-label = "Star McShelby/hugo-theme-relearn on GitHub" > Star< / a >
< a class = "github-button" href = "https://github.com/McShelby/hugo-theme-relearn/fork" data-color-scheme = "${scheme}" data-icon = "octicon-repo-forked" data-show-count = "true" aria-label = "Fork McShelby/hugo-theme-relearn on GitHub" > Fork< / a >
`;
document.querySelector( '.github-buttons' ).innerHTML = githubButtonsHTML;
document.querySelectorAll( '.github-button' ).forEach( function( anchor ){
anchor.dataset.colorScheme = scheme;
window.githubButtons.render( anchor, function( el ){
anchor.parentNode.replaceChild( el, anchor );
});
});
}
document.addEventListener( 'themeVariantLoaded', function( e ){
setTimeout( githubButtonsInit, 400 );
});
2023-12-03 14:25:53 +00:00
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
setTimeout( githubButtonsInit, 400 );
});
2023-11-20 23:54:13 +00:00
< / script >
2024-03-15 20:15:54 +00:00
< script async src = "/hugo-theme-relearn/js/github-buttons.js?1710533746" > < / script >
2023-11-20 23:54:13 +00:00
< / div >
< / div >
< / div >
< / aside >
2024-03-15 20:15:54 +00:00
< script src = "/hugo-theme-relearn/js/clipboard.min.js?1710533746" defer > < / script >
< script src = "/hugo-theme-relearn/js/perfect-scrollbar.min.js?1710533746" defer > < / script >
< script src = "/hugo-theme-relearn/js/theme.js?1710533746" defer > < / script >
2023-11-20 23:54:13 +00:00
< / body >
< / html >
