first commit
This commit is contained in:
commit
4729be15ee
251 changed files with 24901 additions and 0 deletions
6
archetypes/default.md
Normal file
6
archetypes/default.md
Normal file
|
|
@ -0,0 +1,6 @@
|
|||
---
|
||||
title: "{{ replace .Name "-" " " | title }}"
|
||||
date: {{ .Date }}
|
||||
draft: true
|
||||
---
|
||||
|
||||
12
config.toml
Normal file
12
config.toml
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
baseURL = "/"
|
||||
languageCode = "en-us"
|
||||
title = "Vanta Black"
|
||||
theme = "reveal-hugo"
|
||||
|
||||
[markup.goldmark.renderer]
|
||||
unsafe = true
|
||||
|
||||
[outputFormats.Reveal]
|
||||
baseName = "index"
|
||||
mediaType = "text/html"
|
||||
isHTML = true
|
||||
37
content/_index.md
Normal file
37
content/_index.md
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
+++
|
||||
title = "Vanta Black"
|
||||
outputs = ["Reveal"]
|
||||
+++
|
||||
|
||||
## 10 years of video editing experience.
|
||||
|
||||
I'm Vanta Black, and video editing is my passion.
|
||||
|
||||
---
|
||||
|
||||
#### Here's some examples of my work.
|
||||
|
||||
{{% section %}}
|
||||
|
||||
Cyberpunk Is Now
|
||||
(seizure warning)
|
||||
{{<youtube oP1vl1gyEKM>}}
|
||||
|
||||
|
||||
---
|
||||
|
||||
Longboards & Bong-Lords
|
||||
{{<youtube qyMLKVDN2rY>}}
|
||||
|
||||
---
|
||||
|
||||
The Church Of Shizlam
|
||||
{{<youtube s8aAMYW5MaM>}}
|
||||
|
||||
{{% /section %}}
|
||||
|
||||
---
|
||||
|
||||
#### Hire me
|
||||
|
||||
v4nt4bl4ck@protonmail.com
|
||||
2
themes/reveal-hugo/.gitignore
vendored
Normal file
2
themes/reveal-hugo/.gitignore
vendored
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
node_modules
|
||||
public
|
||||
76
themes/reveal-hugo/CODE_OF_CONDUCT.md
Normal file
76
themes/reveal-hugo/CODE_OF_CONDUCT.md
Normal 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
|
||||
27
themes/reveal-hugo/CONTRIBUTING.md
Normal file
27
themes/reveal-hugo/CONTRIBUTING.md
Normal 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!
|
||||
21
themes/reveal-hugo/LICENSE
Normal file
21
themes/reveal-hugo/LICENSE
Normal 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.
|
||||
589
themes/reveal-hugo/README.md
Normal file
589
themes/reveal-hugo/README.md
Normal file
|
|
@ -0,0 +1,589 @@
|
|||
# reveal-hugo
|
||||
|
||||
|
||||
[](https://reveal-hugo.dzello.com/)
|
||||
|
||||
[](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.
|
||||
|
||||
|
||||
|
||||
## 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.
|
||||
|
||||
|
||||
|
||||
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 <section> 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 </head> | Before </body> | Before closing </div> 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))
|
||||
- [DevOps Training](https://devops.training.barpilot.io/) ([source](https://github.com/guilhem/devops-training))
|
||||
|
||||
|
||||
## 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.
|
||||
1777
themes/reveal-hugo/assets/reveal-js/css/reveal.scss
Executable file
1777
themes/reveal-hugo/assets/reveal-js/css/reveal.scss
Executable file
File diff suppressed because it is too large
Load diff
39
themes/reveal-hugo/assets/reveal-js/css/theme/source/beige.scss
Executable file
39
themes/reveal-hugo/assets/reveal-js/css/theme/source/beige.scss
Executable 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";
|
||||
// ---------------------------------------------
|
||||
49
themes/reveal-hugo/assets/reveal-js/css/theme/source/black.scss
Executable file
49
themes/reveal-hugo/assets/reveal-js/css/theme/source/black.scss
Executable 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";
|
||||
// ---------------------------------------------
|
||||
78
themes/reveal-hugo/assets/reveal-js/css/theme/source/blood.scss
Executable file
78
themes/reveal-hugo/assets/reveal-js/css/theme/source/blood.scss
Executable 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;
|
||||
}
|
||||
34
themes/reveal-hugo/assets/reveal-js/css/theme/source/league.scss
Executable file
34
themes/reveal-hugo/assets/reveal-js/css/theme/source/league.scss
Executable 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";
|
||||
// ---------------------------------------------
|
||||
57
themes/reveal-hugo/assets/reveal-js/css/theme/source/moon.scss
Executable file
57
themes/reveal-hugo/assets/reveal-js/css/theme/source/moon.scss
Executable 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";
|
||||
// ---------------------------------------------
|
||||
34
themes/reveal-hugo/assets/reveal-js/css/theme/source/night.scss
Executable file
34
themes/reveal-hugo/assets/reveal-js/css/theme/source/night.scss
Executable 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";
|
||||
// ---------------------------------------------
|
||||
35
themes/reveal-hugo/assets/reveal-js/css/theme/source/serif.scss
Executable file
35
themes/reveal-hugo/assets/reveal-js/css/theme/source/serif.scss
Executable 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";
|
||||
// ---------------------------------------------
|
||||
43
themes/reveal-hugo/assets/reveal-js/css/theme/source/simple.scss
Executable file
43
themes/reveal-hugo/assets/reveal-js/css/theme/source/simple.scss
Executable 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";
|
||||
// ---------------------------------------------
|
||||
46
themes/reveal-hugo/assets/reveal-js/css/theme/source/sky.scss
Executable file
46
themes/reveal-hugo/assets/reveal-js/css/theme/source/sky.scss
Executable 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";
|
||||
// ---------------------------------------------
|
||||
63
themes/reveal-hugo/assets/reveal-js/css/theme/source/solarized.scss
Executable file
63
themes/reveal-hugo/assets/reveal-js/css/theme/source/solarized.scss
Executable 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";
|
||||
// ---------------------------------------------
|
||||
49
themes/reveal-hugo/assets/reveal-js/css/theme/source/white.scss
Executable file
49
themes/reveal-hugo/assets/reveal-js/css/theme/source/white.scss
Executable 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";
|
||||
// ---------------------------------------------
|
||||
29
themes/reveal-hugo/assets/reveal-js/css/theme/template/mixins.scss
Executable file
29
themes/reveal-hugo/assets/reveal-js/css/theme/template/mixins.scss
Executable 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% );
|
||||
}
|
||||
45
themes/reveal-hugo/assets/reveal-js/css/theme/template/settings.scss
Executable file
45
themes/reveal-hugo/assets/reveal-js/css/theme/template/settings.scss
Executable 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;
|
||||
}
|
||||
325
themes/reveal-hugo/assets/reveal-js/css/theme/template/theme.scss
Executable file
325
themes/reveal-hugo/assets/reveal-js/css/theme/template/theme.scss
Executable 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; }
|
||||