Initial commit

This commit is contained in:
Killian Kemps 2023-07-07 11:52:08 +02:00
commit 2d44ed43f8
296 changed files with 25977 additions and 0 deletions

47
.drone.yml Normal file
View File

@ -0,0 +1,47 @@
---
# drone encrypt kosssi/slides.lamelio.fr $AWS_ACCESS_KEY_ID
kind: secret
name: PRODUCTION_AWS_ACCESS_KEY_ID
data: SzwoRUH77HIgApNSr4pIWzShKEqfrjDY6wm/KICad7+LoJAC/CB/l2KV9QB++RmbtT1Liy2C
---
# drone encrypt kosssi/slides.lamelio.fr $AWS_SECRET_ACCESS_KEY
kind: secret
name: PRODUCTION_AWS_SECRET_ACCESS_KEY
data: E7w1BA/oedq53fzYAemHlUP6UX84ejtnapAXt1M0d/O7z4iV4KjTzv2tr8dDZaomBSR3DiZtA4lx/irnzkhPyYHnWF1eF9MQSA70ijMP+Aq2cP/ED8mULYFkzBs=
---
kind: pipeline
type: docker
name: prod
platform:
os: linux
arch: arm64
steps:
- name: install submodule
image: drone/git
commands:
- git submodule update --init
- name: build website
image: klakegg/hugo:0.107.0-ext-debian-ci
commands:
- hugo --minify
- name: deploy
image: klakegg/hugo:0.107.0-ext-debian-ci
environment:
AWS_ACCESS_KEY_ID:
from_secret: PRODUCTION_AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY:
from_secret: PRODUCTION_AWS_SECRET_ACCESS_KEY
commands:
- hugo deploy
trigger:
event:
- push
branch:
- master

4
.gitignore vendored Normal file
View File

@ -0,0 +1,4 @@
resources
public
backups
.hugo_build.lock

3
.gitmodules vendored Normal file
View File

@ -0,0 +1,3 @@
[submodule "themes/reveal-hugo"]
path = themes/reveal-hugo
url = https://github.com/dzello/reveal-hugo.git

31
README.md Normal file
View File

@ -0,0 +1,31 @@
# Slides
## Install
```
git clone https://git.weko.io/kosssi/slides.lamelio.fr.git --recurse-submodules
```
## Dev
```
./run dev
```
## Build
```
./run build
```
## Docker
```
./run docker
```
## Deploy
```
./run deploy
```

6
archetypes/default.md Normal file
View File

@ -0,0 +1,6 @@
---
title: "{{ replace .Name "-" " " | title }}"
date: {{ .Date }}
draft: true
---

54
assets/themes/blue.scss Normal file
View File

@ -0,0 +1,54 @@
/**
* Black theme for reveal.js. This is the opposite of the 'white' theme.
*
* By Hakim El Hattab, http://hakim.se
*/
// Default mixins and settings -----------------
@import "../../themes/reveal-hugo/assets/reveal-js/css/theme/template/mixins";
@import "../../themes/reveal-hugo/assets/reveal-js/css/theme/template/settings";
// ---------------------------------------------
// Include theme-specific fonts
// @import url(../../lib/font/source-sans-pro/source-sans-pro.css);
// Override theme settings (see ../template/settings.scss)
$backgroundColor: #00a9e2;
$mainColor: #fff;
$headingColor: #fff;
$mainFontSize: 32px;
$mainFont: 'Source Sans Pro', Helvetica, sans-serif;
$headingFont: 'Source Sans Pro', Helvetica, sans-serif;
$headingTextShadow: none;
$headingLetterSpacing: normal;
$headingTextTransform: none;
$headingFontWeight: 600;
$linkColor: #42affa;
$linkColorHover: lighten( $linkColor, 15% );
$selectionBackgroundColor: lighten( $linkColor, 25% );
$heading1Size: 2.5em;
$heading2Size: 1.6em;
$heading3Size: 1.3em;
$heading4Size: 1.0em;
section.has-light-background {
&, h1, h2, h3, h4, h5, h6 {
color: #222;
}
}
section.present.bottom {
top: auto !important;
bottom: 0;
}
// Theme template ------------------------------
@import "../../themes/reveal-hugo/assets/reveal-js/css/theme/template/theme";
// ---------------------------------------------

16
config.toml Normal file
View File

@ -0,0 +1,16 @@
baseURL = "https://slides.lamelio.fr/"
languageCode = "fr-fr"
title = "Présentation"
theme = "reveal-hugo"
[markup.goldmark.renderer]
unsafe = true
[outputFormats.Reveal]
baseName = "index"
mediaType = "text/html"
isHTML = true
[[deployment.targets]]
URL = "s3://slides.lamelio.fr?endpoint=http://10.20.20.10:3900&disableSSL=true&s3ForcePathStyle=true&region=garage"

Binary file not shown.

After

Width:  |  Height:  |  Size: 375 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 45 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 145 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 204 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 224 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 49 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 328 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 79 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 139 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 91 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 422 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 150 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 107 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 187 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 282 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 77 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 602 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 MiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

View File

@ -0,0 +1,50 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Calque_1" x="0px" y="0px" viewBox="0 0 249.99999 250" xml:space="preserve" width="250" height="250" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"><defs id="defs85"/>
<style type="text/css" id="style2">
.st0{fill:#004643;}
.st1{fill:#E8E4E6;}
.st2{fill:#F9BC60;}
</style>
<circle style="fill:#004643;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:2.56524;stroke-linecap:round;stroke-linejoin:round;stroke-dashoffset:2.72126" id="path115" cx="125" cy="125" r="125"/>
<g id="g2012" transform="translate(33.949997,84.45)"><rect class="st0" width="182.10001" height="81.099998" id="rect4" x="0" y="0"/><path class="st1" d="M 0,4.9 C 0,3.7 1,2.6 2.3,2.6 H 11 c 6.9,0 11.3,4.8 11.3,10.8 0,5.2 -3.5,9.1 -8.1,9.7 l -1.1,0.1 11.7,13.9 c 0.4,0.5 0.5,1 0.5,1.5 0,1.2 -1,2.3 -2.3,2.3 -0.7,0 -1.3,-0.3 -1.8,-0.9 L 7.7,23.8 C 7.4,23.4 7,22.8 7,22 7,20.8 7.9,19.9 9.1,19.9 h 1.8 C 15,19.9 17.6,17 17.6,13.4 17.6,9.7 15,6.9 10.9,6.9 H 4.6 v 31.6 c 0,1.2 -1,2.3 -2.3,2.3 C 1,40.9 0,39.8 0,38.5 Z" id="path6"/><path class="st1" d="m 27.4,26.7 c 0,-8 6.2,-14.3 14.2,-14.3 3.9,0 7.2,1.5 9.3,3.5 0.5,0.4 0.8,1 0.8,1.7 0,0.5 -0.2,1 -0.7,1.6 l -9.6,11.5 c -0.4,0.5 -0.9,0.7 -1.5,0.7 -1.2,0 -2.1,-0.8 -2.1,-1.9 0,-0.5 0.1,-1 0.5,-1.3 l 8.4,-9.9 c -1.4,-1.2 -3.4,-1.7 -5.2,-1.7 -5.5,0 -9.9,4.5 -9.9,10.3 0,5.7 4.3,10.3 9.9,10.3 3.1,0 5.5,-1.3 7.2,-3.2 0.6,-0.5 1.1,-1 1.8,-1 1.2,0 2.2,0.9 2.2,2.1 0,0.4 -0.3,1 -0.6,1.5 -2.3,2.7 -6,4.7 -10.5,4.7 C 33.6,41 27.4,34.7 27.4,26.7 Z M 42.3,0.8 C 42.7,0.3 43.3,0 43.9,0 45,0 46,1 46,2.1 c 0,0.5 -0.2,1 -0.5,1.3 l -5.2,6.2 c -0.4,0.4 -1,0.8 -1.6,0.8 -1.1,0 -2.2,-0.9 -2.2,-2.1 0,-0.5 0.2,-0.9 0.5,-1.3 z" id="path8"/><path class="st1" d="m 59.4,32.3 c 0.7,0 1.6,0.4 1.8,1.3 0.5,1.5 1.9,3.5 4.8,3.5 2.6,0 4.3,-1.9 4.3,-3.9 0,-2.7 -2.2,-3.9 -5,-4.9 -3.7,-1.2 -7.5,-2.7 -7.5,-8 0,-4.4 3.5,-7.8 8.3,-7.8 4.5,0 8.4,2.8 8.4,6.5 0,1.1 -0.9,1.9 -1.9,1.9 -0.6,0 -1.6,-0.3 -1.9,-1.5 -0.4,-1.4 -2,-3.1 -4.5,-3.1 -2.6,0 -4.2,1.9 -4.2,4 0,2.9 2.6,3.8 5.8,4.9 3.4,1 6.9,2.9 6.9,8 0,4.3 -3.7,7.9 -8.6,7.9 -4.7,0 -8.6,-3.2 -8.6,-6.7 0,-1.2 0.8,-2.1 1.9,-2.1 z" id="path10"/><path class="st1" d="m 127,26.7 c 0,-8 6.2,-14.3 14.2,-14.3 3.9,0 7.2,1.5 9.3,3.5 0.5,0.4 0.8,1 0.8,1.7 0,0.5 -0.2,1 -0.7,1.6 L 141,30.7 c -0.4,0.5 -0.9,0.7 -1.5,0.7 -1.2,0 -2.1,-0.8 -2.1,-1.9 0,-0.5 0.1,-1 0.5,-1.3 l 8.4,-9.9 c -1.4,-1.2 -3.4,-1.7 -5.2,-1.7 -5.5,0 -9.9,4.5 -9.9,10.3 0,5.7 4.3,10.3 9.9,10.3 3.1,0 5.5,-1.3 7.2,-3.2 0.6,-0.5 1.1,-1 1.8,-1 1.2,0 2.2,0.9 2.2,2.1 0,0.4 -0.3,1 -0.6,1.5 -2.3,2.7 -6,4.7 -10.5,4.7 C 133.2,41 127,34.7 127,26.7 Z" id="path12"/><path class="st1" d="m 158.4,24.8 c 0,-7.8 5.2,-12.5 11.8,-12.5 6.6,0 11.9,4.6 11.9,12.5 v 13.8 c 0,1.2 -1,2.2 -2.2,2.2 -1.2,0 -2.2,-1 -2.2,-2.2 V 24.7 c 0,-5.5 -3.3,-8.4 -7.6,-8.4 -4.2,0 -7.5,2.9 -7.5,8.4 v 13.9 c 0,1.2 -1,2.2 -2.2,2.2 -1.2,0 -2.2,-1 -2.2,-2.2 V 24.8 Z" id="path14"/><g id="g22">
<path class="st2" d="m 80.3,7.7 c 0.4,0.2 0.8,0.4 1.2,0.5 0.5,0.1 0.9,0.2 1.3,0.2 C 83.5,8.4 84,8.3 84.4,8 84.8,7.8 85,7.3 85,6.5 85,6.1 84.9,5.8 84.7,5.5 84.5,5.2 84.2,4.9 83.8,4.7 83.4,4.4 83.1,4.3 82.6,4.1 82.2,4 81.8,3.9 81.4,3.9 79.8,3.8 79.3,4.9 79.2,5.2 79.1,5.6 79.1,6 79.1,6.4 c 0,0.2 0.1,0.4 0.3,0.6 0.2,0.3 0.5,0.5 0.9,0.7 z" id="path16"/>
<path class="st2" d="m 116.2,7.7 c 0.4,0.2 0.8,0.4 1.2,0.5 0.5,0.1 0.9,0.2 1.3,0.2 0.7,0 1.2,-0.1 1.6,-0.4 0.4,-0.3 0.6,-0.7 0.6,-1.5 0,-0.4 -0.1,-0.7 -0.3,-1 -0.2,-0.3 -0.5,-0.6 -0.9,-0.8 -0.4,-0.3 -0.7,-0.4 -1.2,-0.6 -0.4,-0.1 -0.8,-0.2 -1.2,-0.2 -0.5,0 -0.8,0 -1.2,0.3 -0.6,0.4 -0.8,0.7 -0.9,1 -0.1,0.4 -0.2,0.8 -0.2,1.3 0,0.2 0.1,0.4 0.3,0.6 0.3,0.2 0.6,0.4 0.9,0.6 z" id="path18"/>
<path class="st2" d="m 122.5,38.7 c 0,-0.7 -0.3,-2.8 -0.4,-3.6 -0.2,-1.2 -0.4,-2.6 -0.6,-4.1 -0.2,-1.5 -0.3,-1.5 -0.4,-3.1 -0.2,-1.7 -0.4,-2.6 -0.4,-4.1 0,-0.4 0,-0.8 0,-1.2 0,-0.2 0,-0.4 0,-0.7 0,-0.3 -0.1,-0.6 -0.3,-0.9 -0.1,-0.2 -0.3,-0.3 -0.4,-0.5 -0.3,-0.3 -0.6,-0.6 -1.2,-0.7 -0.8,0 -1.2,0.1 -1.8,0.2 -1,0.2 -1.2,1.5 -1.2,2.5 v 0 c 0,2 0.1,3.9 0.4,5.7 0.2,1.8 0.4,4.7 0.6,5.4 0.1,0.7 0.4,2.8 0.4,4 0.4,6.5 -1.3,9.8 -9.4,12.8 -3.8,1.4 -8.4,1.9 -12.3,0.6 -1.2,-0.4 -2.3,-0.9 -3.2,-1.7 -1,-1 -3.7,-3.9 -4.3,-5.2 -2,-4.4 -2.1,-7.6 -2.3,-8.9 -0.2,-1.2 -0.4,-2.6 -0.6,-4.1 -0.2,-1.5 -0.3,-1.8 -0.5,-3.4 -0.2,-1.7 -0.3,-2.4 -0.3,-3.9 0,-0.4 0,-0.8 0,-1.2 0,-0.2 0,-0.4 0,-0.7 0,-0.3 0,-0.8 -0.3,-1.1 -0.1,-0.2 -0.6,-0.9 -1.7,-0.9 -1.7,0 -1.9,0.3 -2.3,0.5 -0.7,0.4 -1,1 -1,1.9 0,2 0.1,3.9 0.4,5.7 0.2,1.6 0.2,2.1 0.4,3.4 0.1,0.7 0.1,1.3 0.2,2 0.1,0.9 0.3,2.7 0.5,4.4 0,0.1 0.5,3.1 1,4.5 1.3,4 3.3,8.1 6.8,10.6 2,1.4 4.8,3.4 7.2,3.6 4.2,0.5 7.5,0.4 11.4,-0.4 3.9,-0.8 8.5,-3.5 11.3,-6.3 1.6,-1.8 4.3,-3.5 4.3,-11.1 z" id="path20"/>
</g><path class="st2" d="m 94.9,38.8 c -0.2,-0.3 -0.4,-0.7 -0.4,-1.1 0,-1.3 0.1,-4.3 0.1,-6 0.1,-2.2 0.3,-4.7 0.5,-7.4 0.6,-6.6 0.8,-6.5 0.8,-9.4 0,-1 0,-2 -0.1,-2.9 0,-0.8 -0.1,-1.5 -0.1,-2.3 0,-0.3 0.1,-0.6 0.4,-0.8 0.4,-0.3 0.9,-0.4 1.5,-0.4 1.5,0 2.4,0.6 2.6,1.7 0,0.4 0.1,2.2 0.1,2.7 0,1.5 0,3.3 -0.1,5.3 -0.1,1.2 -0.6,7 -0.7,9.1 -0.1,2.1 -0.1,4 -0.1,5.6 v 2.4 c 0,0.2 0.2,0.4 0.4,0.4 1.7,-0.3 6.4,-1.7 6.9,-1.7 0.5,-0.1 0.9,-0.1 1.1,-0.1 0.8,0 1.4,0.3 1.7,0.9 0.2,0.5 0.3,0.7 0.4,1.1 0.1,0.4 0.1,0.9 -0.4,1.1 l -4.5,1.7 c -2,0.9 -7.7,2.4 -7.9,2.4 -0.6,0 -1.1,-0.4 -1.5,-1.1 z" id="path24"/><g id="g80">
<path class="st1" d="m 1,74.6 v -0.4 c 0,-0.5 0,-1 0,-1.7 0,-0.6 0.1,-1.3 0.1,-2.1 0.2,-1.9 0.3,-3.2 0.3,-4.1 0,-0.3 0,-0.6 0,-0.8 0,-0.3 0,-0.5 -0.1,-0.8 0.1,-0.1 0.3,-0.2 0.6,-0.2 0.4,0 0.7,0.2 0.7,0.5 0,0.1 0,0.2 0,0.4 0,0.1 0,0.3 0,0.4 0,0.4 0,0.9 0,1.5 0,0.6 -0.1,1.2 -0.1,1.9 -0.1,0.8 -0.1,1.5 -0.1,2.1 0,0.6 0,1.1 0,1.6 v 0.5 c 0.3,-0.1 0.7,-0.3 1.2,-0.7 0.3,-0.2 0.5,-0.4 0.7,-0.5 0.2,-0.1 0.4,-0.2 0.5,-0.3 0.1,0 0.2,0 0.3,0 0.1,0 0.2,0 0.3,0 0.2,0 0.4,0.1 0.5,0.3 0.1,0 0.1,0.1 0.1,0.2 0,0.1 0,0.2 -0.1,0.3 l -2,1.4 c -0.4,0.3 -0.7,0.5 -1.1,0.7 -0.3,0.2 -0.6,0.4 -0.9,0.5 -0.1,0 -0.1,0.1 -0.2,0.1 -0.2,0 -0.3,-0.1 -0.4,-0.3 z" id="path26"/>
<path class="st1" d="m 13,74.3 c 0,0.1 0.1,0.2 0.1,0.3 0,0.1 0.1,0.2 0.1,0.3 0,0.1 0,0.2 -0.1,0.2 -0.1,0.1 -0.1,0.1 -0.2,0.1 -0.1,0 -0.1,0.1 -0.2,0.1 -0.1,0 -0.2,0 -0.2,0 -0.2,0 -0.4,-0.1 -0.6,-0.4 -0.1,-0.3 -0.3,-0.6 -0.4,-0.9 -0.1,-0.3 -0.2,-0.8 -0.2,-1.2 -0.1,-0.4 -0.1,-0.8 -0.2,-1.1 0,0.2 -0.1,0.5 -0.3,0.9 -0.2,0.4 -0.4,0.7 -0.7,1 -0.3,0.3 -0.6,0.6 -0.9,0.9 -0.3,0.2 -0.7,0.4 -1,0.4 C 7.9,74.9 7.7,74.8 7.5,74.7 7.3,74.6 7.2,74.5 7.1,74.3 7,74.1 6.9,74 6.9,73.8 c 0,-0.2 -0.1,-0.4 -0.1,-0.5 0,-0.4 0.1,-0.8 0.3,-1.4 0.2,-0.5 0.4,-1.1 0.8,-1.6 0.3,-0.5 0.7,-1 1.1,-1.3 0.4,-0.3 0.9,-0.5 1.3,-0.5 0.1,0 0.2,0 0.3,0.1 0.1,0 0.3,0.1 0.4,0.1 0.1,0 0.3,0.1 0.4,0.2 0.1,0.1 0.2,0.1 0.3,0.2 0.2,0.2 0.3,0.4 0.4,0.6 0.1,0.3 0.1,0.6 0.2,0.8 0.1,0.6 0.1,1.1 0.2,1.5 0,0.5 0.1,0.9 0.3,1.4 L 12.9,74 Z M 8.2,73.5 v 0 0 c 0.2,0 0.3,-0.1 0.5,-0.2 0.2,-0.1 0.4,-0.4 0.6,-0.7 0.2,-0.3 0.4,-0.5 0.5,-0.8 0.2,-0.3 0.3,-0.5 0.4,-0.8 0,-0.1 0.1,-0.2 0.2,-0.3 0.1,-0.1 0.1,-0.2 0.2,-0.4 0.1,-0.1 0.1,-0.2 0.2,-0.4 0.1,-0.2 0.1,-0.2 0.1,-0.3 -0.1,0 -0.1,0 -0.2,-0.1 0,0 -0.1,0 -0.2,0 -0.2,0 -0.5,0.1 -0.7,0.3 C 9.6,70 9.4,70.2 9.3,70.4 9.2,70.6 9,70.9 9,71.1 8.9,71.3 8.8,71.5 8.8,71.5 8.6,71.8 8.5,72.1 8.4,72.4 8.3,72.8 8.2,73.1 8.2,73.5 Z" id="path28"/>
<path class="st1" d="m 21.4,71.3 c 0.2,0.4 0.4,0.9 0.6,1.3 0.2,0.4 0.3,0.9 0.3,1.5 0,0.3 0,0.5 -0.1,0.8 -0.1,0.3 -0.2,0.5 -0.4,0.7 -0.2,0.2 -0.4,0.3 -0.6,0.5 -0.2,0.1 -0.5,0.2 -0.8,0.2 -0.2,0 -0.5,-0.1 -0.7,-0.3 -0.2,-0.2 -0.3,-0.4 -0.3,-0.6 0,-0.1 0.1,-0.2 0.1,-0.2 0,0 0.1,-0.1 0.3,-0.1 0.1,0.1 0.3,0.2 0.4,0.2 0.2,0 0.4,-0.1 0.5,-0.3 0.1,-0.2 0.2,-0.4 0.2,-0.6 0,-0.1 0,-0.1 0,-0.2 -0.1,-0.5 -0.3,-1 -0.5,-1.4 -0.2,-0.4 -0.4,-0.8 -0.6,-1.2 -0.2,-0.4 -0.3,-0.7 -0.5,-1 -0.2,-0.3 -0.2,-0.6 -0.2,-1 0,-0.3 0,-0.5 0.1,-0.8 0.1,-0.3 0.1,-0.6 0.2,-0.8 0.1,-0.2 0.3,-0.5 0.4,-0.6 0.1,-0.1 0.4,-0.2 0.7,-0.2 h 0.1 0.1 c 0.1,0 0.2,0.1 0.3,0.2 0.1,0.1 0.1,0.2 0.2,0.3 0,0.1 0,0.2 -0.1,0.2 C 21,68 21,68 20.9,68.1 c -0.1,0.2 -0.2,0.4 -0.3,0.6 -0.1,0.2 -0.1,0.4 -0.1,0.7 v 0.4 c 0,0.1 0,0.2 0.1,0.3 0.1,0.1 0.1,0.3 0.2,0.5 0.1,0.2 0.1,0.3 0.2,0.5 0.1,0.2 0.1,0.2 0.2,0.3 z" id="path30"/>
<path class="st1" d="m 25.7,74.7 c -0.2,0 -0.4,-0.1 -0.5,-0.2 C 25,74.4 24.9,74.3 24.7,74.2 24.3,74 24,73.7 23.8,73.4 c -0.2,-0.3 -0.3,-0.8 -0.3,-1.3 0,-0.2 0,-0.5 0.1,-0.9 0.1,-0.3 0.2,-0.7 0.2,-1 0,-0.1 0.1,-0.3 0.2,-0.5 0.1,-0.2 0.3,-0.4 0.5,-0.6 0.2,-0.2 0.4,-0.4 0.6,-0.5 0.2,-0.2 0.5,-0.2 0.7,-0.2 0.1,0 0.2,0 0.3,0.1 0.2,0.1 0.3,0.2 0.5,0.3 0.2,0.1 0.3,0.1 0.5,0.2 0.2,0.1 0.3,0.1 0.5,0.2 0.2,0.1 0.3,0.2 0.5,0.3 0.1,0.1 0.2,0.2 0.3,0.4 0.1,0.1 0.1,0.3 0.2,0.4 0.1,0.1 0.1,0.2 0.1,0.3 0,0.1 0,0.2 0,0.4 v 0.3 c 0,0.3 -0.1,0.7 -0.2,1 -0.1,0.3 -0.3,0.6 -0.5,0.9 -0.1,0.1 -0.2,0.3 -0.4,0.5 -0.1,0.2 -0.3,0.4 -0.5,0.5 -0.2,0.1 -0.4,0.3 -0.6,0.4 -0.2,0.1 -0.4,0.2 -0.6,0.2 -0.1,0 -0.1,0 -0.2,0 -0.1,0 -0.1,0 -0.2,0 h 0.2 z m 1.6,-4 c 0,-0.3 -0.1,-0.6 -0.4,-0.7 -0.3,-0.1 -0.5,-0.2 -0.8,-0.2 -0.2,0 -0.4,0.1 -0.6,0.3 -0.2,0.2 -0.3,0.4 -0.4,0.6 -0.1,0.3 -0.2,0.5 -0.2,0.8 -0.1,0.3 -0.1,0.5 -0.1,0.8 0,0 0,0.1 0,0.3 0,0.2 0,0.3 0.1,0.4 0.1,0.1 0.1,0.3 0.2,0.4 0.1,0.1 0.2,0.2 0.3,0.2 0.1,0 0.2,0 0.3,-0.1 0.1,0 0.2,-0.1 0.3,-0.1 0.2,-0.1 0.3,-0.3 0.5,-0.5 0.1,-0.2 0.2,-0.4 0.3,-0.6 0.1,-0.2 0.2,-0.5 0.2,-0.7 0,-0.2 0.3,-0.6 0.3,-0.9 z" id="path32"/>
<path class="st1" d="m 31.6,69.5 c 0,0 0,0.1 0,0.2 0,0.1 0,0.2 0,0.3 0,0.1 0,0.3 0,0.4 0,0.1 0,0.2 0,0.2 0.1,-0.2 0.2,-0.4 0.3,-0.6 0.1,-0.2 0.3,-0.5 0.6,-0.9 0,0 0.1,-0.1 0.2,-0.1 0.1,-0.1 0.2,-0.1 0.3,-0.2 0.1,-0.1 0.3,-0.1 0.4,-0.2 0.2,-0.1 0.3,-0.1 0.5,-0.1 0.3,0 0.6,0.1 0.8,0.3 0.2,0.2 0.4,0.4 0.5,0.7 0.1,0.3 0.2,0.6 0.2,0.9 0,0.3 0.1,0.6 0.1,0.8 0,0.1 0,0.3 0,0.6 0,0.2 -0.1,0.5 -0.1,0.8 -0.1,0.3 -0.2,0.6 -0.3,0.8 -0.1,0.3 -0.3,0.5 -0.5,0.7 -0.3,0.2 -0.6,0.4 -0.9,0.5 -0.3,0.1 -0.7,0.2 -0.9,0.2 -0.2,0 -0.6,0 -0.8,-0.1 -0.3,0 -0.5,-0.1 -0.8,-0.2 -0.1,0 -0.1,-0.1 -0.2,-0.2 -0.1,-0.1 -0.1,-0.2 -0.2,-0.3 -0.1,-0.1 -0.1,-0.3 -0.2,-0.4 0,-0.1 -0.1,-0.3 -0.1,-0.4 0,0 -0.1,-0.1 -0.1,-0.3 0,-0.2 -0.1,-0.4 -0.1,-0.7 0,-0.3 -0.1,-0.5 -0.1,-0.8 0,-0.3 0,-0.5 0,-0.7 0,-0.9 0,-1.9 0.1,-2.8 0,-0.9 0.1,-2 0.3,-3.1 0,-0.2 0,-0.4 0,-0.6 0,-0.2 0.1,-0.4 0.1,-0.6 0.1,-0.2 0.2,-0.3 0.4,-0.3 0.2,0 0.4,-0.1 0.5,-0.1 0.1,0 0.2,0 0.3,0.1 0.1,0 0.1,0.1 0.2,0.2 -0.1,0.7 -0.1,1.4 -0.2,2 -0.1,0.6 -0.2,1.3 -0.2,2 z m 0.9,2 c -0.1,0.2 -0.1,0.3 -0.2,0.5 -0.1,0.2 -0.1,0.3 -0.1,0.4 0,0.1 -0.1,0.3 -0.1,0.5 0,0.2 0,0.3 -0.1,0.5 0.1,0.1 0.2,0.2 0.4,0.2 0.1,0 0.3,0 0.4,0 0.3,0 0.5,-0.1 0.7,-0.3 0.2,-0.2 0.3,-0.4 0.4,-0.7 0.1,-0.3 0.2,-0.5 0.2,-0.8 0,-0.3 0.1,-0.6 0.1,-0.8 0,-0.1 0,-0.2 0,-0.4 0,-0.1 0,-0.3 -0.1,-0.4 0,-0.1 -0.1,-0.2 -0.1,-0.3 0,-0.1 -0.1,-0.1 -0.2,-0.1 -0.1,0 -0.2,0.1 -0.3,0.2 -0.1,0.1 -0.3,0.2 -0.4,0.4 -0.1,0.2 -0.3,0.3 -0.4,0.5 -0.1,0.2 -0.2,0.3 -0.2,0.5 z" id="path34"/>
<path class="st1" d="m 37.5,74.4 c 0,-0.1 0,-0.2 0,-0.3 0,-0.2 0,-0.3 0,-0.6 0,-0.2 0,-0.4 0,-0.7 0,-0.2 0,-0.5 0,-0.7 0,-0.2 0,-0.4 0,-0.5 0,-0.2 0,-0.2 0,-0.3 v -0.6 c 0,-0.2 0,-0.5 0,-0.7 0,-0.2 0,-0.5 0,-0.7 v -0.1 c 0,-0.1 0,-0.2 -0.1,-0.3 0,-0.1 -0.1,-0.2 -0.1,-0.3 0,-0.1 0.1,-0.3 0.2,-0.3 0.1,-0.1 0.2,-0.1 0.4,-0.1 0.2,0 0.3,0 0.5,0.1 0.1,0.1 0.2,0.2 0.3,0.3 0.1,0.1 0.1,0.2 0.1,0.4 0,0.1 0,0.3 0,0.4 l 0.1,0.9 c 0.1,-0.1 0.2,-0.2 0.4,-0.4 0.1,-0.2 0.3,-0.4 0.4,-0.6 0.1,-0.2 0.3,-0.4 0.4,-0.6 0.1,-0.2 0.3,-0.3 0.5,-0.5 0.1,0 0.2,-0.1 0.3,-0.1 0.3,0 0.5,0.1 0.6,0.2 0.2,0.1 0.3,0.3 0.4,0.5 0,0.1 -0.1,0.2 -0.2,0.3 -0.1,0.1 -0.2,0.3 -0.3,0.4 -0.1,0.1 -0.3,0.3 -0.4,0.4 -0.1,0.2 -0.3,0.3 -0.4,0.4 -0.2,0.2 -0.3,0.4 -0.5,0.7 -0.2,0.3 -0.3,0.5 -0.5,0.8 -0.1,0.3 -0.2,0.5 -0.3,0.8 -0.1,0.2 -0.1,0.4 -0.1,0.6 0,0.1 0,0.2 0,0.4 0,0.2 0,0.3 0,0.4 0,0.1 0,0.3 0,0.4 0,0.1 -0.1,0.3 -0.1,0.4 -0.1,0.1 -0.2,0.2 -0.3,0.3 -0.1,0.1 -0.3,0.1 -0.4,0.1 -0.2,0 -0.4,-0.1 -0.5,-0.2 -0.3,-0.2 -0.4,-0.3 -0.4,-0.6 z" id="path36"/>
<path class="st1" d="m 44.9,74.2 c 0,0.1 0,0.2 -0.1,0.3 -0.1,0.1 -0.1,0.2 -0.3,0.3 -0.2,0 -0.4,0 -0.5,-0.1 -0.2,0 -0.3,-0.1 -0.4,-0.2 -0.1,-0.1 -0.2,-0.2 -0.3,-0.4 -0.1,-0.2 -0.1,-0.4 -0.1,-0.8 0,-0.2 0,-0.4 -0.1,-0.6 0,-0.2 -0.1,-0.4 -0.1,-0.6 0,-0.6 0,-1.1 -0.1,-1.6 -0.1,-0.5 -0.1,-1.1 -0.1,-1.6 0,-0.2 0.1,-0.4 0.3,-0.5 0.1,0 0.2,-0.1 0.3,-0.1 0.1,0 0.2,0 0.3,-0.1 0.2,0 0.3,0.1 0.4,0.2 0.1,0.1 0.2,0.2 0.2,0.2 0,0.1 0,0.2 0,0.3 0,0.1 0,0.2 0,0.4 0,0.4 0,0.9 0.1,1.4 0.1,0.5 0.1,0.9 0.2,1.4 0.1,0.5 0.1,0.8 0.2,1.2 0.1,0.4 0.1,0.7 0.1,0.9 z m -1.5,-9.5 c 0.1,-0.1 0.2,-0.1 0.3,-0.1 0.1,0 0.2,0 0.3,0.1 0.1,0 0.2,0.1 0.3,0.2 0.1,0.1 0.2,0.2 0.2,0.2 0.1,0.1 0.1,0.2 0.1,0.3 0,0.2 -0.1,0.4 -0.2,0.4 -0.1,0.1 -0.3,0.1 -0.4,0.1 -0.1,0 -0.2,0 -0.4,-0.1 -0.1,0 -0.2,-0.1 -0.3,-0.1 C 43.2,65.6 43.1,65.6 43.1,65.5 43,65.4 43,65.4 43,65.3 c 0,-0.1 0,-0.3 0,-0.4 0.1,0 0.2,-0.1 0.4,-0.2 z" id="path38"/>
<path class="st1" d="m 46.5,71.8 c 0,-0.4 0.1,-0.8 0.2,-1.3 0.1,-0.4 0.3,-0.8 0.5,-1.1 0.2,-0.3 0.5,-0.6 0.8,-0.8 0.3,-0.2 0.7,-0.3 1.1,-0.3 0.3,0 0.5,0 0.8,0.1 0.2,0.1 0.4,0.2 0.5,0.4 0.1,0.2 0.3,0.3 0.3,0.5 0.1,0.2 0.1,0.4 0.1,0.6 0,0.3 0,0.5 -0.1,0.8 -0.1,0.2 -0.2,0.5 -0.4,0.6 -0.2,0.2 -0.4,0.3 -0.7,0.5 -0.3,0.1 -0.6,0.2 -0.9,0.2 -0.1,0 -0.3,0 -0.4,0 -0.1,0 -0.2,-0.1 -0.4,-0.1 0,0.1 0,0.1 0,0.1 v 0.1 c 0,0.4 0.1,0.7 0.2,1 0.1,0.2 0.3,0.4 0.4,0.5 0.1,0.1 0.3,0.2 0.4,0.2 0.1,0 0.2,0 0.3,0 0.3,0 0.6,-0.1 0.9,-0.2 0.2,-0.2 0.5,-0.3 0.8,-0.5 0.1,0 0.1,0 0.2,0.1 0.1,0 0.1,0.1 0.2,0.2 0,0.1 0,0.1 0,0.2 0,0 0,0.1 0,0.2 0,0.2 -0.1,0.3 -0.1,0.4 -0.1,0.1 -0.2,0.2 -0.2,0.3 -0.3,0.2 -0.6,0.4 -0.8,0.5 -0.3,0.1 -0.6,0.1 -1,0.1 -0.2,0 -0.4,0 -0.7,-0.1 C 48.2,74.9 48,74.8 47.8,74.7 47.5,74.5 47.3,74.3 47.2,74.1 47,73.9 46.9,73.7 46.8,73.5 46.7,73.3 46.7,73 46.6,72.8 c -0.1,-0.4 -0.1,-0.7 -0.1,-1 z m 2.3,-4.6 c -0.1,0.2 -0.3,0.3 -0.6,0.3 -0.1,0 -0.2,0 -0.3,0 -0.1,0 -0.1,-0.1 -0.1,-0.2 0,-0.1 0.1,-0.3 0.2,-0.6 0.1,-0.3 0.3,-0.5 0.5,-0.8 0.2,-0.2 0.4,-0.6 0.7,-1 0.4,-0.6 0.7,-1 0.9,-1.4 0.2,-0.3 0.4,-0.6 0.5,-0.7 0.1,-0.1 0.2,-0.2 0.3,-0.2 0.2,0 0.3,0.1 0.4,0.2 0.1,0.1 0.1,0.3 0.1,0.5 0,0.3 -0.1,0.7 -0.4,1 -0.3,0.3 -0.5,0.7 -0.8,1.1 z M 48,70.9 c 0,0 0.1,0 0.2,0 0.1,0 0.2,0 0.2,0 0.4,0 0.7,-0.1 0.9,-0.3 0.2,-0.2 0.3,-0.4 0.3,-0.7 0,-0.2 0,-0.3 -0.1,-0.4 -0.1,-0.1 -0.2,-0.2 -0.4,-0.2 -0.1,0 -0.2,0 -0.3,0 -0.1,0 -0.2,0.1 -0.2,0.2 0,0.1 -0.1,0.1 -0.2,0.2 -0.1,0.1 -0.1,0.1 -0.2,0.2 -0.1,0.1 -0.1,0.2 -0.1,0.4 C 48,70.5 48,70.7 48,70.9 Z" id="path40"/>
<path class="st1" d="m 53.8,63.9 c 0,-0.1 0,-0.3 0.1,-0.4 0.1,0 0.2,-0.1 0.2,-0.1 0.1,0 0.1,0 0.2,0 0.2,0 0.3,0 0.5,0.1 0.1,0.1 0.2,0.2 0.3,0.3 0.1,0.1 0.1,0.2 0.1,0.3 0,0.1 0,0.3 0,0.4 0,0.2 0,0.4 0,0.6 0,0.2 0,0.3 0,0.5 0,0.2 0,0.4 0,0.5 0,0.2 0,0.4 0,0.5 0,0.1 0,0.3 0,0.4 0,0.1 0,0.3 0,0.4 0,0.1 0,0.1 0,0.2 0,0.1 0.1,0.1 0.2,0.1 0.3,0 0.5,0 0.8,-0.1 0.2,-0.1 0.5,-0.1 0.8,-0.1 0.2,0 0.3,0.1 0.3,0.2 0.1,0.1 0.1,0.2 0.1,0.4 0,0.1 0,0.3 -0.1,0.3 -0.1,0 -0.2,0.1 -0.3,0.2 -0.1,0 -0.2,0.1 -0.3,0.1 -0.1,0 -0.2,0.1 -0.3,0.1 -0.1,0 -0.2,0.1 -0.4,0.1 -0.1,0 -0.3,0.1 -0.4,0.1 -0.1,0.1 -0.2,0.1 -0.3,0.2 -0.1,0.1 -0.3,0.2 -0.3,0.3 0,0.1 0,0.2 0,0.2 0,0.1 0,0.1 0,0.2 0,0.1 0,0.1 0,0.2 0,0.1 0,0.1 0,0.2 0,0.5 0,1 0.1,1.6 0.1,0.5 0.2,1.1 0.2,1.6 0,0.2 0.1,0.3 0.1,0.5 0,0.2 0.1,0.3 0.1,0.4 0,0.2 -0.1,0.3 -0.2,0.4 -0.1,0.1 -0.2,0.2 -0.3,0.2 -0.1,0 -0.2,0 -0.2,0 -0.2,0 -0.3,-0.1 -0.4,-0.2 -0.1,-0.1 -0.2,-0.2 -0.3,-0.4 -0.1,0 -0.1,-0.3 -0.1,-0.5 0,-0.3 -0.1,-0.5 -0.1,-0.7 0,-0.6 -0.1,-1.1 -0.1,-1.6 0,-0.5 0,-1.1 0,-1.6 v -0.1 -0.1 c -0.2,0 -0.4,0.1 -0.5,0.2 -0.1,0.1 -0.3,0.1 -0.5,0.1 -0.2,0 -0.4,-0.1 -0.6,-0.2 -0.2,-0.1 -0.3,-0.3 -0.4,-0.4 0,-0.1 0,-0.3 0.1,-0.5 0.1,-0.1 0.3,-0.1 0.4,-0.1 0.1,0 0.2,0 0.4,-0.1 0.1,0 0.2,-0.1 0.4,-0.1 0.1,0 0.3,-0.1 0.4,-0.2 0.2,0 0.3,-0.1 0.3,-0.2 0,-0.1 0,-0.3 0,-0.4 0,-0.2 0,-0.4 0,-0.5 0,-0.1 0,-0.3 0,-0.6 0,-0.2 0,-0.3 0,-0.5 0,-0.2 0,-0.3 0,-0.5 0,0 0,-1.9 0,-1.9 z" id="path42"/>
<path class="st1" d="m 57.5,71.8 c 0,-0.4 0.1,-0.8 0.2,-1.3 0.1,-0.4 0.3,-0.8 0.5,-1.1 0.2,-0.3 0.5,-0.6 0.8,-0.8 0.3,-0.2 0.7,-0.3 1.1,-0.3 0.3,0 0.5,0 0.8,0.1 0.3,0.1 0.4,0.2 0.5,0.4 0.1,0.1 0.3,0.3 0.3,0.5 0.1,0.2 0.1,0.4 0.1,0.6 0,0.3 0,0.5 -0.1,0.8 -0.1,0.2 -0.2,0.5 -0.4,0.6 -0.2,0.2 -0.4,0.3 -0.7,0.5 C 60.3,72 60,72 59.7,72 c -0.1,0 -0.3,0 -0.4,0 -0.1,0 -0.2,-0.1 -0.4,-0.1 0,0.1 0,0.1 0,0.1 v 0.1 c 0,0.4 0.1,0.7 0.2,1 0.1,0.2 0.3,0.4 0.4,0.5 0.1,0.1 0.3,0.2 0.4,0.2 0.1,0 0.2,0 0.3,0 0.3,0 0.6,-0.1 0.9,-0.2 0.2,-0.2 0.5,-0.3 0.8,-0.5 0.1,0 0.1,0 0.2,0.1 0.1,0 0.1,0.1 0.2,0.2 0,0.1 0,0.1 0,0.2 0,0 0,0.1 0,0.2 0,0.2 -0.1,0.3 -0.1,0.4 -0.1,0.1 -0.2,0.2 -0.2,0.3 -0.3,0.2 -0.6,0.4 -0.8,0.5 -0.3,0.1 -0.6,0.1 -1,0.1 -0.2,0 -0.4,0 -0.7,-0.1 C 59.2,74.9 59,74.8 58.8,74.7 58.5,74.5 58.3,74.3 58.2,74.1 58,73.9 57.9,73.7 57.8,73.5 57.7,73.3 57.7,73 57.6,72.8 c -0.1,-0.4 -0.1,-0.7 -0.1,-1 z m 2.2,-4.6 c -0.1,0.2 -0.3,0.3 -0.6,0.3 -0.1,0 -0.2,0 -0.3,0 -0.1,0 -0.1,-0.1 -0.1,-0.2 0,-0.1 0.1,-0.3 0.2,-0.6 0.1,-0.3 0.3,-0.5 0.5,-0.8 0.2,-0.2 0.4,-0.6 0.7,-1 0.4,-0.6 0.7,-1 0.9,-1.4 0.2,-0.3 0.4,-0.6 0.5,-0.7 0.1,-0.1 0.2,-0.2 0.3,-0.2 0.2,0 0.3,0.1 0.4,0.2 0.1,0.1 0.1,0.3 0.1,0.5 0,0.3 -0.2,0.7 -0.4,1 -0.2,0.3 -0.5,0.7 -0.8,1.1 z m -0.8,3.7 c 0,0 0.1,0 0.2,0 0.1,0 0.2,0 0.2,0 0.4,0 0.7,-0.1 0.9,-0.3 0.2,-0.2 0.3,-0.4 0.3,-0.7 0,-0.2 0,-0.3 -0.1,-0.4 -0.1,-0.1 -0.2,-0.2 -0.4,-0.2 -0.1,0 -0.2,0 -0.3,0 -0.1,0 -0.2,0.1 -0.2,0.2 0,0.1 -0.1,0.1 -0.2,0.2 -0.1,0.1 -0.1,0.1 -0.2,0.2 C 59,70 59,70.1 59,70.3 c 0,0.2 0,0.4 -0.1,0.6 z" id="path44"/>
<path class="st1" d="m 69.7,72.2 c 0.2,-0.2 0.3,-0.4 0.4,-0.6 0.1,-0.2 0.2,-0.5 0.3,-0.7 v -0.1 c 0.1,-0.2 0.2,-0.4 0.3,-0.7 0.1,-0.3 0.3,-0.5 0.5,-0.8 0.2,-0.3 0.4,-0.4 0.6,-0.6 0.2,-0.2 0.4,-0.3 0.7,-0.3 0.2,0.1 0.3,0.1 0.4,0.3 0.1,0.2 0.2,0.3 0.2,0.4 0.1,0.2 0.1,0.3 0.1,0.5 0,0.2 0.1,0.3 0.2,0.5 0.1,0.3 0.3,0.7 0.3,1 0.1,0.4 0.1,0.7 0.2,1.1 0.1,0.4 0.1,0.8 0.2,1.1 0.1,0.4 0.2,0.7 0.3,1 0,0.2 -0.1,0.3 -0.3,0.4 C 73.9,75 73.7,75 73.6,75 73.4,75 73.2,74.9 73.1,74.8 73,74.6 72.9,74.5 72.8,74.2 72.7,74 72.7,73.8 72.7,73.5 c 0,-0.2 -0.1,-0.4 -0.1,-0.6 -0.1,-0.2 -0.1,-0.4 -0.1,-0.6 0,-0.2 -0.1,-0.5 -0.1,-0.7 0,-0.2 -0.1,-0.5 -0.2,-0.7 -0.1,-0.2 -0.1,-0.4 -0.3,-0.5 -0.2,0.3 -0.3,0.6 -0.5,0.9 -0.1,0.3 -0.2,0.5 -0.3,0.8 -0.1,0.2 -0.2,0.5 -0.3,0.7 -0.1,0.2 -0.2,0.5 -0.3,0.7 -0.2,0.3 -0.3,0.6 -0.5,0.8 -0.2,0.2 -0.3,0.3 -0.4,0.4 -0.1,0.1 -0.2,0.1 -0.4,0.2 -0.1,0 -0.2,0 -0.3,0 -0.1,0 -0.3,-0.1 -0.4,-0.2 -0.2,-0.1 -0.2,-0.2 -0.2,-0.4 0,-0.7 0,-1.4 0,-2 0,-0.6 0,-1.2 0,-1.9 0,-0.2 0,-0.4 0,-0.6 0,-0.2 0,-0.4 0,-0.6 0,-0.1 0,-0.3 0.1,-0.4 0.1,-0.1 0.1,-0.2 0.3,-0.3 0.1,0 0.1,0 0.2,0 0.1,0 0.1,0 0.2,0 0.1,0 0.3,0 0.3,0.1 0.1,0.1 0.1,0.2 0.2,0.3 0,0.1 0.1,0.3 0.1,0.4 0,0.1 0,0.2 0,0.3 0,0.1 0,0.2 0,0.4 0,0.1 0,0.2 0,0.4 0,0.4 0,0.8 0,1.1 0,0.1 0,0.4 0,0.7 z" id="path46"/>
<path class="st1" d="m 75.8,69.9 c 0,-0.3 0,-0.6 0,-0.9 0,-0.3 0.1,-0.6 0.2,-0.8 0,0 0,0 0.1,-0.1 0.1,0 0.1,-0.1 0.2,-0.1 h 0.1 0.1 c 0.2,0 0.4,0.1 0.5,0.2 0.1,0.1 0.3,0.3 0.3,0.5 0,0.2 0,0.3 -0.1,0.5 0,0.1 -0.1,0.3 -0.1,0.5 0,0.3 0,0.6 0,0.8 0,0.2 0,0.3 0,0.5 0,0.5 0,1 0,1.5 0,0.5 0.1,0.8 0.1,1 0.2,0 0.4,-0.2 0.6,-0.5 0.2,-0.3 0.4,-0.6 0.7,-1 0.2,-0.4 0.4,-0.8 0.6,-1.3 0.2,-0.5 0.3,-0.8 0.4,-1.2 0,-0.1 0.1,-0.3 0.1,-0.4 0,-0.1 0,-0.3 0,-0.4 0,-0.1 0.1,-0.2 0.2,-0.3 0.1,-0.1 0.3,-0.1 0.6,-0.1 v 0 0 c 0.1,0 0.2,0 0.3,0.1 0.1,0.1 0.2,0.2 0.3,0.3 0,0.7 0,1.2 -0.1,1.6 -0.1,0.4 -0.1,0.7 -0.1,1 0,0.5 0,1 0.1,1.4 0.1,0.4 0.2,0.7 0.4,0.9 0.1,0.1 0.1,0.2 0.2,0.2 0.1,0 0.1,0.2 0.2,0.3 0,0.1 -0.1,0.2 -0.1,0.3 -0.1,0.1 -0.1,0.1 -0.2,0.1 -0.1,0 -0.1,0 -0.2,0.1 -0.1,0 -0.2,0 -0.2,0.1 -0.2,-0.1 -0.4,-0.2 -0.6,-0.3 -0.2,-0.1 -0.3,-0.3 -0.4,-0.5 -0.1,-0.2 -0.2,-0.4 -0.2,-0.7 0,-0.3 -0.1,-0.5 -0.1,-0.8 l -0.1,0.1 c -0.1,0.2 -0.2,0.4 -0.4,0.8 -0.2,0.3 -0.3,0.6 -0.5,0.9 -0.2,0.3 -0.4,0.6 -0.7,0.8 -0.3,0.2 -0.5,0.3 -0.9,0.3 -0.3,0 -0.6,-0.1 -0.8,-0.2 -0.2,-0.1 -0.3,-0.3 -0.5,-0.6 -0.1,-0.3 -0.2,-0.7 -0.2,-1.1 0,-0.4 -0.1,-1 -0.1,-1.7 0,-0.2 0,-0.3 0,-0.5 0,-0.2 0,-0.3 0,-0.5 v -0.8 z" id="path48"/>
<path class="st1" d="m 92,70.2 c 0,0.4 0,0.9 0.1,1.3 0.1,0.4 0.1,0.8 0.2,1.3 0,0.2 0.1,0.5 0.2,0.7 0.1,0.2 0.2,0.5 0.2,0.7 0,0.3 -0.1,0.5 -0.2,0.6 C 92.3,74.9 92.2,75 92,75 91.8,75 91.6,74.9 91.5,74.7 91.4,74.5 91.3,74.2 91.2,73.9 91.1,73.6 91.1,73.3 91.1,73.1 91.1,72.8 91,72.6 91,72.5 90.9,72.3 90.9,72.1 90.9,72 c 0,-0.2 0,-0.4 -0.1,-0.5 0,-0.2 0,-0.4 -0.1,-0.5 0,-0.2 -0.1,-0.4 -0.1,-0.6 -0.1,0.2 -0.2,0.4 -0.3,0.6 -0.1,0.2 -0.2,0.4 -0.4,0.7 -0.1,0.2 -0.2,0.5 -0.3,0.7 -0.1,0.2 -0.2,0.4 -0.3,0.6 -0.1,0.2 -0.2,0.4 -0.2,0.5 C 89,73.7 89,73.8 89,74 c 0,0.2 -0.1,0.3 -0.2,0.5 -0.1,0.2 -0.1,0.3 -0.2,0.5 -0.3,0 -0.5,0 -0.6,0 -0.2,0 -0.4,-0.1 -0.5,-0.2 C 87.4,74.6 87.3,74.4 87.2,74.2 87.1,74 87.1,73.7 87.1,73.5 87.1,73.2 87,73 87,72.8 c 0,-0.2 -0.1,-0.4 -0.1,-0.7 0,-0.2 -0.1,-0.5 -0.2,-0.7 -0.1,-0.2 -0.1,-0.5 -0.2,-0.7 -0.1,-0.2 -0.2,-0.4 -0.2,-0.5 -0.2,0.1 -0.3,0.3 -0.4,0.5 -0.1,0.2 -0.2,0.5 -0.3,0.7 -0.1,0.2 -0.2,0.5 -0.2,0.7 -0.1,0.2 -0.1,0.4 -0.2,0.5 -0.1,0.3 -0.2,0.5 -0.3,0.8 -0.1,0.3 -0.1,0.5 -0.2,0.7 -0.1,0.2 -0.2,0.4 -0.3,0.5 -0.1,0.1 -0.3,0.2 -0.7,0.2 -0.1,0 -0.2,0 -0.3,-0.1 -0.1,-0.1 -0.2,-0.1 -0.2,-0.2 -0.1,-0.1 -0.1,-0.2 -0.1,-0.3 0,-0.1 -0.1,-0.2 -0.1,-0.3 0,-0.1 0,-0.2 0,-0.3 0,-0.1 0,-0.2 0,-0.4 0,0 0,-0.1 0,-0.3 0,-0.2 0,-0.3 0,-0.4 0,-0.2 0,-0.3 0,-0.4 0,-0.1 0,-0.2 0,-0.3 0,-0.6 0,-1.1 0,-1.4 0,-0.3 0,-0.5 0,-0.6 0,-0.1 0,-0.2 0,-0.2 v -0.1 c 0,-0.1 0,-0.2 -0.1,-0.4 -0.1,-0.2 0.1,0 0.1,-0.2 0,-0.2 0.1,-0.3 0.2,-0.4 0.1,-0.1 0.3,-0.2 0.4,-0.2 0.2,0 0.4,0.1 0.5,0.2 0.1,0.1 0.2,0.2 0.2,0.4 0,0.2 0.1,0.3 0.1,0.5 0,0.2 0,0.3 0,0.5 0,0.1 0,0.3 0,0.4 0,0.2 0,0.3 0,0.4 0,0.1 0,0.2 0,0.3 0.1,-0.1 0.1,-0.3 0.2,-0.5 0.1,-0.2 0.2,-0.4 0.3,-0.5 0.1,-0.1 0.2,-0.4 0.3,-0.5 0.1,-0.2 0.2,-0.3 0.3,-0.4 0.1,-0.2 0.3,-0.3 0.5,-0.5 0.2,-0.2 0.4,-0.3 0.6,-0.3 0.2,0 0.4,0.1 0.6,0.2 0.1,0.1 0.2,0.3 0.3,0.4 0.1,0.2 0.1,0.4 0.1,0.6 0,0.2 0.1,0.4 0.1,0.6 0.1,0.3 0.2,0.7 0.3,1.1 0.1,0.4 0.2,0.8 0.2,1.1 0,-0.1 0.1,-0.2 0.1,-0.3 0.1,-0.1 0.1,-0.3 0.2,-0.4 0.1,-0.1 0.1,-0.3 0.2,-0.4 0.1,-0.1 0.1,-0.2 0.1,-0.3 0.1,-0.2 0.2,-0.4 0.3,-0.7 0.1,-0.3 0.3,-0.5 0.5,-0.7 0.2,-0.2 0.4,-0.4 0.6,-0.6 0.2,-0.2 0.5,-0.2 0.8,-0.3 0.1,0.1 0.3,0.1 0.4,0.2 0.1,0 0.2,0.1 0.3,0.2 0.1,0.1 0.1,0.2 0.2,0.4 0,0.2 0.1,0.4 0.1,0.7 0,0 0,0.1 0,0.1 z" id="path50"/>
<path class="st1" d="m 94.1,71.8 c 0,-0.4 0.1,-0.8 0.2,-1.3 0.1,-0.4 0.3,-0.8 0.5,-1.1 0.2,-0.3 0.5,-0.6 0.8,-0.8 0.3,-0.2 0.7,-0.3 1.1,-0.3 0.3,0 0.5,0 0.8,0.1 0.2,0.1 0.4,0.2 0.5,0.4 0.1,0.2 0.3,0.3 0.3,0.5 0.1,0.2 0.1,0.4 0.1,0.6 0,0.3 0,0.5 -0.1,0.8 -0.1,0.2 -0.2,0.5 -0.4,0.6 -0.2,0.2 -0.4,0.3 -0.7,0.5 -0.3,0.1 -0.6,0.2 -0.9,0.2 -0.1,0 -0.3,0 -0.4,0 -0.1,0 -0.2,-0.1 -0.4,-0.1 0,0.1 0,0.1 0,0.1 v 0.1 c 0,0.4 0.1,0.7 0.2,1 0.1,0.2 0.3,0.4 0.4,0.5 0.1,0.1 0.3,0.2 0.4,0.2 0.1,0 0.2,0 0.3,0 0.3,0 0.6,-0.1 0.9,-0.2 0.2,-0.2 0.5,-0.3 0.8,-0.5 0.1,0 0.1,0 0.2,0.1 0.1,0 0.1,0.1 0.2,0.2 0,0.1 0,0.1 0,0.2 0,0 0,0.1 0,0.2 0,0.2 -0.1,0.3 -0.1,0.4 -0.1,0.1 -0.2,0.2 -0.2,0.3 -0.3,0.2 -0.6,0.4 -0.8,0.5 -0.3,0.1 -0.6,0.1 -1,0.1 -0.2,0 -0.4,0 -0.7,-0.1 -0.3,-0.1 -0.5,-0.2 -0.7,-0.3 -0.3,-0.2 -0.5,-0.4 -0.6,-0.6 -0.2,-0.2 -0.3,-0.4 -0.4,-0.6 -0.1,-0.2 -0.1,-0.5 -0.2,-0.7 0,-0.4 -0.1,-0.7 -0.1,-1 z m 2.3,-4.6 c -0.1,0.2 -0.3,0.3 -0.6,0.3 -0.1,0 -0.2,0 -0.3,0 -0.1,0 -0.1,-0.1 -0.1,-0.2 0,-0.1 0.1,-0.3 0.2,-0.6 0.1,-0.3 0.3,-0.5 0.5,-0.8 0.2,-0.2 0.4,-0.6 0.7,-1 0.4,-0.6 0.7,-1 0.9,-1.4 0.2,-0.3 0.4,-0.6 0.5,-0.7 0.1,-0.1 0.2,-0.2 0.3,-0.2 0.2,0 0.3,0.1 0.4,0.2 0.1,0.1 0.1,0.3 0.1,0.5 0,0.3 -0.1,0.7 -0.4,1 -0.3,0.3 -0.5,0.7 -0.8,1.1 z m -0.8,3.7 c 0,0 0.1,0 0.2,0 0.1,0 0.2,0 0.2,0 0.4,0 0.7,-0.1 0.9,-0.3 0.2,-0.2 0.3,-0.4 0.3,-0.7 0,-0.2 0,-0.3 -0.1,-0.4 -0.1,-0.1 -0.2,-0.2 -0.4,-0.2 -0.1,0 -0.2,0 -0.3,0 -0.1,0 -0.2,0.1 -0.2,0.2 0,0.1 -0.1,0.1 -0.2,0.2 -0.1,0.1 -0.1,0.1 -0.2,0.2 -0.1,0.1 -0.1,0.2 -0.1,0.4 -0.1,0.2 -0.1,0.4 -0.1,0.6 z" id="path52"/>
<path class="st1" d="m 100.3,74.4 c 0,-0.1 0,-0.2 0,-0.3 0,-0.2 0,-0.3 0,-0.6 0,-0.2 0,-0.4 0,-0.7 0,-0.2 0,-0.5 0,-0.7 0,-0.2 0,-0.4 0,-0.5 0,-0.2 0,-0.2 0,-0.3 v -0.6 c 0,-0.2 0,-0.5 0,-0.7 0,-0.2 0,-0.5 0,-0.7 v -0.1 c 0,-0.1 0,-0.2 -0.1,-0.3 0,-0.1 -0.1,-0.2 -0.1,-0.3 0,-0.1 0.1,-0.3 0.2,-0.3 0.1,-0.1 0.2,-0.1 0.4,-0.1 0.2,0 0.3,0 0.5,0.1 0.1,0.1 0.2,0.2 0.3,0.3 0.1,0.1 0.1,0.2 0.1,0.4 0,0.1 0,0.3 0,0.4 l 0.1,0.9 c 0.1,-0.1 0.2,-0.2 0.4,-0.4 0.1,-0.2 0.3,-0.4 0.4,-0.6 0.1,-0.2 0.3,-0.4 0.4,-0.6 0.1,-0.2 0.3,-0.3 0.5,-0.5 0.1,0 0.2,-0.1 0.3,-0.1 0.3,0 0.5,0.1 0.6,0.2 0.2,0.1 0.3,0.3 0.4,0.5 0,0.1 -0.1,0.2 -0.2,0.3 -0.1,0.1 -0.2,0.3 -0.3,0.4 -0.1,0.1 -0.3,0.3 -0.4,0.4 -0.1,0.2 -0.3,0.3 -0.4,0.4 -0.2,0.2 -0.3,0.4 -0.5,0.7 -0.2,0.3 -0.3,0.5 -0.5,0.8 -0.1,0.3 -0.2,0.5 -0.3,0.8 -0.1,0.2 -0.1,0.4 -0.1,0.6 0,0.1 0,0.2 0,0.4 0,0.2 0,0.3 0,0.4 0,0.1 0,0.3 0,0.4 0,0.1 -0.1,0.3 -0.1,0.4 -0.1,0.1 -0.2,0.2 -0.3,0.3 -0.1,0.1 -0.3,0.1 -0.4,0.1 -0.2,0 -0.4,-0.1 -0.5,-0.2 -0.4,-0.2 -0.4,-0.3 -0.4,-0.6 z" id="path54"/>
<path class="st1" d="m 107.7,74.2 c 0,0.1 0,0.2 -0.1,0.3 -0.1,0.1 -0.1,0.2 -0.3,0.3 -0.2,0 -0.4,0 -0.5,-0.1 -0.2,0 -0.3,-0.1 -0.4,-0.2 -0.1,-0.1 -0.2,-0.2 -0.3,-0.4 -0.1,-0.2 -0.1,-0.4 -0.1,-0.8 0,-0.2 0,-0.4 -0.1,-0.6 0,-0.2 -0.1,-0.4 -0.1,-0.6 0,-0.6 0,-1.1 -0.1,-1.6 -0.1,-0.5 -0.1,-1.1 -0.1,-1.6 0,-0.2 0.1,-0.4 0.3,-0.5 0.1,0 0.2,-0.1 0.3,-0.1 0.1,0 0.2,0 0.3,-0.1 0.2,0 0.3,0.1 0.4,0.2 0.1,0.1 0.2,0.2 0.2,0.2 0,0.1 0,0.2 0,0.3 0,0.1 0,0.2 0,0.4 0,0.4 0,0.9 0.1,1.4 0.1,0.5 0.1,0.9 0.2,1.4 0.1,0.5 0.1,0.8 0.2,1.2 0,0.4 0,0.7 0.1,0.9 z m -1.5,-9.5 c 0.1,-0.1 0.2,-0.1 0.3,-0.1 0.1,0 0.2,0 0.3,0.1 0.1,0 0.2,0.1 0.3,0.2 0.1,0.1 0.2,0.2 0.2,0.2 0.1,0.1 0.1,0.2 0.1,0.3 0,0.2 -0.1,0.4 -0.2,0.4 -0.1,0.1 -0.3,0.1 -0.4,0.1 -0.1,0 -0.2,0 -0.4,-0.1 -0.1,0 -0.2,-0.1 -0.3,-0.1 -0.1,-0.1 -0.2,-0.1 -0.2,-0.2 -0.1,-0.1 -0.1,-0.1 -0.1,-0.2 0,-0.1 0,-0.3 0,-0.4 0.1,0 0.2,-0.1 0.4,-0.2 z" id="path56"/>
<path class="st1" d="m 114.3,79.8 c 0,0.1 0,0.2 0,0.2 0,0 0,0.1 0,0.2 0,0.2 0,0.4 -0.1,0.5 -0.1,0.1 -0.2,0.3 -0.3,0.4 -0.3,0 -0.5,0 -0.6,-0.1 -0.1,-0.1 -0.3,-0.2 -0.4,-0.4 -0.1,-0.2 -0.1,-0.3 -0.2,-0.5 -0.1,-0.2 0,-0.4 0,-0.6 0,-0.4 0,-0.8 0.1,-1.2 0,-0.4 0.1,-0.8 0.1,-1.2 0,-0.1 0,-0.1 0,-0.2 0,-0.1 0,-0.1 0,-0.3 0,-0.6 0,-1.2 0,-1.8 0,-0.6 0,-1.2 0.1,-1.8 0,0 -0.1,0.1 -0.2,0.3 -0.1,0.2 -0.3,0.4 -0.5,0.6 -0.2,0.2 -0.4,0.4 -0.6,0.5 -0.2,0.2 -0.5,0.2 -0.8,0.2 -0.2,0 -0.3,0 -0.5,-0.1 -0.2,-0.1 -0.4,-0.1 -0.5,-0.3 -0.2,-0.1 -0.3,-0.2 -0.4,-0.4 -0.1,-0.2 -0.2,-0.4 -0.2,-0.6 0,-0.3 0,-0.6 0.1,-0.8 0.1,-0.2 0.1,-0.5 0.2,-0.7 0.1,-0.2 0.2,-0.4 0.4,-0.6 0.2,-0.2 0.3,-0.4 0.6,-0.7 0.2,-0.2 0.4,-0.4 0.6,-0.6 0.2,-0.2 0.4,-0.4 0.7,-0.5 0.2,-0.2 0.5,-0.3 0.7,-0.4 0.2,-0.1 0.5,-0.1 0.7,-0.1 0.1,0 0.1,0 0.2,0 0,0 0.1,0 0.2,0 0.1,0 0.1,0 0.2,0 0.1,0 0.2,0 0.3,0.1 0.1,0 0.2,0.1 0.3,0.1 0.1,0.1 0.1,0.1 0.2,0.2 0,0.1 0,0.2 0.1,0.3 0,0.1 0.1,0.2 0.2,0.3 0,0.1 0,0.2 0,0.2 0,0.1 0,0.2 0,0.2 0,0.1 0,0.3 -0.1,0.4 0,0.1 -0.1,0.3 -0.1,0.4 0,0.2 0,0.5 0,0.9 0,0.4 0,0.7 -0.1,1.1 -0.1,0.4 -0.1,0.9 -0.1,1.3 0,0.5 -0.1,1 -0.1,1.4 0,0.1 0,0.2 0,0.3 0,0.1 0,0.3 0,0.5 0,0.1 0,0.2 0,0.3 0,0.1 0,0.2 0,0.2 v 2.8 z m -1.4,-8.6 c 0.1,-0.1 0.2,-0.3 0.3,-0.5 0.1,-0.2 0.1,-0.4 0.1,-0.5 0,-0.1 0,-0.1 0,-0.2 -0.3,0 -0.6,0.2 -0.9,0.4 -0.3,0.2 -0.6,0.5 -0.9,0.8 -0.3,0.3 -0.5,0.6 -0.7,1 -0.2,0.3 -0.3,0.7 -0.3,0.9 0,0.2 0.1,0.3 0.2,0.3 0.1,0 0.3,-0.1 0.5,-0.2 0.2,-0.2 0.4,-0.4 0.6,-0.6 0.2,-0.2 0.4,-0.5 0.6,-0.7 0.2,-0.2 0.4,-0.5 0.5,-0.7 z" id="path58"/>
<path class="st1" d="m 116.7,69.9 c 0,-0.3 0,-0.6 0,-0.9 0,-0.3 0.1,-0.6 0.2,-0.8 0,0 0,0 0.1,-0.1 0.1,0 0.1,-0.1 0.2,-0.1 h 0.1 0.1 c 0.2,0 0.4,0.1 0.5,0.2 0.1,0.1 0.3,0.3 0.3,0.5 0,0.2 0,0.3 -0.1,0.5 -0.1,0.2 -0.1,0.3 -0.1,0.5 0,0.3 0,0.6 0,0.8 0,0.2 0,0.3 0,0.5 0,0.5 0,1 0.1,1.5 0.1,0.5 0.1,0.8 0.1,1 0.2,0 0.4,-0.2 0.6,-0.5 0.2,-0.3 0.4,-0.6 0.6,-1 0.2,-0.4 0.4,-0.8 0.6,-1.3 0.2,-0.5 0.3,-0.8 0.4,-1.2 0,-0.1 0.1,-0.3 0.1,-0.4 0,-0.1 0,-0.3 0,-0.4 0,-0.1 0.1,-0.2 0.2,-0.3 0.1,-0.1 0.3,-0.1 0.6,-0.1 v 0 0 c 0.1,0 0.2,0 0.3,0.1 0.1,0.1 0.2,0.2 0.3,0.3 0,0.7 0,1.2 -0.1,1.6 -0.1,0.4 -0.1,0.7 -0.1,1 0,0.5 0,1 0.1,1.4 0.1,0.4 0.2,0.7 0.4,0.9 0.1,0.1 0.1,0.2 0.2,0.2 0.1,0 0.1,0.2 0.2,0.3 0,0.1 -0.1,0.2 -0.1,0.3 0,0.1 -0.1,0.1 -0.2,0.1 -0.1,0 -0.1,0 -0.2,0.1 -0.1,0 -0.2,0 -0.2,0.1 -0.2,-0.1 -0.4,-0.2 -0.6,-0.3 -0.2,-0.1 -0.3,-0.3 -0.4,-0.5 -0.1,-0.2 -0.2,-0.4 -0.2,-0.7 0,-0.3 -0.1,-0.5 -0.1,-0.8 l -0.1,0.1 c -0.1,0.2 -0.2,0.4 -0.4,0.8 -0.2,0.3 -0.3,0.6 -0.5,0.9 -0.2,0.3 -0.4,0.6 -0.7,0.8 -0.3,0.2 -0.5,0.3 -0.9,0.3 -0.3,0 -0.6,-0.1 -0.8,-0.2 -0.2,-0.1 -0.3,-0.3 -0.5,-0.6 -0.1,-0.3 -0.2,-0.7 -0.2,-1.1 0,-0.4 -0.1,-1 -0.1,-1.7 0,-0.2 0,-0.3 0,-0.5 0,-0.2 0,-0.3 0,-0.5 v -0.8 z" id="path60"/>
<path class="st1" d="m 123.8,71.8 c 0,-0.4 0.1,-0.8 0.2,-1.3 0.1,-0.4 0.3,-0.8 0.5,-1.1 0.2,-0.3 0.5,-0.6 0.8,-0.8 0.3,-0.2 0.7,-0.3 1.1,-0.3 0.3,0 0.5,0 0.8,0.1 0.2,0.1 0.4,0.2 0.5,0.4 0.1,0.2 0.3,0.3 0.3,0.5 0.1,0.2 0.1,0.4 0.1,0.6 0,0.3 0,0.5 -0.1,0.8 -0.1,0.2 -0.2,0.5 -0.4,0.6 -0.2,0.2 -0.4,0.3 -0.7,0.5 -0.3,0.1 -0.6,0.2 -0.9,0.2 -0.1,0 -0.3,0 -0.4,0 -0.1,0 -0.2,-0.1 -0.4,-0.1 0,0.1 0,0.1 0,0.1 v 0.1 c 0,0.4 0.1,0.7 0.2,1 0.1,0.2 0.3,0.4 0.4,0.5 0.1,0.1 0.3,0.2 0.4,0.2 0.1,0 0.2,0 0.3,0 0.3,0 0.6,-0.1 0.9,-0.2 0.2,-0.2 0.5,-0.3 0.8,-0.5 0.1,0 0.1,0 0.2,0.1 0.1,0 0.1,0.1 0.2,0.2 0,0.1 0,0.1 0,0.2 0,0 0,0.1 0,0.2 0,0.2 -0.1,0.3 -0.1,0.4 -0.1,0.1 -0.2,0.2 -0.2,0.3 -0.3,0.2 -0.6,0.4 -0.8,0.5 -0.3,0.1 -0.6,0.1 -1,0.1 -0.2,0 -0.4,0 -0.7,-0.1 -0.3,-0.1 -0.5,-0.2 -0.7,-0.3 -0.3,-0.2 -0.5,-0.4 -0.6,-0.6 -0.2,-0.2 -0.3,-0.4 -0.4,-0.6 -0.1,-0.2 -0.1,-0.5 -0.2,-0.7 0,-0.4 -0.1,-0.7 -0.1,-1 z m 1.5,-0.9 c 0,0 0.1,0 0.2,0 0.1,0 0.2,0 0.2,0 0.4,0 0.7,-0.1 0.9,-0.3 0.2,-0.2 0.3,-0.4 0.3,-0.7 0,-0.2 0,-0.3 -0.1,-0.4 -0.1,-0.1 -0.2,-0.2 -0.4,-0.2 -0.1,0 -0.2,0 -0.3,0 -0.1,0 -0.2,0.1 -0.2,0.2 0,0.1 -0.1,0.1 -0.2,0.2 -0.1,0.1 -0.1,0.1 -0.2,0.2 -0.1,0.1 -0.1,0.2 -0.1,0.4 0,0.2 -0.1,0.4 -0.1,0.6 z" id="path62"/>
<path class="st1" d="m 134.5,72.4 c 0,-0.6 0,-1.3 0,-2 0,-0.7 0,-1.4 0,-2 0,-0.4 0,-0.8 0,-1.3 0,-0.4 0,-0.9 0,-1.3 0,-0.4 0.1,-0.8 0.1,-1.2 0,-0.4 0.1,-0.7 0.2,-1 0.2,-0.1 0.4,-0.1 0.5,-0.1 0.2,0 0.4,0.1 0.5,0.3 0.1,0.2 0.2,0.4 0.2,0.6 0,0.3 0,0.5 -0.1,0.8 0,0.2 -0.1,0.5 -0.1,0.7 0,0.5 0,1 -0.1,1.4 0,0.4 0,0.8 0,1.2 0,0.4 0,0.8 0,1.2 0,0.4 0,0.8 0,1.2 0.1,-0.3 0.3,-0.6 0.4,-0.9 0.2,-0.3 0.3,-0.5 0.5,-0.8 0.2,-0.2 0.4,-0.4 0.6,-0.5 0.2,-0.1 0.4,-0.2 0.6,-0.2 0.3,0 0.6,0.1 0.8,0.3 0.2,0.2 0.4,0.4 0.5,0.7 0.1,0.3 0.2,0.5 0.2,0.8 0,0.3 0.1,0.5 0.1,0.7 0,0.2 0.1,0.4 0.1,0.6 0,0.2 0,0.4 0.1,0.6 0,0.4 0.1,0.8 0.2,1.1 0.1,0.4 0.2,0.7 0.2,1.1 0,0.1 -0.1,0.2 -0.2,0.3 -0.1,0.1 -0.2,0.1 -0.3,0.1 -0.3,0 -0.5,-0.1 -0.7,-0.4 -0.2,-0.3 -0.3,-0.6 -0.4,-0.9 -0.1,-0.3 -0.1,-0.7 -0.2,-1.1 0,-0.4 0,-0.6 0,-0.8 0,-0.1 0,-0.3 0,-0.5 0,-0.2 -0.1,-0.4 -0.1,-0.6 0,-0.2 -0.1,-0.3 -0.1,-0.5 0,-0.1 -0.1,-0.2 -0.1,-0.2 -0.1,0 -0.3,0.2 -0.4,0.3 -0.1,0.1 -0.2,0.4 -0.3,0.6 -0.1,0.2 -0.2,0.5 -0.3,0.8 -0.1,0.3 -0.2,0.5 -0.2,0.8 -0.1,0.2 -0.1,0.5 -0.2,0.7 -0.1,0.2 -0.1,0.3 -0.1,0.4 v 0.1 0 0 0.1 c 0,0.1 0,0.2 0,0.4 0,0.1 0,0.2 -0.1,0.3 -0.1,0.1 -0.1,0.2 -0.1,0.3 -0.1,0.1 -0.1,0.1 -0.2,0.1 -0.3,0 -0.5,-0.1 -0.7,-0.2 -0.2,-0.1 -0.3,-0.3 -0.4,-0.5 -0.1,-0.2 -0.1,-0.4 -0.1,-0.7 0,-0.2 0,-0.5 0,-0.7 v -0.2 z" id="path64"/>
<path class="st1" d="m 141.1,71.8 c 0,-0.4 0.1,-0.8 0.2,-1.3 0.1,-0.4 0.3,-0.8 0.5,-1.1 0.2,-0.3 0.5,-0.6 0.8,-0.8 0.3,-0.2 0.7,-0.3 1.1,-0.3 0.3,0 0.5,0 0.8,0.1 0.3,0.1 0.4,0.2 0.5,0.4 0.1,0.1 0.3,0.3 0.3,0.5 0.1,0.2 0.1,0.4 0.1,0.6 0,0.3 0,0.5 -0.1,0.8 -0.1,0.2 -0.2,0.5 -0.4,0.6 -0.2,0.2 -0.4,0.3 -0.7,0.5 -0.3,0.2 -0.6,0.2 -0.9,0.2 -0.1,0 -0.3,0 -0.4,0 -0.1,0 -0.2,-0.1 -0.4,-0.1 0,0.1 0,0.1 0,0.1 v 0.1 c 0,0.4 0.1,0.7 0.2,1 0.1,0.2 0.3,0.4 0.4,0.5 0.1,0.1 0.3,0.2 0.4,0.2 0.1,0 0.2,0 0.3,0 0.3,0 0.6,-0.1 0.9,-0.2 0.2,-0.2 0.5,-0.3 0.8,-0.5 0.1,0 0.1,0 0.2,0.1 0.1,0 0.1,0.1 0.2,0.2 0,0.1 0,0.1 0,0.2 0,0 0,0.1 0,0.2 0,0.2 -0.1,0.3 -0.1,0.4 -0.1,0.1 -0.2,0.2 -0.2,0.3 -0.3,0.2 -0.6,0.4 -0.8,0.5 -0.3,0.1 -0.6,0.1 -1,0.1 -0.2,0 -0.4,0 -0.7,-0.1 -0.3,-0.1 -0.5,-0.2 -0.7,-0.3 -0.3,-0.2 -0.5,-0.4 -0.6,-0.6 -0.2,-0.2 -0.3,-0.4 -0.4,-0.6 -0.1,-0.2 -0.1,-0.5 -0.2,-0.7 0,-0.4 -0.1,-0.7 -0.1,-1 z m 1.5,-0.9 c 0,0 0.1,0 0.2,0 0.1,0 0.2,0 0.2,0 0.4,0 0.7,-0.1 0.9,-0.3 0.2,-0.2 0.3,-0.4 0.3,-0.7 0,-0.2 0,-0.3 -0.1,-0.4 -0.1,-0.1 -0.2,-0.2 -0.4,-0.2 -0.1,0 -0.2,0 -0.3,0 -0.1,0 -0.2,0.1 -0.2,0.2 0,0.1 -0.1,0.1 -0.2,0.2 -0.1,0.1 -0.1,0.1 -0.2,0.2 -0.1,0.1 -0.1,0.2 -0.1,0.4 -0.1,0.2 -0.1,0.4 -0.1,0.6 z" id="path66"/>
<path class="st1" d="m 147.2,69.9 c 0,-0.3 0,-0.6 0,-0.9 0,-0.3 0.1,-0.6 0.2,-0.8 0,0 0,0 0.1,-0.1 0.1,0 0.1,-0.1 0.2,-0.1 h 0.1 0.1 c 0.2,0 0.4,0.1 0.5,0.2 0.1,0.1 0.3,0.3 0.3,0.5 0,0.2 0,0.3 -0.1,0.5 0,0.1 -0.1,0.3 -0.1,0.5 0,0.3 0,0.6 0,0.8 0,0.2 0,0.3 0,0.5 0,0.5 0,1 0,1.5 0,0.5 0.1,0.8 0.1,1 0.2,0 0.4,-0.2 0.6,-0.5 0.2,-0.3 0.4,-0.6 0.7,-1 0.2,-0.4 0.4,-0.8 0.6,-1.3 0.2,-0.5 0.3,-0.8 0.4,-1.2 0,-0.1 0.1,-0.3 0.1,-0.4 0,-0.1 0,-0.3 0,-0.4 0,-0.1 0.1,-0.2 0.2,-0.3 0.1,-0.1 0.3,-0.1 0.6,-0.1 v 0 0 c 0.1,0 0.2,0 0.3,0.1 0.1,0.1 0.2,0.2 0.3,0.3 0,0.7 0,1.2 -0.1,1.6 -0.1,0.4 -0.1,0.7 -0.1,1 0,0.5 0,1 0.1,1.4 0.1,0.4 0.2,0.7 0.4,0.9 0.1,0.1 0.1,0.2 0.2,0.2 0.1,0 0.1,0.2 0.2,0.3 0,0.1 -0.1,0.2 -0.1,0.3 -0.1,0.1 -0.1,0.1 -0.2,0.1 -0.1,0 -0.1,0 -0.2,0.1 -0.1,0 -0.2,0 -0.2,0.1 -0.2,-0.1 -0.4,-0.2 -0.6,-0.3 -0.2,-0.1 -0.3,-0.3 -0.4,-0.5 -0.1,-0.2 -0.2,-0.4 -0.2,-0.7 0,-0.3 -0.1,-0.5 -0.1,-0.8 l -0.1,0.1 c -0.1,0.2 -0.2,0.4 -0.4,0.8 -0.2,0.3 -0.3,0.6 -0.5,0.9 -0.2,0.3 -0.4,0.6 -0.7,0.8 -0.3,0.2 -0.5,0.3 -0.9,0.3 -0.3,0 -0.6,-0.1 -0.8,-0.2 -0.2,-0.1 -0.3,-0.3 -0.5,-0.6 -0.1,-0.3 -0.2,-0.7 -0.2,-1.1 0,-0.4 -0.1,-1 -0.1,-1.7 0,-0.2 0,-0.3 0,-0.5 0,-0.2 0,-0.3 0,-0.5 v -0.8 z" id="path68"/>
<path class="st1" d="m 154.6,74.4 c 0,-0.1 0,-0.2 0,-0.3 0,-0.2 0,-0.3 0,-0.6 0,-0.2 0,-0.4 0,-0.7 0,-0.2 0,-0.5 0,-0.7 0,-0.2 0,-0.4 0,-0.5 0,-0.2 0,-0.2 0,-0.3 v -0.6 c 0,-0.2 0,-0.5 0,-0.7 0,-0.2 0,-0.5 0,-0.7 v -0.1 c 0,-0.1 0,-0.2 -0.1,-0.3 0,-0.1 -0.1,-0.2 -0.1,-0.3 0,-0.1 0.1,-0.3 0.2,-0.3 0.1,-0.1 0.2,-0.1 0.4,-0.1 0.2,0 0.3,0 0.5,0.1 0.1,0.1 0.2,0.2 0.3,0.3 0.1,0.1 0.1,0.2 0.1,0.4 0,0.1 0,0.3 0,0.4 l 0.1,0.9 c 0.1,-0.1 0.2,-0.2 0.4,-0.4 0.1,-0.2 0.3,-0.4 0.4,-0.6 0.1,-0.2 0.3,-0.4 0.4,-0.6 0.1,-0.2 0.3,-0.3 0.5,-0.5 0.1,0 0.2,-0.1 0.3,-0.1 0.3,0 0.5,0.1 0.6,0.2 0.2,0.1 0.3,0.3 0.4,0.5 0,0.1 -0.1,0.2 -0.2,0.3 -0.1,0.1 -0.2,0.3 -0.3,0.4 -0.1,0.1 -0.3,0.3 -0.4,0.4 -0.1,0.2 -0.3,0.3 -0.4,0.4 -0.2,0.2 -0.3,0.4 -0.5,0.7 -0.2,0.3 -0.3,0.5 -0.5,0.8 -0.1,0.3 -0.2,0.5 -0.3,0.8 -0.1,0.2 -0.1,0.4 -0.1,0.6 0,0.1 0,0.2 0,0.4 0,0.2 0,0.3 0,0.4 0,0.1 0,0.3 0,0.4 0,0.1 -0.1,0.3 -0.1,0.4 -0.1,0.1 -0.2,0.2 -0.3,0.3 -0.1,0.1 -0.3,0.1 -0.4,0.1 -0.2,0 -0.4,-0.1 -0.5,-0.2 -0.4,-0.2 -0.4,-0.3 -0.4,-0.6 z" id="path70"/>
<path class="st1" d="m 159.6,71.8 c 0,-0.4 0.1,-0.8 0.2,-1.3 0.1,-0.4 0.3,-0.8 0.5,-1.1 0.2,-0.3 0.5,-0.6 0.8,-0.8 0.3,-0.2 0.7,-0.3 1.1,-0.3 0.3,0 0.5,0 0.8,0.1 0.3,0.1 0.4,0.2 0.5,0.4 0.1,0.1 0.3,0.3 0.3,0.5 0.1,0.2 0.1,0.4 0.1,0.6 0,0.3 0,0.5 -0.1,0.8 -0.1,0.2 -0.2,0.5 -0.4,0.6 -0.2,0.2 -0.4,0.3 -0.7,0.5 -0.3,0.2 -0.6,0.2 -0.9,0.2 -0.1,0 -0.3,0 -0.4,0 -0.1,0 -0.2,-0.1 -0.4,-0.1 0,0.1 0,0.1 0,0.1 v 0.1 c 0,0.4 0.1,0.7 0.2,1 0.1,0.2 0.3,0.4 0.4,0.5 0.1,0.1 0.3,0.2 0.4,0.2 0.1,0 0.2,0 0.3,0 0.3,0 0.6,-0.1 0.9,-0.2 0.2,-0.2 0.5,-0.3 0.8,-0.5 0.1,0 0.1,0 0.2,0.1 0.1,0 0.1,0.1 0.2,0.2 0,0.1 0,0.1 0,0.2 0,0 0,0.1 0,0.2 0,0.2 -0.1,0.3 -0.1,0.4 -0.1,0.1 -0.2,0.2 -0.2,0.3 -0.3,0.2 -0.6,0.4 -0.8,0.5 -0.3,0.1 -0.6,0.1 -1,0.1 -0.2,0 -0.4,0 -0.7,-0.1 -0.3,-0.1 -0.5,-0.2 -0.7,-0.3 -0.3,-0.2 -0.5,-0.4 -0.6,-0.6 -0.2,-0.2 -0.3,-0.4 -0.4,-0.6 -0.1,-0.2 -0.1,-0.5 -0.2,-0.7 -0.1,-0.4 -0.1,-0.7 -0.1,-1 z m 1.5,-0.9 c 0,0 0.1,0 0.2,0 0.1,0 0.2,0 0.2,0 0.4,0 0.7,-0.1 0.9,-0.3 0.2,-0.2 0.3,-0.4 0.3,-0.7 0,-0.2 0,-0.3 -0.1,-0.4 -0.1,-0.1 -0.2,-0.2 -0.4,-0.2 -0.1,0 -0.2,0 -0.3,0 -0.1,0 -0.2,0.1 -0.2,0.2 0,0.1 -0.1,0.1 -0.2,0.2 -0.1,0.1 -0.1,0.1 -0.2,0.2 -0.1,0.1 -0.1,0.2 -0.1,0.4 -0.1,0.2 -0.1,0.4 -0.1,0.6 z" id="path72"/>
<path class="st1" d="m 165.6,69.9 c 0,-0.3 0,-0.6 0,-0.9 0,-0.3 0.1,-0.6 0.2,-0.8 0,0 0,0 0.1,-0.1 0.1,0 0.1,-0.1 0.2,-0.1 h 0.1 0.1 c 0.2,0 0.4,0.1 0.5,0.2 0.1,0.1 0.3,0.3 0.3,0.5 0,0.2 0,0.3 -0.1,0.5 0,0.1 -0.1,0.3 -0.1,0.5 0,0.3 0,0.6 0,0.8 0,0.2 0,0.3 0,0.5 0,0.5 0,1 0,1.5 0,0.5 0.1,0.8 0.1,1 0.2,0 0.4,-0.2 0.6,-0.5 0.2,-0.3 0.4,-0.6 0.7,-1 0.2,-0.4 0.4,-0.8 0.6,-1.3 0.2,-0.5 0.3,-0.8 0.4,-1.2 0,-0.1 0.1,-0.3 0.1,-0.4 0,-0.1 0,-0.3 0,-0.4 0,-0.1 0.1,-0.2 0.2,-0.3 0.1,-0.1 0.3,-0.1 0.6,-0.1 v 0 0 c 0.1,0 0.2,0 0.3,0.1 0.1,0.1 0.2,0.2 0.3,0.3 0,0.7 0,1.2 -0.1,1.6 -0.1,0.4 -0.1,0.7 -0.1,1 0,0.5 0,1 0.1,1.4 0.1,0.4 0.2,0.7 0.4,0.9 0.1,0.1 0.1,0.2 0.2,0.2 0.1,0 0.1,0.2 0.2,0.3 0,0.1 -0.1,0.2 -0.1,0.3 -0.1,0.1 -0.1,0.1 -0.2,0.1 -0.1,0 -0.1,0 -0.2,0.1 -0.1,0 -0.2,0 -0.2,0.1 -0.2,-0.1 -0.4,-0.2 -0.6,-0.3 -0.2,-0.1 -0.3,-0.3 -0.4,-0.5 -0.1,-0.2 -0.2,-0.4 -0.2,-0.7 0,-0.3 -0.1,-0.5 -0.1,-0.8 l -0.1,0.1 c -0.1,0.2 -0.2,0.4 -0.4,0.8 -0.2,0.3 -0.3,0.6 -0.5,0.9 -0.2,0.3 -0.4,0.6 -0.7,0.8 -0.3,0.2 -0.5,0.3 -0.9,0.3 -0.3,0 -0.6,-0.1 -0.8,-0.2 -0.2,-0.1 -0.3,-0.3 -0.5,-0.6 -0.1,-0.3 -0.2,-0.7 -0.2,-1.1 0,-0.4 -0.1,-1 -0.1,-1.7 0,-0.2 0,-0.3 0,-0.5 0,-0.2 0,-0.3 0,-0.5 v -0.8 z" id="path74"/>
<path class="st1" d="m 175,71.3 c 0.2,0.4 0.4,0.9 0.6,1.3 0.2,0.4 0.3,0.9 0.3,1.5 0,0.3 0,0.5 -0.1,0.8 -0.1,0.3 -0.2,0.5 -0.4,0.7 -0.2,0.2 -0.4,0.3 -0.6,0.5 -0.2,0.1 -0.5,0.2 -0.8,0.2 -0.2,0 -0.5,-0.1 -0.7,-0.3 -0.2,-0.2 -0.3,-0.4 -0.3,-0.6 0,-0.1 0.1,-0.2 0.1,-0.2 0,0 0.1,-0.1 0.3,-0.1 0.1,0.1 0.3,0.2 0.4,0.2 0.2,0 0.4,-0.1 0.5,-0.3 0.1,-0.2 0.2,-0.4 0.2,-0.6 0,-0.1 0,-0.1 0,-0.2 -0.1,-0.5 -0.3,-1 -0.5,-1.4 -0.2,-0.4 -0.4,-0.8 -0.6,-1.2 -0.2,-0.4 -0.3,-0.7 -0.5,-1 -0.2,-0.3 -0.2,-0.6 -0.2,-1 0,-0.3 0,-0.5 0.1,-0.8 0.1,-0.3 0.1,-0.6 0.2,-0.8 0.1,-0.2 0.3,-0.5 0.4,-0.6 0.1,-0.1 0.4,-0.2 0.7,-0.2 h 0.1 0.1 c 0.1,0 0.2,0.1 0.3,0.2 0.1,0.1 0.1,0.2 0.2,0.3 0,0.1 0,0.2 -0.1,0.2 -0.1,0.1 -0.1,0.1 -0.2,0.2 -0.1,0.2 -0.2,0.4 -0.3,0.6 -0.1,0.2 -0.1,0.4 -0.1,0.7 v 0.4 c 0,0.1 0,0.2 0.1,0.3 0.1,0.1 0.1,0.3 0.2,0.5 0.1,0.2 0.1,0.3 0.2,0.5 0.1,0.2 0.1,0.2 0.2,0.3 z" id="path76"/>
<path class="st1" d="m 177.1,71.8 c 0,-0.4 0.1,-0.8 0.2,-1.3 0.1,-0.4 0.3,-0.8 0.5,-1.1 0.2,-0.3 0.5,-0.6 0.8,-0.8 0.3,-0.2 0.7,-0.3 1.1,-0.3 0.3,0 0.5,0 0.8,0.1 0.2,0.1 0.4,0.2 0.5,0.4 0.1,0.2 0.3,0.3 0.3,0.5 0.1,0.2 0.1,0.4 0.1,0.6 0,0.3 0,0.5 -0.1,0.8 -0.1,0.2 -0.2,0.5 -0.4,0.6 -0.2,0.2 -0.4,0.3 -0.7,0.5 -0.3,0.1 -0.6,0.2 -0.9,0.2 -0.1,0 -0.3,0 -0.4,0 -0.1,0 -0.2,-0.1 -0.4,-0.1 0,0.1 0,0.1 0,0.1 v 0.1 c 0,0.4 0.1,0.7 0.2,1 0.1,0.2 0.3,0.4 0.4,0.5 0.1,0.1 0.3,0.2 0.4,0.2 0.1,0 0.2,0 0.3,0 0.3,0 0.6,-0.1 0.9,-0.2 0.2,-0.2 0.5,-0.3 0.8,-0.5 0.1,0 0.1,0 0.2,0.1 0.1,0 0.1,0.1 0.2,0.2 0,0.1 0,0.1 0,0.2 0,0 0,0.1 0,0.2 0,0.2 -0.1,0.3 -0.1,0.4 -0.1,0.1 -0.2,0.2 -0.2,0.3 -0.3,0.2 -0.6,0.4 -0.8,0.5 -0.3,0.1 -0.6,0.1 -1,0.1 -0.2,0 -0.4,0 -0.7,-0.1 -0.3,-0.1 -0.5,-0.2 -0.7,-0.3 -0.3,-0.2 -0.5,-0.4 -0.6,-0.6 -0.2,-0.2 -0.3,-0.4 -0.4,-0.6 -0.1,-0.2 -0.1,-0.5 -0.2,-0.7 -0.1,-0.4 -0.1,-0.7 -0.1,-1 z m 1.5,-0.9 c 0,0 0.1,0 0.2,0 0.1,0 0.2,0 0.2,0 0.4,0 0.7,-0.1 0.9,-0.3 0.2,-0.2 0.3,-0.4 0.3,-0.7 0,-0.2 0,-0.3 -0.1,-0.4 -0.1,-0.1 -0.2,-0.2 -0.4,-0.2 -0.1,0 -0.2,0 -0.3,0 -0.1,0 -0.2,0.1 -0.2,0.2 0,0.1 -0.1,0.1 -0.2,0.2 -0.1,0.1 -0.1,0.1 -0.2,0.2 -0.1,0.1 -0.1,0.2 -0.1,0.4 -0.1,0.2 -0.1,0.4 -0.1,0.6 z" id="path78"/>
</g></g>
</svg>

After

Width:  |  Height:  |  Size: 38 KiB

View File

@ -0,0 +1,885 @@
---
title: "(Tentative de) mode d'emploi pour une sobriété numérique heureuse"
subtitle: "Brasserie Kerampont à Lannion"
date: 18/07/2023
outputs: ["Reveal"]
reveal_hugo:
custom_theme: themes/blue.scss
custom_theme_compile: true
transition-speed: fast
type: slide
tags: Slide, Présentation
slideOptions:
transition: slide
showNotes: true
---
<style>
.container {
position:fixed;
overflow-y: hidden;
}
figure img {
width: 65%;
}
figure img.small {
width: auto;
}
img {
max-width: 100%;
}
figure figcaption {
margin-top: 1rem;
font-size: 1rem;
}
.mosaic {
display: flex;
align-items: center;
justify-content: center;
}
/*
.mosaic figure img {
max-height: 10cm;
max-width: 10cm;
}*/
footer {
font-size: 2rem;
margin-top: 8rem;
}
img {
border: none!important;
background: transparent!important;
box-shadow: none!important;
}
.speaker-controls-notes {
font-size: 1em;
}
.reveal blockquote {
width: auto;
}
</style>
{{< slide class="bottom" background="./fr_Pepper-and-Carrot_by-David-Revoy_E22P01-1-1_YC0QEfF.png" >}}
## <small>(Tentative de)</small><br>mode d'emploi pour une sobriété numérique heureuse<br><br>
# 😇
<footer>
Brasserie Kerampont
Le 18 juillet 2023
</footer>
---
### co-fondateur de RésiLien
<p>
<img src="6ae3eaf8507f5516909a4f10f.svg" title="RésiLien" style="width: 250px">
</p>
<small>
[https://resilien.fr](https://resilien.fr)
</small>
<small><small>Collectif des Hébergeurs Alternatifs, <br>Transparents, Ouverts, Neutres et Solidaires 🐈</small></small><!-- .element: class="fragment" -->
<aside class="notes">
cofondateur avec Simon de RésiLien un fournisseur de services numériques open source. Nous expérimentons autour de la sobriété numérique en gérant une infrastructure décentralisée, dont les données sont au plus proches des clients, fonctionnant sur des serveurs reconditionnés et basse-consommation. Nous proposons des solutions telque la mise en place d'espace de collaboration
Nous avons intégré les CHATONS en décembre 2021, si vous ne les connaissez pas, n'hésitez pas à aller voir [leur site](https://chatons.org).
---
## La pollution<br>numérique
<aside class="notes">
Je vais vous parler d'un sujet qui nous tient à coeur et dont nous nous efforcons de relayer « La polution du numérique », nous verrons ensuite comment les lowtechs peuvent permettre d'éviter un gastilliage des technologies puis nous mettrons en avant quelques initiatives intéressantes.
---
## Quelques chiffres<br>sur le climat
# 🌦️
----
### Le réchauffement climatique
<figure>
<img src="33a0b9e8faf8ec74e9db52500.png" alt="Emissions Gap Report 2020 de United Nations Environment Programme" width=50%/>
<figcaption aria-hidden="true">Écarts démissions entre les trajectoires actuelles, les engagements actuels et les scénarios à +1,5°C et + 2°C. <a href="https://www.unep.org/emissions-gap-report-2020">Source : UNEP, Emissions Gap Report 2020</a></figcaption>
</figure>
<aside class="notes">
J'imagine que vous êtes au courant que nous vivons actuellement une période de [réchauffement climatique](https://www.notre-environnement.gouv.fr/themes/climat/article/comprendre-le-changement-climatique) accélérée par les activités humaines. Ce sont notamment les gaz à effet de serre dont le [CO~2~](https://www.notre-environnement.gouv.fr/themes/climat/article/les-emissions-de-gaz-a-effet-de-serre-et-l-empreinte-carbone#en-bref-1) qui accélèrent ce réchauffement.
La COP21 en 2015 avait fixé pour objectif de ne pas dépasser un réchauffement de 1,5°C et de rester nettement en dessous 2°C, pour éviter les catastrophes météorologiques, des secheresses important posant problèmes sur l'agriculture.
L'UNEP, un organisme des Nations Unis, a modélisé en 2020 plusieurs scénarios possibles dont on peut voir les courbes sur le graphique. Comparons les. [lire les légendes des courbes]
CDN : Les contributions déterminées au niveau national sont des plans nationaux non contraignants mettant en évidence les actions climatiques, y compris les objectifs liés au climat pour la réduction des émissions de gaz à effet de serre, les politiques et les mesures que les gouvernements visent à mettre en œuvre en réponse au changement climatique et en tant que contribution.
Pour résumer, nous sommes loin de réduire la quantité d'émissions de CO~2~e et de respecter les engagements de la COP21 pour limiter le réchauffement climatique. Devrions nous pas commencer à réfléchir à des plans contraignants ?
----
### Confinements de 2020
<figure>
![](33a0b9e8faf8ec74e9db52502.png)
<figcaption aria-hidden="true">
<a href="https://www.iea.org/articles/global-energy-review-co2-emissions-in-2020">IEA (2021), Global Energy Review: CO2 Emissions in 2020, IEA, Paris</a>
</figcaption>
</figure>
<aside class="notes">
Nous allons tout de même essayer de positiver.
D'après l'Agence Internationale de l'Énergie, les émissions de CO~2~ provenant de la génération d'énergie (charbon, gaz et pétrole) ont décliné de 5.8% en 2020 par rapport à 2019 avec 31.5 Gt CO~2~.
La plus grande baisse jamais observée depuis la Seconde Guerre Mondiale.
On retrouve ce niveau d'émission de CO~2~ en 2012 avec 31.6 Gt CO~2~.
On voit bien quand changeant notre façon de vivre nous pouvons avoir un impact important sur certaine émission même si il faudrait aller bien plus loin.
----
### La part du numérique
<figure>
![](33a0b9e8faf8ec74e9db52503.jpg)
<figcaption aria-hidden="true">
<a href="https://theshiftproject.org/article/pour-une-sobriete-numerique-rapport-shift/">Évolution 2013-2025 de la part du numérique dans les émissions de GES mondiales. Source : (The Shift Project, 2018)</a>
</figcaption>
</figure>
<aside class="notes">
Revenons au sujet du numérique,
en 2019, il représenterai entre 3 et 4% des émmisions de gaz à effet de serre mondiale ce qui équivaut au transport aérien civil mondiale.
Une des problématiques est l'accélération de l'utilisation du numérique avec une tendance compris entre +6 et +8%/an.
The Shift Project a mis en avant des solutions de sobriété permettant de réduire cet impact, je vous conseille d'aller lire [les rapports](https://theshiftproject.org/lean-ict/).
----
### Les domaines <br>de pollution du numérique
<figure>
![« Impacts environnementaux du numérique en France » - Collectif dexperts - 23 juin 2020. Source : GreenIT.fr](33a0b9e8faf8ec74e9db52504.png)
<figcaption aria-hidden="true">
[« Impacts environnementaux du numérique en France » - Collectif dexperts - 23 juin 2020. Source : GreenIT.fr](https://www.greenit.fr/wp-content/uploads/2020/06/2020-06-iNum-etude-impacts-numerique-France-rapport.pdf)
</figcaption>
</figure>
<aside class="notes">
La pollution du numérique se fait principalement lors de la création du matériel et non de son utilisation, c'est pourquoi il faut garder le plus longtemps possible son matériel informatique tout en réduisant ses équipements.
Par exemple cet ordinateur va féter ses 11 ans en juin, je l'utilise tous les jours et il fonctionne très bien. Vous pouvez le retrouver sur internet d'occasion (presque neuf) pour seulement 250€... pourquoi acheter du neuf pas conçu pour durer.
Précision concernant les ressources minières : *Cet indicateur de contribution à lépuisement des ressources abiotiques ne prend en compte que les ressources « matière ». Lénergie fossile, qui est aussi une ressource abiotique, nest pas prise en compte. En revanche, le pétrole, sil est utilisé pour fabriquer du plastique, est par exemple pris en compte.*
Explication du tableau :
- FAB : Fabrication
- USE : Utilisation
- 41% de l'énergie est consommée au moment de la fabrication des appareils numériques. Dont :
- 37% de l'énergie consommée pour la fabrication des terminaux utilisateurs (ordiphone, ordinateur portable, tablette, etc.)
- 2% de l'énergie consommée pour la fabrication des appareils de réseaux (routeurs)
- 2% de l'énergie consommée pour la fabrication des appareils des centres informatiques (serveurs)
59% de l'énergie est consommée au moment de l'utilisation des appareils numériques. Dont :
- 27% au moment de l'utilisation des terminaux utilisateurs
- 19% au moment de l'utilisation des appareils réseau
- 13% au moment de l'utilisation des appareils des centres informatiques
- 83% des Gaz à Effet de Serre (GES) sont émis au moment de la fabrication des appareils numériques.
- 17% des GES sont émis au moment de l'utilisation
- 88% de l'eau est consommée au moment de la fabrication
- 12% de l'eau est consommée au moment de l'utilisation
- 100% des ressources minières sont consommées au moment de la fabrication
---
## Des réalités
# 🧐
<aside class="notes">
OK vous aviez peut être déjà vu ses chiffres mais finalement ça correspond à quoi exactement ?
----
### L'extraction des ressources
<div class="mosaic">
![Jubilee Mine - 6.500 tonnes de cuivre. Source : http://dillonmarsh.com/copper05.html](33a0b9e8faf8ec74e9db52505.jpg)
![Les enfants portent de lourds sacs de cobalt, à Kolwezi (RDC). Crédits : Sebastian Meyer/Corbis via Getty Images](33a0b9e8faf8ec74e9db52506.jpg)
<!-- .element: class="fragment" -->
</div>
<aside class="notes">
Notre matériel numérique contient beaucoup de ressources et de terres rares telles que le cobalt et le cuivre.
D'où proviennent ces ressources ?
Sur cette première image artistique, nous pouvons comparer le volume de la sphère représentant la quantité de cuivre extrait avec le trou de la mine.
Dans la seconde image nous voyons un enfant portant un sac de cobalt en République Démocratique du Congo d'ou proviendrai la moitier du cobalt selon [Amnesty International](https://www.amnesty.fr/responsabilite-des-entreprises/actualites/defi-produire-des-batteries-ethiques). Il y aurait plus de 40 000 enfants dans leurs mines...
----
### Fabrication des terminaux
<div class="mosaic">
![Ligne de fabrication dans une usine de Foxconn. Crédits : Ouest-France](33a0b9e8faf8ec74e9db52507.jpg)
![Des filets anti-suicide dans les usines de Foxconn. Crédits : RTS.ch](33a0b9e8faf8ec74e9db52508.jpg)
</div>
<small>
Documentaire « [Foxconn, La face cachée d'Apple](https://invidious.fdn.fr/watch?v=YNJjkUI36qo) » sortie en 2012.
Y a t'il eu des grands changements depuis ?
</small>
<aside class="notes">
Après l'extraction inhumaine, avec ses deux photos, nous voulions mettre en avant les conditions de la fabrication de nos terminaux, avec des cadences infernales et des usines semi-prison. Nous avons fêté les 10 ans du documentaire autour de la face cachée d'Apple et ses usine Foxconn
Vous avez toujours envie du dernier téléphone surpuissant ?
----
### Matériel numérique recyclé ?
![Décharge à Agbogbloshie (Ghana). Source : Wikipédia](33a0b9e8faf8ec74e9db5250b.JPG)
<aside class="notes">
Nous pourrions penser que notre matériel électronique est bien recyclé lorsque nous le déposons dans un centre spécialisé. Cependant la plupart du temps, il arrive dans des décharges à ciel ouvert telles qu'au Ghana où le recyclage se fait de manière artisanale en brûlant les objets et sans protection.
Cette décharge a [été rasée en été 2021](https://www.muntaka.com/agbogbloshie-demolition/), mais d'autres du même type existent toujours.
Le recyclage n'est pas vraiment possible, par contre sa réparation est bien moins problématique. Les acteurs français se mette en place : https://e-reparation.org/
----
### « Cloud » : numérique dématérialisé ?
<div class="mosaic">
![Carte mondiale des câbles sous-marin. Source : Telegeography](33a0b9e8faf8ec74e9db52509.png)
![Centre de données d'OVH à Strasbourg après l'incendie du 10 mars 2021. Source : actu.fr/grand-est](33a0b9e8faf8ec74e9db5250a.jpg)
</div>
<aside class="notes">
Le numérique n'est pas immatériel. Nous avons besoin [de câbles sous-marin](https://www.submarinecablemap.com/) par exemple pour relier les continents. Ceux-ci nécessitent des navires spécialisés pour être installés et bousculent les fonds marins.
L'incendie chez OVH en mars 2021 et la perte des données qui en a découlé a bien montré que le monde physique pouvait impacter le monde virtuel.
----
### Un exemple de l'impact de l'environnement sur le numérique
<figure>
![Source : Bloomberg](33a0b9e8faf8ec74e9db5250c.png)
<figcaption>
[Grande sécheresse et fabrication de semi-conducteurs à Taïwan :](https://twitter.com/AsWalterRobin/status/1376499574970449921)
- Pénurie de microprocesseurs pour les voitures, consoles de jeux, etc.
- Arbitrage entre production de matériel et disponibilité de l'eau pour la population<br/>
Source : Bloomberg
</figcaption>
</figure>
<aside class="notes">
L'environnement peut aussi avoir un impact sur le numérique.
Taïwan subit régulièrement des typhons qui remplissent aussi ses réserves d'eau. Par l'absence de typhons, les réserves d'eau de Taïwan se sont amoindries. Hors, l'eau est utilisé par les agriculteurs mais aussi par les usines de fabrication de semi-conducteurs.
Taïwan a dû réguler la consommation des réserves et faire réduire la vitesse de production des semi-conducteurs. Cela a créé une pénurie pour les microprocesseurs de voitures, consoles de jeux, etc.
Vous en avez entendu parlé j'imagine l'année dernière ?
---
## D'autres aspects<br>négatifs du numérique
# 🤔
<aside class="notes">
Nous avons décrit l'impact environnemental du numérique et il y a encore d'autres aspects négatifs.
----
### Des anomalies qui sont<br>l'exception ou la règle ?
<div class="mosaic">
<figure>
<img src="33a0b9e8faf8ec74e9db5250e.png" alt="Extrait d'un article à propos de la start-up Juicero." width=50% />
<figcaption aria-hidden="true"><a href="https://www.lemonde.fr/pixels/article/2017/09/02/juicero-la-start-up-devenue-la-risee-de-la-silicon-valley-ferme-ses-portes_6003361_4408996.html">Extrait d'un article à propos de la start-up Juicero.</a> <br/> Source : Le Monde
</figcaption>
</figure>
<figure>
<img src="33a0b9e8faf8ec74e9db5250f.png" alt="Extrait d'un article à propos d'une caméra connectée piratée" width=50% />
<figcaption aria-hidden="true"><a href="https://www.ouest-france.fr/leditiondusoir/2019-12-13/il-terrifie-une-fillette-en-piratant-une-camera-connectee-installee-dans-sa-chambre-08742bc3-16d4-48b1-9e44-a25803e94f7d">Extrait d'un article à propos d'une caméra connectée piratée</a>. <br/> Source : Ouest France
</figcaption>
</figure>
</div>
<aside class="notes">
XXX Mettre à jour les articles ? Une sur l'IA ?
Voici 2 articles parmi tant d'autre,
La première correspond à une startup commercialisant une machine ultra perfectionnée à 400 $ pour presser une brique plastique contenant du jus, elle espérait répliquer le succès ahurissant de Nespresso... alors qu'un fruit peut être presser à la main...
Autre article concernant les objets connectés qui sont très peu sécurisées. Ici une illustration que ces caméras peuvent être piratées par n'importe qui et utilisées pour n'importe quel usage. Je sais pas si vous connaissez le site permettant de voir plus de [70 000 caméra piraté dans le monde](https://www.undernews.fr/reseau-securite/un-site-russe-permet-dacceder-a-70-000-cameras-video-non-securisees.html).
----
### Enjeux sociaux, politiques et économiques
<small>
Quelques sujets parmi d'autres, trop longs à aborder maintenant :
- [Économie de l'attention :](https://www.liberation.fr/societe/2014/09/26/le-capitalisme-entraine-une-crise-de-l-attention_1109327/) addicts à nos écrans
- [Surveillance de masse :](https://www.franceculture.fr/emissions/lsd-la-serie-documentaire/a-lere-de-la-surveillance-numerique-44-echapper-a-la-surveillance) reconnaissance faciale et restriction des libertés
- [Illectronisme :](https://fr.wikipedia.org/wiki/Illectronisme) inégalité d'accès face au numérique
- [Capitalisme de surveillance :](https://www.monde-diplomatique.fr/2019/01/ZUBOFF/59443) algorithmes et prédiction des comportements
- [Concentration des ressources :](https://www.cairn.info/article.php?ID_ARTICLE=COMLA_188_0061) oligopole des GAFAM et consorts sur Internet
- [Travailleurs du clic :](https://www.franceculture.fr/emissions/la-vie-numerique/les-travailleurs-du-clic-ces-humains-caches-dans-les-machines) les humains au service de la machine
</small>
<aside class="notes">
XXX Une petite illustration par sujet ? Deux diapositives de trois illustrations chacune ?
Nous avons pris le temps de détailler quelques impacts environnementaux et sociaux mais il existe de multiples autres impacts.
Comme nous ne pouvons pas prendre le temps de tout détailler, nous avons listé dans cette diapositive quelques sujets dont vous avez probablement déjà connaissance pour certains.
N'hésitez pas à revenir sur cette présentation qui sera disponible depuis notre blog sur https://resilien.fr
----
## Pas très <br>réjouissant tout ça
# 😱
<aside class="notes">
On est d'accord que ce n'est pas très réjouissant tout ça, vous avez toujours envie de numérique ? et bien moi oui, parce qu'il ne faut pas oublier non plus que le numérique permet de nombreux bénéfices dans la santé, le partage de connaissance, la facilité de collaboration à travers le monde... si on veut que ce numérique là persiste, il faut absolument l'utiliser à son strict minimum. C'est donc pour interpeler et être au courant de ses impacts en essayant de réfléchir si la solution que l'on veut utiliser ou créer à un impact plus que positif.
---
## Et si on cherchait<br>à changer vraiment ?
# &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;💭<br>🤠
<aside class="notes">
Et si on cherchait à changer vraiment notre rapport aux hautes technologie (high-tech) et qu'on mettait en avant les objets low-tech auto-construisable open source voir avec des matériaux locaux ?
Imaginons une vie plus sobre, plus lente, avec une meilleure connexion à la nature plutôt qu'à internet tout en concervant du hightech pour des sujets vitaux (santé, transport, communication, partage de connaissance...).
Coopérons ensemble, participons à des communs comme le libre peut le faire pour faire évoluer nos organisations.
---
## Vive les Low-Tech
# 🤙
<small>
- Utile : besoins essentiels à lindividu ou au collectif<!-- .element: class="fragment" -->
- Accessible : cout adapté, fabriquée et/ou réparée localement<!-- .element: class="fragment" -->
- Durable : optimiser les impacts tant écologiques que sociaux ou sociétaux<!-- .element: class="fragment" -->
</small>
<aside class="notes">
Mais qu'est ce que les lowtech ? Je vais vous lire la définition du [Low-tech Lab](https://lowtechlab.org) un des acteurs avec la plus grande communauté en France :
> Au Low-tech Lab, nous employons le terme low-tech pour qualifier des objets, des systèmes, des techniques, des services, des savoir-faire, des pratiques, des modes de vie et même des courants de pensée, qui intègrent la technologie selon trois grands principes : Utile. Accessible. Durable.
Je complèterai avec une phrase tirée de [Wikipédia](https://fr.wikipedia.org/wiki/Low-tech) :
> La low-tech n'est pas une démarche technophobe mais bien technocritique, elle pose la question du juste dosage technologique. Autrement dit, en opposition à lobsession de la high-tech, cette démarche incite avant tout au techno-discernement.
----
## Quelques exemples
# 😍
<aside class="notes">
Nous allons voir quelques exemples
----
#### Je vous sers un café ? ☕
<div class="mosaic">
<figure>
<img src="6453ec7f116790b8cf95c410a.jpg" alt="Photo d'une cafetière à piston" width=50% />
<figcaption aria-hidden="true">Photo d'une cafetière à piston. <br/> Crédit : Valentina Dominguez via Unsplash
</figcaption>
</figure>
<figure class="fragment">
<img src="6ae3eaf8507f5516909a4f101.jpg" alt="Photo d'une machine à café à capsules" width=50% />
<figcaption aria-hidden="true">Photo d'une machine à café à capsules. <br/> Crédit : Hiago Italo via Pexels
</figcaption>
</figure>
</div>
<aside class="notes">
De mon point de vue c'est l'exemple le plus parlant.
D'un coté nous avons une cafetière à piston. L'objet est design, simple à laver, démontable, les pièces se vendent séparément. Particulièrement efficace pour profiter d'un bon café entre amis, dans un moment de partage. On peut s'amuser avant à moudre le café avec un moulin pour les plus passionné et avoir vraiment toutes les saveurs des grains.
De l'autre, vous avez une machine avec du numérique, poluante à fabriquer, utilisant des capsules en aluminium jetable (l'environnement Nestlé ils connaissent ?) pour se servir un café indivuduel très rapidement...
Est ce que réellement on profite de son café ? A chaque fois que l'on m'en sert un, en tout cas, j'ai de l'amertume voir je refuse avant que l'on me le fasse.
----
#### Le four solaire
<div class="mosaic">
<figure>
<img src="6ae3eaf8507f5516909a4f108.jpg" alt="Image d'un four solaire par le Low Tech Lab" width=50% />
<figcaption aria-hidden="true"><a href="https://wiki.lowtechlab.org/wiki/Four_solaire_(cuiseur_type_bo%C3%AEte)">Image d'un four solaire par le Low Tech Lab</a>. <br/> Crédit : Low Tech Lab
</figcaption>
</figure>
<figure>
<img src="6ae3eaf8507f5516909a4f109.JPG" alt="Logo du Low Tech Lab" width=50% />
<figcaption aria-hidden="true">Logo du Low Tech Lab</a>. <br/> Crédit : Low Tech Lab
</figcaption>
</figure>
</div>
<aside class="notes">
Cette objet permet de cuisiner avec l'énergie gratuite du soleil.
Clairement, la on va un peu plus loin puisque ça demande un changement de comportement, il faut préparer son repas le matin pour qu'a 13h celui ci soit bien cuit. Vu que c'est une cuisson à faible température on peut monter à 120°.
Ce four est autoconstruisable vous retrouverez les plans sur le lien vers le wiki du Low-Tech Lab.
----
#### La Chtit-bine
<div class="mosaic">
<figure>
<img src="6ae3eaf8507f5516909a4f10a.jpg" alt="Photo d'une Chtit-bine" width=50% />
<figcaption aria-hidden="true">Photo d'une Chtit-bine. <br/>Crédit : L'Atelier Paysan
</figcaption>
</figure>
<figure>
<img src="6453ec7f116790b8cf95c4104.png" alt="Logo de L'atelier Paysan" width=50% />
<figcaption aria-hidden="true">Logo de L'atelier Paysan. <br/>Crédit : L'Atelier Paysan
</figcaption>
</figure>
</div>
<aside class="notes">
La [Chtit-bine](https://latelierpaysan.org/Chtit-bine) est un porte-outil automoteur électrique, pouvant être autonome en énergie grâce à des panneaux solaires. Sa conception a été pensée pour être utilisé en lit de désherbage ou en porte outil pour le binage. Cet outil polyvalent offre une alternative au tracteur pour tous les travaux légers, et les rend bien plus ergonomique.
Les plans sont Open Source et fourni par l'Atelier Paysan un acteur incontournable des machines lowtech futuristes dans l'agriculture.
---
### Numérique « Low-Tech » ?<br>Nous expérimentons
# 🔎
<aside class="notes">
C'est compliqué de parler de lowtech dans le numérique, vu que l'on se base sur de l'électronique avec de nombreuses étapes comme nous l'avons vu dans la première partie.
Nous pouvons parler de sobriété numérique, d'éco-conception. Il faut donc réfléchir lors de la création d'un outil comme pour les objets lowtech aux 3 questions : l'utilité, l'accessibilité et la durabilité.
Chez RésiLien nous expérimentons les concepts du numérique responsable nous voudrions vous présenter certaines concepts que nous utilisons et l'on mettra en avant certaines initiatives.
----
#### La sobriété matérielle
<div class="mosaic">
<figure>
<img src="RasperryPi_Violet_ResiLien_hu8588c6771877e2446e47bef26e48e1c0_289887_1040x0_resize_q100_h2_box.webp" alt="Raspberry Pi" width="500">
<figcaption aria-hidden="true">Un de nos Raspberry Pi 4.
</figcaption>
</figure>
<aside class="notes">
Voici un ordinateur à faible consommation énergétique. Il s'agit du Raspberry Pi 4 un ordinateur pas comme les autres mais suffisamment puissant pour une utilisation bureautique ou autres. Chez RésiLien nous l'utilisons comme serveur pour faire de l'hébergement de service web depuis 3 ans. C'est un micro ordinateur qui coute moins de 100€ avec toutes les connectivités qu'il faut.
Privilégier du matériel qui consomme peu d'énergie électrique permet de réduire son empreinte énergétique mais aussi d'augmenter l'autonomie des appareils lors que l'on est sur un réseau électrique autonome comme sur un voilier, camping-car ou les maisons autonomes.
----
### Le réemploi
- Le Bon Coin
- Backmarket
<aside class="notes">
Le réemploi évite la production de matériel numérique qui est la source de pollution la plus importante comme on l'a vu. De nombreux services en ligne permettent l'achat de matériel informatique d'occasion comme Le Bon Coin, BackMarket
Chez RésiLien on n'achète beaucoup en seconde main.
Mais ne pourrions nous pas aller plus loin ?
----
[![FairTech](6453ec7f116790b8cf95c4105.png)](https://fairtec.io/)
<aside class="notes">
FairTEC, est un collectif dacteurs engagés au service de la sobriété numérique. leur constat :
> Avec 1,4 milliard de smartphones vendus chaque année et seulement 15% réutilisés ou recyclés, les smartphones sont responsables dune partie significative de l'impact du numérique.
Commown, TeleCoop et e fondation sont français, Fairphone est un constructeur néerlandais.
Le matériel électronique en location, comme le fait Commown. Qui est une coopérative de l'électronique sobre et engagée Mutualiser pour faire durer !. Finalement on se
le seul téléphone avec 5 ans de garantie, est un téléphone réparable et réflchi en modularité pouvant faire évoluer qu'une seul partie du matériel
Les systèmes d'exploitation Open Source permettent une meilleure compatibilité avec du matériel ancien. Vous pouvez résusciter un ordinateur juste en installant un linux.
Un focus sur FairTech. FairTech est un Collectif dacteurs engagés au service de la sobriété numérique
On retrouve en France ses 4 initiatives :
- Fairphone : Un smartphone durable, produit dans des conditions respectueuses des Hommes et de la planète et facilement réparable de part sa conception et la disponibilité des pièces détachées.
- TeleCoop : Un opérateur télécom coopératif qui vous permet de ne payer que les données mobiles que vous consommez réellement pour reprendre la main sur votre consommation mobile.
- /e/OS : Un système dexploitation open-source, respectueux de votre vie privée et interopérable avec vos applications mobiles habituelles.
- Commown : Un service coopératif de location de matériel électronique. Commown ne vendra jamais ses Fairphone et fera donc tout pour les réparer et les (re)louer le plus longtemps possible.
----
#### Les logiciels libres
<figure>
<img src="6ae3eaf8507f5516909a4f106.svg.png" alt="Logo du projet GNU" width="50%" class="small" />
<figcaption aria-hidden="true">Logo du projet GNU. <br/>Crédit : Aurelio A. Heckert
</figcaption>
</figure>
<aside class="notes">
Les logiciels et le matériel open source et libres peuvent être modifiés de sorte à permettre leur réappropriation. Les logiciels peuvent être mis à jour pour perdurer sur du matériel ancien. Les systèmes peuvent être adaptés aux besoins de sorte à être utiles et conviviaux. Ils permettent l'empouvoirement.
empouvoirement : lautonomisation des individus et des collectifs dans les décisions qui les concernent
----
#### Le minimalisme
<div class="mosaic">
<figure>
<img src="6ae3eaf8507f5516909a4f10b.jpg" alt="Image d'un CD" width=50% />
<figcaption aria-hidden="true">Pour écouter de la musique :
Youtube vs Deezer vs CD. <br/>Crédit : Ubern00b via Wikipédia
</figcaption>
</figure>
<figure>
<img src="6ae3eaf8507f5516909a4f10c.png" alt="Capture d'écran de Gemini dans Lagrange" width=50% />
<figcaption aria-hidden="true">Pour consulter du contenu textuel :
Protocole Gemini. <br/>Crédit : https://github.com/skyjake/lagrange
</figcaption>
</figure>
</div>
<aside class="notes">
Nous repensons nos usages. Par exemple pour la musique. Il est possible d'en écouter sur la plateforme vidéo Youtube. Cependant on utilise de la bande passante pour de la vidéo alors que nous avons besoin seulement de l'audio. Un service comme Deezer est plus approprié car il ne transfert que les données audio que nous avons besoin. Mais nous pouvons encore aller plus loin en revenant au Compact Disc. En faisant ce pas, nous apprécions mieux la valeur de ce que nous écoutons car paraissant plus rare. Les plateformes de contenu nous ont habitué à l'abondance et nous font considérer la musique comme d'une commodité. En bonus, le CD peut être lu sans avoir besoin de connexion Internet.
Un autre exemple concernant le contenu textuel. Le Web aujourd'hui véhicule beaucoup plus d'informations que seulement du texte. Gemini est un protocole alternatif plus simple et limité qui remet le contenu en avant. N'ayant que le contenu à transférer, pas de forme, son utilisation est plus légère et consomme moins de ressources. Il s'agit plutôt d'un media orienté lecture même s'il est possible d'écrire aussi. Sa conception est telle qu'aujourd'hui on prend plus de temps pour consulter son contenu, de manière plus apaisée.
----
#### Le partage local d'information
<div class="mosaic">
<figure>
<img src="6ae3eaf8507f5516909a4f107.png" alt="Capture d'écran d'Oasis, un client Scuttlebutt" width=50% />
<figcaption aria-hidden="true">Capture d'écran d'Oasis, un client Scuttlebutt.
</figcaption>
</figure>
<figure>
<img src="6ae3eaf8507f5516909a4f10d.jpg" alt="Capture d'écran de Gemini dans Lagrange" width=50% />
<figcaption aria-hidden="true">Photo d'une installation de CLIC!. <br/>Crédit : 12b Fabrice Bellamy
</figcaption>
</figure>
</div>
<aside class="notes">
Vous est-il arrivé de penser que c'était étrange de travailler à plusieurs, depuis le même endroit, sur un document collaboratif de type OnlyOffice (ou Google Docs) qui est hébergé sur un serveur distant ? Avec ces technologies, la collaboration ne marche plus sans Internet alors que toutes les personnes sont dans les mêmes locaux. Nous sommes intéressés par la possibilité de se réapproprier le local avec nos outils.
Par exemple CLIC, ou une PirateBox, est un outil permettant de stocker dessus des documents localement qui sont alors disponibles à toutes autres personnes présentes. Pas besoin d'Internet pour fonctionner. Le système fonctionne à un niveau local.
Autre exemple, le protocole Scuttlebutt. Il a pour particularité de propager des messages de manière décentralisée et asynchrone. Son concepteur souhaitait communiquer avec d'autres personnes depuis son voilier. La diffusion des messages se fait par Internet, Bluetooth et aussi par clé USB. Les personnes utilisant Scuttlebutt se relaient les messages de main en main afin de diffuser les messages. Ce réseau est résilient à la déconnexion.
----
#### L'outil au service du cœur du métier
<figure>
<img src="6ae3eaf8507f5516909a4f10e.png" alt="Illustration du code couleur pour les médicaments" width=50% class="small" />
<figcaption aria-hidden="true">Illustration du code couleur pour les médicaments. Crédits : P4pillon.org</figcaption>
</figure>
<aside class="notes">
Les logiciels de pharmacie actuels privilégient l'affichage de données concurrentielles afin d'aider les officines à ajuster leurs prix, cependant elles intègrent peu de fonctionnalités logistiques. L'outil P4pillon propose des fonctionnalités pour aider au métier de la pharmacie au quotidien. Par exemple il peut prévoir la demande en médicaments et de consolider les stocks sans avoir pour autant besoin d'un grand hangar. Son but est de permettre le réapprovisionnement des pharmacies à une fois par semaine au lieu de plusieurs fois par jour actuellement. Un exemple d'une technique low-tech : l'utilisation d'un code couleur dans le logiciel et sur un calendrier papier pour gérer les stocks de médicaments.
Explication de « l'effet P4pillon » :
Pour enclencher un effet papillon, nous nous focalisons sur les "conditions initiales" du métier de pharmacien. Considérer les ordonnances des médecins en multiple de semaines permet de s'appuyer sur une temporalité stable sur laquelle bâtir un algorithme de parcours de soins pharmaceutique.
Les patients fidélisés atteints de pathologies chroniques nécessitent une dispensation de leur traitement toutes les 4 semaines. Un système de code couleur nous permet dobjectiver cette récurrence : bleu, vert, jaune, rouge. Chaque couleur correspond à un intervalle de temps hebdomadaire au cours duquel la probabilité quun patient donné nécessite la dispensation ou le renouvellement de ses médicaments tend vers 100%. Ainsi, nous pouvons classer nos patients en 4 « groupes-couleur ».
----
#### La collaboration et la coopération
<div class="mosaic">
<figure>
<img src="6ae3eaf8507f5516909a4f105.34.56.png" alt="Capture d'écran du forum des CHATONS" width=50% />
<figcaption aria-hidden="true">Capture d'écran du forum des CHATONS.</figcaption>
</figure>
<figure>
<img src="6ae3eaf8507f5516909a4f104.png" alt="Capture d'écran d'une contribution sur Wikipédia" width=50% />
<figcaption aria-hidden="true">Capture d'écran d'une contribution sur Wikipédia.
</figcaption>
</figure>
<figure>
<img src="6ae3eaf8507f5516909a4f103.png" alt="Carte d'OpenStreetMap" width=50% />
<figcaption aria-hidden="true">Carte d'OpenStreetMap. <br/>Crédit : Contributeurs d'OpenStreetMap
</figcaption>
</figure>
</div>
<aside class="notes">
Nous croyons chez RésiLien que les enjeux autour du numérique, et en particulier son impact environnemental, sont trop importants pour être résolus par une seule personne et que la coopération peut nous aider. Nous avons rejoint le collectif des CHATONS qui regroupe les hébergeurs numériques qui respectent une charte et qui s'entraident. Nous échangeons des informations via le forum et le réseau nous permet de nous enrichir mutuellement sur les problématiques d'hébergement de services Web.
Nous ne présentons plus Wikipédia et OpenStreetMap qui sont des projets libres connus. Cette encyclopédie et cette carte collaboratives illlustrent avec succès la possibilité pour un grand nombre de personnes de contribuer à un même bien commun. De la même manière, nous pouvons ensemble contribuer à de multiples autres bases de connaissances qui nous aideront à tendre vers une sobriété numérique collectivement.
----
{{< slide class="bottom" background="6453ec7f116790b8cf95c4106.png" >}}
<aside class="notes">
L'initiative des Licoornes regroupant les coopératives pour la transition, on retrouve dedans TeleCoop et Commown mais aussi d'autres acteurs important en France comme label-emmaus (un site ecommerce militant), CoopCircuit (pour l'achat en ligne en court circuit), mobicoop (pour la mobilité partagée), enercoop (pour la génération d'électricité), La NEF (la banque la plus éthique en France), railccoop (la copérative ferroviaire)...
----
## Ça vous fait rêver ?
# 🙃
<aside class="notes">
Nous pensons que nous devons prendre du recul et revoir la place des technologies dans l'ensemble de notre quotidien afin qu'elles soient véritablement utiles et pas alliénantes.
Je vais finir par une citation du designer *- Gauthier Roussilhe, dans sa publication « Situer le numérique »* :
> « Passer de “quel monde est possible grâce au numérique” à “quel numérique est possible dans ce monde”. »
XXX ajouter diapositive pour proposer concrètement des outils alternatifs : navigateur Web Firefox, uBlock Origin, Qwant Maps
---
## Vous concrètement au quotidien
- Navigateur Web Firefox
- ... avec l'extension uBlock Origin
- Qwant Maps (propulsé par OpenStreetMap)
- Mailo / Mailbox.org / Protonmail
- ... avec votre propre nom de domaine
- Privilégiez les services avec logiciel libre/ouverts/contributifs
- Gardez vos appareils électroniques le plus longtemps possible !
---
## Pour en savoir plus
# 💡
<aside class="notes">
Si ça vous intéresse voici différentes ressources
----
### Bibliographie
<div class="mosaic">
![« L'âge des low tech » de Philippe Bihouix](33a0b9e8faf8ec74e9db5251f.jpg)
![Kaizen numéro hors-série « Numérique responsable »](33a0b9e8faf8ec74e9db52518.jpg)
</div>
<aside class="notes">
Voici un des livres qui m'a le plus marqué et a changé ma vision des technologies
----
### Podcasts
<div class="mosaic">
[![Techologie](33a0b9e8faf8ec74e9db52519.png)](https://techologie.net/)
[![L'Octet Vert](33a0b9e8faf8ec74e9db5251a.jpg)](https://www.standblog.org/blog/category/podcast)
</div>
<aside class="notes">
Vous pouvez retrouvez 2 podcasts autour des technologies et de l'écologie
----
### Documentaires et films
<div class="mosaic">
[![Imagotv.fr](33a0b9e8faf8ec74e9db5251b.png)](https://imagotv.fr/)
![Welcome to Sodom](33a0b9e8faf8ec74e9db5251c.jpg)
</div>
<aside class="notes">
ImagoTV regroupe de nombreux documentaire autour de l'écologie
----
### Nos sources d'inspiration
- [Ateliers de l'Antémonde](https://antemonde.org/)
- Échange avec [Deuxfleurs](https://deuxfleurs.fr/)
- [Socialter « À quoi devons-nous renoncer ? »](https://www.socialter.fr/produit/numero-50)
- [Low Tech Magazine](https://www.lowtechmagazine.com/)
- « La convivialité » de Ivan Illich
---
## Pour toutes questions
- Site web : [https://resilien.fr](https://resilien.fr)
- Mastodon : [resilien@mastodon.qowala.org](https://mastodon.qowala.org/@resilien)
- Email : contact@resilien.fr
<aside class="notes">
Si vous voulez travailler autrement, avec des acteurs alternatifs, n'hésitez pas à nous contacter.
Si vous avez des questions, je vous écoute.
Merci de votre attention !

View File

@ -0,0 +1,34 @@
[alias]
amend = commit --amend -C HEAD
br = branch --list
bra = branch --list -a
branches = branch --list -a
ci = commit
co = checkout
fi = commit --fixup
tags = tag --list
rfi = rebase -i --autosquash
glog = log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit
rollback = reset --soft HEAD^
update = checkout
st = status --short
trash = reset --hard
purge = clean -fd
wip = commit -am 'WIP'
mr = !sh -c 'git fetch $1 merge-requests/$2/head:mr-$1-$2 && git checkout mr-$1-$2' -
[core]
editor = nvim
[push]
default = current
[rebase]
autosquash = true
[user]
email = killian.kemps@cemea.asso.fr
name = Killian Kemps
[init]
defaultBranch = main
[pull]
rebase = true

4
content/_index.md Normal file
View File

@ -0,0 +1,4 @@
---
title: Présentation
layout: slidelist
---

2
themes/reveal-hugo/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
node_modules
public

View File

@ -0,0 +1,76 @@
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, sex characteristics, gender identity and expression,
level of experience, education, socio-economic status, nationality, personal
appearance, race, religion, or sexual identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment
include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or
advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at jdzielak@gmail.com. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
[homepage]: https://www.contributor-covenant.org
For answers to common questions about this code of conduct, see
https://www.contributor-covenant.org/faq

View File

@ -0,0 +1,27 @@
# Contributing to reveal-hugo
Contributions of all shapes and sizes are welcoming, including code, documentation, and examples. If you've built something with reveal-hugo, feel free to add it to the README.
To run the example site, clone this repository and run:
```shell
hugo server -s exampleSite
```
or simply...
```shell
npm start
```
You can also build the site without watching it for changes by running:
```shell
npm run build
```
GitHub issues and PRs are the preferred way to receive contributions. Please name your branch something recognizeable.
Before opening a PR, make sure that the reveal-hugo exampleSite builds. The demo presentations in exampleSite use nearly all of the available reveal-hugo functionality, so they're a good indicator of something that might have been broken. Still, there are no fully automated tests, so please make sure to manually test areas that could be impacted by your change.
If you need help contributing, don't hesitate to open an issue and ask. This is a welcoming and beginner-friendly project!

View File

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2018 Josh Dzielak
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@ -0,0 +1,588 @@
# reveal-hugo
![License badge](https://img.shields.io/github/license/dzello/reveal-hugo.svg)
[![Website up/down badge](https://img.shields.io/website-up-down-green-red/https/reveal-hugo.dzello.com.svg)](https://reveal-hugo.dzello.com/)
![Last commit badge](https://img.shields.io/github/last-commit/dzello/reveal-hugo.svg)
[![Netlify Status](https://api.netlify.com/api/v1/badges/70c5c7a6-5fb2-40a9-98e1-20aa21336201/deploy-status)](https://app.netlify.com/sites/reveal-hugo/deploys)
A Hugo theme for [Reveal.js](https://revealjs.com/) that makes authoring and customization a breeze. With it, you can turn any properly-formatted Hugo content into a HTML presentation.
![screenshot of reveal-hugo](https://github.com/dzello/reveal-hugo/blob/master/images/screenshot.png?raw=true)
## Example
Using reveal-hugo, presentations with multiple slides can be created with just one markdown file, like so:
```markdown
+++
title = "How to say hello"
+++
# English
Hello.
---
# Français
Salut.
---
# Español
Hola.
```
Just use `---` surrounded by blank lines to split content into different slides.
## Documentation
Visit [reveal-hugo.dzello.com](https://reveal-hugo.dzello.com/) to see a presentation created with this theme and learn about all of the different functionality available to you.
For a full-length blog post about reveal-hugo, checkout [Harness the Power of Static Site Generators to Create Presentations](https://forestry.io/blog/harness-the-power-of-static-to-create-presentations/) on the [Forestry.io blog](https://forestry.io/blog).
### Demos
Jump to the [exampleSite](exampleSite) folder in this repository to see the source code for the above presentation and several more. Here are links to those presentations live:
- [logo-example](https://reveal-hugo.dzello.com/logo-example/) - Shows how to add a logo to your presentation
- [custom-theme-example](https://reveal-hugo.dzello.com/custom-theme-example/) - Uses Hugo pipes to compile and use a custom Reveal.js SCSS theme (recommended!)
- [section-example](https://reveal-hugo.dzello.com/section-example/) - Very basic example that shows how to create a presentation for a Hugo section
- [plugin-example](https://reveal-hugo.dzello.com/plugin-example/) - Shows how to add additional Reveal.js plugins to your presentation, for example an image gallery
- [template-example](https://reveal-hugo.dzello.com/template-example/) - An example of using the slide shortcode with powerful templates
- [bundle-example](https://reveal-hugo.dzello.com/bundle-example/) - An example of creating a presentation from one or more markdown files in a leaf bundle
- [hugo-hl-example](https://reveal-hugo.dzello.com/hugo-hl-example/) - An example of using Hugo's compile-time syntax highlighter
- [highlightjs-linenumbers-example](https://reveal-hugo.dzello.com/highlightjs-linenumbers-example/) - An example of using the multiline and multi-step capabilities of highlight.js
### Starter repository
If you want to start creating a presentation right away, clone the [programming-quotes](https://github.com/dzello/programming-quotes) repository and start hacking.
## Tutorial
You should be able to complete this section with no prior knowledge of Hugo or Reveal.js. At the end, you'll have a working presentation with instant reloading.
### Create your first presentation
To start, [install Hugo](https://gohugo.io/) and create a new Hugo site:
```shell
hugo new site my-presentation
```
Change into the directory of the new site:
```shell
cd my-presentation
```
Initialize a git repository:
```shell
git init
```
Add the reveal-hugo theme as a submodule in the themes directory:
```shell
git submodule add git@github.com:dzello/reveal-hugo.git themes/reveal-hugo
```
Open `config.toml` and add the following contents:
```toml
theme = "reveal-hugo"
[markup.goldmark.renderer]
unsafe = true
[outputFormats.Reveal]
baseName = "index"
mediaType = "text/html"
isHTML = true
```
This tells Hugo to use the reveal-hugo theme and it registers a new output format called "Reveal".
Next, create a file in `content/_index.md` and add the following:
```markdown
+++
title = "My presentation"
outputs = ["Reveal"]
+++
# Hello world!
This is my first slide.
```
Back on the command line, run:
```shell
$ hugo server
```
Navigate to [http://localhost:1313/](http://localhost:1313/) and you should see your presentation.
![New site with reveal-hugo](https://github.com/dzello/reveal-hugo/blob/master/images/reveal-hugo-hello-world.png?raw=true)
To add more slides, just add content to `_index.md` or create new markdown files in `content/home`. Remember that each slide must be separated by `---` with blank lines above and below.
```markdown
# Hello world!
This is my first slide.
---
# Hello Mars!
This is my second slide.
```
### Cloning an existing repository
If you have an existing repository that was setup with the above steps, you have to pull in the theme submodule after cloning your repository using the following command:
```shell
git submodule update --init
```
## Usage
The Usage guide is contained in the example presentation that lives in this repository in the [exampleSite](./exampleSite) directory. You can access a live version at [reveal-hugo.dzello.com](https://reveal-hugo.dzello.com/).
### Root vs. section presentations
Here's what the folder structure would look like with one root presentation and one section presentation.
```
- content
- home # special section for appending to root presentation
- body.md # appends to the root presentation
- conclusion.md # appends to the root presentation
- _index.md # beginning of the root presentation
- ted-talk
- _index.md # beginning of the ted talk presentation
- body.md # appends to the ted talk presentation
- conclusion.md # appends to the ted talk presentation
```
This will create two presentations, one at `/` and one at `/ted-talk/`. The order that slides are appended to each can be controlled by the `weight` parameter specified in each file's front matter. The slides in `_index.md` will always come first, though you don't have to put any slides in there if you want to.
### Shortcodes
reveal-hugo comes with a variety of shortcodes that help you take advantage of some very useful Reveal.js features.
#### fragment shortcode
Wrap any content in the fragment shortcode and it will appear incrementally. Great for bulleted lists where you want one bullet point at a a time to appear.
```markdown
- {{% fragment %}}One{{% /fragment %}}
- {{% fragment %}}Two{{% /fragment %}}
- {{% fragment %}}Three{{% /fragment %}}
```
#### frag shortcode
Like fragment but more terse - content is placed inline in a self-closing shortcode.
```markdown
- {{< frag c="One" >}}
- {{< frag c="Two" >}}
- {{< frag c="Three" >}}
```
#### slide shortcode
The slide shortcode lets you set custom HTML and Reveal.js attributes for each slide - things like id, class, transition, background just to name a few. The names are the same as Reveal.js but without the 'data-' prefix.
Add the shortcode above the slide content, below the `---` separator. Do not place content inside of the shortcode.
```markdown
---
{{< slide id="hello" background="#FFF" transition="zoom" transition-speed="fast" >}}
# Hello, world!
---
```
Here's a list of documented slide attributes from the Reveal.js docs:
- `autoslide`
- `state`
- `background`
- `background-color`
- `background-image`
- `background-size`
- `background-position`
- `background-repeat`
- `background-video`
- `background-video-loop`
- `background-video-muted`
- `background-interactive`
- `background-iframe`
- `background-transition`
- `transition` (can have different in and out transitions)
- `transition-speed`
- `notes` (can also use the note shortcode)
- `timing`
You can also pass through your own, a `data-` prefix will be added automatically to each one (except for `id` and `class`).
#### section shortcode
To create groups of slides that can be navigated vertically, surround your markdown with the section shortcode.
```markdown
{{% section %}}
# Vertical slide 1
---
# Vertical slide 2
{{% /section %}}
```
#### note shortcode
Add [speaker notes](https://github.com/hakimel/reveal.js/#speaker-notes) for each slide with the note shortcode.
```markdown
{{% note %}}
Don't forget to thank the audience.
{{% /note %}}
```
*💡 Tip: you can also add notes by adding a `note` attribute to the slide shortcode.*
#### markdown shortcode
Markdown surrounded by the markdown shortcode will not be rendered by Hugo but by Reveal.js itself. This is useful if you want to use some native Reveal.js markdown syntax that isn't supported by reveal-hugo.
```markdown
{{% markdown %}}
# I'm rendered...
...by Reveal.js
{{% /markdown %}}
```
### MathJax support
Add the following to `layouts/partials/reveal-hugo/body.html`:
```
<script>
MathJax = {
tex: {
inlineMath: [['$', '$'], ['\\(', '\\)']]
},
svg: {
fontCache: 'global'
}
};
</script>
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js">
</script>
```
Then you can do this in a slide:
```
## Cool equations
Displayed equations are wrapped in double-\$
$$\frac{n!}{k!(n-k)!} = \binom{n}{k}$$
Inline equations like $E=mc^2$ are wrapped in single-\$
```
### HTML slides
If you need to create fancier HTML for a slide than you can do with markdown, just add `data-noprocess` to the &lt;section&gt; element.
```html
<section data-noprocess>
<h1>Hello, world!</h1>
</section>
```
### Reusable slides and sections
Sometimes you need to reuse a slide in the same presentation or across different presentations. reveal-hugo makes use of Hugo data templates to make both cases easy.
To create reusable slides, create a TOML (or JSON or YAML) file in your site's data directory. Give it a name that reflects its content or just `slides.toml`. In that file, add a key for each reusable slide. The name should reflect the slide's content and the value should be the slide's markdown.
```toml
thankyou = '''
# Thank you!
Any questions?
'''
```
*💡 Tip: TOML's multiline string syntax comes in handy here, note the '''.*
Each key can contain **one or more** slides separated by `---` and newlines. That way you can create reusable sections.
```toml
thankyou = '''
# Thank you!
---
Any questions?
'''
```
To render a slide from a data template, use the slide shortcode with a content attribute:
```markdown
{{% slide content="slides.thankyou" /%}}
```
The part before the "." is the name of the file in the data directory. The part after the dot is the key to look up in that file.
You can use all the additional slide shortcode attributes. They will be applied to every slide in the data template.
## Configuration
Customize the Reveal.js presentation by setting these values in `config.toml` or the front matter of any presentation's `_index.md` file.
- `reveal_hugo.theme`: The Reveal.js theme used; defaults to "black"
- `reveal_hugo.custom_theme`: The path to a locally hosted Reveal.js theme in the static or assets folder
- `reveal_hugo.custom_theme_compile`: If set to true, the theme will be compiled with Hugo pipes (and must live in the assets folder)
- `reveal_hugo.custom_theme_options`: Provide a dictionary to customize theme compilation, see [Hugo's SCSS docs](https://gohugo.io/hugo-pipes/scss-sass/#options) for a list of options
- `reveal_hugo.highlight_theme`: The [highlight.js](https://highlightjs.org/) theme used; defaults to "default"
- `reveal_hugo.reveal_cdn`: The location to load Reveal.js files from; defaults to the `reveal-js` folder in the static directory to support offline development. To load from a CDN instead, set this value to `https://cdnjs.cloudflare.com/ajax/libs/reveal.js/3.7.0` or whatever CDN you prefer.
- `reveal_hugo.highlight_cdn`: The location to load highlight.js files from; defaults to to the `highlight-js` folder in the static directory to support offline development. To load from a CDN instead, set this value to `https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0` or whatever CDN you prefer.
- `reveal_hugo.load_default_plugins`: If set to true (default), the plugins included by default are loaded. These are markdown, highlight.js, notes and zoom.
- `reveal_hugo.plugins`: An array of additional Reveal.js plugins to load, e.g. `["plugin/gallery/gallery.plugin.js"]`. The appropriate files will need to have been copied into the `static` directory. CDN loading is not supported. See here for a [big list of plugins](https://github.com/hakimel/reveal.js/wiki/Plugins,-Tools-and-Hardware) you can try.
This is how parameters will look in your `config.toml`:
```TOML
[params.reveal_hugo]
theme = "moon"
```
Or in the front matter of an `_index.md` file:
```TOML
[reveal_hugo]
theme = "moon"
```
Include any other attributes in those sections that you'd like to be fed as arguments to `Reveal.initialize` in **snakecase**, so `slide_number` instead of `slideNumber`. Params are converted from snakecase to camelcase before passing to Reveal.js. This is necessary to maintain the proper case of the parameters.
Here's an example of configuring Reveal.js parameters alongside a theme and highlight.js theme:
```TOML
[reveal_hugo]
theme = "moon"
highlight_theme = "solarized-dark"
slide_number = true
transition = "zoom"
```
See the [extensive list of Reveal.js configuration options](https://github.com/hakimel/reveal.js/#configuration) here.
### Syntax highlighting
Syntax highlighting can be done with Hugo at compile-time or using Reveal.js with the pre-installed highlight.js plugin. Presentations can use both if they wish for different pieces of code.
To do highlighting with Hugo, use the [highlight shortcode](https://gohugo.io/content-management/syntax-highlighting/#highlight-shortcode) and check out the [hugo-hl-example](https://reveal-hugo.dzello.com/hugo-hl-example/) example presentation.
To see an example of highlighting with Reveal.js, checs out the [highlightjs-linenumbers-example](https://reveal-hugo.dzello.com/highlightjs-linenumbers-example/) presentation.
By default, markdown code fences will be processed with Hugo. To turn that off, add this to your `config.toml` file:
``` toml
[markup.highlight]
codeFences = false
```
Now, the code in the fences will be highlighted by highlight.js instead.
### Custom Reveal.js themes
If you have a custom reveal theme to use (in .css form), place it in the `static` folder and specify it in the configuration. For example, if your css file lives here:
```
| static
| stylesheets
- custom-theme.css
```
Then this is what you'll put in `config.toml`:
```toml
[params.reveal_hugo]
reveal_hugo.custom_theme = "stylesheets/custom-theme.css"
```
### Compiling a custom Reveal.js theme with Hugo pipes
Reveal.js theme customization is easiest to do by overriding variables in the SCSS or PostCSS build process. You can take advantage of Hugo pipes to do the theme compilation. In this case, your SCSS, Saas or PostCSS file needs to live in assets:
```
| assets
| stylesheets
- custom-theme.scss
```
If you just wanted to change the presentation colors, here's what you might put in `custom-theme.scss`:
```scss
@import "reveal-js/css/theme/template/mixins";
@import "reveal-js/css/theme/template/settings";
$backgroundColor: rgb(3, 129, 45);
$mainColor: #fff;
$headingColor: #fff;
```
To learn more about Reveal.js theme customization, check out the [Reveal.js theme docs](https://github.com/hakimel/reveal.js/blob/master/css/theme/README.md).
This is what the front matter would look like:
```toml
[params.reveal_hugo]
reveal_hugo.custom_theme = "stylesheets/custom-theme.css"
reveal_hugo.custom_theme_compile = true
```
You can also add options that will be passed to [Hugo's toCSS method](https://gohugo.io/hugo-pipes/scss-sass/#options):
```toml
[reveal_hugo.custom_theme_options]
targetPath = "css/custom-theme.css"
enableSourceMap = true
```
Check out the [custom-theme-example presentation](https://reveal-hugo.dzello.com/custom-theme-example/) to see a working example.
## Adding HTML to the layout
If you need to add something to the HTML layout, you can create partials that live at specific locations, depending on which presentation you want to customize and where you want the HTML inserted into the page.
| Presentation | Before &lt;/head&gt; | Before &lt;/body&gt; | Before closing &lt;/div&gt; of `div.reveal` |
|--------------|---------------------------------|---------------------------------|---------------------------------------------|
| All | reveal-hugo/head.html | reveal-hugo/body.html | reveal-hugo/end.html |
| Root | home/reveal-hugo/head.html | home/reveal-hugo/body.html | home/reveal-hugo/end.html |
| Section | {section}/reveal-hugo/head.html | {section}/reveal-hugo/body.html | {section}/reveal-hugo/end.html |
This is the recommended way to add custom CSS and JavaScript to each presentation.
> 💡 Tip: In Hugo, partials live in the `layouts` folder:
>
> For example, if you have HTML that is to be placed before every presentation, this would be the structure:
> ```
> - layouts
> - partials
> - reveal-hugo
> - head.html
> - body.html
> - end.html
## Offline development
Offline-friendly development is the default. The Reveal.js and Highlight.js files are loaded from the static directory by default. (See above for how to use a CDN instead). If you need `file:///` URLs to work, make sure to set `relativeURLs` and `uglyURLs` in your `config.toml`.
```toml
relativeURLs = true
uglyURLs = true
```
Note: `uglyURLs` isn't strictly required, but it is useful if you're loading against the filesystem as it makes sure that all URLs end in .html and links point directly at them instead of to a folder.
## Recipes
### Add a Reveal.js presentation to an existing Hugo site
If your Hugo site already has a theme but you'd like to create a presentation from some of its content, that's very easy. First, manually copy a few files out of this theme into a few of your site's directories:
```shell
cd my-hugo-site
git clone git@github.com:dzello/reveal-hugo.git themes/reveal-hugo
cd themes/reveal-hugo
cp -r layouts static ../../
```
Files and directories are named such that they shouldn't conflict with your existing content. Of course, you should double check before copying, especially the shortcodes which can't be put under a directory.
Next, add the Reveal output format to your site's `config.toml` file
```toml
[outputFormats.Reveal]
baseName = "index"
mediaType = "text/html"
isHTML = true
```
Now you can add `outputs = ["Reveal"]` to the front matter of any section's `_index.md` file and that section's content will be combined into a presentation and written to `index.html`. If you already have a `index.html` page for that section, just change the `baseName` above to `reveal` and the presentation will be placed in a `reveal.html` file instead.
Note: If you specify `outputs = ["Reveal"]` for a single content file, you can prevent anything being generated for that file. This is handy if you other default layouts that would have created a regular HTML file from it. Only the list file is required for the presentation.
**Tip**: As of Hugo 0.42, Hugo [has theme inheritence](https://gohugo.io/news/0.42-relnotes/). You can avoid the file copying step above by adding `"reveal-hugo"` to your site's array of themes.
### Create a presentation from a leaf bundle or single page type
By default, reveal-hugo doesn't create presentations for single pages (i.e. pages other than `_index.md`) as it assumes those pages are pieces of a larger presentation in the section starting with `_index.md`. This might not be the case if your content is structured in a leaf bundle (the main file is then `index.md` with no underscore, which Hugo treats as a single page) or if you just want to put a presentation in a single file, say `presentation.md`. In these cases, you just need to tell Hugo to use a different layout.
If you're using a leaf page bundle, set the following in the front matter of the `index.md` file:
```toml
layout = "bundle"
```
If you're in a single page file like `presentation.md`, set the following in the front matter:
```toml
layout = "list"
```
### Create a page that lists out all presentations
See [this issue](https://github.com/dzello/reveal-hugo/issues/37) for a template that you can use.
## Reveal.js tips
These are some useful Reveal.js features and shortcuts.
- 's' - type 's' to enter speaker mode, which opens a separate window with a time and speaker notes
- 'o' - type 'o' to enter overview mode and scroll through slide thumbnails
- 'f' - type 'f' to go into full-screen mode
Here are a few useful Reveal.js-related tools:
- [decktape](https://github.com/astefanutti/decktape) for exporting a presentation as a PDF
- More [revealjs themes](https://github.com/dzello/revealjs-themes) including robot-lung and sunblind
Find many more on the Reveal.js wiki: [Plugins, tools and hardware](https://github.com/hakimel/reveal.js/wiki/Plugins,-Tools-and-Hardware).
## Implementations
Have you built something with reveal-hugo? Add a link to it here.
- [dzello's Paris Wedding Weekend Guide](https://estelle.and.dzello.com/guide/) ([source](https://github.com/dzello/estelle-and-josh/blob/master/site/content/guide/_index.md))
## Changelog
- 2018-08-03: The slide shortcode is now easier to use. An auto-closing version sits inside the slide instead of needing to surround its content and add a closing tag.
## Contributing
Contributions are very welcome. See [CONTRIBUTING.md](CONTRIBUTING.md) for more details.

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,39 @@
/**
* Beige theme for reveal.js.
*
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/
// Default mixins and settings -----------------
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------
// Include theme-specific fonts
@import url(../../lib/font/league-gothic/league-gothic.css);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
// Override theme settings (see ../template/settings.scss)
$mainColor: #333;
$headingColor: #333;
$headingTextShadow: none;
$backgroundColor: #f7f3de;
$linkColor: #8b743d;
$linkColorHover: lighten( $linkColor, 20% );
$selectionBackgroundColor: rgba(79, 64, 28, 0.99);
$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
// Background generator
@mixin bodyBackground() {
@include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) );
}
// Theme template ------------------------------
@import "../template/theme";
// ---------------------------------------------

View File

@ -0,0 +1,49 @@
/**
* Black theme for reveal.js. This is the opposite of the 'white' theme.
*
* By Hakim El Hattab, http://hakim.se
*/
// Default mixins and settings -----------------
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------
// Include theme-specific fonts
@import url(../../lib/font/source-sans-pro/source-sans-pro.css);
// Override theme settings (see ../template/settings.scss)
$backgroundColor: #191919;
$mainColor: #fff;
$headingColor: #fff;
$mainFontSize: 42px;
$mainFont: 'Source Sans Pro', Helvetica, sans-serif;
$headingFont: 'Source Sans Pro', Helvetica, sans-serif;
$headingTextShadow: none;
$headingLetterSpacing: normal;
$headingTextTransform: uppercase;
$headingFontWeight: 600;
$linkColor: #42affa;
$linkColorHover: lighten( $linkColor, 15% );
$selectionBackgroundColor: lighten( $linkColor, 25% );
$heading1Size: 2.5em;
$heading2Size: 1.6em;
$heading3Size: 1.3em;
$heading4Size: 1.0em;
section.has-light-background {
&, h1, h2, h3, h4, h5, h6 {
color: #222;
}
}
// Theme template ------------------------------
@import "../template/theme";
// ---------------------------------------------

View File

@ -0,0 +1,78 @@
/**
* Blood theme for reveal.js
* Author: Walther http://github.com/Walther
*
* Designed to be used with highlight.js theme
* "monokai_sublime.css" available from
* https://github.com/isagalaev/highlight.js/
*
* For other themes, change $codeBackground accordingly.
*
*/
// Default mixins and settings -----------------
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------
// Include theme-specific fonts
@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic);
// Colors used in the theme
$blood: #a23;
$coal: #222;
$codeBackground: #23241f;
$backgroundColor: $coal;
// Main text
$mainFont: Ubuntu, 'sans-serif';
$mainColor: #eee;
// Headings
$headingFont: Ubuntu, 'sans-serif';
$headingTextShadow: 2px 2px 2px $coal;
// h1 shadow, borrowed humbly from
// (c) Default theme by Hakim El Hattab
$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
// Links
$linkColor: $blood;
$linkColorHover: lighten( $linkColor, 20% );
// Text selection
$selectionBackgroundColor: $blood;
$selectionColor: #fff;
// Theme template ------------------------------
@import "../template/theme";
// ---------------------------------------------
// some overrides after theme template import
.reveal p {
font-weight: 300;
text-shadow: 1px 1px $coal;
}
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
font-weight: 700;
}
.reveal p code {
background-color: $codeBackground;
display: inline-block;
border-radius: 7px;
}
.reveal small code {
vertical-align: baseline;
}

View File

@ -0,0 +1,34 @@
/**
* League theme for reveal.js.
*
* This was the default theme pre-3.0.0.
*
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/
// Default mixins and settings -----------------
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------
// Include theme-specific fonts
@import url(../../lib/font/league-gothic/league-gothic.css);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
// Override theme settings (see ../template/settings.scss)
$headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2);
$heading1TextShadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0,0,0,.1), 0 0 5px rgba(0,0,0,.1), 0 1px 3px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,.2), 0 5px 10px rgba(0,0,0,.25), 0 20px 20px rgba(0,0,0,.15);
// Background generator
@mixin bodyBackground() {
@include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) );
}
// Theme template ------------------------------
@import "../template/theme";
// ---------------------------------------------

View File

@ -0,0 +1,57 @@
/**
* Solarized Dark theme for reveal.js.
* Author: Achim Staebler
*/
// Default mixins and settings -----------------
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------
// Include theme-specific fonts
@import url(../../lib/font/league-gothic/league-gothic.css);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
/**
* Solarized colors by Ethan Schoonover
*/
html * {
color-profile: sRGB;
rendering-intent: auto;
}
// Solarized colors
$base03: #002b36;
$base02: #073642;
$base01: #586e75;
$base00: #657b83;
$base0: #839496;
$base1: #93a1a1;
$base2: #eee8d5;
$base3: #fdf6e3;
$yellow: #b58900;
$orange: #cb4b16;
$red: #dc322f;
$magenta: #d33682;
$violet: #6c71c4;
$blue: #268bd2;
$cyan: #2aa198;
$green: #859900;
// Override theme settings (see ../template/settings.scss)
$mainColor: $base1;
$headingColor: $base2;
$headingTextShadow: none;
$backgroundColor: $base03;
$linkColor: $blue;
$linkColorHover: lighten( $linkColor, 20% );
$selectionBackgroundColor: $magenta;
// Theme template ------------------------------
@import "../template/theme";
// ---------------------------------------------

View File

@ -0,0 +1,34 @@
/**
* Black theme for reveal.js.
*
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/
// Default mixins and settings -----------------
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------
// Include theme-specific fonts
@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
// Override theme settings (see ../template/settings.scss)
$backgroundColor: #111;
$mainFont: 'Open Sans', sans-serif;
$linkColor: #e7ad52;
$linkColorHover: lighten( $linkColor, 20% );
$headingFont: 'Montserrat', Impact, sans-serif;
$headingTextShadow: none;
$headingLetterSpacing: -0.03em;
$headingTextTransform: none;
$selectionBackgroundColor: #e7ad52;
// Theme template ------------------------------
@import "../template/theme";
// ---------------------------------------------

View File

@ -0,0 +1,35 @@
/**
* A simple theme for reveal.js presentations, similar
* to the default theme. The accent color is brown.
*
* This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed.
*/
// Default mixins and settings -----------------
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------
// Override theme settings (see ../template/settings.scss)
$mainFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
$mainColor: #000;
$headingFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif;
$headingColor: #383D3D;
$headingTextShadow: none;
$headingTextTransform: none;
$backgroundColor: #F0F1EB;
$linkColor: #51483D;
$linkColorHover: lighten( $linkColor, 20% );
$selectionBackgroundColor: #26351C;
.reveal a {
line-height: 1.3em;
}
// Theme template ------------------------------
@import "../template/theme";
// ---------------------------------------------

View File

@ -0,0 +1,43 @@
/**
* A simple theme for reveal.js presentations, similar
* to the default theme. The accent color is darkblue.
*
* This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed.
* reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/
// Default mixins and settings -----------------
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------
// Include theme-specific fonts
@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
// Override theme settings (see ../template/settings.scss)
$mainFont: 'Lato', sans-serif;
$mainColor: #000;
$headingFont: 'News Cycle', Impact, sans-serif;
$headingColor: #000;
$headingTextShadow: none;
$headingTextTransform: none;
$backgroundColor: #fff;
$linkColor: #00008B;
$linkColorHover: lighten( $linkColor, 20% );
$selectionBackgroundColor: rgba(0, 0, 0, 0.99);
section.has-dark-background {
&, h1, h2, h3, h4, h5, h6 {
color: #fff;
}
}
// Theme template ------------------------------
@import "../template/theme";
// ---------------------------------------------

View File

@ -0,0 +1,46 @@
/**
* Sky theme for reveal.js.
*
* Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/
// Default mixins and settings -----------------
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------
// Include theme-specific fonts
@import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700);
// Override theme settings (see ../template/settings.scss)
$mainFont: 'Open Sans', sans-serif;
$mainColor: #333;
$headingFont: 'Quicksand', sans-serif;
$headingColor: #333;
$headingLetterSpacing: -0.08em;
$headingTextShadow: none;
$backgroundColor: #f7fbfc;
$linkColor: #3b759e;
$linkColorHover: lighten( $linkColor, 20% );
$selectionBackgroundColor: #134674;
// Fix links so they are not cut off
.reveal a {
line-height: 1.3em;
}
// Background generator
@mixin bodyBackground() {
@include radial-gradient( #add9e4, #f7fbfc );
}
// Theme template ------------------------------
@import "../template/theme";
// ---------------------------------------------

View File

@ -0,0 +1,63 @@
/**
* Solarized Light theme for reveal.js.
* Author: Achim Staebler
*/
// Default mixins and settings -----------------
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------
// Include theme-specific fonts
@import url(../../lib/font/league-gothic/league-gothic.css);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
/**
* Solarized colors by Ethan Schoonover
*/
html * {
color-profile: sRGB;
rendering-intent: auto;
}
// Solarized colors
$base03: #002b36;
$base02: #073642;
$base01: #586e75;
$base00: #657b83;
$base0: #839496;
$base1: #93a1a1;
$base2: #eee8d5;
$base3: #fdf6e3;
$yellow: #b58900;
$orange: #cb4b16;
$red: #dc322f;
$magenta: #d33682;
$violet: #6c71c4;
$blue: #268bd2;
$cyan: #2aa198;
$green: #859900;
// Override theme settings (see ../template/settings.scss)
$mainColor: $base00;
$headingColor: $base01;
$headingTextShadow: none;
$backgroundColor: $base3;
$linkColor: $blue;
$linkColorHover: lighten( $linkColor, 20% );
$selectionBackgroundColor: $magenta;
// Background generator
// @mixin bodyBackground() {
// @include radial-gradient( rgba($base3,1), rgba(lighten($base3, 20%),1) );
// }
// Theme template ------------------------------
@import "../template/theme";
// ---------------------------------------------

View File

@ -0,0 +1,49 @@
/**
* White theme for reveal.js. This is the opposite of the 'black' theme.
*
* By Hakim El Hattab, http://hakim.se
*/
// Default mixins and settings -----------------
@import "../template/mixins";
@import "../template/settings";
// ---------------------------------------------
// Include theme-specific fonts
@import url(../../lib/font/source-sans-pro/source-sans-pro.css);
// Override theme settings (see ../template/settings.scss)
$backgroundColor: #fff;
$mainColor: #222;
$headingColor: #222;
$mainFontSize: 42px;
$mainFont: 'Source Sans Pro', Helvetica, sans-serif;
$headingFont: 'Source Sans Pro', Helvetica, sans-serif;
$headingTextShadow: none;
$headingLetterSpacing: normal;
$headingTextTransform: uppercase;
$headingFontWeight: 600;
$linkColor: #2a76dd;
$linkColorHover: lighten( $linkColor, 15% );
$selectionBackgroundColor: lighten( $linkColor, 25% );
$heading1Size: 2.5em;
$heading2Size: 1.6em;
$heading3Size: 1.3em;
$heading4Size: 1.0em;
section.has-dark-background {
&, h1, h2, h3, h4, h5, h6 {
color: #fff;
}
}
// Theme template ------------------------------
@import "../template/theme";
// ---------------------------------------------

View File

@ -0,0 +1,29 @@
@mixin vertical-gradient( $top, $bottom ) {
background: $top;
background: -moz-linear-gradient( top, $top 0%, $bottom 100% );
background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom) );
background: -webkit-linear-gradient( top, $top 0%, $bottom 100% );
background: -o-linear-gradient( top, $top 0%, $bottom 100% );
background: -ms-linear-gradient( top, $top 0%, $bottom 100% );
background: linear-gradient( top, $top 0%, $bottom 100% );
}
@mixin horizontal-gradient( $top, $bottom ) {
background: $top;
background: -moz-linear-gradient( left, $top 0%, $bottom 100% );
background: -webkit-gradient( linear, left top, right top, color-stop(0%,$top), color-stop(100%,$bottom) );
background: -webkit-linear-gradient( left, $top 0%, $bottom 100% );
background: -o-linear-gradient( left, $top 0%, $bottom 100% );
background: -ms-linear-gradient( left, $top 0%, $bottom 100% );
background: linear-gradient( left, $top 0%, $bottom 100% );
}
@mixin radial-gradient( $outer, $inner, $type: circle ) {
background: $outer;
background: -moz-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) );
background: -webkit-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
background: -o-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
background: -ms-radial-gradient( center, $type cover, $inner 0%, $outer 100% );
background: radial-gradient( center, $type cover, $inner 0%, $outer 100% );
}

View File

@ -0,0 +1,45 @@
// Base settings for all themes that can optionally be
// overridden by the super-theme
// Background of the presentation
$backgroundColor: #2b2b2b;
// Primary/body text
$mainFont: 'Lato', sans-serif;
$mainFontSize: 40px;
$mainColor: #eee;
// Vertical spacing between blocks of text
$blockMargin: 20px;
// Headings
$headingMargin: 0 0 $blockMargin 0;
$headingFont: 'League Gothic', Impact, sans-serif;
$headingColor: #eee;
$headingLineHeight: 1.2;
$headingLetterSpacing: normal;
$headingTextTransform: uppercase;
$headingTextShadow: none;
$headingFontWeight: normal;
$heading1TextShadow: $headingTextShadow;
$heading1Size: 3.77em;
$heading2Size: 2.11em;
$heading3Size: 1.55em;
$heading4Size: 1.00em;
$codeFont: monospace;
// Links and actions
$linkColor: #13DAEC;
$linkColorHover: lighten( $linkColor, 20% );
// Text selection
$selectionBackgroundColor: #FF5E99;
$selectionColor: #fff;
// Generates the presentation background, can be overridden
// to return a background image or gradient
@mixin bodyBackground() {
background: $backgroundColor;
}

View File

@ -0,0 +1,325 @@
// Base theme template for reveal.js
/*********************************************
* GLOBAL STYLES
*********************************************/
body {
@include bodyBackground();
background-color: $backgroundColor;
}
.reveal {
font-family: $mainFont;
font-size: $mainFontSize;
font-weight: normal;
color: $mainColor;
}
::selection {
color: $selectionColor;
background: $selectionBackgroundColor;
text-shadow: none;
}
::-moz-selection {
color: $selectionColor;
background: $selectionBackgroundColor;
text-shadow: none;
}
.reveal .slides section,
.reveal .slides section>section {
line-height: 1.3;
font-weight: inherit;
}
/*********************************************
* HEADERS
*********************************************/
.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4,
.reveal h5,
.reveal h6 {
margin: $headingMargin;
color: $headingColor;
font-family: $headingFont;
font-weight: $headingFontWeight;
line-height: $headingLineHeight;
letter-spacing: $headingLetterSpacing;
text-transform: $headingTextTransform;
text-shadow: $headingTextShadow;
word-wrap: break-word;
}
.reveal h1 {font-size: $heading1Size; }
.reveal h2 {font-size: $heading2Size; }
.reveal h3 {font-size: $heading3Size; }
.reveal h4 {font-size: $heading4Size; }
.reveal h1 {
text-shadow: $heading1TextShadow;
}
/*********************************************
* OTHER
*********************************************/
.reveal p {
margin: $blockMargin 0;
line-height: 1.3;
}
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
max-width: 95%;
max-height: 95%;
}
.reveal strong,
.reveal b {
font-weight: bold;
}
.reveal em {
font-style: italic;
}
.reveal ol,
.reveal dl,
.reveal ul {
display: inline-block;
text-align: left;
margin: 0 0 0 1em;
}
.reveal ol {
list-style-type: decimal;
}
.reveal ul {
list-style-type: disc;
}
.reveal ul ul {
list-style-type: square;
}
.reveal ul ul ul {
list-style-type: circle;
}
.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
display: block;
margin-left: 40px;
}
.reveal dt {
font-weight: bold;
}
.reveal dd {
margin-left: 40px;
}
.reveal blockquote {
display: block;
position: relative;
width: 70%;
margin: $blockMargin auto;
padding: 5px;
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
}
.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
display: inline-block;
}
.reveal q {
font-style: italic;
}
.reveal pre {
display: block;
position: relative;
width: 90%;
margin: $blockMargin auto;
text-align: left;
font-size: 0.55em;
font-family: $codeFont;
line-height: 1.2em;
word-wrap: break-word;
box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
}
.reveal code {
font-family: $codeFont;
text-transform: none;
}
.reveal pre code {
display: block;
padding: 5px;
overflow: auto;
max-height: 400px;
word-wrap: normal;
}
.reveal table {
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
.reveal table th {
font-weight: bold;
}
.reveal table th,
.reveal table td {
text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid;
}
.reveal table th[align="center"],
.reveal table td[align="center"] {
text-align: center;
}
.reveal table th[align="right"],
.reveal table td[align="right"] {
text-align: right;
}
.reveal table tbody tr:last-child th,
.reveal table tbody tr:last-child td {
border-bottom: none;
}
.reveal sup {
vertical-align: super;
font-size: smaller;
}
.reveal sub {
vertical-align: sub;
font-size: smaller;
}
.reveal small {
display: inline-block;
font-size: 0.6em;
line-height: 1.2em;
vertical-align: top;
}
.reveal small * {
vertical-align: top;
}
/*********************************************
* LINKS
*********************************************/
.reveal a {
color: $linkColor;
text-decoration: none;
-webkit-transition: color .15s ease;
-moz-transition: color .15s ease;
transition: color .15s ease;
}
.reveal a:hover {
color: $linkColorHover;
text-shadow: none;
border: none;
}
.reveal .roll span:after {
color: #fff;
background: darken( $linkColor, 15% );
}
/*********************************************
* IMAGES
*********************************************/
.reveal section img {
margin: 15px 0px;
background: rgba(255,255,255,0.12);
border: 4px solid $mainColor;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}
.reveal section img.plain {
border: 0;
box-shadow: none;
}
.reveal a img {
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
}
.reveal a:hover img {
background: rgba(255,255,255,0.2);
border-color: $linkColor;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
}
/*********************************************
* NAVIGATION CONTROLS
*********************************************/
.reveal .controls {
color: $linkColor;
}
/*********************************************
* PROGRESS BAR
*********************************************/
.reveal .progress {
background: rgba(0,0,0,0.2);
color: $linkColor;
}
.reveal .progress span {
-webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
-moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
/*********************************************
* PRINT BACKGROUND
*********************************************/
@media print {
.backgrounds {
background-color: $backgroundColor;
}
}

View File

@ -0,0 +1,12 @@
---
new_page_extension: md
auto_deploy: false
admin_path:
webhook_url:
sections:
upload_dir: "./exampleSite/static/uploads"
public_path: "/uploads"
front_matter_path: ''
use_front_matter_path: false
file_template: ":filename:"
version: 0.38.1

View File

@ -0,0 +1,35 @@
@import "reveal-js/css/theme/template/mixins";
@import "reveal-js/css/theme/template/settings";
$backgroundColor: rgb(3, 129, 45);
$mainColor: #fff;
$headingColor: #fff;
$mainFontSize: 38px;
$mainFont: 'Source Sans Pro', Helvetica, sans-serif;
$headingFont: 'Source Sans Pro', Helvetica, sans-serif;
$headingTextShadow: none;
$headingLetterSpacing: normal;
$headingTextTransform: uppercase;
$headingFontWeight: 600;
$linkColor: #42affa;
$linkColorHover: lighten( $linkColor, 15% );
$selectionBackgroundColor: lighten( $linkColor, 25% );
$heading1Size: 2.5em;
$heading2Size: 1.6em;
$heading3Size: 1.3em;
$heading4Size: 1.0em;
@import "reveal-js/css/theme/template/theme";
section.has-light-background {
&, h1, h2, h3, h4, h5, h6 {
color: #222;
}
}
.reveal pre {
margin: 50px auto;
}

View File

@ -0,0 +1,37 @@
baseURL = "https://example.com/"
languageCode = "en-us"
title = "A Hugo theme for creating Reveal.js presentations"
disableKinds = ["sitemap", "RSS"]
theme = "."
themesDir = "../"
# uncomment for browsing at file:///
# relativeURLs = true
# uglyURLs = true
[author]
name = "Josh Dzielak"
# currently only the unsafe mode for goldmark is supported
[markup.goldmark.renderer]
unsafe = true
# choose between Hugo compile-time or Highlight.js
# syntax highlighting for code inside of code fences
[markup.highlight]
codeFences = false # use highlight.js
# codeFences = true # use hugo highlighting at compile time
style = "tango" # set a style for hugo highlighting
[outputFormats.Reveal]
baseName = "index"
mediaType = "text/html"
isHTML = true
[params.reveal_hugo]
history = true
# used in content/template-example
[params.reveal_hugo.templates.grey]
background = "#424242"
transition = "convex"

View File

@ -0,0 +1,22 @@
+++
title = "reveal-hugo"
description = "A Hugo theme for creating Reveal.js presentations"
outputs = ["Reveal"]
[reveal_hugo]
custom_theme = "reveal-hugo/themes/robot-lung.css"
margin = 0.2
highlight_theme = "color-brewer"
transition = "slide"
transition_speed = "fast"
[reveal_hugo.templates.hotpink]
class = "hotpink"
background = "#FF4081"
+++
# 📽️
# reveal-hugo
A Hugo theme for creating Reveal.js presentations.
~ made by [@dzello](https://dzello.com/) ~

View File

@ -0,0 +1,16 @@
+++
+++
If more markdown files are present in the bundle, their contents will be added to the presentation.
---
Specify `weight` in the frontmatter if it's necessary to order them.
---
If you don't want them to be included, specify `layout = "list"` in the front matter instead of `layout = "bundle"`.
---
## THE END

View File

@ -0,0 +1,30 @@
+++
title = "Bundle example presentation"
outputs = ["Reveal"]
layout = "bundle"
[reveal_hugo]
theme = "night"
margin = 0.2
+++
# Page Bundles
---
[Hugo page bundles](https://gohugo.io/content-management/page-bundles/) are a useful way to organize content.
---
To create a reveal-hugo presentation from the `index.md` file of a leaf page bundle, you need to specify the layout manually.
```toml
layout = "bundle"
```
---
Why? By default, reveal-hugo doesn't create pages for single template types (foo.md), only for list template types (_index.md).
---
This technique can also be used to output an HTML file for any section of a presentation, should you need to.

View File

@ -0,0 +1,74 @@
+++
title = "Custom theme example presentation"
outputs = ["Reveal"]
[reveal_hugo]
custom_theme = "custom-theme.scss"
custom_theme_compile = true
+++
## 🖌
## Custom Themes
*with Hugo Pipes*
---
This presentation uses a custom Reveal.js theme written in SCSS that is compiled by Hugo, using [Hugo pipes](https://gohugo.io/hugo-pipes/).
---
Hugo pipes compiles the source code of the theme, located in `assets/custom-theme.scss`, into CSS.
---
## 😄
No separate build process is required, which means you can iterate on your theme and your content at the same time.
---
To set a custom theme and use Hugo to compile it:
```toml
[reveal_hugo]
custom_theme = "custom-theme.scss"
custom_theme_compile = true
```
`custom-theme.scss` must live in the `assets` folder.
---
To pass compilation options, use the `custom_theme_options` param:
```toml
[reveal_hugo.custom_theme_options]
targetPath = "css/custom-theme.css"
enableSourceMap = true
```
See all the [available options](https://gohugo.io/hugo-pipes/scss-sass/#options).
---
Note: to use a custom theme that doesn't need compilation, put it in the `static` directory and do not set the `custom_theme_compile` parameter. It will be served to the browser directly.
---
Write a custom Reveal.js theme in four steps:
```text
1. Import `mixins` and `settings` from the templates directory
2. Override variables and functions for colors, fonts and sizes
3. Import `theme` from the templates directory
4. Add any additional selectors to override the built CSS
```
---
See the [Reveal.js theme docs](https://github.com/hakimel/reveal.js/blob/master/css/theme/README.md) to learn what overrides are possible.
---
See `assets/custom-theme.scss` or any file in `assets/reveal-js/css/theme/source` for an example.

View File

@ -0,0 +1,53 @@
+++
title = "Extend layout with configuration"
outputs = ["Reveal"]
[reveal_hugo]
theme = "night"
margin = 0.2
custom_css = "css/custom.css"
custom_js = "js/custom.js"
+++
### Extending an existing layout
If you are using an existing theme and you want to a specific CSS class or add a dynamic function using javascript. It is possible to extend existing layout.
---
### Extending CSS
You can use `partials` or you can specify `custom_css` in your configuration :
```toml
[reveal_hugo]
custom_css = "css/custom.css"
```
<small>
The `custom.css` can be present in `static/css/custom.css`
</small>
---
### Extending with javascript
Same as CSS you can extend your presentation with javascript using `partials` or with `custom_js` in your configuration:
```toml
[reveal_hugo]
custom_js = "js/custom.js"
```
<small>
The `custom.js` can be present in `static/js/custom.js`
</small>
---
{{< slide class="custom" id="customjs" >}}
## Extend layout example
Here the slide has an additional css class `custom` using `slide` *shortcode*. This class is hosted in a custom CSS.
If you click on this text background-color will using a custom javascript file.

View File

@ -0,0 +1,160 @@
+++
title = "Reveal.js 3.9.0 highlighting example"
outputs = ["Reveal"]
[reveal_hugo]
theme = "white"
highlight_theme = "vs"
+++
## Multiline highlighting with Highlight.js
---
This presentation shows the use of the [new highlighting features](https://github.com/hakimel/reveal.js/blob/master/README.md#step-by-step-highlights) which were introduced with Reveal.js [v3.9.0](https://github.com/hakimel/reveal.js/releases/tag/3.9.0).
---
## Prerequisite
Disable `codeFences` in to your `config.toml` to prevent Hugo's built-in highlighting for code inside of `---` fences.
{{< highlight toml "style=github" >}}
[markup.highlight]
codeFences = false
{{< /highlight >}}
---
## Theme
Specify a theme for Highlight.js in `config.toml`
{{< highlight toml "style=github" >}}
[params.reveal_hugo]
highlight_theme = "github"
{{< /highlight >}}
---
...or in the `_index.md` front matter
{{< highlight toml "style=github" >}}
[reveal_hugo]
highlight_theme = "github"
{{< /highlight >}}
---
## Usage
The line highlighting is configured by adding `{}` immediately after the language selection of the markdown code block.
{{< highlight md >}}
```foo{}
```
{{< /highlight >}}
---
## Just line numbers
`{}`
{{< highlight md >}}
```go{}
package main
import "fmt"
func main() {
fmt.Println("Hello world!")
}
```
{{< /highlight >}}
```go{}
package main
import "fmt"
func main() {
fmt.Println("Hello world!")
}
```
---
## Highlight specific lines
`{<line numbers separated by comma>}`
{{< highlight md >}}
```go{1,3-5}
package main
import "fmt"
func main() {
fmt.Println("Hello world!")
}
```
{{< /highlight >}}
```go{1,3-5}
package main
import "fmt"
func main() {
fmt.Println("Hello world!")
}
```
---
## Multi step highlight
`{<line numbers separated by pipe>}`
{{< highlight md >}}
```go{1|2|3-5}
package main
import "fmt"
func main() {
fmt.Println("Hello world!")
}
```
{{< /highlight >}}
```go{1|2|3-5}
package main
import "fmt"
func main() {
fmt.Println("Hello world!")
}
```
---
## Hiding the line numbers
There is no Reveal.js parameter to use line highlighting *without* line numbers.
However it can be achieved by adding the some [custom CSS](https://github.com/dzello/reveal-hugo#adding-html-to-the-layout).
{{< highlight html "style=github" >}}
<style>
.hljs-ln-numbers {
display: none;
}
</style>
{{< /highlight >}}
---
💡 Put the custom CSS in either of these partials:
```text
# for all presentations
layouts/partials/reveal-hugo/body.html
```
```text
# for one presentation
layouts/partials/{presentation-name}/reveal-hugo/body.html
```
---
Thanks!

View File

@ -0,0 +1,170 @@
+++
weight = 21
+++
# Configuration
Place configuration values in `config.toml` or a presentation's front matter (`_index.md`).
---
## Reveal.js themes
Themes control the look and feel of your presentation. Set the `theme` param to any [valid Reveal.js theme](https://github.com/hakimel/reveal.js/#theming).
```toml
[params.reveal_hugo]
theme = "moon"
```
---
## Use a custom theme
To use a custom Reveal.js theme, place the CSS file in the `static` directory and set the `custom_theme` param.
```toml
[params.reveal_hugo]
custom_theme = "reveal-hugo/themes/robot-lung.css"
```
---
### Use a custom theme (advanced)
To use Hugo pipes to build a custom Reveal.js theme, place the source file (SCSS / PostCSS) in the `assets` directory and set the `custom_theme_compile` param.
```toml
[params.reveal_hugo]
custom_theme = "reveal-hugo/themes/custom-theme.scss"
custom_theme_compile = true
```
<small>
💡 See the [custom theme example presentation](/custom-theme-example/) for more details.
</small>
---
## Bundled themes
reveal-hugo comes with 2 extra Reveal.js themes:
- [robot-lung](https://github.com/dzello/revealjs-themes#robot-lung) (this one)
- [sunblind](https://github.com/dzello/revealjs-themes#sunblind)
<br>
<small>
They live in the `static/reveal-hugo/themes` folder and also [on Github](https://github.com/dzello/revealjs-themes).
</small>
---
## Reveal.js params
Set **snakecase** versions of Reveal.js params, which will be camelized and passed to `Reveal.initialize`.
```toml
[params.reveal_hugo]
history = true
slide_number = true
transition = 'zoom'
transition_speed = 'fast'
```
[Full list of params](https://github.com/hakimel/reveal.js/#configuration)
---
## highlight.js themes
To change the syntax highlighting theme, set the `highlight_theme`
to a valid [highlight.js theme name](https://highlightjs.org/static/demo/).
```toml
[params.reveal_hugo]
highlight_theme = "zenburn"
```
---
## Extending the layout
Use partials to add HTML to the page for one or all presentations at a time.
<small>
💡 This is the recommended way to add script and style tags to customize your presentations.
</small>
---
Here is where to put partials for different presentations and places in the DOM.
<br><br>
| Presentation | Before &lt;/head&gt; | Before &lt;/body&gt; |
|--------------|---------------------------------|---------------------------------|
| All | reveal-hugo/head.html | reveal-hugo/body.html |
| Root | home/reveal-hugo/head.html | home/reveal-hugo/body.html |
| Section | {section}/reveal-hugo/head.html | {section}/reveal-hugo/body.html |
&nbsp;
<small>
💡 You can also create an `end.html` to put content before the end of the `.reveal` div tag.
</small>
---
## Custom CSS Example
In `home/reveal-hugo/head.html`:
```html
<style>
.reveal section h1 {
color: blue;
}
</style>
```
---
## Custom JS Example
In `home/reveal-hugo/body.html`:
```html
<script type="text/javascript">
Reveal.addEventListener('slidechanged', function(event) {
console.log("🎞️ Slide is now " + event.indexh);
});
</script>
```
---
### Extending the layout
#### (alternative)
You can declare a custom CSS or javascript in your configuration.
```toml
[reveal_hugo]
custom_css = "css/custom.css"
custom_js = "js/custom.js"
```
<small>
These files can be located in `static/css`, `static/js` folder
💡 See the [extending layout example](/extending-layout-example/#) for more details.
</small>

View File

@ -0,0 +1,25 @@
+++
weight = 10
+++
## What's included?
- All Reveal.js HTML, CSS and JS (v3.9.2)
- All out-of-the-box Reveal.js themes
- Two custom Reveal.js themes (including this one)
<br>
<br>
[see the code on github](https://github.com/dzello/reveal-hugo)
---
## Features
- Write slides in Markdown in one or more files
- Shortcodes for fragments, sections, slides & more
- All Reveal.js parameters can be customized
- Any Hugo section can be output as a presentation
- Supports offline development or using a CDN

View File

@ -0,0 +1,43 @@
+++
weight = 42
+++
# Resources
---
## Code and docs
- [reveal-hugo Github README](https://github.com/dzello/reveal-hugo)
- [Content for this presentation](https://github.com/dzello/reveal-hugo/tree/master/exampleSite)
---
## External resources
- [Reveal.js](https://revealjs.com/)
- [Hugo docs](https://gohugo.io/)
- [Hugo output format docs](https://gohugo.io/templates/output-formats/)
---
## Designed to...
- Deploy to [Netlify](https://netlify.com/)
- Edit with [Forestry](https://forestry.io/)
---
# 🙏
Contribute by opening issues and pull requests.
---
# Thanks!
---
# ↩️
#### [Start over](#)

View File

@ -0,0 +1,41 @@
+++
weight = 30
+++
## Fragment
The `fragment` shortcode makes content appear incrementally.
```
{{%/* fragment */%}} One {{%/* /fragment */%}}
{{%/* fragment */%}} Two {{%/* /fragment */%}}
{{%/* fragment */%}} Three {{%/* /fragment */%}}
```
{{% fragment %}} One {{% /fragment %}}
{{% fragment %}} Two {{% /fragment %}}
{{% fragment %}} Three {{% /fragment %}}
---
## Frag
The `frag` shortcode is more terse than `fragment`. It accepts a `c` attribute.
```
{{</* frag c="One" */>}}
{{</* frag c="Two" */>}}
{{</* frag c="Three" */>}}
```
{{< frag c="One" >}}
{{< frag c="Two" >}}
{{< frag c="Three" >}}
---
Both `fragment` and `frag` accept two additional parameters:
- `class`: sets the class of the wrapping `span` element
- `index`: controls the order in which sections will appear

View File

@ -0,0 +1,11 @@
+++
weight = 29
+++
# Shortcodes
---
Hugo's shortcodes are similar to functions or templates that extend what you can do with Markdown.
[Shortcode documentation](https://gohugo.io/content-management/shortcodes/)

View File

@ -0,0 +1,38 @@
+++
weight = 36
+++
{{< markdown >}}
## Markdown
Reveal.js has its own [markdown processor](https://github.com/hakimel/reveal.js#markdown). To use that instead of Hugo, surround a slide with the markdown shortcode.
```markdown
{{</* markdown */>}}
# Hello world!
{{</* /markdown */>}}
```
<br>
<small>
💡 Make sure to use the `{{</* */>}}` shortcode syntax to avoid rendering by Hugo.
</small>
---
<!-- .slide: data-background="#FF4081" -->
Reveal.js markdown uses HTML comments to change slide properties, like background color.
```markdown
{{</* markdown */>}}
<!-- .slide: data-background="#FF4081" -->
# I'm a colorful slide
{{</* /markdown */>}}
```
{{< /markdown >}}

View File

@ -0,0 +1,49 @@
+++
weight = 38
+++
## Notes
Add speaker notes (with markdown) to your presentation with the `note` shortcode. Type 's' to see this slide's speaker notes.
```markdown
---
{{%/* note */%}}
- You found the **speaker notes**!
{{%/* /note */%}}
---
```
{{% note %}}
- You found the **speaker notes**!
{{% /note %}}
---
{{< slide notes="You found the notes!" >}}
## Notes
You can also add notes with the `slide` shortcode and `notes` attribute:
```markdown
---
{{%/* slide notes="You found the notes!" */%}}
---
```
---
<section data-noprocess>
<h2>Write slides in HTML</h2>
<p>Use a <code>section</code> tag with a <code>data-noprocess</code> attribute to avoid any processing by reveal-hugo.</p>
<pre>
&lt;section data-noprocess&gt;
&lt;h1&gt;Hello world!&lt;/h1&gt;
&lt;/section&gt;</pre>
<small>💡 This is useful if you can't get Markdown to output exactly what you want.</small>
</section>

View File

@ -0,0 +1,44 @@
+++
weight = 33
+++
{{% section %}}
## Section
The `section` shortcode groups slides into a **vertical display**.
<br>
<small>
use the down arrow or swipe down to continue
</small>
<br>
<a href="#" class="navigate-down">🔽</a>
---
Put the shortcode around the slides you want to group together.
```markdown
{{%/* section */%}}
## Section slide 1
---
## Section slide 2
{{%/* /section */%}}
```
Keep going down.
---
## That's it!
Use the right arrow or swipe right to continue.
{{% /section %}}

View File

@ -0,0 +1,250 @@
+++
weight = 34
+++
## Slide
Use this shortcode when you need to customize slide attributes like id, class, background color and transition.
---
{{< slide class="hello" >}}
## Slide
Add the shortcode above the slide's content, below the `---`.
```markdown
---
{{</* slide class="hello" */>}}
## Hello, world!
---
```
---
{{< slide transition="zoom" transition-speed="fast" >}}
## Custom slide 1
<small>Did you notice? This slide has a fast zoom transition.</small>
```markdown
---
{{</* slide transition="zoom" transition-speed="fast" */>}}
## Custom slide 1
---
```
---
{{< slide background-color="#FF4081" >}}
## Custom slide 2
<small>This slide has a different background color.</small>
```markdown
---
{{</* slide background-color="#FF4081" */>}}
## Custom slide 2
---
```
---
{{< slide background-image="/images/alex-litvin-790876-unsplash.jpg" background-color="#000000" >}}
## Custom slide 3
<small>This slide has a background image.</small>
```markdown
---
{{</* slide background-image="/images/alex-litvin-790876-unsplash.jpg" */>}}
---
```
<small>(credit <a href="https://unsplash.com/@alexlitvin">Alex Litvin</a>)</small>
---
{{< slide id="custom-slide" >}}
💡 Tip: Setting a slide's `id` attribute makes it easy to link to from other parts of the presentation.
<br><br>
```markdown
---
{{</* slide id="custom-slide" */>}}
## Custom slide
---
```
---
```markdown
[Try the link](#custom-slide)
```
<br>
[Try the link](#custom-slide)
---
Slide attribute possibilities from the [Reveal.js docs](https://github.com/hakimel/reveal.js):
- `autoslide`
- `state`
- `background`
- `background-color`
- `background-image`
- `background-size`
- `background-position`
- `background-repeat`
---
- `background-video`
- `background-video-loop`
- `background-video-muted`
- `background-interactive`
- `background-iframe`
- `background-transition`
- `transition` (can have different in and out transitions)
- `transition-speed`
- `notes` (can also use the note shortcode)
- `timing`
---
{{% section %}}
## Slide templates
Store sets of common slide attributes in front matter variables and apply them to slides with the template attribute.
<br>
<small>
navigate down to learn more
</small>
<br>
<a href="#" class="navigate-down">🔽</a>
---
Create templates in config.toml, _index.md or the current page's front matter. Put them under the **templates** key with a meaningful name:
```toml
[reveal_hugo.templates.hotpink]
class = "hotpink"
background = "#FF4081"
```
---
{{< slide template="hotpink" >}}
Apply the template using the **template** attribute of the slide shortcode:
```markdown
{{</* slide template="hotpink" */>}}
# I'm a hot pink slide!
```
---
If a template exists in multiple configurations, it's properties will be merged. If a property is declared multiple times, the order of precedence is:
- page
- section (_index.md)
- site (config.toml)
{{% /section %}}
---
{{% section %}}
{{< slide content="home.reusable" >}}
---
{{< slide content="common.nested.reusable" >}}
{{% /section %}}
---
{{% section %}}
## Slide-specific CSS
Add more variety to your presentation by applying slide-specific CSS.
<br>
<small>
navigate down to learn more
</small>
<br>
<a href="#" class="navigate-down">🔽</a>
---
First, use the `slide` shortcode to give the slide a class:
```markdown
---
{{</* slide class="side-by-side" */>}}
# 📈
# 📊
---
```
---
Next, use a layout extension partial like `reveal-hugo/head.html` to add CSS selectors:
```html
<style>
.reveal section.side-by-side h1 {
position: absolute;
}
.reveal section.side-by-side h1:first-of-type {
left: 25%;
}
.reveal section.side-by-side h1:nth-of-type(2) {
right: 25%;
}
</style>
```
---
{{< slide class="side-by-side" >}}
# 📈
# 📊
{{% /section %}}

View File

@ -0,0 +1,109 @@
+++
weight = 20
+++
# Usage
---
## Prerequisite
First, add this to your `config.toml`:
```toml
[outputFormats.Reveal]
baseName = "index"
mediaType = "text/html"
isHTML = true
```
---
### Presentation at site root
Create `content/_index.md`:
```markdown
+++
outputs = ["Reveal"]
+++
# Slide 1
Hello world!
```
---
### Add slides
Separate them by `---` surrounded by blank lines:
```
# Slide 1
Hello world!
---
# Slide 2
Hello program!
```
---
### Add slides with other files
Add slides to `content/home/*.md`
```markdown
+++
weight = 10
+++
# Slide 3
---
# Slide 4
```
<small>💡 Tip: Use `weight` to specify the order that files should be considered.</small>
---
### Presentation at '/{section}/'
Add slides to `content/{section}/_index.md`:
```markdown
+++
outputs = ["Reveal"]
+++
# Slide 1
---
# Slide 2
```
---
Add slides from other files in `content/{section}/*.md`
```markdown
+++
weight = 10
+++
# Slide 3
---
# Slide 4
```
<small>💡 Tip: Use `weight` to specify the order that files should be considered.</small>

View File

@ -0,0 +1,113 @@
+++
title = "Hugo highlighting example"
outputs = ["Reveal"]
[reveal_hugo]
theme = "simple"
+++
## Hugo Highlighter Presentation
This is an example of a presentation using Hugo's compile-time syntax highlighter.
---
Reveal.js uses Javascript for syntax highlighting (via Highlight.js). This might slow the presentation down if many slides contain code.
---
Hugo has a built-in [compile-time highlighter](https://gohugo.io/content-management/syntax-highlighting/), and it's lightning fast too!
---
You can enable it using the `highlight` shortcode.
{{< highlight go >}}
{{</* highlight go */>}}
package main
import "fmt"
func main() {
fmt.Println("Hello world!")
}
{{</* /highlight */>}}
{{< /highlight >}}
---
Several options are supported, check [Hugo's documentation](https://gohugo.io/content-management/syntax-highlighting/).
{{< highlight go "style=github,linenos=inline,hl_lines=8" >}}
{{</* highlight go "style=github,linenos=inline,hl_lines=6" */>}}
package main
import "fmt"
func main() {
fmt.Println("Hello world!")
}
{{</* /highlight */>}}
{{< / highlight >}}
---
You can also use Hugo's highlighter in markdown code fences,
by putting this in `config.toml`:
{{< highlight toml "style=github" >}}
# use Hugo's hl in markdown (with or without a language tag)
[markup.highlight]
codeFences = true
style = "github"
{{< /highlight >}}
(This can only be enabled globally for all presentations.)
---
- Highlight.js is automatically disabled in code blocks highlighted by Hugo.
- The two highlighters can be even mixed.
{{< highlight go >}}
package main
import "fmt"
func main() {
fmt.Println("Hello world!")
}
{{< / highlight >}}
```go
package main
import "fmt"
func main() {
fmt.Println("Hello world!")
}
```
---
If you don't need highlight.js at all, you can prevent it from loading.
{{< highlight toml "style=github" >}}
# This works both in config.toml and a presentation's front
# matter. Default plugins include highlight.js, so disable them
# and load those that we want manually.
[params.reveal_hugo]
load_default_plugins = false
plugins = [
"reveal-js/plugin/zoom-js/zoom.js",
"reveal-js/plugin/notes/notes.js",
]

View File

@ -0,0 +1,103 @@
+++
title = "Logo presentation example"
outputs = ["Reveal"]
[logo]
src = "github-logo.png"
alt = "GitHub logo with Octocat"
[reveal_hugo]
custom_theme = "reveal-hugo/themes/robot-lung.css"
margin = 0.2
+++
## logo-example
This presentation shows how to add a logo to each slide, like the GitHub one you see above.
You can generalize the concept to add any additional markup to your presentations.
---
[See the code for this presentation](https://github.com/dzello/reveal-hugo/blob/master/exampleSite/content/logo-example/_index.md)
---
First, create a partial called `body.html` and put it in this directory:
```text
layouts/partials/{section}/reveal-hugo/body.html
```
---
Substitute `{section}` for `home` if you are adding a logo to the presentation at `content/_index.md`. Otherwise, substitute the name of the Hugo section where your presentation lives.
---
The presentation you're looking at right now is in `content/logo-example`, so the partial to add the logo lives in:
```text
layouts/partials/logo-example/reveal-hugo/body.html
```
---
💡 Tip: to make the logo appear in every presentation, put it here:
```text
layouts/partials/reveal-hugo/body.html
```
---
💡 Tip: In addition to `body.html`, you can create partials `head.html` and `end.html` in any of those directories.
---
- head.html: Add markup just before the closing `</head>` tag
- body.html: Add markup just before the closing `</body>` tag
- end.html: Add markup just before the closing of the Reveal.js `div.slides` container
---
Once the partial exists in `body.html`, we can add our image tag to it:
```html
<img id="logo" src="{{ .Param "logo.src" }}" alt="{{ .Param "logo.alt" }}">
```
---
In this example, the src and alt attributes are set to values from the content's front matter or site's configuration, which you can see in `logo-example/_index.md`:
```toml
[logo]
src = "/images/github-logo.png"
alt = "GitHub logo with Octocat"
```
---
To position the logo, we can add a style tag to `body.html`:
```html
<style>
#logo {
position: absolute;
top: 20px;
left: 20px;
width: 250px;
}
</style>
```
<small>
💡 Depending on the theme you're using, your styles will be different. <br>You may also prefer to put your CSS in an external file or your Reveal.js theme.
</small>
---
# 🤗
That's it.
Happy Hugo-ing!

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

View File

@ -0,0 +1,83 @@
+++
title = "plugin-example"
description = "Shows how a Reveal.js plugin can be added and used"
outputs = ["Reveal"]
[reveal_hugo]
theme = "night"
margin = 0.2
plugins = ["plugin/gallery/gallery.plugin.js"]
+++
# plugin-example
---
This presentation demonstrates how a Reveal.js plugin can be added.
---
The plugin is called [revealjs-simple-gallery](https://github.com/marcins/revealjs-simple-gallery).
---
It can make any slide an image gallery. Here are a few examples.
---
<ul class="gallery">
<li><img src="sample1.jpg" alt="Default settings (Photo by Oscar Fernandez Alonso on Flickr)"></li>
<li><img src="sample2.jpg" alt="Default settings (Photo by bullcitydogs on Flickr)"></li>
<li><img src="sample3.jpg" alt="Default settings (Photo by Lance McCord on Flickr)"></li>
</ul>
---
<ul class="gallery" data-iterations="0" data-interval="1">
<li><img src="sample1.jpg" alt="Infinite iterations, fast transition (Photo by Oscar Fernandez Alonso on Flickr)"></li>
<li><img src="sample2.jpg" alt="Infinite iterations, fast transition (Photo by bullcitydogs on Flickr)"></li>
<li><img src="sample3.jpg" alt="Infinite iterations, fast transition (Photo by Lance McCord on Flickr)"></li>
</ul>
---
<ul class="gallery" data-iterations="2" data-interval="2" data-mode="full-screen">
<li><img src="sample1.jpg" alt="Full screen, two iterations, slow transition (Photo by Oscar Fernandez Alonso on Flickr)"></li>
<li><img src="sample2.jpg" alt="Full screen, two iterations, slow transition (Photo by bullcitydogs on Flickr)"></li>
<li><img src="sample3.jpg" alt="Full screen, two iterations, slow transition (Photo by Lance McCord on Flickr)"></li>
</ul>
---
See the [revealjs-simple-gallery GitHub repo](https://github.com/marcins/revealjs-simple-gallery) to learn about more customization options.
---
These were the steps to use this plugin for this reveal-hugo presentation.
---
### 1
Copy the plugin CSS and JavaScript into the static directory
---
### 2
Add the JavaScript file path to the `plugins` field in the front matter
---
### 3
Create a `head.html` partial inside of `layouts/partials/plugin-example/reveal-hugo`
---
### 4
In `head.html`, add a stylesheet link tag that loads the plugin CSS
---
## THE END

Binary file not shown.

After

Width:  |  Height:  |  Size: 316 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 182 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 173 KiB

View File

@ -0,0 +1,19 @@
+++
title = "Section presentation example"
outputs = ["Reveal"]
[reveal_hugo]
theme = "night"
margin = 0.2
+++
# Section Presentation
This is an example of a section presentation.
---
Section presentations are completely separate from the root presentation and each other.
---
Additional content files can be placed in the section and will be added to the presentation in the order of their weight.

View File

@ -0,0 +1,8 @@
+++
weight = 10
+++
# Including...
Content from files like this one.

View File

@ -0,0 +1,45 @@
+++
title = "Template presentation"
outputs = ["Reveal"]
[reveal_hugo]
theme = "night"
margin = 0.2
[reveal_hugo.templates.blue]
background = "#0011DD"
transition = "zoom"
+++
## Template Example
---
This presentation shows how to take advantage of reveal-hugo's slide template feature.
---
Slide templates let you specify groups of slide attributes in one place and reuse them throughout the presentation.
---
{{< slide template="blue" >}}
Here's an example of using a template called `blue`, defined in the front matter of this presentation's `_index.md` file.
---
The template can contain any valid slide customization params:
```toml
[reveal_hugo.templates.blue]
background = "#0011DD"
transition = "zoom"
```
---
Then add it to any slide using the slide shortcode:
```
{{</* slide template="blue" */>}}
```

View File

@ -0,0 +1,16 @@
+++
+++
{{< slide template="grey" >}}
Templates can be specified in `config.toml` as well, for reusability across multiple presentations.
```
[params.reveal_hugo.templates.grey]
background = "#424242"
transition = "convex"
```
---
## THE END

Some files were not shown because too many files have changed in this diff Show More