Create robot-lung and sunblind themes

joshed-io · Jul 17, 2018 · 5b7b8d8 · 5b7b8d8
1 parent 527e689
commit 5b7b8d8
Show file tree

Hide file tree

Showing 10 changed files with 1,795 additions and 1,004 deletions.
diff --git a/css/reveal.css b/css/reveal.css
diff --git a/css/theme/dzello.css → css/theme/robot-lung.css b/css/theme/dzello.css → css/theme/robot-lung.css
@@ -1,8 +1,32 @@
 /**
- * Black theme for reveal.js. This is the opposite of the 'white' theme.
- *
- * By Hakim El Hattab, http://hakim.se
- */
+
+  [ robot-lung ]
+
+  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: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 {
@@ -60,7 +84,7 @@ body {
   background-color: #fff; }
 
 .reveal {
-  font-family: "Roboto Slab", Helvetica, sans-serif;
+  font-family: "Roboto Slab", serif;
   font-size: 32px;
   font-weight: normal;
   color: #363636; }
@@ -91,7 +115,7 @@ body {
 .reveal h6 {
   margin: 0 0 20px 0;
   color: #141414;
-  font-family: "Roboto", monospace;
+  font-family: "Roboto", sans-serif;
   font-weight: 700;
   line-height: 1.2;
   letter-spacing: normal;

diff --git a/css/theme/source/dzello-green.scss → css/theme/source/robot-lung.scss b/css/theme/source/dzello-green.scss → css/theme/source/robot-lung.scss
@@ -1,38 +1,64 @@
 /**
- * Black theme for reveal.js. This is the opposite of the 'white' theme.
- *
- * By Hakim El Hattab, http://hakim.se
- */
 
+  [ robot-lung ]
+
+  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>;
+  }
+
+*/
 
 // Default mixins and settings -----------------
 @import "../template/mixins";
 @import "../template/settings";
 // ---------------------------------------------
 
-// Theme notes
-// Set margin: 0.2 in Reveal.js initializer
-// Add divs for the 4 lines described below
 
 // Include theme-specific fonts
 @import url(https://fonts.googleapis.com/css?family=Roboto+Slab:300,700);
 @import url(https://fonts.googleapis.com/css?family=Roboto:700);
 
 
+// store hot pink in a variable
+$hotPink: #FF4081;
+// the color of the thick border surrounding the presention
+$borderColor: $hotPink;
+
+
 // Override theme settings (see ../template/settings.scss)
 $backgroundColor: #fff;
 
 $mainColor: #363636;
 $headingColor: #141414;
 
 $mainFontSize: 32px;
-$mainFont: 'Roboto Slab', Helvetica, sans-serif;
-$headingFont: 'Roboto', monospace;
+$mainFont: 'Roboto Slab', serif;
+$headingFont: 'Roboto', sans-serif;
 $headingTextShadow: none;
 $headingLetterSpacing: normal;
 $headingTextTransform: uppercase;
 $headingFontWeight: 700;
-$linkColor: #4CAF50;
+$linkColor: $hotPink;
 $linkColorHover: lighten( $linkColor, 15% );
 $selectionBackgroundColor: lighten( $linkColor, 25% );
 
@@ -55,7 +81,7 @@ section.has-light-background {
 .line {
   content: '';
   position: fixed;
-  background: $linkColor;
+  background: $borderColor;
   z-index: 105;
   &.top {
     left: 0;

diff --git a/css/theme/source/dzello.scss → css/theme/source/sunblind.scss b/css/theme/source/dzello.scss → css/theme/source/sunblind.scss
@@ -1,23 +1,48 @@
 /**
- * Black theme for reveal.js. This is the opposite of the 'white' theme.
- *
- * By Hakim El Hattab, http://hakim.se
- */
 
+  [ sunblind ]
+
+  A blindingly sunny theme for Reveal.js with Lora + Leto 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>;
+  }
+
+*/
 
 // Default mixins and settings -----------------
 @import "../template/mixins";
 @import "../template/settings";
 // ---------------------------------------------
 
-// Theme notes
-// Set margin: 0.2 in Reveal.js initializer
-// Add divs for the 4 lines described below
 
 // Include theme-specific fonts
-@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=Lato:300,700);
+@import url(https://fonts.googleapis.com/css?family=Lora:700);
 
+// store colors in variables
+$hotPink: #FF4081;
+$sunshine: #f6f195;
+// the color of the thick border surrounding the presention
+$borderColor: $sunshine;
 
 // Override theme settings (see ../template/settings.scss)
 $backgroundColor: #fff;
@@ -26,20 +51,20 @@ $mainColor: #363636;
 $headingColor: #141414;
 
 $mainFontSize: 32px;
-$mainFont: 'Roboto Slab', Helvetica, sans-serif;
-$headingFont: 'Roboto', monospace;
+$mainFont: 'Lato', serif;
+$headingFont: 'Lora', sans-serif;
 $headingTextShadow: none;
 $headingLetterSpacing: normal;
 $headingTextTransform: uppercase;
 $headingFontWeight: 700;
-$linkColor: #FF4081;
+$linkColor: $hotPink;
 $linkColorHover: lighten( $linkColor, 15% );
 $selectionBackgroundColor: lighten( $linkColor, 25% );
 
-$heading1Size: 2.6em;
-$heading2Size: 2.2em;
-$heading3Size: 1.7em;
-$heading4Size: 1.4em;
+$heading1Size: 2.0em;
+$heading2Size: 1.8em;
+$heading3Size: 1.4em;
+$heading4Size: 1.2em;
 
 section.has-light-background {
   &, h1, h2, h3, h4, h5, h6 {
@@ -55,7 +80,7 @@ section.has-light-background {
 .line {
   content: '';
   position: fixed;
-  background: $linkColor;
+  background: $borderColor;
   z-index: 105;
   &.top {
     left: 0;

diff --git a/css/theme/dzello-green.css → css/theme/sunblind.css b/css/theme/dzello-green.css → css/theme/sunblind.css
@@ -1,10 +1,34 @@
 /**
- * Black theme for reveal.js. This is the opposite of the 'white' theme.
- *
- * By Hakim El Hattab, http://hakim.se
- */
-@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:300,700);
-@import url(https://fonts.googleapis.com/css?family=Roboto:700);
+
+  [ sunblind ]
+
+  A blindingly sunny theme for Reveal.js with Lora + Leto 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=Lato:300,700);
+@import url(https://fonts.googleapis.com/css?family=Lora: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 {
   color: #141414; }
 
@@ -15,7 +39,7 @@ section.has-light-background, section.has-light-background h1, section.has-light
 .line {
   content: '';
   position: fixed;
-  background: #4CAF50;
+  background: #f6f195;
   z-index: 105; }
   .line.top {
     left: 0;
@@ -60,19 +84,19 @@ body {
   background-color: #fff; }
 
 .reveal {
-  font-family: "Roboto Slab", Helvetica, sans-serif;
+  font-family: "Lato", serif;
   font-size: 32px;
   font-weight: normal;
   color: #363636; }
 
 ::selection {
   color: #fff;
-  background: #a3d7a5;
+  background: #ffc0d5;
   text-shadow: none; }
 
 ::-moz-selection {
   color: #fff;
-  background: #a3d7a5;
+  background: #ffc0d5;
   text-shadow: none; }
 
 .reveal .slides > section,
@@ -91,7 +115,7 @@ body {
 .reveal h6 {
   margin: 0 0 20px 0;
   color: #141414;
-  font-family: "Roboto", monospace;
+  font-family: "Lora", sans-serif;
   font-weight: 700;
   line-height: 1.2;
   letter-spacing: normal;
@@ -100,16 +124,16 @@ body {
   word-wrap: break-word; }
 
 .reveal h1 {
-  font-size: 2.6em; }
+  font-size: 2em; }
 
 .reveal h2 {
-  font-size: 2.2em; }
+  font-size: 1.8em; }
 
 .reveal h3 {
-  font-size: 1.7em; }
+  font-size: 1.4em; }
 
 .reveal h4 {
-  font-size: 1.4em; }
+  font-size: 1.2em; }
 
 .reveal h1 {
   text-shadow: none; }
@@ -252,20 +276,20 @@ body {
  * LINKS
  *********************************************/
 .reveal a {
-  color: #4CAF50;
+  color: #FF4081;
   text-decoration: none;
   -webkit-transition: color .15s ease;
   -moz-transition: color .15s ease;
   transition: color .15s ease; }
 
 .reveal a:hover {
-  color: #80c883;
+  color: #ff8db3;
   text-shadow: none;
   border: none; }
 
 .reveal .roll span:after {
   color: #fff;
-  background: #357a38; }
+  background: #f30053; }
 
 /*********************************************
  * IMAGES
@@ -287,21 +311,21 @@ body {
 
 .reveal a:hover img {
   background: rgba(255, 255, 255, 0.2);
-  border-color: #4CAF50;
+  border-color: #FF4081;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
 
 /*********************************************
  * NAVIGATION CONTROLS
  *********************************************/
 .reveal .controls {
-  color: #4CAF50; }
+  color: #FF4081; }
 
 /*********************************************
  * PROGRESS BAR
  *********************************************/
 .reveal .progress {
   background: rgba(0, 0, 0, 0.2);
-  color: #4CAF50; }
+  color: #FF4081; }
 
 .reveal .progress span {
   -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);

diff --git a/demo.html b/demo.html
@@ -15,7 +15,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 
     <link rel="stylesheet" href="css/reveal.css">
-    <link rel="stylesheet" href="css/theme/dzello.css" id="theme">
+    <link rel="stylesheet" href="css/theme/black.css" id="theme">
 
     <!-- Theme used for syntax highlighting of code -->
     <link rel="stylesheet" href="lib/css/zenburn.css">