From f2c44bc93ef9ff5025329ad446a351d17becbb39 Mon Sep 17 00:00:00 2001 From: matcornic Date: Mon, 4 Sep 2017 19:14:13 +0200 Subject: [PATCH] chore: fix spelling mistake --- .../content/basics/configuration/_index.en.md | 194 +---------------- .../content/basics/configuration/_index.fr.md | 197 +----------------- .../basics/style-customization/_index.en.md | 194 +++++++++++++++++ .../basics/style-customization/_index.fr.md | 194 +++++++++++++++++ .../images/blue-variant.png | Bin .../images/green-variant.png | Bin .../images/red-variant.png | Bin exampleSite/content/credits.fr.md | 2 +- 8 files changed, 393 insertions(+), 388 deletions(-) create mode 100644 exampleSite/content/basics/style-customization/_index.en.md create mode 100644 exampleSite/content/basics/style-customization/_index.fr.md rename exampleSite/content/basics/{configuration => style-customization}/images/blue-variant.png (100%) rename exampleSite/content/basics/{configuration => style-customization}/images/green-variant.png (100%) rename exampleSite/content/basics/{configuration => style-customization}/images/red-variant.png (100%) diff --git a/exampleSite/content/basics/configuration/_index.en.md b/exampleSite/content/basics/configuration/_index.en.md index 065108a4db..230d9544d2 100644 --- a/exampleSite/content/basics/configuration/_index.en.md +++ b/exampleSite/content/basics/configuration/_index.en.md @@ -51,196 +51,4 @@ home = [ "HTML", "RSS", "JSON"] Learn theme uses the last improvement available in hugo version 20+ to generate a json index file ready to be consumed by lunr.js javascript search engine. > Hugo generate lunrjs index.json at the root of public folder. -> When you build the site with hugo server, hugo generates it internally and of course it don’t show up in the filesystem - - -## Style customization - -**Hugo-theme-learn** has been built to be as configurable as possible by defining multiple [partials](https://gohugo.io/templates/partials/) - -In `themes/hugo-theme-learn/layouts/partials/`, you will find all the partials defined for this theme. If you need to overwrite something, don't change the code directly. Instead [follow this page](https://gohugo.io/themes/customizing/). You'd create a new partial in the `layouts/partials` folder of your local project. This partial will have the priority. - -This theme defines the following partials : - -- *header*: the header of the content page (contains the breadcrumbs). _Not meant to be overwritten_ -- *custom-header*: custom headers in page. Meant to be overwritten when adding CSS imports. Don't forget to include `style` HTML tag directive in your file -- *footer*: the footer of the content page (contains the arrows). _Not meant to be overwritten_ -- *custom-footer*: custom footer in page. Meant to be overwritten when adding Javacript. Don't forget to include `javascript` HTML tag directive in your file -- *favicon*: the favicon -- *logo*: the logo, on top left hand corner. -- *meta*: HTML meta tags, if you want to change default behavior -- *menu*: left menu. _Not meant to be overwritten_ -- *menu-footer*: footer of the the left menu -- *search*: search box -- *toc*: table of contents - -### Change the logo - -Create a new file in `layouts/partials/` named `logo.html`. Then write any HTML you want. -You could use an `img` HTML tag and reference an image created under the *static* folder, or you could paste a SVG definition ! - -{{% notice note %}} -The size of the logo will adapt automatically -{{% /notice %}} - -### Change the favicon - -If your favicon is a png, just drop off your image in your local `static/images/` folder and names it `favicon.png` - -If you need to change this default behavior, create a new file in `layouts/partials/` named `favicon.html`. Then write something like this: - -```html - -``` - -### Change default colors {#theme-variant} - -**Hugo Learn theme** let you choose between 3 native color scheme variants, but feel free to add one yourself ! Default color scheme is based on [Grav Learn Theme](https://learn.getgrav.org/). - -#### Red variant - -```toml -[params] - # Change default color scheme with a variant one. Can be "red", "blue", "green". - themeVariant = "red" -``` - -![Red variant](/basics/configuration/images/red-variant.png?width=60pc) - -#### Blue variant - -```toml -[params] - # Change default color scheme with a variant one. Can be "red", "blue", "green". - themeVariant = "blue" -``` - -![Blue variant](/basics/configuration/images/blue-variant.png?width=60pc) - -#### Green variant - -```toml -[params] - # Change default color scheme with a variant one. Can be "red", "blue", "green". - themeVariant = "green" -``` - -![Green variant](/basics/configuration/images/green-variant.png?width=60pc) - -#### 'Yours‘ 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. - -```css - -: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 */ - --MAIN-ANCHOR-color: #1C90F3; /* color of anchors on titles */ - - --MENU-HEADER-BG-color:#1C90F3; /* Background color of menu header */ - --MENU-HEADER-BORDER-color:#33a1ff; /*Color of menu header border */ - - --MENU-SEARCH-BG-color:#167ad0; /* Search field background color (by default borders + icons) */ - --MENU-SEARCH-BOX-color: #33a1ff; /* Override search field border color */ - --MENU-SEARCH-BOX-ICONS-color: #a1d2fd; /* 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: #33a1ff; /* Color of 'page visited' icons in menu */ - --MENU-SECTION-HR-color: #20272b; /* Color of
separator in menu */ - -} - -body { - color: var(--MAIN-TEXT-color) !important; -} - -textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, select[multiple=multiple]:focus { - border-color: none; - box-shadow: none; -} - -h2, h3, h4, h5 { - color: var(--MAIN-TITLES-TEXT-color) !important; -} - -a { - color: var(--MAIN-LINK-color); -} - -.anchor { - color: var(--MAIN-ANCHOR-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); -} -``` - -Then, set the `themeVariant` value with the name of your custom theme file. That's it ! - -```toml -[params] - # Change default color scheme with a variant one. Can be "red", "blue", "green". - themeVariant = "mine" -``` \ No newline at end of file +> When you build the site with hugo server, hugo generates it internally and of course it don’t show up in the filesystem \ No newline at end of file diff --git a/exampleSite/content/basics/configuration/_index.fr.md b/exampleSite/content/basics/configuration/_index.fr.md index a4b83a1d23..efb1bddc80 100644 --- a/exampleSite/content/basics/configuration/_index.fr.md +++ b/exampleSite/content/basics/configuration/_index.fr.md @@ -4,7 +4,7 @@ title: Configuration weight: 20 --- -## Global site parameters +## Paramètres globaux du site En plus de la [configuration globale d'Hugo](https://gohugo.io/overview/configuration/), **Hugo-theme-learn** vous permet de définir les paramètres suivant dans votre fichier `config.toml` (ci-dessous sont affichées les valeurs par défaut). @@ -39,7 +39,7 @@ Notez que certains de ces paramètres sont expliqués en détails dans d'autres themeVariant = "" ``` -## Activez la recherche +## Activer la recherche Si ce n'est pas déjà présent, ajoutez les lignes suivantes dans le fichier `config.toml`. @@ -51,195 +51,4 @@ home = [ "HTML", "RSS", "JSON"] Le thème *Learn* utilise les dernières amélioraions d'Hugo pour générer un fichier d'index JSON, prêt à être consommé par le moteur de recherche lunr.js. > Hugo génère lunrjs index.json à la racine du dossier `public`. -> Quand vous générez le site avec `hugo server`, Hugo génère le fichier en mémoire, il n'est donc pas disponible sur le disque. - -## Personnaliser le style - -**Hugo-theme-learn** a été conçu pour être aussi configurable que possible en définissant plusieurs [partials](https://gohugo.io/templates/partials/) - -Dans `themes/hugo-theme-learn/layouts/partials/`, vous pourrez trouver tous les *partials* définis pour ce thème. Si vous avez besoin d'écraser quelque chose, ne modifiez pas le code directement. A la place, [suivez cette page](https://gohugo.io/themes/customizing/). Vous créerez alors un nouveau *partial* dans le dossier `layouts/partials` de votre site local. Ce *partial* aura la priorité. - -Ce thème définit les *partials* suivant : - -- *header*: l'en-tête de la page page (contient le fil d'Ariane). _Pas voué à être écrasé_ -- *custom-header*: En-tête personnalisé. Voué à être écrasé quand vous ajoutez des imports CSS. N'oubliez pas d'inclure la balise HTML `style` dans votre fichier -- *footer*: le pied-de-page de la page (contains les flèches). _Pas voué à être écrasé_ -- *custom-footer*: Pied-de-page personnalisé. Voué à être écrasé quand vous ajoutez du Javascript. N'oubliez pas d'inclure la balise HTML `javascript` dans votre fichier -- *favicon*: le favicon -- *logo*: le logo, affiché un haut à gauche. -- *meta*: les balises HTML meta, que vous pouvez écraser sans problème. -- *menu*: Le menu à gauche. _Pas voué à être écrasé_ -- *menu-footer*: Le pied-de-page du menu -- *search*: le champ de recherche -- *toc*: le sommaire - -### Changer le logo - -Créez un nouveau fichier dans `layouts/partials/`, nommé `logo.html`. Puis, écrivez le code HTML voulu. -Vous pourriez utiliser une balise HTML `img` et référencer une image créée dans le dossier *static*, voire même y coller un cod SVG ! - -{{% notice note %}} -La taille du logo va s'adapter automatiquement -{{% /notice %}} - -### Changer le favicon - -Si votre favicon est un png, déposez votre image dans votre dossier local `static/images/` et nommez le `favicon.png` - -Si vous avez besoin de changer ce comportement par défaut, créer un nouveau fichier dans `layouts/partials/` et nommez le `favicon.html`. Puis ajoutez quelque chose comme: - -```html - -``` - -### Changer les couleurs par défaut {#theme-variant} - -**Hugo Learn theme** vous permet de choisir nativement entre 3 schéma de couleurs, mais n'hésitez pas à en ajouter d'autres ! Les couleurs par défaut sont celles de [Grav Learn Theme](https://learn.getgrav.org/). - -#### Variante rouge - -```toml -[params] - # Modifier le schéma de couleur par défaut. Peut être "red", "blue", "green". - themeVariant = "red" -``` - -![Variante rouge](/basics/configuration/images/red-variant.png?width=60pc) - -#### Variante bleue - -```toml -[params] - # Modifier le schéma de couleur par défaut. Peut être "red", "blue", "green". - themeVariant = "blue" -``` - -![Variante bleue](/basics/configuration/images/blue-variant.png?width=60pc) - -#### Variante verte - -```toml -[params] - # Modifier le schéma de couleur par défaut. Peut être "red", "blue", "green". - themeVariant = "green" -``` - -![Variante verte](/basics/configuration/images/green-variant.png?width=60pc) - -#### Votre variante - -Premièrement, créez un nouveau fichier CSS dans votre dossier `static/css`, préfixé par `theme` (ex: avec le theme_lemien_ `static/css/theme-lemien.css`). Copiez le contenu suivant et modifiez les couleurs dans les variables CSS. - -```css - -: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 */ - --MAIN-ANCHOR-color: #1C90F3; /* color of anchors on titles */ - - --MENU-HEADER-BG-color:#1C90F3; /* Background color of menu header */ - --MENU-HEADER-BORDER-color:#33a1ff; /*Color of menu header border */ - - --MENU-SEARCH-BG-color:#167ad0; /* Search field background color (by default borders + icons) */ - --MENU-SEARCH-BOX-color: #33a1ff; /* Override search field border color */ - --MENU-SEARCH-BOX-ICONS-color: #a1d2fd; /* 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: #33a1ff; /* Color of 'page visited' icons in menu */ - --MENU-SECTION-HR-color: #20272b; /* Color of
separator in menu */ - -} - -body { - color: var(--MAIN-TEXT-color) !important; -} - -textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, select[multiple=multiple]:focus { - border-color: none; - box-shadow: none; -} - -h2, h3, h4, h5 { - color: var(--MAIN-TITLES-TEXT-color) !important; -} - -a { - color: var(--MAIN-LINK-color); -} - -.anchor { - color: var(--MAIN-ANCHOR-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); -} -``` - -Puis, configurez le paramètre `themeVariant` avec le nom de votre variante. C'est tout ! - -```toml -[params] - # Modifier le schéma de couleur par défaut. Peut être "red", "blue", "green". - themeVariant = "lemien" -``` \ No newline at end of file +> Quand vous générez le site avec `hugo server`, Hugo génère le fichier en mémoire, il n'est donc pas disponible sur le disque. \ No newline at end of file diff --git a/exampleSite/content/basics/style-customization/_index.en.md b/exampleSite/content/basics/style-customization/_index.en.md new file mode 100644 index 0000000000..364dffcd08 --- /dev/null +++ b/exampleSite/content/basics/style-customization/_index.en.md @@ -0,0 +1,194 @@ +--- +date: 2016-04-09T16:50:16+02:00 +title: Style customization +weight: 25 +--- + +**Hugo-theme-learn** has been built to be as configurable as possible by defining multiple [partials](https://gohugo.io/templates/partials/) + +In `themes/hugo-theme-learn/layouts/partials/`, you will find all the partials defined for this theme. If you need to overwrite something, don't change the code directly. Instead [follow this page](https://gohugo.io/themes/customizing/). You'd create a new partial in the `layouts/partials` folder of your local project. This partial will have the priority. + +This theme defines the following partials : + +- *header*: the header of the content page (contains the breadcrumbs). _Not meant to be overwritten_ +- *custom-header*: custom headers in page. Meant to be overwritten when adding CSS imports. Don't forget to include `style` HTML tag directive in your file +- *footer*: the footer of the content page (contains the arrows). _Not meant to be overwritten_ +- *custom-footer*: custom footer in page. Meant to be overwritten when adding Javacript. Don't forget to include `javascript` HTML tag directive in your file +- *favicon*: the favicon +- *logo*: the logo, on top left hand corner. +- *meta*: HTML meta tags, if you want to change default behavior +- *menu*: left menu. _Not meant to be overwritten_ +- *menu-footer*: footer of the the left menu +- *search*: search box +- *toc*: table of contents + +## Change the logo + +Create a new file in `layouts/partials/` named `logo.html`. Then write any HTML you want. +You could use an `img` HTML tag and reference an image created under the *static* folder, or you could paste a SVG definition ! + +{{% notice note %}} +The size of the logo will adapt automatically +{{% /notice %}} + +## Change the favicon + +If your favicon is a png, just drop off your image in your local `static/images/` folder and names it `favicon.png` + +If you need to change this default behavior, create a new file in `layouts/partials/` named `favicon.html`. Then write something like this: + +```html + +``` + +## Change default colors {#theme-variant} + +**Hugo Learn theme** let you choose between 3 native color scheme variants, but feel free to add one yourself ! Default color scheme is based on [Grav Learn Theme](https://learn.getgrav.org/). + +### Red variant + +```toml +[params] + # Change default color scheme with a variant one. Can be "red", "blue", "green". + themeVariant = "red" +``` + +![Red variant](/basics/configuration/images/red-variant.png?width=60pc) + +### Blue variant + +```toml +[params] + # Change default color scheme with a variant one. Can be "red", "blue", "green". + themeVariant = "blue" +``` + +![Blue variant](/basics/configuration/images/blue-variant.png?width=60pc) + +### Green variant + +```toml +[params] + # Change default color scheme with a variant one. Can be "red", "blue", "green". + themeVariant = "green" +``` + +![Green variant](/basics/configuration/images/green-variant.png?width=60pc) + +### 'Yours‘ 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. + +```css + +: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 */ + --MAIN-ANCHOR-color: #1C90F3; /* color of anchors on titles */ + + --MENU-HEADER-BG-color:#1C90F3; /* Background color of menu header */ + --MENU-HEADER-BORDER-color:#33a1ff; /*Color of menu header border */ + + --MENU-SEARCH-BG-color:#167ad0; /* Search field background color (by default borders + icons) */ + --MENU-SEARCH-BOX-color: #33a1ff; /* Override search field border color */ + --MENU-SEARCH-BOX-ICONS-color: #a1d2fd; /* 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: #33a1ff; /* Color of 'page visited' icons in menu */ + --MENU-SECTION-HR-color: #20272b; /* Color of
separator in menu */ + +} + +body { + color: var(--MAIN-TEXT-color) !important; +} + +textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, select[multiple=multiple]:focus { + border-color: none; + box-shadow: none; +} + +h2, h3, h4, h5 { + color: var(--MAIN-TITLES-TEXT-color) !important; +} + +a { + color: var(--MAIN-LINK-color); +} + +.anchor { + color: var(--MAIN-ANCHOR-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); +} +``` + +Then, set the `themeVariant` value with the name of your custom theme file. That's it ! + +```toml +[params] + # Change default color scheme with a variant one. Can be "red", "blue", "green". + themeVariant = "mine" +``` \ No newline at end of file diff --git a/exampleSite/content/basics/style-customization/_index.fr.md b/exampleSite/content/basics/style-customization/_index.fr.md new file mode 100644 index 0000000000..a4d9fc2ffd --- /dev/null +++ b/exampleSite/content/basics/style-customization/_index.fr.md @@ -0,0 +1,194 @@ +--- +date: 2016-04-09T16:50:16+02:00 +title: Personnalisation du style +weight: 25 +--- + +**Hugo-theme-learn** a été conçu pour être aussi configurable que possible en définissant plusieurs [partials](https://gohugo.io/templates/partials/) + +Dans `themes/hugo-theme-learn/layouts/partials/`, vous pourrez trouver tous les *partials* définis pour ce thème. Si vous avez besoin d'écraser quelque chose, ne modifiez pas le code directement. A la place, [suivez cette page](https://gohugo.io/themes/customizing/). Vous créerez alors un nouveau *partial* dans le dossier `layouts/partials` de votre site local. Ce *partial* aura la priorité. + +Ce thème définit les *partials* suivant : + +- *header*: l'en-tête de la page page (contient le fil d'Ariane). _Pas voué à être écrasé_ +- *custom-header*: En-tête personnalisé. Voué à être écrasé quand vous ajoutez des imports CSS. N'oubliez pas d'inclure la balise HTML `style` dans votre fichier +- *footer*: le pied-de-page de la page (contains les flèches). _Pas voué à être écrasé_ +- *custom-footer*: Pied-de-page personnalisé. Voué à être écrasé quand vous ajoutez du Javascript. N'oubliez pas d'inclure la balise HTML `javascript` dans votre fichier +- *favicon*: le favicon +- *logo*: le logo, affiché un haut à gauche. +- *meta*: les balises HTML meta, que vous pouvez écraser sans problème. +- *menu*: Le menu à gauche. _Pas voué à être écrasé_ +- *menu-footer*: Le pied-de-page du menu +- *search*: le champ de recherche +- *toc*: le sommaire + +## Changer le logo + +Créez un nouveau fichier dans `layouts/partials/`, nommé `logo.html`. Puis, écrivez le code HTML voulu. +Vous pourriez utiliser une balise HTML `img` et référencer une image créée dans le dossier *static*, voire même y coller un cod SVG ! + +{{% notice note %}} +La taille du logo va s'adapter automatiquement +{{% /notice %}} + +## Changer le favicon + +Si votre favicon est un png, déposez votre image dans votre dossier local `static/images/` et nommez le `favicon.png` + +Si vous avez besoin de changer ce comportement par défaut, créer un nouveau fichier dans `layouts/partials/` et nommez le `favicon.html`. Puis ajoutez quelque chose comme: + +```html + +``` + +## Changer les couleurs par défaut {#theme-variant} + +**Hugo Learn theme** vous permet de choisir nativement entre 3 schéma de couleurs, mais n'hésitez pas à en ajouter d'autres ! Les couleurs par défaut sont celles de [Grav Learn Theme](https://learn.getgrav.org/). + +### Variante rouge + +```toml +[params] + # Modifier le schéma de couleur par défaut. Peut être "red", "blue", "green". + themeVariant = "red" +``` + +![Variante rouge](/basics/configuration/images/red-variant.png?width=60pc) + +### Variante bleue + +```toml +[params] + # Modifier le schéma de couleur par défaut. Peut être "red", "blue", "green". + themeVariant = "blue" +``` + +![Variante bleue](/basics/configuration/images/blue-variant.png?width=60pc) + +### Variante verte + +```toml +[params] + # Modifier le schéma de couleur par défaut. Peut être "red", "blue", "green". + themeVariant = "green" +``` + +![Variante verte](/basics/configuration/images/green-variant.png?width=60pc) + +### Votre variante + +Premièrement, créez un nouveau fichier CSS dans votre dossier `static/css`, préfixé par `theme` (ex: avec le theme_lemien_ `static/css/theme-lemien.css`). Copiez le contenu suivant et modifiez les couleurs dans les variables CSS. + +```css + +: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 */ + --MAIN-ANCHOR-color: #1C90F3; /* color of anchors on titles */ + + --MENU-HEADER-BG-color:#1C90F3; /* Background color of menu header */ + --MENU-HEADER-BORDER-color:#33a1ff; /*Color of menu header border */ + + --MENU-SEARCH-BG-color:#167ad0; /* Search field background color (by default borders + icons) */ + --MENU-SEARCH-BOX-color: #33a1ff; /* Override search field border color */ + --MENU-SEARCH-BOX-ICONS-color: #a1d2fd; /* 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: #33a1ff; /* Color of 'page visited' icons in menu */ + --MENU-SECTION-HR-color: #20272b; /* Color of
separator in menu */ + +} + +body { + color: var(--MAIN-TEXT-color) !important; +} + +textarea:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="text"]:focus, input[type="url"]:focus, input[type="color"]:focus, input[type="date"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, select[multiple=multiple]:focus { + border-color: none; + box-shadow: none; +} + +h2, h3, h4, h5 { + color: var(--MAIN-TITLES-TEXT-color) !important; +} + +a { + color: var(--MAIN-LINK-color); +} + +.anchor { + color: var(--MAIN-ANCHOR-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); +} +``` + +Puis, configurez le paramètre `themeVariant` avec le nom de votre variante. C'est tout ! + +```toml +[params] + # Modifier le schéma de couleur par défaut. Peut être "red", "blue", "green". + themeVariant = "lemien" +``` \ No newline at end of file diff --git a/exampleSite/content/basics/configuration/images/blue-variant.png b/exampleSite/content/basics/style-customization/images/blue-variant.png similarity index 100% rename from exampleSite/content/basics/configuration/images/blue-variant.png rename to exampleSite/content/basics/style-customization/images/blue-variant.png diff --git a/exampleSite/content/basics/configuration/images/green-variant.png b/exampleSite/content/basics/style-customization/images/green-variant.png similarity index 100% rename from exampleSite/content/basics/configuration/images/green-variant.png rename to exampleSite/content/basics/style-customization/images/green-variant.png diff --git a/exampleSite/content/basics/configuration/images/red-variant.png b/exampleSite/content/basics/style-customization/images/red-variant.png similarity index 100% rename from exampleSite/content/basics/configuration/images/red-variant.png rename to exampleSite/content/basics/style-customization/images/red-variant.png diff --git a/exampleSite/content/credits.fr.md b/exampleSite/content/credits.fr.md index 39c6dd7e7e..804ccff881 100644 --- a/exampleSite/content/credits.fr.md +++ b/exampleSite/content/credits.fr.md @@ -9,7 +9,7 @@ Merci à eux de rendre le monde Open Source meilleur {{% ghcontributors "https://api.github.com/repos/matcornic/hugo-theme-learn/contributors?per_page=100" %}} -Et a grand merci à [@vjeantet](https://github.com/vjeantet) pour son travail sur [docdock](https://github.com/vjeantet/hugo-theme-docdock), un fork de _hugo-theme-learn_. La v2.0.0 du thème est en grande partie inspirée de son travail. +Et un grand merci à [@vjeantet](https://github.com/vjeantet) pour son travail sur [docdock](https://github.com/vjeantet/hugo-theme-docdock), un fork de _hugo-theme-learn_. La v2.0.0 du thème est en grande partie inspirée de son travail. ## Packages et librairies * [mermaid](https://knsv.github.io/mermaid) - géneration de diagrames et graphiques à partir de texte similaire à Markdown