Add documentation an theme variants

exampleSite/content/cont/tags.en.md

@@ -0,0 +1,39 @@
+---
+date: 2018-11-29T08:41:44+01:00
+title: Tags
+weight: 40
+tags: ["documentation", "tutorial"]
+---
+
+*Learn theme* support one default taxonomy of gohugo : the *tag* feature.
+
+## Configuration 
+
+Just add tags to any page : 
+
+```markdown
+---
+date: 2018-11-29T08:41:44+01:00
+title: Theme tutorial
+weight: 15
+tags: ["tutorial", "theme"] 
+---
+```
+
+## Behavior
+
+
+The tags are displayed at the top of the page, in the order wich they are enterted.
+
+Each tag is a link to a *Taxonomy* page displaying all the articles with the given tag. 
+
+## List all the tags
+
+In the `config.toml`  file you can add a shortcut to display all the tags
+
+```toml
+[[menu.shortcuts]]
+name = "<i class='fas fa-tags'></i> Tags"
+url = "/tags"
+weight = 30
+```

exampleSite/content/cont/tags.fr.md

@@ -0,0 +1,40 @@
+---
+date: 2018-11-29T08:41:44+01:00
+title: Tags
+weight: 40
+tags: ["documentation", "tutorial"]
+---
+
+
+Le *thème Learn* supporte une des taxonomy par défaut de GoHugo : les tags.
+
+## Configuration 
+
+Il suffit d'ajouter un tableau de tags sur la page  : 
+
+```markdown
+---
+date: 2018-11-29T08:41:44+01:00
+title: Tutoriel pour le thème
+weight: 15
+tags: ["tutoriel", "theme"] 
+---
+```
+
+## Comportement
+
+Les tags sont affichés en haut de la page, dans l'ordre dans lequel ils ont été saisis. 
+
+Chaque tag est un lien vers une page *Taxonomy*, qui affiche tous les article avec ce tag.
+
+
+## Liste des tags
+
+Il est possible de rajouter un raccourci dans le fichier `config.toml` afin d'afficher une page listant tous les tags
+
+```toml
+[[menu.shortcuts]]
+name = "<i class='fas fa-tags'></i> Tags"
+url = "/tags"
+weight = 30
+```

static/css/tags.css

@@ -0,0 +1,49 @@
+/* Tags */
+
+#head-tags{
+    margin-left:1em;  
+    margin-top:1em;
+}
+  
+#body .tags a.tag-link {
+    display: inline-block;
+    line-height: 2em;
+    font-size: 0.8em;
+    position: relative;
+    margin: 0 16px 8px 0;
+    padding: 0 10px 0 12px;
+    background: #8451a1;    
+    
+    -webkit-border-bottom-right-radius: 3px;    
+    border-bottom-right-radius: 3px;
+    -webkit-border-top-right-radius: 3px;    
+    border-top-right-radius: 3px;
+
+    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
+    color: #fff;
+}
+  
+#body .tags a.tag-link:before {
+    content: "";
+    position: absolute;
+    top:0;
+    left: -1em;
+    width: 0;
+    height: 0;
+    border-color: transparent #8451a1 transparent transparent;
+    border-style: solid;
+    border-width: 1em 1em 1em 0;        
+}
+  
+#body .tags a.tag-link:after {
+    content: "";
+    position: absolute;
+    top: 10px;
+    left: 1px;
+    width: 5px;
+    height: 5px;
+    -webkit-border-radius: 50%;
+    border-radius: 100%;
+    background: #fff;    
+}

static/css/theme-blue.css

@@ -102,3 +102,10 @@ a:hover {
     border-color: var(--MENU-SECTION-HR-color);
 }
 
+#body .tags a.tag-link {
+    background-color: var(--MENU-HEADER-BG-color);    
+}
+
+#body .tags a.tag-link:before {
+    border-right-color: var(--MENU-HEADER-BG-color);
+}

static/css/theme-green.css

@@ -102,3 +102,10 @@ a:hover {
     border-color: var(--MENU-SECTION-HR-color);
 }
 
+#body .tags a.tag-link {
+    background-color: var(--MENU-HEADER-BG-color);    
+}
+
+#body .tags a.tag-link:before {
+    border-right-color: var(--MENU-HEADER-BG-color);
+}

static/css/theme-red.css

@@ -102,3 +102,10 @@ a:hover {
     border-color: var(--MENU-SECTION-HR-color);
 }
 
+#body .tags a.tag-link {
+    background-color: var(--MENU-HEADER-BG-color);    
+}
+
+#body .tags a.tag-link:before {
+    border-right-color: var(--MENU-HEADER-BG-color);
+}

static/css/theme.css

@@ -1,4 +1,8 @@
 @charset "UTF-8";
+
+/* Tags */
+@import "tags.css";
+
 #top-github-link, #body #breadcrumbs {
     position: relative;
     top: 50%;
@@ -1127,52 +1131,4 @@ pre .copy-to-clipboard:hover {
     text-align: left;
 }
 
-#head-tags{
-  margin-left:1em;  
-  margin-top:1em;
-}
-
-#body .tags a.tag-link {
-    display: inline-block;
-    height: 2em;
-    line-height: 2em;
-    position: relative;
-    margin: 0 16px 8px 0;
-    padding: 0 10px 0 12px;
-    background: #777;    
-    -webkit-border-bottom-right-radius: 3px;    
-    border-bottom-right-radius: 3px;
-    -webkit-border-top-right-radius: 3px;    
-    border-top-right-radius: 3px;
-    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-    box-shadow: 0 1px 2px rgba(0,0,0,0.2);
-    color: #fff;
-    font-size: 0.8em;
-}
-
-#body .tags a.tag-link:before {
-    content: "";
-    position: absolute;
-    top:0;
-    left: -1em;
-    width: 0;
-    height: 0;
-    border-color: transparent #777 transparent transparent;
-    border-style: solid;
-    border-width: 1em 1em 1em 0;        
-}
-
-#body .tags a.tag-link:after {
-    content: "";
-    position: absolute;
-    top: 10px;
-    left: 1px;
-    float: left;
-    width: 5px;
-    height: 5px;
-    -webkit-border-radius: 50%;
-    border-radius: 50%;
-    background: #fff;    
-}
-
 /*# sourceMappingURL=theme.css.map */