mirror of
https://github.com/Threnklyn/reveal-hugo.git
synced 2026-05-18 21:03:29 +02:00
Example presentation using Reveal.js theme built with Hugo pipes
This commit is contained in:
dzello
@@ -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;
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
+++
|
||||
title = "This presentation uses a custom, compiled theme"
|
||||
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.
|
||||
|
||||
---
|
||||
|
||||
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.
|
||||
+1
@@ -0,0 +1 @@
|
||||
@import "../../lib/font/source-sans-pro/source-sans-pro.css";section.has-light-background,section.has-light-background h1,section.has-light-background h2,section.has-light-background h3,section.has-light-background h4,section.has-light-background h5,section.has-light-background h6{color:#222}body{background:#222;background-color:#222}.reveal{font-family:source sans pro,Helvetica,sans-serif;font-size:42px;font-weight:400;color:#fff}::selection{color:#fff;background:#bee4fd;text-shadow:none}::-moz-selection{color:#fff;background:#bee4fd;text-shadow:none}.reveal .slides section,.reveal .slides section>section{line-height:1.3;font-weight:inherit}.reveal h1,.reveal h2,.reveal h3,.reveal h4,.reveal h5,.reveal h6{margin:0 0 20px;color:#fff;font-family:source sans pro,Helvetica,sans-serif;font-weight:600;line-height:1.2;letter-spacing:normal;text-transform:uppercase;text-shadow:none;word-wrap:break-word}.reveal h1{font-size:2.5em}.reveal h2{font-size:1.6em}.reveal h3{font-size:1.3em}.reveal h4{font-size:1em}.reveal h1{text-shadow:none}.reveal p{margin:20px 0;line-height:1.3}.reveal img,.reveal video,.reveal iframe{max-width:95%;max-height:95%}.reveal strong,.reveal b{font-weight:700}.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:700}.reveal dd{margin-left:40px}.reveal blockquote{display:block;position:relative;width:70%;margin:20px auto;padding:5px;font-style:italic;background:rgba(255,255,255,.05);box-shadow:0 0 2px rgba(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:20px auto;text-align:left;font-size:.55em;font-family:monospace;line-height:1.2em;word-wrap:break-word;box-shadow:0 0 6px rgba(0,0,0,.3)}.reveal code{font-family:monospace;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:700}.reveal table th,.reveal table td{text-align:left;padding:.2em .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:.6em;line-height:1.2em;vertical-align:top}.reveal small *{vertical-align:top}.reveal a{color:#42affa;text-decoration:none;-webkit-transition:color .15s ease;-moz-transition:color .15s ease;transition:color .15s ease}.reveal a:hover{color:#8dcffc;text-shadow:none;border:none}.reveal .roll span:after{color:#fff;background:#068de9}.reveal section img{margin:15px 0;background:rgba(255,255,255,.12);border:4px solid #fff;box-shadow:0 0 10px rgba(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,.2);border-color:#42affa;box-shadow:0 0 20px rgba(0,0,0,.55)}.reveal .controls{color:#42affa}.reveal .progress{background:rgba(0,0,0,.2);color:#42affa}.reveal .progress span{-webkit-transition:width 800ms cubic-bezier(0.26,0.86,0.44,0.985);-moz-transition:width 800ms cubic-bezier(0.26,0.86,0.44,0.985);transition:width 800ms cubic-bezier(0.26,0.86,0.44,0.985)}@media print{.backgrounds{background-color:#222}}
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"Target":"green-machine.min.565a0f7a6d4f2670d4a39afe1eccb962c0f95b959ca9effb9bbd4fcf5165e21e.css","MediaType":"text/css","Data":{"Integrity":"sha256-VloPem1PJnDUo5r+Hsy5YsD5W5Wcqe/7m71Pz1Fl4h4="}}
|
||||
+1
@@ -0,0 +1 @@
|
||||
body{background:#03812d;background-color:#03812d}.reveal{font-family:source sans pro,Helvetica,sans-serif;font-size:38px;font-weight:400;color:#fff}::selection{color:#fff;background:#bee4fd;text-shadow:none}::-moz-selection{color:#fff;background:#bee4fd;text-shadow:none}.reveal .slides section,.reveal .slides section>section{line-height:1.3;font-weight:inherit}.reveal h1,.reveal h2,.reveal h3,.reveal h4,.reveal h5,.reveal h6{margin:0 0 20px;color:#fff;font-family:source sans pro,Helvetica,sans-serif;font-weight:600;line-height:1.2;letter-spacing:normal;text-transform:uppercase;text-shadow:none;word-wrap:break-word}.reveal h1{font-size:2.5em}.reveal h2{font-size:1.6em}.reveal h3{font-size:1.3em}.reveal h4{font-size:1em}.reveal h1{text-shadow:none}.reveal p{margin:20px 0;line-height:1.3}.reveal img,.reveal video,.reveal iframe{max-width:95%;max-height:95%}.reveal strong,.reveal b{font-weight:700}.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:700}.reveal dd{margin-left:40px}.reveal blockquote{display:block;position:relative;width:70%;margin:20px auto;padding:5px;font-style:italic;background:rgba(255,255,255,.05);box-shadow:0 0 2px rgba(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:20px auto;text-align:left;font-size:.55em;font-family:monospace;line-height:1.2em;word-wrap:break-word;box-shadow:0 0 6px rgba(0,0,0,.3)}.reveal code{font-family:monospace;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:700}.reveal table th,.reveal table td{text-align:left;padding:.2em .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:.6em;line-height:1.2em;vertical-align:top}.reveal small *{vertical-align:top}.reveal a{color:#42affa;text-decoration:none;-webkit-transition:color .15s ease;-moz-transition:color .15s ease;transition:color .15s ease}.reveal a:hover{color:#8dcffc;text-shadow:none;border:none}.reveal .roll span:after{color:#fff;background:#068de9}.reveal section img{margin:15px 0;background:rgba(255,255,255,.12);border:4px solid #fff;box-shadow:0 0 10px rgba(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,.2);border-color:#42affa;box-shadow:0 0 20px rgba(0,0,0,.55)}.reveal .controls{color:#42affa}.reveal .progress{background:rgba(0,0,0,.2);color:#42affa}.reveal .progress span{-webkit-transition:width 800ms cubic-bezier(0.26,0.86,0.44,0.985);-moz-transition:width 800ms cubic-bezier(0.26,0.86,0.44,0.985);transition:width 800ms cubic-bezier(0.26,0.86,0.44,0.985)}@media print{.backgrounds{background-color:#03812d}}section.has-light-background,section.has-light-background h1,section.has-light-background h2,section.has-light-background h3,section.has-light-background h4,section.has-light-background h5,section.has-light-background h6{color:#222}.reveal pre{margin:50px auto}
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"Target":"custom-theme.min.1b4415938d844dca01ca74a46071884c63016d0e1c20824e7f66e808628deb92.css","MediaType":"text/css","Data":{"Integrity":"sha256-G0QVk42ETcoBynSkYHGITGMBbQ4cIIJOf2boCGKN65I="}}
|
||||
+1
@@ -0,0 +1 @@
|
||||
body{background:#0f0;background-color:#0f0}.reveal{font-family:lato,sans-serif;font-size:40px;font-weight:400;color:#fff}::selection{color:#fff;background:#ff5e99;text-shadow:none}::-moz-selection{color:#fff;background:#ff5e99;text-shadow:none}.reveal .slides section,.reveal .slides section>section{line-height:1.3;font-weight:inherit}.reveal h1,.reveal h2,.reveal h3,.reveal h4,.reveal h5,.reveal h6{margin:0 0 20px;color:#fff;font-family:league gothic,Impact,sans-serif;font-weight:400;line-height:1.2;letter-spacing:normal;text-transform:uppercase;text-shadow:none;word-wrap:break-word}.reveal h1{font-size:3.77em}.reveal h2{font-size:2.11em}.reveal h3{font-size:1.55em}.reveal h4{font-size:1em}.reveal h1{text-shadow:none}.reveal p{margin:20px 0;line-height:1.3}.reveal img,.reveal video,.reveal iframe{max-width:95%;max-height:95%}.reveal strong,.reveal b{font-weight:700}.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:700}.reveal dd{margin-left:40px}.reveal blockquote{display:block;position:relative;width:70%;margin:20px auto;padding:5px;font-style:italic;background:rgba(255,255,255,.05);box-shadow:0 0 2px rgba(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:20px auto;text-align:left;font-size:.55em;font-family:monospace;line-height:1.2em;word-wrap:break-word;box-shadow:0 0 6px rgba(0,0,0,.3)}.reveal code{font-family:monospace;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:700}.reveal table th,.reveal table td{text-align:left;padding:.2em .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:.6em;line-height:1.2em;vertical-align:top}.reveal small *{vertical-align:top}.reveal a{color:#13daec;text-decoration:none;-webkit-transition:color .15s ease;-moz-transition:color .15s ease;transition:color .15s ease}.reveal a:hover{color:#71e9f4;text-shadow:none;border:none}.reveal .roll span:after{color:#fff;background:#0d99a5}.reveal section img{margin:15px 0;background:rgba(255,255,255,.12);border:4px solid #fff;box-shadow:0 0 10px rgba(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,.2);border-color:#13daec;box-shadow:0 0 20px rgba(0,0,0,.55)}.reveal .controls{color:#13daec}.reveal .progress{background:rgba(0,0,0,.2);color:#13daec}.reveal .progress span{-webkit-transition:width 800ms cubic-bezier(0.26,0.86,0.44,0.985);-moz-transition:width 800ms cubic-bezier(0.26,0.86,0.44,0.985);transition:width 800ms cubic-bezier(0.26,0.86,0.44,0.985)}@media print{.backgrounds{background-color:#0f0}}
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"Target":"green-machine.min.331c0061201d33cccd36bdb7b715356cd6635f68c9698de692f93d86114420d1.css","MediaType":"text/css","Data":{"Integrity":"sha256-MxwAYSAdM8zNNr23txU1bNZjX2jJaY3mkvk9hhFEINE="}}
|
||||
+1
@@ -0,0 +1 @@
|
||||
section.has-light-background,section.has-light-background h1,section.has-light-background h2,section.has-light-background h3,section.has-light-background h4,section.has-light-background h5,section.has-light-background h6{color:#222}body{background:#03812d;background-color:#03812d}.reveal{font-family:source sans pro,Helvetica,sans-serif;font-size:38px;font-weight:400;color:#fff}::selection{color:#fff;background:#bee4fd;text-shadow:none}::-moz-selection{color:#fff;background:#bee4fd;text-shadow:none}.reveal .slides section,.reveal .slides section>section{line-height:1.3;font-weight:inherit}.reveal h1,.reveal h2,.reveal h3,.reveal h4,.reveal h5,.reveal h6{margin:0 0 20px;color:#fff;font-family:source sans pro,Helvetica,sans-serif;font-weight:600;line-height:1.2;letter-spacing:normal;text-transform:uppercase;text-shadow:none;word-wrap:break-word}.reveal h1{font-size:2.5em}.reveal h2{font-size:1.6em}.reveal h3{font-size:1.3em}.reveal h4{font-size:1em}.reveal h1{text-shadow:none}.reveal p{margin:20px 0;line-height:1.3}.reveal img,.reveal video,.reveal iframe{max-width:95%;max-height:95%}.reveal strong,.reveal b{font-weight:700}.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:700}.reveal dd{margin-left:40px}.reveal blockquote{display:block;position:relative;width:70%;margin:20px auto;padding:5px;font-style:italic;background:rgba(255,255,255,.05);box-shadow:0 0 2px rgba(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:20px auto;text-align:left;font-size:.55em;font-family:monospace;line-height:1.2em;word-wrap:break-word;box-shadow:0 0 6px rgba(0,0,0,.3)}.reveal code{font-family:monospace;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:700}.reveal table th,.reveal table td{text-align:left;padding:.2em .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:.6em;line-height:1.2em;vertical-align:top}.reveal small *{vertical-align:top}.reveal a{color:#42affa;text-decoration:none;-webkit-transition:color .15s ease;-moz-transition:color .15s ease;transition:color .15s ease}.reveal a:hover{color:#8dcffc;text-shadow:none;border:none}.reveal .roll span:after{color:#fff;background:#068de9}.reveal section img{margin:15px 0;background:rgba(255,255,255,.12);border:4px solid #fff;box-shadow:0 0 10px rgba(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,.2);border-color:#42affa;box-shadow:0 0 20px rgba(0,0,0,.55)}.reveal .controls{color:#42affa}.reveal .progress{background:rgba(0,0,0,.2);color:#42affa}.reveal .progress span{-webkit-transition:width 800ms cubic-bezier(0.26,0.86,0.44,0.985);-moz-transition:width 800ms cubic-bezier(0.26,0.86,0.44,0.985);transition:width 800ms cubic-bezier(0.26,0.86,0.44,0.985)}@media print{.backgrounds{background-color:#03812d}}
|
||||
+1
@@ -0,0 +1 @@
|
||||
{"Target":"green.min.cd09f16ebf87e55c0223ec68fdf992518c9a406f4a9552951c4cced046819ee8.css","MediaType":"text/css","Data":{"Integrity":"sha256-zQnxbr+H5VwCI+xo/fmSUYyaQG9KlVKVHEzO0EaBnug="}}
|
||||
Reference in New Issue
Block a user