diff --git a/404.html b/404.html index 5c77eec1fc..d94f3c978b 100644 --- a/404.html +++ b/404.html @@ -8,24 +8,24 @@ 404 Page not found :: Documentation for Hugo Relearn Theme - - - - - - - - - - - + + + + + + + + + + + - + - + - + - + @@ -69,9 +69,9 @@ - - - + + +
- - - + + +
- - - + + +

Change the colors

+

The Relearn theme lets you choose between some predefined color variants, but feel free to add one yourself!

+

You can preview the shipped variants by changing them in the variant selector at the bottom of the menu.

+

Single variant

+

Set the themeVariant value with the name of your theme file. That’s it!

[params]
-  # Change default color scheme with a variant one.
-  themeVariant = "" # or themeVariant = "relearn" or themeVariant = "relearn-light"
-

Standard variant

-

Standard dark variant

-
[params]
-  # Change default color scheme with a variant one.
-  themeVariant = "relearn-dark"
-

Dark variant

-

Learn variant

-
[params]
-  # Change default color scheme with a variant one.
-  themeVariant = "learn"
-

Learn variant

-

Red variant

-
[params]
-  # Change default color scheme with a variant one.
-  themeVariant = "red"
-

Red variant

-

Blue variant

-
[params]
-  # Change default color scheme with a variant one.
-  themeVariant = "blue"
-

Blue variant

-

Green variant

-
[params]
-  # Change default color scheme with a variant one.
-  themeVariant = "green"
-

Green variant

-

‘Mine‘ variant

-

First, create a new CSS file in your local static/css folder prefixed by theme (e.g. with mine theme static/css/theme-mine.css). Copy the following content and modify colors in CSS variables.

-
:root {
-    --MAIN-TEXT-color: #101010; /* Color of text by default */
-    --MAIN-TITLES-TEXT-color: #444753; /* Color of titles h2-h3-h4-h5-h6 */
-    --MAIN-LINK-color: #486ac9; /* Color of links */
-    --MAIN-LINK-HOVER-color: #134fbf; /* Color of hovered links */
-    --MAIN-ANCHOR-color: #486ac9; /* color of anchors on titles */
-    --MAIN-BG-color: #ffffff; /* color of text by default */
-
-    /* adjusted to relearn-light chroma style */
-    --CODE-BLOCK-color: #000000; /* fallback color for block code text */
-    --CODE-BLOCK-BG-color: #f8f8f8; /* fallback color for block code background */
-    --CODE-BLOCK-BORDER-color: #d8d8d8; /* color of block code border */
-
-    --CODE-INLINE-color: #5e5e5e; /* color for inline code text */
-    --CODE-INLINE-BG-color: #fffae9; /* color for inline code background */
-    --CODE-INLINE-BORDER-color: #f8e8c8; /* color of inline code border */
-
-    --MENU-HOME-LINK-color: #323232; /* Color of the home button text */
-    --MENU-HOME-LINK-HOVER-color: #808080; /* Color of the hovered home button text */
-
-    --MENU-HEADER-BG-color: #7dc903; /* Background color of menu header */
-    --MENU-HEADER-BORDER-color: #7dc903; /*Color of menu header border */
-
-    --MENU-SEARCH-color: #efefef; /* Color of search field text */
-    --MENU-SEARCH-BG-color: #3d414d; /* Search field background color (by default borders + icons) */
-    --MENU-SEARCH-BOX-color: #efefef; /* Override search field border color */
-
-    --MENU-SECTIONS-ACTIVE-BG-color: #202028; /* Background color of the active section and its children */
-    --MENU-SECTIONS-BG-color: #282830; /* Background color of other sections */
-    --MENU-SECTIONS-LINK-color: #bababa; /* Color of links in menu */
-    --MENU-SECTIONS-LINK-HOVER-color: #ffffff;  /* Color of links in menu, when hovered */
-    --MENU-SECTION-ACTIVE-CATEGORY-color: #444444; /* Color of active category text */
-    --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #ffffff; /* Color of background for the active category (only) */
-
-    --MENU-VISITED-color: #506397; /* Color of 'page visited' icons in menu */
-    --MENU-SECTION-HR-color: #606060; /* Color of <hr> separator in menu */
-
-    /* base styling for boxes */
-    --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color of the title text */
-    --BOX-BG-color: rgba( 255, 255, 255, .833 ); /* color of the content background */
-    --BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* fixed color of the content text */
-}
-

Then, set the themeVariant value with the name of your custom theme file. That’s it!

-
[params]
-  # Change default color scheme with a variant one.
-  themeVariant = "mine"
-

Multiple variants

+ themeVariant = "relearn-light" +

In the above exaple your theme file has to be named theme-relearn-light.css

+

Multiple variants

You can also set multiple variants. In this case, the first variant is the default choosen on first view and a variant switch will be shown in the menu footer.

[params]
   # Change default color scheme with a variant one.
@@ -367,10 +290,12 @@ You could use an img HTML tag and reference an image created under
 

     
Tip

     

-
If you want to switch the syntax highlightning theme together with your color variant, generate a syntax highlighting stylesheet and configure your installation according to Hugo’s documentation,  and @import this stylesheet in your color variant stylesheet. For an example, take a look into theme-relearn-light.css and config.toml of the exampleSite.

+
If you want to switch the syntax highlightning theme together with your color variant, generate a syntax highlighting stylesheet and configure your installation according to Hugo’s documentation, and @import this stylesheet in your color variant stylesheet. For an example, take a look into theme-relearn-light.css and config.toml of the exampleSite.

 
     

 

+
Roll your own

+
If you are not happy with the shipped variants you can either copy one of the shipped files, edit them in a text editor and configure the themeVariant parameter in your config.toml or just use the interactive variant generator.

 
           

           

@@ -380,13 +305,13 @@ You could use an img HTML tag and reference an image created under
     

       

     

-    
-    
-    
-    
-    
-    
-    
+    
+    
+    
+    
+    
+    
+    
     
-    
+    
   
 
diff --git a/basics/generator/index.html b/basics/generator/index.html
index 50a3f2c984..5affba014e 100644
--- a/basics/generator/index.html
+++ b/basics/generator/index.html
@@ -9,24 +9,24 @@
     
     Stylesheet generator :: Documentation for Hugo Relearn Theme
     
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
-    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
+    
     
-    
+    
     
-    
+    
   
   
     
@@ -69,9 +69,9 @@
- - - + + +
- - - + + +
- - - + + +
- - - + + +

2.9.0

@@ -377,7 +377,7 @@

2.4.0

- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +

Change th' colors

+

Th' Relearrrn theme lets ye choose between some predefined color variants, but feel free t' add one yourself!

+

Ye can preview th' shipped variants by chang'n them 'n th' variant selector at th' bottom o' th' menu.

+

Single variant

+

Set th' themeVariant value wit' th' name o' yer theme file. That’s it!

[params]
-  # Change default color scheme wit' a variant one.
-  themeVariant = "" # or themeVariant = "relearn" or themeVariant = "relearn-light"
-

Standard variant

-

Standard dark variant

-
[params]
-  # Change default color scheme wit' a variant one.
-  themeVariant = "relearn-dark"
-

Dark variant

-

Learrrn variant

-
[params]
-  # Change default color scheme wit' a variant one.
-  themeVariant = "learn"
-

Learn variant

-

Red variant

-
[params]
-  # Change default color scheme wit' a variant one.
-  themeVariant = "red"
-

Red variant

-

Blue variant

-
[params]
-  # Change default color scheme wit' a variant one.
-  themeVariant = "blue"
-

Blue variant

-

Green variant

-
[params]
-  # Change default color scheme wit' a variant one.
-  themeVariant = "green"
-

Green variant

-

‘Mine‘ variant

-

First, create a new CSS file 'n yer local static/css folder prefixed by theme (e.g. wit' mine theme static/css/theme-mine.css). Copy th' follow'n rrrambl'n an' modify colors 'n CSS variables.

-
:root {
-    --MAIN-TEXT-color: #101010; /* Color o' text by default */
-    --MAIN-TITLES-TEXT-color: #444753; /* Color o' titles h2-h3-h4-h5-h6 */
-    --MAIN-LINK-color: #486ac9; /* Color o' links */
-    --MAIN-LINK-HOVER-color: #134fbf; /* Color o' hovered links */
-    --MAIN-ANCHOR-color: #486ac9; /* color o' anchors on titles */
-    --MAIN-BG-color: #ffffff; /* color o' text by default */
-
-    /* adjusted t' relearn-light chroma style */
-    --CODE-BLOCK-color: #000000; /* fallback color fer block code text */
-    --CODE-BLOCK-BG-color: #f8f8f8; /* fallback color fer block code background */
-    --CODE-BLOCK-BORDER-color: #d8d8d8; /* color o' block code border */
-
-    --CODE-INLINE-color: #5e5e5e; /* color fer inline code text */
-    --CODE-INLINE-BG-color: #fffae9; /* color fer inline code background */
-    --CODE-INLINE-BORDER-color: #f8e8c8; /* color o' inline code border */
-
-    --MENU-HOME-LINK-color: #323232; /* Color o' th' home button text */
-    --MENU-HOME-LINK-HOVER-color: #808080; /* Color o' th' hovered home button text */
-
-    --MENU-HEADER-BG-color: #7dc903; /* Background color o' menu header */
-    --MENU-HEADER-BORDER-color: #7dc903; /*Color o' menu header border */
-
-    --MENU-SEARCH-color: #efefef; /* Color o' search field text */
-    --MENU-SEARCH-BG-color: #3d414d; /* Search field background color (by default borders + icons) */
-    --MENU-SEARCH-BOX-color: #efefef; /* Override search field border color */
-
-    --MENU-SECTIONS-ACTIVE-BG-color: #202028; /* Background color o' th' active section an' its children */
-    --MENU-SECTIONS-BG-color: #282830; /* Background color o' other sections */
-    --MENU-SECTIONS-LINK-color: #bababa; /* Color o' links 'n menu */
-    --MENU-SECTIONS-LINK-HOVER-color: #ffffff;  /* Color o' links 'n menu, when hovered */
-    --MENU-SECTION-ACTIVE-CATEGORY-color: #444444; /* Color o' active category text */
-    --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #ffffff; /* Color o' background fer th' active category (only) */
-
-    --MENU-VISITED-color: #506397; /* Color o' 'page visited' ay'cons 'n menu */
-    --MENU-SECTION-HR-color: #606060; /* Color o' <hr> separator 'n menu */
-
-    /* base styl'n fer boxes */
-    --BOX-CAPTION-color: rgba( 255, 255, 255, 1 ); /* color o' th' title text */
-    --BOX-BG-color: rgba( 255, 255, 255, .833 ); /* color o' th' rrrambl'n background */
-    --BOX-TEXT-color: rgba( 16, 16, 16, 1 ); /* fixed color o' th' rrrambl'n text */
-}
-

Then, set th' themeVariant value wit' th' name o' yer custom theme file. That’s it!

-
[params]
-  # Change default color scheme wit' a variant one.
-  themeVariant = "mine"
-

Multiple variants

+ themeVariant = "relearn-light" +

In th' above exaple yer theme file has t' be named theme-relearn-light.css

+

Multiple variants

Ye can also set multiple variants. In this case, th' first variant be th' default choosen on first view an' a variant switch will be shown 'n th' menu footer.

[params]
   # Change default color scheme wit' a variant one.
@@ -352,10 +280,12 @@ Ye could use an img HTML tag an' reference an image created under t
 

     
Smarrrt Arrrse

     

-
If ye want t' switch th' rules highlightn'n theme together wit' yer color variant, generate a rules highlight'n stylesheet an' configure yer installat'n accord'n t' Hugo’s documentat'n,  an' @import this stylesheet 'n yer color variant stylesheet. For an example, take a look into theme-relearn-light.css an' config.toml o' th' exampleSite.

+
If ye want t' switch th' rules highlightn'n theme together wit' yer color variant, generate a rules highlight'n stylesheet an' configure yer installat'n accord'n t' Hugo’s documentat'n, an' @import this stylesheet 'n yer color variant stylesheet. For an example, take a look into theme-relearn-light.css an' config.toml o' th' exampleSite.

 
     

 

+
Roll yer own

+
If ye be not happy wit' th' shipped variants ye can either copy one o' th' shipped files, edit them 'n a text editor an' configure th' themeVariant parameter 'n yer config.toml or just use th' interactive variant generator.
- - - + + +

This interactive tool may help ye t' generate yer own color variant stylesheet.

-

T' get started, first select a color variant from th' theme selector that fits ye best as a start'n point.

+

T' get started, first select a color variant from th' variant switch that fits ye best as a start'n point.

Th' graph be interactive an' reflect th' current colors. Ye can click on any o' th' colored boxes t' adjust th' respective color. Th' graph an' th' plank will update accordingly.

-

Th' arrowed lines reflect how colors be inherited thru different parts o' th' theme if th' descendent isn’t overwritten. If ye want t' delete a color an' let it inherit from its parent, just delete th' value from th' input field.

+

Th' arrowed lines reflects how colors be inherited thru different parts o' th' theme if th' descendent isn’t overwritten. If ye want t' delete a color an' let it inherit from its parent, just delete th' value from th' input field.

T' better understand this select th' neon variant an' modify th' differnet head'n colors. There, colors fer th' head'n h2, h3 an' h4 be explicitly set. h5 be not set an' inherits its value from h4. h6 be also not set an' inherits its value from h5.

-

Once you’ve changed a color, th' theme selector will show a “My custom variant” entry an' yer changes be stored. Ye can change planks an' even close th' browser without los'n yer changes.

+

Once you’ve changed a color, th' variant switch will show a “My custom variant” entry an' yer changes be stored 'n th' browser. Ye can change planks an' even close th' browser without los'n yer changes.

Once ye be satisfied, ye can download th' new variants file an' install it 'n yer ship.

@@ -262,13 +262,13 @@ variants.generator( '#vargenerator', '.vardownload', '.varreset' );
- - - - - - - + + + + + + + - + diff --git a/pir/basics/history/index.html b/pir/basics/history/index.html index b85b79f423..9626c643d5 100644 --- a/pir/basics/history/index.html +++ b/pir/basics/history/index.html @@ -9,24 +9,24 @@ Historrry :: Documentat'n fer Cap'n Hugo Relearrrn Theme - - - - - - - - - - - + + + + + + + + + + + - + - + @@ -69,9 +69,9 @@
- - - + + +
- - - + + +
- - - + + +
- - - + + +

2.9.0

@@ -364,7 +364,7 @@

2.4.0

- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +
- - - + + +