genofire/themen-hugo-35c3-reveal
genofire/themen-hugo-35c3-reveal
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Swap in robot-lung Reveal.js theme

Browse source
This commit is contained in:
dzello 2018-07-17 11:45:49 +02:00
parent 0a6b9d0071
commit 6752bb7475
2 changed files with 31 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
exampleSite/content/_index.md
View file

@ -3,7 +3,7 @@ title = "reveal-hugo"
description = "A Hugo theme for creating Reveal.js presentations" description = "A Hugo theme for creating Reveal.js presentations"
outputs = ["Reveal"] outputs = ["Reveal"]
[reveal_hugo] [reveal_hugo]
custom_theme = "themes/dzello.css" custom_theme = "reveal-hugo/themes/robot-lung.css"
margin = 0.2 margin = 0.2
highlight_theme = "color-brewer" highlight_theme = "color-brewer"
transition = "slide" transition = "slide"

36
exampleSite/static/themes/dzello.css → exampleSite/static/reveal-hugo/themes/robot-lung.css
View file

@ -1,8 +1,32 @@
/** /**
* Black theme for reveal.js. This is the opposite of the 'white' theme.
* [ robot-lung ]
* By Hakim El Hattab, http://hakim.se
*/ A hot pink theme for Reveal.js with Roboto fonts and a colorful border.
By Josh Dzielak, https://dzello.com/, License MIT
The bold border is optional and requires some HTML. To use it:
1. Add 4 divs to your HTML page:
<div class="line top"></div>
<div class="line bottom"></div>
<div class="line left"></div>
<div class="line right"></div>
2. Set { margin: 0.2 } in the Reveal.js initializer to make sure
your presentation content doesn't collide with the frame.
Like the theme but don't like the colors? Don't fret. Just change
$borderColor and/or $linkColor below to something else and rebuild.
Or if you don't want to rebuild the theme just override the .line background
property with some CSS:
.line {
background: <new-color>;
}
*/
@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:300,700); @import url(https://fonts.googleapis.com/css?family=Roboto+Slab:300,700);
@import url(https://fonts.googleapis.com/css?family=Roboto:700); @import url(https://fonts.googleapis.com/css?family=Roboto:700);
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 { 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 {
@ -60,7 +84,7 @@ body {
background-color: #fff; } background-color: #fff; }
.reveal { .reveal {
font-family: "Roboto Slab", Helvetica, sans-serif; font-family: "Roboto Slab", serif;
font-size: 32px; font-size: 32px;
font-weight: normal; font-weight: normal;
color: #363636; } color: #363636; }
@ -91,7 +115,7 @@ body {
.reveal h6 { .reveal h6 {
margin: 0 0 20px 0; margin: 0 0 20px 0;
color: #141414; color: #141414;
font-family: "Roboto", monospace; font-family: "Roboto", sans-serif;
font-weight: 700; font-weight: 700;
line-height: 1.2; line-height: 1.2;
letter-spacing: normal; letter-spacing: normal;