docs: add customization and update other pages

chore: re-compile css and add icons
chore: update blog list layout

exampleSite/content/docs/advanced/_index.md

@@ -3,8 +3,11 @@ linkTitle: Advanced
 title: Advanced Topics
 ---
 
+This section covers some advanced topics of the theme.
+
+<!--more-->
+
 {{< cards >}}
   {{< card link="multi-language" title="Multi-language" icon="translate" >}}
-  {{< card link="deployment" title="Deployment" icon="server" >}}
   {{< card link="customization" title="Customization" icon="pencil" >}}
 {{< /cards >}}

exampleSite/content/docs/advanced/customization.md

@@ -3,6 +3,56 @@ title: Customizing Hextra
 linkTitle: Customization
 ---
 
+Hextra offers some default customization options in the `hugo.yaml` config file to configure the theme.
+This page describes the available options and how to customize the theme further.
+
+<!--more-->
+
 ## Custom CSS
 
-To add custom CSS, we need to create a file `assets/css/custom.css` in our site. Hextra will automatically load this file.
+To add custom CSS, we need to create a file `assets/css/custom.css` in our site. Hextra will automatically load this file. For example, customize the font family of the content:
+
+```css {filename="assets/css/custom.css"}
+.content {
+  font-family: "Times New Roman", Times, serif;
+}
+```
+
+### Primary Color
+
+The primary color of the theme can be customized by setting the `--primary-hue` variable:
+
+```css {filename="assets/css/custom.css"}
+:root {
+  --primary-hue: 100deg;
+}
+```
+
+### Syntax Highlighting
+
+List of available syntax highlighting themes are available at [Chroma Styles Gallery](https://xyproto.github.io/splash/docs/all.html). The stylesheet can be generated using the command:
+
+```bash
+$ hugo gen chromastyles --style=github
+```
+
+To override the default syntax highlighting theme, we can add the generated styles to the custom CSS file.
+
+## Custom Scripts
+
+You may add custom scripts to the end of the head for every page by adding the following file:
+
+```
+layouts/partials/custom/head-end.html
+```
+
+## Custom Layouts
+
+The layouts of the theme can be overridden by creating a file with the same name in the `layouts` directory of your site.
+For example, to override the `single.html` layout for docs, create a file `layouts/docs/single.html` in your site.
+
+For further information, refer to the [Hugo Templates](https://gohugo.io/templates/).
+
+## Further Customization
+
+Didn't find what you were looking for? Feel free to [open an issue](https://github.com/imfing/hextra/issues) or make a contribution to the theme!

exampleSite/content/docs/advanced/multi-language.md

@@ -5,6 +5,8 @@ weight: 1
 
 Hextra supports creating site with multiple languages using Hugo's [multilingual mode](https://gohugo.io/content-management/multilingual/).
 
+<!--more-->
+
 ## Enable Multi-language
 
 To make our site multi-language, we need to tell Hugo the supported languages. We need to add to the site configuration file:
@@ -63,6 +65,16 @@ documentation: Documentation
 blog: Blog
 ```
 
+## Translate Strings
+
+To translate strings on the other places, we need to add the translation to the corresponding i18n file:
+
+```yaml {filename="i18n/fr.yaml"}
+readMore: Lire la suite
+```
+
+A list of strings used in the theme can be found in the `i18n/en.yaml` file.
+
 ## Read More
 
 - [Hugo Multilingual Mode](https://gohugo.io/content-management/multilingual/)

exampleSite/content/docs/guide/shortcodes/_index.md

@@ -3,13 +3,16 @@ title: Shortcodes
 weight: 9
 ---
 
-Hextra provides a variety of built-in components based on [Hugo Shortcodes](https://gohugo.io/content-management/shortcodes/).
+[Hugo Shortcodes](https://gohugo.io/content-management/shortcodes/) are simple snippets inside your content files calling built-in or custom templates.
+
+Hextra provides a collection of beautiful shortcodes to enhance your content.
 
 
 {{< cards >}}
   {{< card link="callouts" title="Callouts" icon="warning" >}}
-  {{< card link="cards" title="Cards" >}}
-  {{< card link="filetree" title="FileTree" >}}
+  {{< card link="cards" title="Cards" icon="card" >}}
+  {{< card link="filetree" title="FileTree" icon="folder-tree" >}}
+  {{< card link="icon" title="Icon" icon="badge-check" >}}
   {{< card link="steps" title="Steps" icon="one" >}}
   {{< card link="tabs" title="Tabs" icon="collection" >}}
 {{< /cards >}}

exampleSite/content/docs/guide/shortcodes/cards.md

@@ -7,7 +7,6 @@ linkTitle: Cards
 
 {{< cards >}}
   {{< card link="/" title="Callout" icon="warning" >}}
-  {{< card link="/" title="GitHub" icon="github" >}}
   {{< card link="/" title="No Icon" >}}
 {{< /cards >}}
 
@@ -21,7 +20,6 @@ linkTitle: Cards
 ```
 {{</* cards */>}}
   {{</* card link="/" title="Callout" icon="warning" */>}}
-  {{</* card link="/" title="GitHub" icon="github" */>}}
   {{</* card link="/" title="No Icon" */>}}
 {{</* /cards */>}}
 ```