feat: add theme variant system + add blue variant

exampleSite/README.md

@@ -2,7 +2,7 @@
     - créer une section Showcase
 - créer des jolis thèmes de base (avec des noms ou au moins de meilleures couleurs) -> TODO
 - Menus déroulants icone -> TODO
-- Bug bizarre en prod sur un des menus.
+- Comprendre le pbm de Travis -> TODO
 
 - Section "MORE" -> OK
 - ajouter les childs -> OK

exampleSite/config.toml

@@ -17,6 +17,8 @@ defaultContentLanguageInSubdir= true
   ordersectionsby = "weight" # ordersectionsby = "title"
   disableInlineCopyToClipBoard = true # default to false
   showVisitedLinks = true
+  themeVariant = "blue"
+  enableShortcutsTitle = true
 
 [outputs]
 home = [ "HTML", "RSS", "JSON"]
@@ -28,30 +30,51 @@ title = "Documentation for Hugo Learn Theme"
 weight = 1
 languageName = "English"
 
-[Languages.fr]
+[[Languages.en.menu.shortcuts]] 
-title = "Documentation du thème Hugo Learn"
-weight = 2
-languageName = "Français"
-
-[[menu.shortcuts]]
-pre = "<h3>More</h3>"
 name = "<i class='fa fa-github'></i> Github repo"
 identifier = "ds"
 url = "https://github.com/vjeantet/hugo-theme-docdock"
 weight = 10
 
-[[menu.shortcuts]]
+[[Languages.en.menu.shortcuts]]
 name = "<i class='fa fa-camera'></i> Showcases"
 url = "/showcase"
 weight = 11
 
-[[menu.shortcuts]]
+[[Languages.en.menu.shortcuts]]
 name = "<i class='fa fa-bookmark'></i> Hugo Documentation"
 identifier = "hugodoc"
 url = "https://gohugo.io/"
 weight = 20
 
-[[menu.shortcuts]]
+[[Languages.en.menu.shortcuts]]
 name = "<i class='fa fa-bullhorn'></i> Credits"
 url = "/credits"
+weight = 30
+
+[Languages.fr]
+title = "Documentation du thème Hugo Learn"
+weight = 2
+languageName = "Français"
+
+[[Languages.fr.menu.shortcuts]]
+name = "<i class='fa fa-github'></i> Repo Github"
+identifier = "ds"
+url = "https://github.com/matcornic/hugo-theme-learn"
+weight = 10
+
+[[Languages.fr.menu.shortcuts]]
+name = "<i class='fa fa-camera'></i> Vitrine"
+url = "/fr/showcase"
+weight = 11
+
+[[Languages.fr.menu.shortcuts]]
+name = "<i class='fa fa-bookmark'></i> Documentation Hugo"
+identifier = "hugodoc"
+url = "https://gohugo.io/"
+weight = 20
+
+[[Languages.fr.menu.shortcuts]]
+name = "<i class='fa fa-bullhorn'></i> Crédits"
+url = "/fr/credits"
 weight = 30

i18n/en.toml

@@ -17,4 +17,7 @@ other = "Woops. Looks like this page doesn't exist ¯\\_(ツ)_/¯."
 other = "Go to homepage"
 
 [Edit-this-page]
-other = "Edit page"
+other = "Edit page"
+
+[Shortcuts-Title]
+other = "More"

i18n/fr.toml

@@ -17,4 +17,7 @@ other = "Oups. On dirait que cette page n'existe pas ¯\\_(ツ)_/¯"
 other = "Vers la page d'accueil"
 
 [Edit-this-page]
-other = "Modifier la page"
+other = "Modifier la page"
+
+[Shortcuts-Title]
+other = "Aller plus loin"

i18n/nb.toml

@@ -1,20 +0,0 @@
-[Search-placeholder]
-other = "Søk..."
-
-[Clear-History]
-other = "Fjern historikk"
-
-[Attachments-label]
-other = "Vedlegg"
-
-[title-404]
-other = "Feil"
-
-[message-404]
-other = "Ups... Ser ikke ut som denne siden eksisterer ¯\\_(ツ)_/¯."
-
-[Go-to-homepage]
-other = "Gå til hovedsiden"
-
-[Edit-this-page]
-other = "Editer"

layouts/404.html

@@ -5,14 +5,19 @@
   <meta charset="utf-8"> {{ partial "meta.html" . }} {{ partial "favicon.html" . }} {{ .Scratch.Add "title" "" }}{{ if eq .Site.Data.titles .Title }}{{ .Scratch.Set "title" (index .Site.Data.titles .Title).title }}{{ else }}{{ .Scratch.Set "title" .Title}}{{end}}
   <title>{{ .Scratch.Get "title" }}</title>
   
-  <link href="{{"css/nucleus.css" | relLangURL}}{{ if not .Site.Params.disableAssetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
+   {{ $assetBusting := not .Site.Params.disableAssetBusting }}
-  <link href="{{"css/font-awesome.min.css" | relLangURL}}{{ if not .Site.Params.disableAssetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
+    <link href="{{"css/nucleus.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
-  <link href="{{"css/hybrid.css" | relLangURL}}{{ if not .Site.Params.disableAssetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
+    <link href="{{"css/font-awesome.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
-  <link href="{{"css/featherlight.min.css" | relLangURL}}{{ if not .Site.Params.disableAssetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
+    <link href="{{"css/hybrid.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
-  <link href="{{"css/perfect-scrollbar.min.css" | relLangURL}}{{ if not .Site.Params.disableAssetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
+    <link href="{{"css/featherlight.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
-  <link href="{{"css/theme.css" | relLangURL}}{{ if not .Site.Params.disableAssetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
+    <link href="{{"css/perfect-scrollbar.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
-  <link href="{{"css/hugo-theme.css" | relLangURL}}{{ if not .Site.Params.disableAssetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
+    <link href="{{"css/horsey.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
-  <style type="text/css">
+    <link href="{{"css/theme.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
+    <link href="{{"css/hugo-theme.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
+    {{with .Site.Params.themeVariant}}
+      <link href="{{(printf "css/theme-%s.css" .) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
+    {{end}}
+<style type="text/css">
     :root #header + #content > #left > #rlblock_left {
       display: none !important;
     }

layouts/partials/header.html

@@ -8,16 +8,21 @@
     {{ partial "favicon.html" . }}
     <title>{{ .Title }} :: {{ .Site.Title }}</title>
     
-    <link href="{{"css/nucleus.css" | relURL}}{{ if not .Site.Params.disableAssetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
+    {{ $assetBusting := not .Site.Params.disableAssetBusting }}
-    <link href="{{"css/font-awesome.min.css" | relURL}}{{ if not .Site.Params.disableAssetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
+    <link href="{{"css/nucleus.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
-    <link href="{{"css/hybrid.css" | relURL}}{{ if not .Site.Params.disableAssetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
+    <link href="{{"css/font-awesome.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
-    <link href="{{"css/featherlight.min.css" | relURL}}{{ if not .Site.Params.disableAssetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
+    <link href="{{"css/hybrid.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
-    <link href="{{"css/perfect-scrollbar.min.css" | relURL}}{{ if not .Site.Params.disableAssetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
+    <link href="{{"css/featherlight.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
-    <link href="{{"css/horsey.css" | relURL}}{{ if not .Site.Params.disableAssetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
+    <link href="{{"css/perfect-scrollbar.min.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
-    <link href="{{"css/theme.css" | relURL}}{{ if not .Site.Params.disableAssetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
+    <link href="{{"css/horsey.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
-    <link href="{{"css/hugo-theme.css" | relURL}}{{ if not .Site.Params.disableAssetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
+    <link href="{{"css/theme.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
-    <script src="{{"js/jquery-2.x.min.js"| relURL}}{{ if not .Site.Params.disableAssetBusting }}?{{ now.Unix }}{{ end }}"></script>
+    <link href="{{"css/hugo-theme.css" | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
+    {{with .Site.Params.themeVariant}}
+      <link href="{{(printf "css/theme-%s.css" .) | relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}" rel="stylesheet">
+    {{end}}
 
+    <script src="{{"js/jquery-2.x.min.js"| relURL}}{{ if $assetBusting }}?{{ now.Unix }}{{ end }}"></script>
+    
     <style type="text/css">
       :root #header + #content > #left > #rlblock_left{ 
           display:none !important;

layouts/partials/menu.html

@@ -25,12 +25,14 @@
         {{end}} 
     </ul>
 
+    {{ $enableShortcutsTitle := .Site.Params.EnableShortcutsTitle}}
     {{with .Site.Menus.shortcuts}}
       <section id="shortcuts">
+        <h3>{{ if $enableShortcutsTitle}}{{ T "Shortcuts-Title"}}{{ end }}</h3>
         <ul>
           {{ range sort . "Weight"}}
               <li class="" role=""> 
-                  <a class="padding" href="{{.URL}}">{{.Pre}}{{safeHTML .Name}}{{.Post}}</a>  
+                  {{.Pre}}<a class="padding" href="{{.URL}}">{{safeHTML .Name}}</a>{{.Post}}
               </li>
           {{end}}
         </ul>

static/css/theme-blue.css

@@ -0,0 +1,94 @@
+
+:root{
+    
+    --MAIN-TEXT-color:#323232; /* Color of text by default */
+    --MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */
+    --MAIN-LINK-color:#1C90F3; /* Color of links */
+    --MAIN-LINK-HOVER-color:#167ad0; /* Color of hovered links */
+
+    --MENU-HEADER-BG-color:#1C90F3; /* Background color of menu header */
+    --MENU-HEADER-BORDER-color:#45a9ff; /*Color of menu header border */ 
+
+    --MENU-SEARCH-BG-color:#167ad0; /* Search field background color (by default borders + icons) */
+    --MENU-SEARCH-BOX-color: #45a9ff; /* Override search field border color */
+    --MENU-SEARCH-BOX-ICONS-color: #45a9ff; /* Override search field icons color */
+
+    --MENU-SECTIONS-ACTIVE-BG-color:#20272b; /* Background color of the active section and its childs */
+    --MENU-SECTIONS-BG-color:#252c31; /* Background color of other sections */
+    --MENU-SECTIONS-LINK-color: #ccc; /* Color of links in menu */
+    --MENU-SECTIONS-LINK-HOVER-color: #e6e6e6;  /* Color of links in menu, when hovered */
+    --MENU-SECTION-ACTIVE-CATEGORY-color: #777; /* Color of active category text */
+    --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #fff; /* Color of background for the active category (only) */
+
+    --MENU-VISITED-color: #45a9ff; /* Color of 'page visited' icons in menu */
+    --MENU-SECTION-HR-color: #20272b; /* Color of <hr> separator in menu */
+    
+}
+
+body {
+    color: var(--MAIN-TEXT-color) !important;
+}
+
+h2, h3, h4, h5 {
+    color: var(--MAIN-TITLES-TEXT-color) !important;
+}
+
+a {
+    color: var(--MAIN-LINK-color);
+}
+
+a:hover {
+    color: var(--MAIN-LINK-HOVER-color);
+}
+
+#sidebar ul li.visited > a .read-icon {
+	color: var(--MENU-VISITED-color);
+}
+
+#body a.highlight:after {
+    display: block;
+    content: "";
+    height: 1px;
+    width: 0%;
+    -webkit-transition: width 0.5s ease;
+    -moz-transition: width 0.5s ease;
+    -ms-transition: width 0.5s ease;
+    transition: width 0.5s ease;
+    background-color: var(--MAIN-HOVER-color);
+}
+#sidebar {
+	background-color: var(--MENU-SECTIONS-BG-color);
+}
+#sidebar #header-wrapper {
+    background: var(--MENU-HEADER-BG-color);
+    color: var(--MENU-SEARCH-BOX-color);
+    border-color: var(--MENU-HEADER-BORDER-color);
+}
+#sidebar .searchbox {
+	border-color: var(--MENU-SEARCH-BOX-color);
+    background: var(--MENU-SEARCH-BG-color);
+}
+#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active {
+    background: var(--MENU-SECTIONS-ACTIVE-BG-color);
+}
+#sidebar .searchbox * {
+    color: var(--MENU-SEARCH-BOX-ICONS-color);
+}
+
+#sidebar a {
+    color: var(--MENU-SECTIONS-LINK-color);
+}
+
+#sidebar a:hover {
+    color: var(--MENU-SECTIONS-LINK-HOVER-color);
+}
+
+#sidebar ul li.active > a {
+    background: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color);
+    color: var(--MENU-SECTION-ACTIVE-CATEGORY-color) !important;
+}
+
+#sidebar hr {
+    border-color: var(--MENU-SECTION-HR-color);
+}
+

static/css/theme.css

@@ -1119,6 +1119,7 @@ pre .copy-to-clipboard:hover {
     font-family: "Novacento Sans Wide", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
     color: white ;
     margin-top:1rem;
+    padding-left: 1rem;
 }
 
 #searchResults {