From d10e179563f1660b8b869f3d47d103c6988f3cc9 Mon Sep 17 00:00:00 2001
From: Jake <git@theorangeone.net>
Date: Sat, 10 Mar 2018 16:50:23 +0000
Subject: [PATCH] Add revealjs hugo theme project page

---
 .spelling                               |  5 ++++
 content/projects/hugo-theme-revealjs.md | 32 +++++++++++++++++++++++++
 static/src/scss/style.scss              |  8 ++++---
 3 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 content/projects/hugo-theme-revealjs.md

diff --git a/.spelling b/.spelling
index b5a09c2..f43d9d7 100644
--- a/.spelling
+++ b/.spelling
@@ -85,3 +85,8 @@ secure-ish
 45-bit
 1-second
 anymore
+revealjs
+3rd-party
+OnlyOffice
+speakerdeck
+slideshare
diff --git a/content/projects/hugo-theme-revealjs.md b/content/projects/hugo-theme-revealjs.md
new file mode 100644
index 0000000..203ec60
--- /dev/null
+++ b/content/projects/hugo-theme-revealjs.md
@@ -0,0 +1,32 @@
+---
+title: Hugo Theme RevealJS
+date: 2018-03-10
+repo: RealOrangeOne/hugo-theme-revealjs
+---
+
+RevealJS is a versatile front-end framework for creating slide show presentations in your browser using HTML. It's designed to be easy to use, and create high-quality presentations. 
+
+To create a presentation with RevealJS, you'll still need a server to run the presentation from. It's certainly possible to access presentations by opening a single file in your web browser of choice, but this is 2018, that's no fun! When we use a file server, it's also likely easier to serve and share your presentations with others, without needing 3rd-party services like [slideshare](https://www.slideshare.net), [slides](https://slides.com/) and [speakerdeck](https://speakerdeck.com/).
+
+## _"But, what about PowerPoint?"_
+Microsoft's [PowerPoint](https://products.office.com/en-gb/powerpoint) is well regarded as the best and most popular presentation tool. The issue is, I'm primarily a Linux user, so PowerPoint isn't especially an option (besides doing odd things with [wine](https://www.winehq.org/)). There are alternative tools out there, such as [LibreOffice](https://www.libreoffice.org/), [OnlyOffice](https://www.libreoffice.org/), and [WPS Office](https://www.wps.com/), but the fact I can't edit them in any editor I want, edit them with simple plain-text, and present them with nothing more than a web browser, is kind of annoying.
+
+## Static site generators
+Static site generators have been around for many years, and I'm a big fan of them. In simple, it converts an simple markup format, usually markdown, into HTML, using templates to reduce code duplication. This happens as a compilation step, and outputs exactly what needs to be served to the client.
+
+### [Hugo](https://gohugo.io/)
+Hugo is my static site generator of choice, it's powering [this website](https://github.com/realorangeone/theorangeone.net). It converts markdown into HTML just like any other static file server, only it does it incredibly quickly! Hugo also has some additional nifty features which make site development much simpler, like image resizing and live reloading!
+
+## Static site generators + RevealJS
+If we combine revealjs and a static site generator, we get many benefits. Besides the obvious fact we get to write our content as markdown rather than raw HTML (revealjs does natively support this, but conversion is done in the browser), we also get the ability to use the niceties they offer to make content development easier.
+
+## `hugo-theme-revealjs`
+`hugo-theme-revealjs` is a theme for Hugo which combines the 2: a powerful static site generator, with a powerful presentation framework. The theme makes writing content east, especially for those who like content organised. Each slide is a separate markdown file, which can be grouped into sections to form the vertical slide groups Reveal is famous for. All settings and configuration options for Reveal are accessible through this theme, in an attempt to make it versatile and usable by all people.
+
+The source for the theme is on [GitHub](https://github.com/RealOrangeOne/hugo-theme-revealjs), and can be [installed](https://gohugo.io/themes/installing-and-using-themes/) as if it were any other theme.
+
+{{< iframe src="https://hugo-theme-revealjs.netlify.com/" >}}
+Example presentation, which shows off some of the features of the theme.
+{{< /iframe >}}
+
+I plan on using this for any presentations I have to do in future.
diff --git a/static/src/scss/style.scss b/static/src/scss/style.scss
index 95781e3..f70e75a 100644
--- a/static/src/scss/style.scss
+++ b/static/src/scss/style.scss
@@ -216,9 +216,11 @@ pre.chroma {
   min-width: initial;
 }
 
-p code, li code {
-  @extend .chroma;
-  padding: $spacer * 0.25;
+p, li, h1, h2, h3, h4, h5, h6 {
+  code {
+    @extend .chroma;
+    padding: $spacer * 0.25;
+  }
 }
 
 .header-image {