2022-04-02 13:30:16 +00:00
<!DOCTYPE html>
2022-11-01 01:10:49 +00:00
< html lang = "en" dir = "ltr" >
2022-04-02 13:30:16 +00:00
< 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-29 23:34:21 +00:00
< meta name = "generator" content = "Hugo 0.124.1" >
2024-04-07 21:49:57 +00:00
< meta name = "generator" content = "Relearn 5.27.0+tip" >
2022-04-02 13:30:16 +00:00
< meta name = "description" content = "Documentation for Hugo Relearn Theme" >
2023-10-10 21:22:41 +00:00
< meta name = "author" content = "Sören Weber" >
2023-10-11 16:03:03 +00:00
< 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-10-11 16:03:03 +00:00
< meta name = "twitter:title" content = "Stylesheet generator :: Hugo Relearn Theme" >
< meta name = "twitter:description" content = "Documentation for Hugo Relearn Theme" >
2024-04-07 13:13:19 +00:00
< meta property = "og:url" content = "https://mcshelby.github.io/hugo-theme-relearn/basics/generator/index.html" >
< meta property = "og:site_name" content = "Hugo Relearn Theme" >
2023-10-11 15:32:39 +00:00
< meta property = "og:title" content = "Stylesheet generator :: Hugo Relearn Theme" >
2024-04-07 13:13:19 +00:00
< meta property = "og:description" content = "This interactive tool may help you to generate your own color variant stylesheet .
Show usage instructions To get started, first select a color variant from the variant selector in the lower left sidebar that fits you best as a starting point.
The graph is interactive and reflect the current colors. You can click on any of the colored boxes to adjust the respective color. The graph and the page will update accordingly.">
< meta property = "og:locale" content = "en" >
2023-10-11 15:32:39 +00:00
< meta property = "og:type" content = "website" >
2024-02-24 13:03:50 +00:00
< meta property = "og:image" content = "https://mcshelby.github.io/hugo-theme-relearn/images/hero.png" >
2022-04-02 13:30:16 +00:00
< title > Stylesheet generator :: Hugo Relearn Theme< / title >
2024-02-24 13:03:50 +00:00
< link href = "https://mcshelby.github.io/hugo-theme-relearn/basics/generator/index.html" rel = "alternate" hreflang = "x-default" >
< link href = "https://mcshelby.github.io/hugo-theme-relearn/basics/generator/index.html" rel = "alternate" hreflang = "en" >
< link href = "https://mcshelby.github.io/hugo-theme-relearn/pir/basics/generator/index.html" rel = "alternate" hreflang = "art-pir" >
< link href = "https://mcshelby.github.io/hugo-theme-relearn/basics/generator/index.html" rel = "canonical" type = "text/html" title = "Stylesheet generator :: Hugo Relearn Theme" >
2024-02-24 12:50:21 +00:00
< link href = "/hugo-theme-relearn/basics/generator/index.xml" rel = "alternate" type = "application/rss+xml" title = "Stylesheet generator :: Hugo Relearn Theme" >
2024-04-12 15:30:57 +00:00
< link href = "/hugo-theme-relearn/images/logo.svg?1712935851" rel = "icon" type = "image/svg+xml" >
2022-07-15 13:20:02 +00:00
<!-- https://github.com/filamentgroup/loadCSS/blob/master/README.md#how - to - use -->
2024-04-12 15:30:57 +00:00
< link href = "/hugo-theme-relearn/css/fontawesome-all.min.css?1712935852" rel = "stylesheet" media = "print" onload = "this.media='all';this.onload=null;" > < noscript > < link href = "/hugo-theme-relearn/css/fontawesome-all.min.css?1712935852" rel = "stylesheet" > < / noscript >
< link href = "/hugo-theme-relearn/css/nucleus.css?1712935852" rel = "stylesheet" >
< link href = "/hugo-theme-relearn/css/auto-complete.css?1712935852" rel = "stylesheet" media = "print" onload = "this.media='all';this.onload=null;" > < noscript > < link href = "/hugo-theme-relearn/css/auto-complete.css?1712935852" rel = "stylesheet" > < / noscript >
< link href = "/hugo-theme-relearn/css/perfect-scrollbar.min.css?1712935852" rel = "stylesheet" >
< link href = "/hugo-theme-relearn/css/fonts.css?1712935852" rel = "stylesheet" media = "print" onload = "this.media='all';this.onload=null;" > < noscript > < link href = "/hugo-theme-relearn/css/fonts.css?1712935852" rel = "stylesheet" > < / noscript >
< link href = "/hugo-theme-relearn/css/theme.css?1712935852" rel = "stylesheet" >
< link href = "/hugo-theme-relearn/css/theme-relearn-auto.css?1712935852" rel = "stylesheet" id = "R-variant-style" >
< link href = "/hugo-theme-relearn/css/chroma-relearn-auto.css?1712935852" rel = "stylesheet" id = "R-variant-chroma-style" >
< link href = "/hugo-theme-relearn/css/variant.css?1712935852" rel = "stylesheet" >
< link href = "/hugo-theme-relearn/css/print.css?1712935852" rel = "stylesheet" media = "print" >
< link href = "/hugo-theme-relearn/css/format-print.css?1712935852" rel = "stylesheet" >
< link href = "/hugo-theme-relearn/css/ie.css?1712935852" rel = "stylesheet" >
< script src = "/hugo-theme-relearn/js/url.js?1712935852" > < / script >
< script src = "/hugo-theme-relearn/js/variant.js?1712935852" > < / script >
2024-03-16 13:44:28 +00:00
< script >
2023-11-16 22:53:34 +00:00
window.relearn = window.relearn || {};
2024-03-18 20:59:19 +00:00
window.relearn.relBasePath='..\/..';
window.relearn.relBaseUri='..\/..\/..';
window.relearn.absBaseUri='https:\/\/mcshelby.github.io\/hugo-theme-relearn';
2024-03-16 12:40:13 +00:00
window.index_js_url="/hugo-theme-relearn/index.search.js";
2023-11-16 22:53:34 +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-16 22:53:34 +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}"`;
2022-04-02 13:30:16 +00:00
< / script >
2022-12-02 15:05:54 +00:00
< style >
2023-09-23 08:19:35 +00:00
#R-body img.bg-white {
2022-12-02 15:05:54 +00:00
background-color: white;
}
< / style >
2022-04-02 13:30:16 +00:00
< / head >
2024-02-24 12:50:21 +00:00
< body class = "mobile-support print disableInlineCopyToClipboard" data-url = "/hugo-theme-relearn/basics/generator/index.html" >
2023-09-23 08:19:35 +00:00
< div id = "R-body" class = "default-animation" >
< div id = "R-body-overlay" > < / div >
< nav id = "R-topbar" >
2023-09-18 18:49:44 +00:00
< div class = "topbar-wrapper" >
2023-09-13 21:30:04 +00:00
< div class = "topbar-sidebar-divider" > < / div >
2023-09-18 18:49:44 +00:00
< 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-09-12 21:10:21 +00:00
< / div >
2023-09-13 21:30:04 +00:00
< / div >
2023-09-20 22:28:27 +00:00
< 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-09-23 22:28:49 +00:00
itemscope itemtype="https://schema.org/ListItem" itemprop="itemListElement">< span itemprop = "name" > Stylesheet generator< / span > < meta itemprop = "position" content = "2" > < / li >
2023-09-13 21:30:04 +00:00
< / ol >
2023-09-18 18:49:44 +00:00
< div class = "topbar-area topbar-area-end" data-area = "end" >
2024-04-07 19:58:38 +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/customization/index.html" title = "Customization (🡐)" > < i class = "fa-fw fas fa-chevron-left" > < / i > < / a >
< / div >
< 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/topbar/index.html" title = "Topbar Modification (🡒)" > < i class = "fa-fw fas fa-chevron-right" > < / i > < / a >
< / div >
2023-09-12 21:19:47 +00:00
< / div >
2022-04-02 13:30:16 +00:00
< / div >
< / nav >
2023-09-23 08:19:35 +00:00
< div id = "R-main-overlay" > < / div >
< main id = "R-body-inner" class = "highlightable default" tabindex = "-1" >
2022-04-02 13:30:16 +00:00
< div class = "flex-block-wrapper" >
2022-11-07 19:58:08 +00:00
< article class = "default" >
2023-05-19 18:46:07 +00:00
< header class = "headline" >
< / header >
2024-04-07 19:58:38 +00:00
2022-11-13 21:34:47 +00:00
< h1 id = "stylesheet-generator" > Stylesheet generator< / h1 >
2022-07-05 22:16:52 +00:00
2022-04-02 13:30:16 +00:00
< p > This interactive tool may help you to generate your own color variant stylesheet.< / p >
2023-06-03 22:20:43 +00:00
2023-02-26 11:48:34 +00:00
< div class = "expand" >
2024-04-12 15:30:57 +00:00
< input type = "checkbox" id = "R-expand-ec988624a73be4dc4aee998a431e3e70" aria-controls = "R-expandcontent-ec988624a73be4dc4aee998a431e3e70" >
< label class = "expand-label" for = "R-expand-ec988624a73be4dc4aee998a431e3e70" >
2024-03-18 16:24:38 +00:00
< i class = "fa-fw fas fa-chevron-down" > < / i >
< i class = "fa-fw fas fa-chevron-right" > < / i >
2023-02-26 11:48:34 +00:00
Show usage instructions
< / label >
2024-04-12 15:30:57 +00:00
< div id = "R-expandcontent-ec988624a73be4dc4aee998a431e3e70" class = "expand-content" >
2023-06-04 22:25:27 +00:00
2023-11-20 23:54:13 +00:00
< p > To get started, first select a color variant from the variant selector in the lower left sidebar that fits you best as a starting point.< / p >
2023-02-26 11:48:34 +00:00
< p > The graph is interactive and reflect the current colors. You can click on any of the colored boxes to adjust the respective color. The graph < strong > and the page< / strong > will update accordingly.< / p >
2024-04-12 15:30:57 +00:00
< p > The arrowed lines reflect how colors are inherited through different parts of the theme if the descendent isn’ t overwritten. If you want to delete a color and let it inherit from its parent, just delete the value from the input field.< / p >
2022-10-31 14:06:51 +00:00
< p > To better understand this select the < code > neon< / code > variant and modify the different heading colors. There, colors for the heading < code > h2< / code > , < code > h3< / code > and < code > h4< / code > are explicitly set. < code > h5< / code > is not set and inherits its value from < code > h4< / code > . < code > h6< / code > is also not set and inherits its value from < code > h5< / code > .< / p >
2023-11-20 23:54:13 +00:00
< p > Once you’ ve changed a color, the variant selector will show a “ My custom variant” entry and your changes are stored in the browser. You can < strong > browse to other pages< / strong > and even close the browser < strong > without losing your changes< / strong > .< / p >
2023-11-29 23:15:02 +00:00
< p > Once you are satisfied, you can download the new variants file and copy it into your site’ s < code > static/css< / code > directory. Afterwards you have to adjust the < code > themeVariant< / code > parameter in your < code > hugo.toml< / code > to your chosen file name.< / p >
2022-11-05 12:11:21 +00:00
< p > Eg. if your new variants file is named < code > theme-my-custom-variant.css< / code > , you have to set < code > themeVariant='my-custom-variant'< / code > to use it.< / p >
2023-06-03 09:12:46 +00:00
< / div >
2022-04-02 13:30:16 +00:00
< / div >
2023-12-05 15:13:45 +00:00
< p > < span class = "btn cstyle interactive secondary" > < button onclick = "window.variants&&variants.getStylesheet();this.blur();" type = "button" > < i class = "fa-fw fas fa-download" > < / i > < span class = "title" > Download variant< / span > < / button > < / span >
< span class = "btn cstyle interactive warning" > < button onclick = "window.variants&&variants.resetVariant();this.blur();" type = "button" > < i class = "fa-fw fas fa-trash" > < / i > < span class = "title" > Reset variant< / span > < / button > < / span > < / p >
2023-11-25 21:58:58 +00:00
< div id = "R-vargenerator" class = "mermaid zoomable" style = "background-color: var(--INTERNAL-MAIN-TEXT-color);" > Graph< / div >
2023-12-05 15:13:45 +00:00
< p > < span class = "btn cstyle interactive secondary" > < button onclick = "window.variants&&variants.getStylesheet();this.blur();" type = "button" > < i class = "fa-fw fas fa-download" > < / i > < span class = "title" > Download variant< / span > < / button > < / span >
< span class = "btn cstyle interactive warning" > < button onclick = "window.variants&&variants.resetVariant();this.blur();" type = "button" > < i class = "fa-fw fas fa-trash" > < / i > < span class = "title" > Reset variant< / span > < / button > < / span > < / p >
2022-04-02 13:30:16 +00:00
< script >
2023-09-23 08:19:35 +00:00
window.variants & & variants.generator( '#R-vargenerator' );
2022-04-02 13:30:16 +00:00
< / script >
< footer class = "footline" >
2023-10-03 20:51:03 +00:00
< div class = " taxonomy-categories term-list cstyle " title = "Categories" style = "--VARIABLE-TAGS-BG-color: var(--INTERNAL-TAG-BG-color);" >
2023-10-05 06:14:23 +00:00
< i class = "fa-fw fas fa-layer-group" > < / i >
2023-10-03 11:21:35 +00:00
< ul >
2024-02-24 12:50:21 +00:00
< li > < a class = "term-link" href = "/hugo-theme-relearn/categories/theming/index.html" > Theming< / a > < / li >
2023-10-03 11:21:35 +00:00
< / ul >
< / div >
2022-04-02 13:30:16 +00:00
< / footer >
< / article >
2023-05-17 22:13:41 +00:00
2022-04-02 13:30:16 +00:00
< / div >
< / main >
< / div >
2024-04-12 15:30:57 +00:00
< script src = "/hugo-theme-relearn/js/clipboard.min.js?1712935852" defer > < / script >
< script src = "/hugo-theme-relearn/js/perfect-scrollbar.min.js?1712935852" defer > < / script >
< script src = "/hugo-theme-relearn/js/d3/d3-color.min.js?1712935852" defer > < / script >
< script src = "/hugo-theme-relearn/js/d3/d3-dispatch.min.js?1712935852" defer > < / script >
< script src = "/hugo-theme-relearn/js/d3/d3-drag.min.js?1712935852" defer > < / script >
< script src = "/hugo-theme-relearn/js/d3/d3-ease.min.js?1712935852" defer > < / script >
< script src = "/hugo-theme-relearn/js/d3/d3-interpolate.min.js?1712935852" defer > < / script >
< script src = "/hugo-theme-relearn/js/d3/d3-selection.min.js?1712935852" defer > < / script >
< script src = "/hugo-theme-relearn/js/d3/d3-timer.min.js?1712935852" defer > < / script >
< script src = "/hugo-theme-relearn/js/d3/d3-transition.min.js?1712935852" defer > < / script >
< script src = "/hugo-theme-relearn/js/d3/d3-zoom.min.js?1712935852" defer > < / script >
< script src = "/hugo-theme-relearn/js/js-yaml.min.js?1712935852" defer > < / script >
< script src = "/hugo-theme-relearn/js/mermaid.min.js?1712935852" defer > < / script >
2022-04-02 13:30:16 +00:00
< script >
2023-10-26 09:28:29 +00:00
window.themeUseMermaid = JSON.parse("{ \"securityLevel\": \"loose\" }");
2022-04-02 13:30:16 +00:00
< / script >
2024-04-12 15:30:57 +00:00
< script src = "/hugo-theme-relearn/js/theme.js?1712935852" defer > < / script >
2022-04-02 13:30:16 +00:00
< / body >
< / html >
