aboutsummaryrefslogtreecommitdiffhomepage
path: root/css/theme
diff options
context:
space:
mode:
Diffstat (limited to 'css/theme')
-rw-r--r--css/theme/README.md4
-rw-r--r--css/theme/beige.css8
-rw-r--r--css/theme/blood.css175
-rw-r--r--css/theme/default.css8
-rw-r--r--css/theme/moon.css8
-rw-r--r--css/theme/night.css8
-rw-r--r--css/theme/serif.css8
-rw-r--r--css/theme/simple.css8
-rw-r--r--css/theme/sky.css8
-rw-r--r--css/theme/solarized.css8
-rw-r--r--css/theme/source/blood.scss91
-rw-r--r--css/theme/template/theme.scss9
12 files changed, 333 insertions, 10 deletions
diff --git a/css/theme/README.md b/css/theme/README.md
index 28ded29..8237586 100644
--- a/css/theme/README.md
+++ b/css/theme/README.md
@@ -2,7 +2,7 @@
Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Make sure that you have the reveal.js development environment including the Grunt dependencies installed before proceding: https://github.com/hakimel/reveal.js#full-setup
-
+You also need to install Ruby and then Sass (with `gem install sass`).
## Creating a Theme
@@ -21,3 +21,5 @@ This is where you override the default theme. Either by specifying variables (se
4. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)**
The template theme file which will generate final CSS output based on the currently defined variables.
+
+When you are done, run `grunt themes` to compile the Sass file to CSS and you are ready to use your new theme.
diff --git a/css/theme/beige.css b/css/theme/beige.css
index 1d9a886..089cb7b 100644
--- a/css/theme/beige.css
+++ b/css/theme/beige.css
@@ -27,7 +27,7 @@ body {
.reveal {
font-family: "Lato", sans-serif;
font-size: 36px;
- font-weight: 200;
+ font-weight: normal;
letter-spacing: -0.02em;
color: #333333; }
@@ -140,3 +140,9 @@ body {
-ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
+
+/*********************************************
+ * SLIDE NUMBER
+ *********************************************/
+.reveal .slide-number {
+ color: #8b743d; }
diff --git a/css/theme/blood.css b/css/theme/blood.css
new file mode 100644
index 0000000..0aefdd9
--- /dev/null
+++ b/css/theme/blood.css
@@ -0,0 +1,175 @@
+@import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic);
+/**
+ * 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.
+ *
+ */
+/*********************************************
+ * GLOBAL STYLES
+ *********************************************/
+body {
+ background: #222222;
+ background: -moz-radial-gradient(center, circle cover, #626262 0%, #222222 100%);
+ background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #626262), color-stop(100%, #222222));
+ background: -webkit-radial-gradient(center, circle cover, #626262 0%, #222222 100%);
+ background: -o-radial-gradient(center, circle cover, #626262 0%, #222222 100%);
+ background: -ms-radial-gradient(center, circle cover, #626262 0%, #222222 100%);
+ background: radial-gradient(center, circle cover, #626262 0%, #222222 100%);
+ background-color: #2b2b2b; }
+
+.reveal {
+ font-family: Ubuntu, "sans-serif";
+ font-size: 36px;
+ font-weight: normal;
+ letter-spacing: -0.02em;
+ color: #eeeeee; }
+
+::selection {
+ color: white;
+ background: #aa2233;
+ text-shadow: none; }
+
+/*********************************************
+ * HEADERS
+ *********************************************/
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
+ margin: 0 0 20px 0;
+ color: #eeeeee;
+ font-family: Ubuntu, "sans-serif";
+ line-height: 0.9em;
+ letter-spacing: 0.02em;
+ text-transform: uppercase;
+ text-shadow: 2px 2px 2px #222222; }
+
+.reveal h1 {
+ text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); }
+
+/*********************************************
+ * LINKS
+ *********************************************/
+.reveal a:not(.image) {
+ color: #aa2233;
+ text-decoration: none;
+ -webkit-transition: color .15s ease;
+ -moz-transition: color .15s ease;
+ -ms-transition: color .15s ease;
+ -o-transition: color .15s ease;
+ transition: color .15s ease; }
+
+.reveal a:not(.image):hover {
+ color: #dd5566;
+ text-shadow: none;
+ border: none; }
+
+.reveal .roll span:after {
+ color: #fff;
+ background: #6a1520; }
+
+/*********************************************
+ * IMAGES
+ *********************************************/
+.reveal section img {
+ margin: 15px 0px;
+ background: rgba(255, 255, 255, 0.12);
+ border: 4px solid #eeeeee;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+ -webkit-transition: all .2s linear;
+ -moz-transition: all .2s linear;
+ -ms-transition: all .2s linear;
+ -o-transition: all .2s linear;
+ transition: all .2s linear; }
+
+.reveal a:hover img {
+ background: rgba(255, 255, 255, 0.2);
+ border-color: #aa2233;
+ box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
+
+/*********************************************
+ * NAVIGATION CONTROLS
+ *********************************************/
+.reveal .controls div.navigate-left,
+.reveal .controls div.navigate-left.enabled {
+ border-right-color: #aa2233; }
+
+.reveal .controls div.navigate-right,
+.reveal .controls div.navigate-right.enabled {
+ border-left-color: #aa2233; }
+
+.reveal .controls div.navigate-up,
+.reveal .controls div.navigate-up.enabled {
+ border-bottom-color: #aa2233; }
+
+.reveal .controls div.navigate-down,
+.reveal .controls div.navigate-down.enabled {
+ border-top-color: #aa2233; }
+
+.reveal .controls div.navigate-left.enabled:hover {
+ border-right-color: #dd5566; }
+
+.reveal .controls div.navigate-right.enabled:hover {
+ border-left-color: #dd5566; }
+
+.reveal .controls div.navigate-up.enabled:hover {
+ border-bottom-color: #dd5566; }
+
+.reveal .controls div.navigate-down.enabled:hover {
+ border-top-color: #dd5566; }
+
+/*********************************************
+ * PROGRESS BAR
+ *********************************************/
+.reveal .progress {
+ background: rgba(0, 0, 0, 0.2); }
+
+.reveal .progress span {
+ background: #aa2233;
+ -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+ -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+ -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+ -o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+ transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
+
+/*********************************************
+ * SLIDE NUMBER
+ *********************************************/
+.reveal .slide-number {
+ color: #aa2233; }
+
+.reveal p {
+ font-weight: 300;
+ text-shadow: 1px 1px #222222; }
+
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
+ font-weight: 700; }
+
+.reveal a:not(.image),
+.reveal a:not(.image):hover {
+ text-shadow: 2px 2px 2px #000; }
+
+.reveal small a:not(.image),
+.reveal small a:not(.image):hover {
+ text-shadow: 1px 1px 1px #000; }
+
+.reveal p code {
+ background-color: #23241f;
+ display: inline-block;
+ border-radius: 7px; }
+
+.reveal small code {
+ vertical-align: baseline; }
diff --git a/css/theme/default.css b/css/theme/default.css
index 9a2f7c6..a234861 100644
--- a/css/theme/default.css
+++ b/css/theme/default.css
@@ -27,7 +27,7 @@ body {
.reveal {
font-family: "Lato", sans-serif;
font-size: 36px;
- font-weight: 200;
+ font-weight: normal;
letter-spacing: -0.02em;
color: #eeeeee; }
@@ -140,3 +140,9 @@ body {
-ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
+
+/*********************************************
+ * SLIDE NUMBER
+ *********************************************/
+.reveal .slide-number {
+ color: #13daec; }
diff --git a/css/theme/moon.css b/css/theme/moon.css
index 5aa2866..3c15b00 100644
--- a/css/theme/moon.css
+++ b/css/theme/moon.css
@@ -27,7 +27,7 @@ body {
.reveal {
font-family: "Lato", sans-serif;
font-size: 36px;
- font-weight: 200;
+ font-weight: normal;
letter-spacing: -0.02em;
color: #93a1a1; }
@@ -140,3 +140,9 @@ body {
-ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
+
+/*********************************************
+ * SLIDE NUMBER
+ *********************************************/
+.reveal .slide-number {
+ color: #268bd2; }
diff --git a/css/theme/night.css b/css/theme/night.css
index 2ea3fc4..e8703a5 100644
--- a/css/theme/night.css
+++ b/css/theme/night.css
@@ -15,7 +15,7 @@ body {
.reveal {
font-family: "Open Sans", sans-serif;
font-size: 30px;
- font-weight: 200;
+ font-weight: normal;
letter-spacing: -0.02em;
color: #eeeeee; }
@@ -128,3 +128,9 @@ body {
-ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
+
+/*********************************************
+ * SLIDE NUMBER
+ *********************************************/
+.reveal .slide-number {
+ color: #e7ad52; }
diff --git a/css/theme/serif.css b/css/theme/serif.css
index 734de56..d5f0ad8 100644
--- a/css/theme/serif.css
+++ b/css/theme/serif.css
@@ -17,7 +17,7 @@ body {
.reveal {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
font-size: 36px;
- font-weight: 200;
+ font-weight: normal;
letter-spacing: -0.02em;
color: black; }
@@ -130,3 +130,9 @@ body {
-ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
+
+/*********************************************
+ * SLIDE NUMBER
+ *********************************************/
+.reveal .slide-number {
+ color: #51483d; }
diff --git a/css/theme/simple.css b/css/theme/simple.css
index b8f31bc..504606c 100644
--- a/css/theme/simple.css
+++ b/css/theme/simple.css
@@ -17,7 +17,7 @@ body {
.reveal {
font-family: "Lato", sans-serif;
font-size: 36px;
- font-weight: 200;
+ font-weight: normal;
letter-spacing: -0.02em;
color: black; }
@@ -130,3 +130,9 @@ body {
-ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
+
+/*********************************************
+ * SLIDE NUMBER
+ *********************************************/
+.reveal .slide-number {
+ color: darkblue; }
diff --git a/css/theme/sky.css b/css/theme/sky.css
index 35d048e..1a44760 100644
--- a/css/theme/sky.css
+++ b/css/theme/sky.css
@@ -24,7 +24,7 @@ body {
.reveal {
font-family: "Open Sans", sans-serif;
font-size: 36px;
- font-weight: 200;
+ font-weight: normal;
letter-spacing: -0.02em;
color: #333333; }
@@ -137,3 +137,9 @@ body {
-ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
+
+/*********************************************
+ * SLIDE NUMBER
+ *********************************************/
+.reveal .slide-number {
+ color: #3b759e; }
diff --git a/css/theme/solarized.css b/css/theme/solarized.css
index 17c3205..c8bff7c 100644
--- a/css/theme/solarized.css
+++ b/css/theme/solarized.css
@@ -27,7 +27,7 @@ body {
.reveal {
font-family: "Lato", sans-serif;
font-size: 36px;
- font-weight: 200;
+ font-weight: normal;
letter-spacing: -0.02em;
color: #657b83; }
@@ -140,3 +140,9 @@ body {
-ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
-o-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
+
+/*********************************************
+ * SLIDE NUMBER
+ *********************************************/
+.reveal .slide-number {
+ color: #268bd2; }
diff --git a/css/theme/source/blood.scss b/css/theme/source/blood.scss
new file mode 100644
index 0000000..a9925a1
--- /dev/null
+++ b/css/theme/source/blood.scss
@@ -0,0 +1,91 @@
+/**
+ * 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;
+
+// Main text
+$mainFont: Ubuntu, 'sans-serif';
+$mainFontSize: 36px;
+$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;
+
+// Background generator
+@mixin bodyBackground() {
+ @include radial-gradient( $coal, lighten( $coal, 25% ) );
+}
+
+// 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 a:not(.image),
+.reveal a:not(.image):hover {
+ text-shadow: 2px 2px 2px #000;
+}
+
+.reveal small a:not(.image),
+.reveal small a:not(.image):hover {
+ text-shadow: 1px 1px 1px #000;
+}
+
+.reveal p code {
+ background-color: $codeBackground;
+ display: inline-block;
+ border-radius: 7px;
+}
+
+.reveal small code {
+ vertical-align: baseline;
+} \ No newline at end of file
diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss
index 735b765..1562b54 100644
--- a/css/theme/template/theme.scss
+++ b/css/theme/template/theme.scss
@@ -12,7 +12,7 @@ body {
.reveal {
font-family: $mainFont;
font-size: $mainFontSize;
- font-weight: 200;
+ font-weight: normal;
letter-spacing: -0.02em;
color: $mainColor;
}
@@ -160,4 +160,11 @@ body {
transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985);
}
+/*********************************************
+ * SLIDE NUMBER
+ *********************************************/
+.reveal .slide-number {
+ color: $linkColor;
+}
+