Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated NPM packages and compatibility with Firefox #1

Open
wants to merge 13 commits into
base: master
Choose a base branch
from
+4,606 −490
Open

Updated NPM packages and compatibility with Firefox #1

Changes from 4 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
d40665b
Updated to latest npm modules
KeeTraxx Aug 20, 2018
c6bb384
Firefox compatiblity and directory listing
KeeTraxx Aug 20, 2018
79ccdcb
Added simple slide to demo.md
KeeTraxx Aug 20, 2018
76bfddf
Simple Slide support
KeeTraxx Aug 20, 2018
55c66b1
Added travis build
KeeTraxx Sep 10, 2018
a853e3e
New directory structure
KeeTraxx Sep 11, 2018
f7b5126
Links are now in line with brand.puzzle.ch
KeeTraxx Sep 11, 2018
6a726ed
Link decoration now more in line with brand.puzzle.ch
KeeTraxx Sep 11, 2018
d75e7a1
Lists are now a bit smaller
KeeTraxx Sep 11, 2018
bd58ddc
Improved code styling
KeeTraxx Sep 12, 2018
9b9e22f
secure
KeeTraxx Nov 20, 2018
7c59ffd
code has now pointer
KeeTraxx Nov 20, 2018
3dc6fa9
added fadeout animation
KeeTraxx Nov 20, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions demo.md
View file
Original file line number Diff line number Diff line change
@@ -8,6 +8,12 @@

---

# Simple Slide

Stuff

---

# First Topic

<!-- .slide: class="master02 intro" -->
4,418 changes: 4,418 additions & 0 deletions package-lock.json
View file

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -4,8 +4,8 @@
"description": "Revealjs theme based upon the Puzzle style guide",
"scripts": {
"start": "npm-run-all --parallel build reveal-md",
"build": "node-sass --watch theme/source/puzzle.scss theme/puzzle.css",
"reveal-md": "reveal-md demo.md --watch --theme puzzle"
"build": "node-sass theme/source/puzzle.scss theme/puzzle.css; node-sass --watch theme/source/puzzle.scss theme/puzzle.css",
"reveal-md": "reveal-md --watch --theme theme/puzzle.css"
},
"repository": {
"type": "git",
@@ -17,8 +17,8 @@
},
"homepage": "https://github.com/puzzle/pitc-revealjs-theme#readme",
"devDependencies": {
"node-sass": "^3.8.0",
"npm-run-all": "^2.2.0",
"reveal-md": "~0.4.0"
"node-sass": "^4.9.3",
"npm-run-all": "^4.1.3",
"reveal-md": "^2.1.0"
}
}
76 changes: 49 additions & 27 deletions theme/puzzle.css
View file
Original file line number Diff line number Diff line change
@@ -5,14 +5,27 @@
* 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
*/
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500);
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,700);
@import url("http://fonts.googleapis.com/css?family=Roboto:400,300,500");
@import url("http://fonts.googleapis.com/css?family=Roboto+Slab:400,700");
/*********************************************
* GLOBAL STYLES
*********************************************/
body {
background-color: #fff;
counter-reset: section; }
counter-reset: section;
font-family: "Roboto", sans-serif; }

body > a::before {
content: "";
display: inline-block;
background: url('data:image/svg+xml;utf8,<svg style="enable-background:new 0 0 50 50;" version="1.1" viewBox="0 0 50 50" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css" ><![CDATA[* {fill: %23444;}]]></style><g id="Layer_1"><path d="M26,3V1h-2v2H3H1v2h2v26H1v2h2h17.471L14,47.791V49h2v-0.791L22.654,33H24v16h2V33h1.346L34,48.209V49h2v-1.209L29.529,33 H47h2v-2h-2V5h2V3h-2H26z M45,31H5V5h40V31z"/> <path d="M16,28c4.411,0,8-3.589,8-8v-1h-7v-7h-1c-4.411,0-8,3.589-8,8S11.589,28,16,28z M15,14.083V21h6.917 c-0.478,2.834-2.949,5-5.917,5c-3.309,0-6-2.691-6-6C10,17.032,12.166,14.561,15,14.083z"/> <path d="M28,16c0-4.411-3.589-8-8-8h-1v9h9V16z M21,15v-4.917c2.509,0.422,4.494,2.408,4.917,4.917H21z"/> <rect height="2" width="10" x="31" y="10"/> <rect height="2" width="10" x="31" y="15"/> <rect height="2" width="10" x="31" y="20"/></g><g/></svg>');
width: 2em;
height: 2em;
vertical-align: middle;
margin-right: 0.5em; }

body > a {
color: #444; }

.reveal {
font-family: "Roboto", sans-serif;
@@ -204,7 +217,7 @@ body {
.reveal a {
color: #333;
text-decoration: none;
background-image: linear-gradient(to bottom, transparent 50%, rgba(0, 0, 0, 0.3) 50%);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.3) 50%);
background-repeat: repeat-x;
background-size: 2px 2px;
background-position: 0 1em;
@@ -299,7 +312,9 @@ body {
section.intro.past {
display: block !important; }

.reveal .intro h1:before, .reveal .intro h2:before, .reveal .intro h3:before {
.reveal .intro h1:before,
.reveal .intro h2:before,
.reveal .intro h3:before {
counter-increment: section;
content: counter(section);
background-color: white;
@@ -314,46 +329,53 @@ section.intro.past {
/*********************************************
* SLIDE MASTER
*********************************************/
.reveal .slide-background {
background: url('data:image/svg+xml;utf8,<svg width="312" height="147" viewBox="0 0 312 147" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M311.8 147H104.36L208.08 43.28 311.78 147" fill="%2347B8B2"/><path d="M238.46 73.66L311.8.32V147l-73.34-73.34" fill="%233D9ECC"/><path d="M104.36 147l51.86-51.86H52.5L.64 147h103.72" fill="%23369096"/></g></svg>') bottom right no-repeat, url('data:image/svg+xml;utf8,<svg width="156" height="208" viewBox="0 0 156 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M.1 207.15V-.28l103.7 103.72L.1 207.14" fill="%232D81B6"/><path d="M.1-.28h103.7L51.96 51.58.1-.28" fill="%2347B8B2"/><path d="M155.67 51.58l-51.86 51.86-51.85-51.86L103.8-.28l51.87 51.86" fill="%233D9ECC"/></g></svg>') top left no-repeat; }

.reveal .slide-background.master-white {
background-color: #fff;
background-repeat: no-repeat; }
background-color: #fff; }

.reveal .slide-background.master01 {
background: url('data:image/svg+xml;utf8,<svg width="312" height="147" viewBox="0 0 312 147" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M311.8 147H104.36L208.08 43.28 311.78 147" fill="#47B8B2"/><path d="M238.46 73.66L311.8.32V147l-73.34-73.34" fill="#3D9ECC"/><path d="M104.36 147l51.86-51.86H52.5L.64 147h103.72" fill="#369096"/></g></svg>') bottom right, url('data:image/svg+xml;utf8,<svg width="156" height="208" viewBox="0 0 156 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M.1 207.15V-.28l103.7 103.72L.1 207.14" fill="#2D81B6"/><path d="M.1-.28h103.7L51.96 51.58.1-.28" fill="#47B8B2"/><path d="M155.67 51.58l-51.86 51.86-51.85-51.86L103.8-.28l51.87 51.86" fill="#3D9ECC"/></g></svg>') top left;
background-color: #1E5A96;
background-repeat: no-repeat; }
background: url('data:image/svg+xml;utf8,<svg width="312" height="147" viewBox="0 0 312 147" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M311.8 147H104.36L208.08 43.28 311.78 147" fill="%2347B8B2"/><path d="M238.46 73.66L311.8.32V147l-73.34-73.34" fill="%233D9ECC"/><path d="M104.36 147l51.86-51.86H52.5L.64 147h103.72" fill="%23369096"/></g></svg>') bottom right no-repeat, url('data:image/svg+xml;utf8,<svg width="156" height="208" viewBox="0 0 156 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M.1 207.15V-.28l103.7 103.72L.1 207.14" fill="%232D81B6"/><path d="M.1-.28h103.7L51.96 51.58.1-.28" fill="%2347B8B2"/><path d="M155.67 51.58l-51.86 51.86-51.85-51.86L103.8-.28l51.87 51.86" fill="%233D9ECC"/></g></svg>') top left no-repeat;
background-color: #1E5A96; }

.master01.intro h1:before, .master01.intro h2:before, .master01.intro h3:before {
.master01.intro h1:before,
.master01.intro h2:before,
.master01.intro h3:before {
color: #1E5A96; }

.reveal .slide-background.master02 {
background: url('data:image/svg+xml;utf8,<svg width="178" height="208" viewBox="0 0 178 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M177.84-.22V207.4L73.9 103.6 177.83-.23" fill="#1E5A96"/><path d="M104.33 73.19L30.83-.23h147l-73.5 73.4" fill="#238BCA"/><path d="M52.36 125.1L.38 73.2l51.98-51.92 51.97 51.9-51.97 51.9" fill="#3FA8E0"/></g></svg>') top right, url('data:image/svg+xml;utf8,<svg width="208" height="208" viewBox="0 0 208 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M.07-.22H207.5l-103.7 103.8L.06-.2" fill="#238BCA"/><path d="M.08 103.6V-.23l51.85 51.9-51.85 51.9" fill="#1E5A96"/><path d="M51.93 155.5L.08 207.4V103.6l51.85-51.92V155.5" fill="#3FA8E0"/></g></svg>') top left;
background-color: #3B7BBE;
background-repeat: no-repeat; }
background: url('data:image/svg+xml;utf8,<svg width="178" height="208" viewBox="0 0 178 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M177.84-.22V207.4L73.9 103.6 177.83-.23" fill="%231E5A96"/><path d="M104.33 73.19L30.83-.23h147l-73.5 73.4" fill="%23238BCA"/><path d="M52.36 125.1L.38 73.2l51.98-51.92 51.97 51.9-51.97 51.9" fill="%233FA8E0"/></g></svg>') top right no-repeat, url('data:image/svg+xml;utf8,<svg width="208" height="208" viewBox="0 0 208 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M.07-.22H207.5l-103.7 103.8L.06-.2" fill="%23238BCA"/><path d="M.08 103.6V-.23l51.85 51.9-51.85 51.9" fill="%231E5A96"/><path d="M51.93 155.5L.08 207.4V103.6l51.85-51.92V155.5" fill="%233FA8E0"/></g></svg>') top left no-repeat;
background-color: #3B7BBE; }

.master02.intro h1:before, .master02.intro h2:before, .master02.intro h3:before {
.master02.intro h1:before,
.master02.intro h2:before,
.master02.intro h3:before {
color: #3B7BBE; }

.reveal .slide-background.master03 {
background: url('data:image/svg+xml;utf8,<svg width="178" height="208" viewBox="0 0 178 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M177.84-.22V207.4L73.9 103.6 177.83-.23" fill="#3FA8E0"/><path d="M104.33 73.19L30.83-.23h147l-73.5 73.4" fill="#3B7BBE"/><path d="M52.36 125.1L.38 73.2l51.98-51.92 51.97 51.9-51.97 51.9" fill="#46BCC0"/></g></svg>') top right, url('data:image/svg+xml;utf8,<svg width="208" height="208" viewBox="0 0 208 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M.07-.22H207.5l-103.7 103.8L.06-.2" fill="#3FA8E0"/><path d="M.08 103.6V-.23l51.85 51.9-51.85 51.9" fill="#46BCC0"/><path d="M51.93 155.5L.08 207.4V103.6l51.85-51.92V155.5" fill="#3B7BBE"/></g></svg>') top left;
background-color: #238BCA;
background-repeat: no-repeat; }
background: url('data:image/svg+xml;utf8,<svg width="178" height="208" viewBox="0 0 178 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M177.84-.22V207.4L73.9 103.6 177.83-.23" fill="%233FA8E0"/><path d="M104.33 73.19L30.83-.23h147l-73.5 73.4" fill="%233B7BBE"/><path d="M52.36 125.1L.38 73.2l51.98-51.92 51.97 51.9-51.97 51.9" fill="%2346BCC0"/></g></svg>') top right no-repeat, url('data:image/svg+xml;utf8,<svg width="208" height="208" viewBox="0 0 208 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M.07-.22H207.5l-103.7 103.8L.06-.2" fill="%233FA8E0"/><path d="M.08 103.6V-.23l51.85 51.9-51.85 51.9" fill="%2346BCC0"/><path d="M51.93 155.5L.08 207.4V103.6l51.85-51.92V155.5" fill="%233B7BBE"/></g></svg>') top left no-repeat;
background-color: #238BCA; }

.master03.intro h1:before, .master03.intro h2:before, .master03.intro h3:before {
.master03.intro h1:before,
.master03.intro h2:before,
.master03.intro h3:before {
color: #238BCA; }

.reveal .slide-background.master04 {
background: url('data:image/svg+xml;utf8,<svg width="178" height="208" viewBox="0 0 178 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M177.84-.22V207.4L73.9 103.6 177.83-.23" fill="#238BCA"/><path d="M104.33 73.19L30.83-.23h147l-73.5 73.4" fill="#3FA8E0"/><path d="M52.36 125.1L.38 73.2l51.98-51.92 51.97 51.9-51.97 51.9" fill="#46BCC0"/></g></svg>') top right, url('data:image/svg+xml;utf8,<svg width="208" height="208" viewBox="0 0 208 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M.07-.22H207.5l-103.7 103.8L.06-.2" fill="#46BCC0"/><path d="M.08 103.6V-.23l51.85 51.9-51.85 51.9" fill="#238BCA"/><path d="M51.93 155.5L.08 207.4V103.6l51.85-51.92V155.5" fill="#3FA8E0"/></g></svg>') top left;
background-color: #2C97A6;
background-repeat: no-repeat; }
background: url('data:image/svg+xml;utf8,<svg width="178" height="208" viewBox="0 0 178 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M177.84-.22V207.4L73.9 103.6 177.83-.23" fill="%23238BCA"/><path d="M104.33 73.19L30.83-.23h147l-73.5 73.4" fill="%233FA8E0"/><path d="M52.36 125.1L.38 73.2l51.98-51.92 51.97 51.9-51.97 51.9" fill="%2346BCC0"/></g></svg>') top right no-repeat, url('data:image/svg+xml;utf8,<svg width="208" height="208" viewBox="0 0 208 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M.07-.22H207.5l-103.7 103.8L.06-.2" fill="%2346BCC0"/><path d="M.08 103.6V-.23l51.85 51.9-51.85 51.9" fill="%23238BCA"/><path d="M51.93 155.5L.08 207.4V103.6l51.85-51.92V155.5" fill="%233FA8E0"/></g></svg>') top left no-repeat;
background-color: #2C97A6; }

.master04.intro h1:before, .master04.intro h2:before, .master04.intro h3:before {
.master04.intro h1:before,
.master04.intro h2:before,
.master04.intro h3:before {
color: #2C97A6; }

.reveal .slide-background.master05 {
background: url('data:image/svg+xml;utf8,<svg width="178" height="208" viewBox="0 0 178 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M177.84-.22V207.4L73.9 103.6 177.83-.23" fill="#2C97A6"/><path d="M104.33 73.19L30.83-.23h147l-73.5 73.4" fill="#61B44B"/><path d="M52.36 125.1L.38 73.2l51.98-51.92 51.97 51.9-51.97 51.9" fill="#46BCC0"/></g></svg>') top right, url('data:image/svg+xml;utf8,<svg width="208" height="208" viewBox="0 0 208 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M.07-.22H207.5l-103.7 103.8L.06-.2" fill="#46BCC0"/><path d="M.08 103.6V-.23l51.85 51.9-51.85 51.9" fill="#2C97A6"/><path d="M51.93 155.5L.08 207.4V103.6l51.85-51.92V155.5" fill="#61B44B"/></g></svg>') top left;
background-color: #69B978;
background-repeat: no-repeat; }
background: url('data:image/svg+xml;utf8,<svg width="178" height="208" viewBox="0 0 178 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M177.84-.22V207.4L73.9 103.6 177.83-.23" fill="%232C97A6"/><path d="M104.33 73.19L30.83-.23h147l-73.5 73.4" fill="%2361B44B"/><path d="M52.36 125.1L.38 73.2l51.98-51.92 51.97 51.9-51.97 51.9" fill="%2346BCC0"/></g></svg>') top right no-repeat, url('data:image/svg+xml;utf8,<svg width="208" height="208" viewBox="0 0 208 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M.07-.22H207.5l-103.7 103.8L.06-.2" fill="%2346BCC0"/><path d="M.08 103.6V-.23l51.85 51.9-51.85 51.9" fill="%232C97A6"/><path d="M51.93 155.5L.08 207.4V103.6l51.85-51.92V155.5" fill="%2361B44B"/></g></svg>') top left no-repeat;
background-color: #69B978; }

.master05.intro h1:before, .master05.intro h2:before, .master05.intro h3:before {
.master05.intro h1:before,
.master05.intro h2:before,
.master05.intro h3:before {
color: #69B978; }
267 changes: 143 additions & 124 deletions theme/source/puzzle.scss
View file
Original file line number Diff line number Diff line change
@@ -6,78 +6,84 @@
* reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
*/


@function headings($from:1, $to:6) {
@if $from == $to {
@return 'h#{$from}';
} @else {
@return 'h#{$from},' + headings($from+1, $to);
}
@if $from==$to {
@return 'h#{$from}';
}
@else {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why add a newline?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry this is from the scss autoformatter.

@return 'h#{$from},'+headings($from+1, $to);
}
}

// Include theme-specific fonts
@import url(http://fonts.googleapis.com/css?family=Roboto:400,300,500);
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,700);

@import url("http://fonts.googleapis.com/css?family=Roboto:400,300,500");
@import url("http://fonts.googleapis.com/css?family=Roboto+Slab:400,700");

// Override theme settings (see ../template/settings.scss)
// Background of the presentation
$backgroundColor: #fff;

$backgroundColor: #3B7BBE;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why did you change this and then hardcode it in body?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought it would be nice to have a general style. Without having to use a specific class - e.g. <!-- .slide: class="master01" -->

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds reasonable. You didn't mention it in your description.

// SVG Corners
$cornerBottomRight01: '<svg width="312" height="147" viewBox="0 0 312 147" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M311.8 147H104.36L208.08 43.28 311.78 147" fill="#47B8B2"/><path d="M238.46 73.66L311.8.32V147l-73.34-73.34" fill="#3D9ECC"/><path d="M104.36 147l51.86-51.86H52.5L.64 147h103.72" fill="#369096"/></g></svg>';
$cornerTopLeft01: '<svg width="156" height="208" viewBox="0 0 156 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M.1 207.15V-.28l103.7 103.72L.1 207.14" fill="#2D81B6"/><path d="M.1-.28h103.7L51.96 51.58.1-.28" fill="#47B8B2"/><path d="M155.67 51.58l-51.86 51.86-51.85-51.86L103.8-.28l51.87 51.86" fill="#3D9ECC"/></g></svg>';
$cornerTopLeft02: '<svg width="208" height="208" viewBox="0 0 208 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M.07-.22H207.5l-103.7 103.8L.06-.2" fill="#238BCA"/><path d="M.08 103.6V-.23l51.85 51.9-51.85 51.9" fill="#1E5A96"/><path d="M51.93 155.5L.08 207.4V103.6l51.85-51.92V155.5" fill="#3FA8E0"/></g></svg>';
$cornerTopRight02: '<svg width="178" height="208" viewBox="0 0 178 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M177.84-.22V207.4L73.9 103.6 177.83-.23" fill="#1E5A96"/><path d="M104.33 73.19L30.83-.23h147l-73.5 73.4" fill="#238BCA"/><path d="M52.36 125.1L.38 73.2l51.98-51.92 51.97 51.9-51.97 51.9" fill="#3FA8E0"/></g></svg>';
$cornerTopLeft03: '<svg width="208" height="208" viewBox="0 0 208 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M.07-.22H207.5l-103.7 103.8L.06-.2" fill="#3FA8E0"/><path d="M.08 103.6V-.23l51.85 51.9-51.85 51.9" fill="#46BCC0"/><path d="M51.93 155.5L.08 207.4V103.6l51.85-51.92V155.5" fill="#3B7BBE"/></g></svg>';
$cornerTopRight03: '<svg width="178" height="208" viewBox="0 0 178 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M177.84-.22V207.4L73.9 103.6 177.83-.23" fill="#3FA8E0"/><path d="M104.33 73.19L30.83-.23h147l-73.5 73.4" fill="#3B7BBE"/><path d="M52.36 125.1L.38 73.2l51.98-51.92 51.97 51.9-51.97 51.9" fill="#46BCC0"/></g></svg>';
$cornerTopLeft04: '<svg width="208" height="208" viewBox="0 0 208 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M.07-.22H207.5l-103.7 103.8L.06-.2" fill="#46BCC0"/><path d="M.08 103.6V-.23l51.85 51.9-51.85 51.9" fill="#238BCA"/><path d="M51.93 155.5L.08 207.4V103.6l51.85-51.92V155.5" fill="#3FA8E0"/></g></svg>';
$cornerTopRight04: '<svg width="178" height="208" viewBox="0 0 178 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M177.84-.22V207.4L73.9 103.6 177.83-.23" fill="#238BCA"/><path d="M104.33 73.19L30.83-.23h147l-73.5 73.4" fill="#3FA8E0"/><path d="M52.36 125.1L.38 73.2l51.98-51.92 51.97 51.9-51.97 51.9" fill="#46BCC0"/></g></svg>';
$cornerTopLeft05: '<svg width="208" height="208" viewBox="0 0 208 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M.07-.22H207.5l-103.7 103.8L.06-.2" fill="#46BCC0"/><path d="M.08 103.6V-.23l51.85 51.9-51.85 51.9" fill="#2C97A6"/><path d="M51.93 155.5L.08 207.4V103.6l51.85-51.92V155.5" fill="#61B44B"/></g></svg>';
$cornerTopRight05: '<svg width="178" height="208" viewBox="0 0 178 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M177.84-.22V207.4L73.9 103.6 177.83-.23" fill="#2C97A6"/><path d="M104.33 73.19L30.83-.23h147l-73.5 73.4" fill="#61B44B"/><path d="M52.36 125.1L.38 73.2l51.98-51.92 51.97 51.9-51.97 51.9" fill="#46BCC0"/></g></svg>';

$cornerBottomRight01: '<svg width="312" height="147" viewBox="0 0 312 147" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M311.8 147H104.36L208.08 43.28 311.78 147" fill="%2347B8B2"/><path d="M238.46 73.66L311.8.32V147l-73.34-73.34" fill="%233D9ECC"/><path d="M104.36 147l51.86-51.86H52.5L.64 147h103.72" fill="%23369096"/></g></svg>';
$cornerTopLeft01: '<svg width="156" height="208" viewBox="0 0 156 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M.1 207.15V-.28l103.7 103.72L.1 207.14" fill="%232D81B6"/><path d="M.1-.28h103.7L51.96 51.58.1-.28" fill="%2347B8B2"/><path d="M155.67 51.58l-51.86 51.86-51.85-51.86L103.8-.28l51.87 51.86" fill="%233D9ECC"/></g></svg>';
$cornerTopLeft02: '<svg width="208" height="208" viewBox="0 0 208 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M.07-.22H207.5l-103.7 103.8L.06-.2" fill="%23238BCA"/><path d="M.08 103.6V-.23l51.85 51.9-51.85 51.9" fill="%231E5A96"/><path d="M51.93 155.5L.08 207.4V103.6l51.85-51.92V155.5" fill="%233FA8E0"/></g></svg>';
$cornerTopRight02: '<svg width="178" height="208" viewBox="0 0 178 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M177.84-.22V207.4L73.9 103.6 177.83-.23" fill="%231E5A96"/><path d="M104.33 73.19L30.83-.23h147l-73.5 73.4" fill="%23238BCA"/><path d="M52.36 125.1L.38 73.2l51.98-51.92 51.97 51.9-51.97 51.9" fill="%233FA8E0"/></g></svg>';
$cornerTopLeft03: '<svg width="208" height="208" viewBox="0 0 208 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M.07-.22H207.5l-103.7 103.8L.06-.2" fill="%233FA8E0"/><path d="M.08 103.6V-.23l51.85 51.9-51.85 51.9" fill="%2346BCC0"/><path d="M51.93 155.5L.08 207.4V103.6l51.85-51.92V155.5" fill="%233B7BBE"/></g></svg>';
$cornerTopRight03: '<svg width="178" height="208" viewBox="0 0 178 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M177.84-.22V207.4L73.9 103.6 177.83-.23" fill="%233FA8E0"/><path d="M104.33 73.19L30.83-.23h147l-73.5 73.4" fill="%233B7BBE"/><path d="M52.36 125.1L.38 73.2l51.98-51.92 51.97 51.9-51.97 51.9" fill="%2346BCC0"/></g></svg>';
$cornerTopLeft04: '<svg width="208" height="208" viewBox="0 0 208 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M.07-.22H207.5l-103.7 103.8L.06-.2" fill="%2346BCC0"/><path d="M.08 103.6V-.23l51.85 51.9-51.85 51.9" fill="%23238BCA"/><path d="M51.93 155.5L.08 207.4V103.6l51.85-51.92V155.5" fill="%233FA8E0"/></g></svg>';
$cornerTopRight04: '<svg width="178" height="208" viewBox="0 0 178 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M177.84-.22V207.4L73.9 103.6 177.83-.23" fill="%23238BCA"/><path d="M104.33 73.19L30.83-.23h147l-73.5 73.4" fill="%233FA8E0"/><path d="M52.36 125.1L.38 73.2l51.98-51.92 51.97 51.9-51.97 51.9" fill="%2346BCC0"/></g></svg>';
$cornerTopLeft05: '<svg width="208" height="208" viewBox="0 0 208 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M.07-.22H207.5l-103.7 103.8L.06-.2" fill="%2346BCC0"/><path d="M.08 103.6V-.23l51.85 51.9-51.85 51.9" fill="%232C97A6"/><path d="M51.93 155.5L.08 207.4V103.6l51.85-51.92V155.5" fill="%2361B44B"/></g></svg>';
$cornerTopRight05: '<svg width="178" height="208" viewBox="0 0 178 208" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M177.84-.22V207.4L73.9 103.6 177.83-.23" fill="%232C97A6"/><path d="M104.33 73.19L30.83-.23h147l-73.5 73.4" fill="%2361B44B"/><path d="M52.36 125.1L.38 73.2l51.98-51.92 51.97 51.9-51.97 51.9" fill="%2346BCC0"/></g></svg>';
$icon: '<svg style="enable-background:new 0 0 50 50;" version="1.1" viewBox="0 0 50 50" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><style type="text/css" ><![CDATA[* {fill: %23444;}]]></style><g id="Layer_1"><path d="M26,3V1h-2v2H3H1v2h2v26H1v2h2h17.471L14,47.791V49h2v-0.791L22.654,33H24v16h2V33h1.346L34,48.209V49h2v-1.209L29.529,33 H47h2v-2h-2V5h2V3h-2H26z M45,31H5V5h40V31z"/> <path d="M16,28c4.411,0,8-3.589,8-8v-1h-7v-7h-1c-4.411,0-8,3.589-8,8S11.589,28,16,28z M15,14.083V21h6.917 c-0.478,2.834-2.949,5-5.917,5c-3.309,0-6-2.691-6-6C10,17.032,12.166,14.561,15,14.083z"/> <path d="M28,16c0-4.411-3.589-8-8-8h-1v9h9V16z M21,15v-4.917c2.509,0.422,4.494,2.408,4.917,4.917H21z"/> <rect height="2" width="10" x="31" y="10"/> <rect height="2" width="10" x="31" y="15"/> <rect height="2" width="10" x="31" y="20"/></g><g/></svg>';
// Primary/body text
$mainFont: 'Roboto', sans-serif;
$mainFont: 'Roboto',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why add a new line?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was because of the scss autoformatter. Sorry!

sans-serif;
$mainFontSize: 3rem;
$mainColor: #444;

// Vertical spacing between blocks of text
$blockMargin: 2.5rem;

// Headings
$headingMargin: 0 0 $blockMargin 0;
$headingFont: 'Roboto Slab', serif;
$headingFont: 'Roboto Slab',
serif;
$headingColor: $mainColor;
$headingLineHeight: 1.2;
$headingLetterSpacing: normal;
$headingTextTransform: none;
$headingTextShadow: none;
$headingFontWeight: normal;
$heading1TextShadow: $headingTextShadow;

$heading1Size: 5rem;
$heading2Size: 3.5rem;
$heading3Size: 3rem;
$heading4Size: 2rem;

// Links and actions
$linkColor: #333;
$linkColorHover: #111;

// Text selection
$selectionBackgroundColor: #69B978;
$selectionColor: #fff;




/*********************************************
* GLOBAL STYLES
*********************************************/

body {
background-color: $backgroundColor;
background-color: #fff;
counter-reset: section;
font-family: $mainFont;
}

body>a::before {
content: "";
display: inline-block;
background: url("data:image/svg+xml;utf8,#{$icon}");
width: 2em;
height: 2em;
vertical-align: middle;
margin-right: 0.5em;
}

body>a {
color: #444;
}

.reveal {
@@ -111,15 +117,12 @@ body {
& #{headings(1,6)} {
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;
}
}
@@ -130,16 +133,26 @@ body {
}
}

.reveal h1 {font-size: $heading1Size; }
.reveal h2 {font-size: $heading2Size; }
.reveal h3 {font-size: $heading3Size; }
.reveal h4 {font-size: $heading4Size; }
.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
*********************************************/
@@ -150,12 +163,14 @@ body {
}

/* 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;
@@ -169,7 +184,6 @@ body {
.reveal dl,
.reveal ul {
display: inline-block;

text-align: left;
margin: 0 0 0 1em;
}
@@ -217,15 +231,15 @@ body {
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);
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 blockquote p:first-child,
.reveal blockquote p:last-child {
display: inline-block;
}

.reveal q {
font-style: italic;
@@ -236,16 +250,14 @@ body {
position: relative;
width: 90%;
margin: $blockMargin auto;

text-align: left;
font-size: 0.55em;
font-family: monospace;
line-height: 1.2em;

word-wrap: break-word;

box-shadow: 0px 0px 6px rgba(0,0,0,0.3);
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
}

.reveal code {
font-family: monospace;
}
@@ -278,12 +290,13 @@ body {
}

.reveal table tr:last-child td {
border-bottom: none;
border-bottom: none;
}

.reveal sup {
vertical-align: super;
}

.reveal sub {
vertical-align: sub;
}
@@ -310,62 +323,58 @@ body {
.reveal a {
color: $linkColor;
text-decoration: none;
background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%, rgba(0,0,0,0.3) 50%);
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.3) 50%);
background-repeat: repeat-x;
background-size: 2px 2px;
background-position: 0 1em;

-webkit-transition: color .15s ease;
-moz-transition: color .15s ease;
transition: color .15s ease;
-moz-transition: color .15s ease;
transition: color .15s ease;
}
.reveal a:hover {
color: $linkColorHover;

text-shadow: none;
border: none;
}
.reveal a:hover {
color: $linkColorHover;
text-shadow: none;
border: none;
}

.reveal.has-dark-background {
a {
color: #eee;
background-image: linear-gradient(to bottom, rgba(255,255,255,0) 50%, rgba(255,255,255,0.3) 50%);
}
a:hover {
color: #fff;
}
.reveal.has-dark-background {
a {
color: #eee;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.3) 50%);
}
a:hover {
color: #fff;
}
}

.reveal .roll span:after {
color: #fff;
background: darken( $linkColor, 15% );
background: darken( $linkColor, 15%);
}


/*********************************************
* IMAGES
*********************************************/

.reveal section img.thumbnail {
margin: 15px 0px;
background: rgba(255,255,255,0.12);
background: rgba(255, 255, 255, 0.12);
border: 4px solid $mainColor;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

.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);
}
.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
@@ -407,35 +416,37 @@ body {
border-top-color: $linkColorHover;
}


/*********************************************
* PROGRESS BAR
*********************************************/

.reveal .progress {
background: rgba(0,0,0,0.2);
background: rgba(0, 0, 0, 0.2);
}
.reveal .progress span {
background: $linkColor;

-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);
}
.reveal .progress span {
background: $linkColor;
-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);
}

/*********************************************
* SLIDE NUMBER
*********************************************/

.reveal .slide-number {
color: $linkColor;
}

// This needs to stay block because of the css counters
section.intro.past {
display: block !important;
display: block !important;
}

.reveal .intro h1:before, .reveal .intro h2:before, .reveal .intro h3:before {
.reveal .intro h1:before,
.reveal .intro h2:before,
.reveal .intro h3:before {
counter-increment: section;
content: counter(section);
background-color: white;
@@ -448,61 +459,69 @@ section.intro.past {
line-height: 1.5em;
}


/*********************************************
* SLIDE MASTER
*********************************************/

.reveal .slide-background {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Doesn't this add a background if no style is specified?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, actually - this will add a simple puzzle style (white background + puzzle tangrams) for slides without a master slide defined. Looks cool.

background: url("data:image/svg+xml;utf8,#{$cornerBottomRight01}") bottom right no-repeat, url("data:image/svg+xml;utf8,#{$cornerTopLeft01}") top left no-repeat;
}

.reveal .slide-background.master-white {
background-color: #fff;
background-repeat: no-repeat;
}

.reveal .slide-background.master01 {
background: url("data:image/svg+xml;utf8,#{$cornerBottomRight01}") bottom right,
url("data:image/svg+xml;utf8,#{$cornerTopLeft01}") top left;
background: url("data:image/svg+xml;utf8,#{$cornerBottomRight01}") bottom right no-repeat, url("data:image/svg+xml;utf8,#{$cornerTopLeft01}") top left no-repeat;
background-color: #1E5A96;
background-repeat: no-repeat;
}
.master01.intro h1:before, .master01.intro h2:before, .master01.intro h3:before {
color: #1E5A96;

.master01.intro h1:before,
.master01.intro h2:before,
.master01.intro h3:before {
color: #1E5A96;
}

.reveal .slide-background.master02 {
background: url("data:image/svg+xml;utf8,#{$cornerTopRight02}") top right,
url("data:image/svg+xml;utf8,#{$cornerTopLeft02}") top left;
background: url("data:image/svg+xml;utf8,#{$cornerTopRight02}") top right no-repeat, url("data:image/svg+xml;utf8,#{$cornerTopLeft02}") top left no-repeat;
background-color: #3B7BBE;
background-repeat: no-repeat;
}
.master02.intro h1:before, .master02.intro h2:before, .master02.intro h3:before {
color: #3B7BBE;

.master02.intro h1:before,
.master02.intro h2:before,
.master02.intro h3:before {
color: #3B7BBE;
}

.reveal .slide-background.master03 {
background: url("data:image/svg+xml;utf8,#{$cornerTopRight03}") top right,
url("data:image/svg+xml;utf8,#{$cornerTopLeft03}") top left;
background: url("data:image/svg+xml;utf8,#{$cornerTopRight03}") top right no-repeat, url("data:image/svg+xml;utf8,#{$cornerTopLeft03}") top left no-repeat;
background-color: #238BCA;
background-repeat: no-repeat;
}
.master03.intro h1:before, .master03.intro h2:before, .master03.intro h3:before {
color: #238BCA;

.master03.intro h1:before,
.master03.intro h2:before,
.master03.intro h3:before {
color: #238BCA;
}

.reveal .slide-background.master04 {
background: url("data:image/svg+xml;utf8,#{$cornerTopRight04}") top right,
url("data:image/svg+xml;utf8,#{$cornerTopLeft04}") top left;
background: url("data:image/svg+xml;utf8,#{$cornerTopRight04}") top right no-repeat, url("data:image/svg+xml;utf8,#{$cornerTopLeft04}") top left no-repeat;
background-color: #2C97A6;
background-repeat: no-repeat;
}
.master04.intro h1:before, .master04.intro h2:before, .master04.intro h3:before {
color: #2C97A6;

.master04.intro h1:before,
.master04.intro h2:before,
.master04.intro h3:before {
color: #2C97A6;
}

.reveal .slide-background.master05 {
background: url("data:image/svg+xml;utf8,#{$cornerTopRight05}") top right,
url("data:image/svg+xml;utf8,#{$cornerTopLeft05}") top left;
background: url("data:image/svg+xml;utf8,#{$cornerTopRight05}") top right no-repeat, url("data:image/svg+xml;utf8,#{$cornerTopLeft05}") top left no-repeat;
background-color: #69B978;
background-repeat: no-repeat;
}
.master05.intro h1:before, .master05.intro h2:before, .master05.intro h3:before {
color: #69B978;
}

.master05.intro h1:before,
.master05.intro h2:before,
.master05.intro h3:before {
color: #69B978;
}