From 9ef0060024a428e2bbfa237f2632e2defe4a5ec3 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Sun, 28 Sep 2014 11:17:16 +0200
Subject: add new black theme
---
css/theme/source/black.scss | 35 +++++++++++++++++++++++++++++++++++
1 file changed, 35 insertions(+)
create mode 100644 css/theme/source/black.scss
(limited to 'css/theme/source/black.scss')
diff --git a/css/theme/source/black.scss b/css/theme/source/black.scss
new file mode 100644
index 0000000..056617e
--- /dev/null
+++ b/css/theme/source/black.scss
@@ -0,0 +1,35 @@
+/**
+ * Black theme for reveal.js.
+ *
+ * Copyright (C) 2014 Hakim El Hattab, http://hakim.se
+ */
+
+
+// Default mixins and settings -----------------
+@import "../template/mixins";
+@import "../template/settings";
+// ---------------------------------------------
+
+
+// Include theme-specific fonts
+@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
+@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
+
+
+// Override theme settings (see ../template/settings.scss)
+$backgroundColor: #111;
+
+$mainFont: 'Open Sans', Helvetica, sans-serif;
+$mainFontSize: 32px;
+$headingFont: 'Montserrat', Helvetica, sans-serif;
+$headingTextShadow: none;
+$headingLetterSpacing: normal;
+$headingTextTransform: none;
+$linkColor: #3992fb;
+$linkColorHover: lighten( $linkColor, 15% );
+$selectionBackgroundColor: lighten( $linkColor, 25% );
+
+
+// Theme template ------------------------------
+@import "../template/theme";
+// ---------------------------------------------
\ No newline at end of file
--
cgit v1.2.3
From bd176411ef7fa4b584af5deef538ab8f63f43746 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Sun, 28 Sep 2014 12:14:48 +0200
Subject: style tweaks for all themes; larger line heights, no default
adjustmetn to letter-spacing
---
css/theme/beige.css | 9 ++++-----
css/theme/black.css | 22 +++++++++++-----------
css/theme/blood.css | 9 ++++-----
css/theme/default.css | 9 ++++-----
css/theme/moon.css | 11 +++++------
css/theme/night.css | 9 ++++-----
css/theme/serif.css | 11 +++++------
css/theme/simple.css | 11 +++++------
css/theme/sky.css | 9 ++++-----
css/theme/solarized.css | 11 +++++------
css/theme/source/black.scss | 15 ++++++++++++---
css/theme/source/default.scss | 1 +
css/theme/template/settings.scss | 11 ++++++++---
css/theme/template/theme.scss | 13 ++++++-------
14 files changed, 78 insertions(+), 73 deletions(-)
(limited to 'css/theme/source/black.scss')
diff --git a/css/theme/beige.css b/css/theme/beige.css
index 685f490..5e06849 100644
--- a/css/theme/beige.css
+++ b/css/theme/beige.css
@@ -27,7 +27,6 @@ body {
font-family: "Lato", sans-serif;
font-size: 36px;
font-weight: normal;
- letter-spacing: -0.02em;
color: #333333; }
::selection {
@@ -37,7 +36,7 @@ body {
.reveal .slides > section,
.reveal .slides > section > section {
- line-height: 1.2em;
+ line-height: 1.3;
font-weight: inherit; }
/*********************************************
@@ -52,8 +51,8 @@ body {
margin: 0 0 20px 0;
color: #333333;
font-family: "League Gothic", Impact, sans-serif;
- line-height: 1em;
- letter-spacing: 0.02em;
+ line-height: 1.2;
+ letter-spacing: normal;
text-transform: uppercase;
text-shadow: none;
word-wrap: break-word; }
@@ -78,7 +77,7 @@ body {
*********************************************/
.reveal p {
margin-bottom: 10px;
- line-height: 1.2em; }
+ line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
diff --git a/css/theme/black.css b/css/theme/black.css
index 734100a..cbc4d27 100644
--- a/css/theme/black.css
+++ b/css/theme/black.css
@@ -3,7 +3,7 @@
*
* Copyright (C) 2014 Hakim El Hattab, http://hakim.se
*/
-@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
+@import url(https://fonts.googleapis.com/css?family=Montserrat:400);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
/*********************************************
* GLOBAL STYLES
@@ -14,9 +14,9 @@ body {
.reveal {
font-family: "Open Sans", Helvetica, sans-serif;
- font-size: 32px;
+ font-size: 34px;
font-weight: normal;
- color: #eeeeee; }
+ color: white; }
::selection {
color: white;
@@ -38,28 +38,28 @@ body {
.reveal h5,
.reveal h6 {
margin: 0 0 20px 0;
- color: #eeeeee;
+ color: white;
font-family: "Montserrat", Helvetica, sans-serif;
- line-height: 1em;
+ line-height: 1.2;
letter-spacing: normal;
- text-transform: none;
+ text-transform: uppercase;
text-shadow: none;
word-wrap: break-word; }
.reveal h1 {
- font-size: 3.77em; }
+ font-size: 2.8em; }
.reveal h2 {
- font-size: 2.11em; }
+ font-size: 1.8em; }
.reveal h3 {
- font-size: 1.55em; }
+ font-size: 1.5em; }
.reveal h4 {
font-size: 1em; }
.reveal h1 {
- text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
+ text-shadow: none; }
/*********************************************
* OTHER
@@ -216,7 +216,7 @@ body {
.reveal section img {
margin: 15px 0px;
background: rgba(255, 255, 255, 0.12);
- border: 4px solid #eeeeee;
+ border: 4px solid white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
.reveal a img {
diff --git a/css/theme/blood.css b/css/theme/blood.css
index a29b11d..7eb16fb 100644
--- a/css/theme/blood.css
+++ b/css/theme/blood.css
@@ -27,7 +27,6 @@ body {
font-family: Ubuntu, "sans-serif";
font-size: 36px;
font-weight: normal;
- letter-spacing: -0.02em;
color: #eeeeee; }
::selection {
@@ -37,7 +36,7 @@ body {
.reveal .slides > section,
.reveal .slides > section > section {
- line-height: 1.2em;
+ line-height: 1.3;
font-weight: inherit; }
/*********************************************
@@ -52,8 +51,8 @@ body {
margin: 0 0 20px 0;
color: #eeeeee;
font-family: Ubuntu, "sans-serif";
- line-height: 1em;
- letter-spacing: 0.02em;
+ line-height: 1.2;
+ letter-spacing: normal;
text-transform: uppercase;
text-shadow: 2px 2px 2px #222222;
word-wrap: break-word; }
@@ -78,7 +77,7 @@ body {
*********************************************/
.reveal p {
margin-bottom: 10px;
- line-height: 1.2em; }
+ line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
diff --git a/css/theme/default.css b/css/theme/default.css
index 708bfa4..43779b2 100644
--- a/css/theme/default.css
+++ b/css/theme/default.css
@@ -27,7 +27,6 @@ body {
font-family: "Lato", sans-serif;
font-size: 36px;
font-weight: normal;
- letter-spacing: -0.02em;
color: #eeeeee; }
::selection {
@@ -37,7 +36,7 @@ body {
.reveal .slides > section,
.reveal .slides > section > section {
- line-height: 1.2em;
+ line-height: 1.3;
font-weight: inherit; }
/*********************************************
@@ -52,8 +51,8 @@ body {
margin: 0 0 20px 0;
color: #eeeeee;
font-family: "League Gothic", Impact, sans-serif;
- line-height: 1em;
- letter-spacing: 0.02em;
+ line-height: 1.2;
+ letter-spacing: normal;
text-transform: uppercase;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
word-wrap: break-word; }
@@ -78,7 +77,7 @@ body {
*********************************************/
.reveal p {
margin-bottom: 10px;
- line-height: 1.2em; }
+ line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
diff --git a/css/theme/moon.css b/css/theme/moon.css
index a7b236b..02bc54b 100644
--- a/css/theme/moon.css
+++ b/css/theme/moon.css
@@ -27,7 +27,6 @@ body {
font-family: "Lato", sans-serif;
font-size: 36px;
font-weight: normal;
- letter-spacing: -0.02em;
color: #93a1a1; }
::selection {
@@ -37,7 +36,7 @@ body {
.reveal .slides > section,
.reveal .slides > section > section {
- line-height: 1.2em;
+ line-height: 1.3;
font-weight: inherit; }
/*********************************************
@@ -52,8 +51,8 @@ body {
margin: 0 0 20px 0;
color: #eee8d5;
font-family: "League Gothic", Impact, sans-serif;
- line-height: 1em;
- letter-spacing: 0.02em;
+ line-height: 1.2;
+ letter-spacing: normal;
text-transform: uppercase;
text-shadow: none;
word-wrap: break-word; }
@@ -71,14 +70,14 @@ body {
font-size: 1em; }
.reveal h1 {
- text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
+ text-shadow: none; }
/*********************************************
* OTHER
*********************************************/
.reveal p {
margin-bottom: 10px;
- line-height: 1.2em; }
+ line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
diff --git a/css/theme/night.css b/css/theme/night.css
index ec48802..5325388 100644
--- a/css/theme/night.css
+++ b/css/theme/night.css
@@ -16,7 +16,6 @@ body {
font-family: "Open Sans", sans-serif;
font-size: 30px;
font-weight: normal;
- letter-spacing: -0.02em;
color: #eeeeee; }
::selection {
@@ -26,7 +25,7 @@ body {
.reveal .slides > section,
.reveal .slides > section > section {
- line-height: 1.2em;
+ line-height: 1.3;
font-weight: inherit; }
/*********************************************
@@ -41,7 +40,7 @@ body {
margin: 0 0 20px 0;
color: #eeeeee;
font-family: "Montserrat", Impact, sans-serif;
- line-height: 1em;
+ line-height: 1.2;
letter-spacing: -0.03em;
text-transform: none;
text-shadow: none;
@@ -60,14 +59,14 @@ body {
font-size: 1em; }
.reveal h1 {
- text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
+ text-shadow: none; }
/*********************************************
* OTHER
*********************************************/
.reveal p {
margin-bottom: 10px;
- line-height: 1.2em; }
+ line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
diff --git a/css/theme/serif.css b/css/theme/serif.css
index a060bc8..db889f8 100644
--- a/css/theme/serif.css
+++ b/css/theme/serif.css
@@ -18,7 +18,6 @@ body {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
font-size: 36px;
font-weight: normal;
- letter-spacing: -0.02em;
color: black; }
::selection {
@@ -28,7 +27,7 @@ body {
.reveal .slides > section,
.reveal .slides > section > section {
- line-height: 1.2em;
+ line-height: 1.3;
font-weight: inherit; }
/*********************************************
@@ -43,8 +42,8 @@ body {
margin: 0 0 20px 0;
color: #383d3d;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
- line-height: 1em;
- letter-spacing: 0.02em;
+ line-height: 1.2;
+ letter-spacing: normal;
text-transform: none;
text-shadow: none;
word-wrap: break-word; }
@@ -62,14 +61,14 @@ body {
font-size: 1em; }
.reveal h1 {
- text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
+ text-shadow: none; }
/*********************************************
* OTHER
*********************************************/
.reveal p {
margin-bottom: 10px;
- line-height: 1.2em; }
+ line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
diff --git a/css/theme/simple.css b/css/theme/simple.css
index 528bac8..3ee5370 100644
--- a/css/theme/simple.css
+++ b/css/theme/simple.css
@@ -18,7 +18,6 @@ body {
font-family: "Lato", sans-serif;
font-size: 36px;
font-weight: normal;
- letter-spacing: -0.02em;
color: black; }
::selection {
@@ -28,7 +27,7 @@ body {
.reveal .slides > section,
.reveal .slides > section > section {
- line-height: 1.2em;
+ line-height: 1.3;
font-weight: inherit; }
/*********************************************
@@ -43,8 +42,8 @@ body {
margin: 0 0 20px 0;
color: black;
font-family: "News Cycle", Impact, sans-serif;
- line-height: 1em;
- letter-spacing: 0.02em;
+ line-height: 1.2;
+ letter-spacing: normal;
text-transform: none;
text-shadow: none;
word-wrap: break-word; }
@@ -62,14 +61,14 @@ body {
font-size: 1em; }
.reveal h1 {
- text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
+ text-shadow: none; }
/*********************************************
* OTHER
*********************************************/
.reveal p {
margin-bottom: 10px;
- line-height: 1.2em; }
+ line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
diff --git a/css/theme/sky.css b/css/theme/sky.css
index 0601db4..b8ec51e 100644
--- a/css/theme/sky.css
+++ b/css/theme/sky.css
@@ -25,7 +25,6 @@ body {
font-family: "Open Sans", sans-serif;
font-size: 36px;
font-weight: normal;
- letter-spacing: -0.02em;
color: #333333; }
::selection {
@@ -35,7 +34,7 @@ body {
.reveal .slides > section,
.reveal .slides > section > section {
- line-height: 1.2em;
+ line-height: 1.3;
font-weight: inherit; }
/*********************************************
@@ -50,7 +49,7 @@ body {
margin: 0 0 20px 0;
color: #333333;
font-family: "Quicksand", sans-serif;
- line-height: 1em;
+ line-height: 1.2;
letter-spacing: -0.08em;
text-transform: uppercase;
text-shadow: none;
@@ -69,14 +68,14 @@ body {
font-size: 1em; }
.reveal h1 {
- text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
+ text-shadow: none; }
/*********************************************
* OTHER
*********************************************/
.reveal p {
margin-bottom: 10px;
- line-height: 1.2em; }
+ line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
diff --git a/css/theme/solarized.css b/css/theme/solarized.css
index 866c314..1d373c4 100644
--- a/css/theme/solarized.css
+++ b/css/theme/solarized.css
@@ -27,7 +27,6 @@ body {
font-family: "Lato", sans-serif;
font-size: 36px;
font-weight: normal;
- letter-spacing: -0.02em;
color: #657b83; }
::selection {
@@ -37,7 +36,7 @@ body {
.reveal .slides > section,
.reveal .slides > section > section {
- line-height: 1.2em;
+ line-height: 1.3;
font-weight: inherit; }
/*********************************************
@@ -52,8 +51,8 @@ body {
margin: 0 0 20px 0;
color: #586e75;
font-family: "League Gothic", Impact, sans-serif;
- line-height: 1em;
- letter-spacing: 0.02em;
+ line-height: 1.2;
+ letter-spacing: normal;
text-transform: uppercase;
text-shadow: none;
word-wrap: break-word; }
@@ -71,14 +70,14 @@ body {
font-size: 1em; }
.reveal h1 {
- text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); }
+ text-shadow: none; }
/*********************************************
* OTHER
*********************************************/
.reveal p {
margin-bottom: 10px;
- line-height: 1.2em; }
+ line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
diff --git a/css/theme/source/black.scss b/css/theme/source/black.scss
index 056617e..6c1e271 100644
--- a/css/theme/source/black.scss
+++ b/css/theme/source/black.scss
@@ -12,23 +12,32 @@
// Include theme-specific fonts
-@import url(https://fonts.googleapis.com/css?family=Montserrat:700);
+@import url(https://fonts.googleapis.com/css?family=Montserrat:400);
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
// Override theme settings (see ../template/settings.scss)
$backgroundColor: #111;
+$mainColor: #fff;
+$headingColor: #fff;
+
$mainFont: 'Open Sans', Helvetica, sans-serif;
-$mainFontSize: 32px;
+$mainFontSize: 34px;
$headingFont: 'Montserrat', Helvetica, sans-serif;
$headingTextShadow: none;
$headingLetterSpacing: normal;
-$headingTextTransform: none;
+$headingTextTransform: uppercase;
$linkColor: #3992fb;
$linkColorHover: lighten( $linkColor, 15% );
$selectionBackgroundColor: lighten( $linkColor, 25% );
+$heading1Size: 2.8em;
+$heading2Size: 1.8em;
+$heading3Size: 1.5em;
+$heading4Size: 1.0em;
+
+
// Theme template ------------------------------
@import "../template/theme";
diff --git a/css/theme/source/default.scss b/css/theme/source/default.scss
index 1117b65..9c40485 100644
--- a/css/theme/source/default.scss
+++ b/css/theme/source/default.scss
@@ -28,6 +28,7 @@
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
// Override theme settings (see ../template/settings.scss)
+$headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2);
$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);
// Background generator
diff --git a/css/theme/template/settings.scss b/css/theme/template/settings.scss
index 1b4fe9b..88f7d75 100644
--- a/css/theme/template/settings.scss
+++ b/css/theme/template/settings.scss
@@ -13,12 +13,17 @@ $mainColor: #eee;
$headingMargin: 0 0 20px 0;
$headingFont: 'League Gothic', Impact, sans-serif;
$headingColor: #eee;
-$headingLineHeight: 1em;
-$headingLetterSpacing: 0.02em;
+$headingLineHeight: 1.2;
+$headingLetterSpacing: normal;
$headingTextTransform: uppercase;
-$headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2);
+$headingTextShadow: none;
$heading1TextShadow: $headingTextShadow;
+$heading1Size: 3.77em;
+$heading2Size: 2.11em;
+$heading3Size: 1.55em;
+$heading4Size: 1.00em;
+
// Links and actions
$linkColor: #13DAEC;
$linkColorHover: lighten( $linkColor, 20% );
diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss
index 17cf688..f2a542e 100644
--- a/css/theme/template/theme.scss
+++ b/css/theme/template/theme.scss
@@ -13,7 +13,6 @@ body {
font-family: $mainFont;
font-size: $mainFontSize;
font-weight: normal;
- letter-spacing: -0.02em;
color: $mainColor;
}
@@ -25,7 +24,7 @@ body {
.reveal .slides>section,
.reveal .slides>section>section {
- line-height: 1.2em;
+ line-height: 1.3;
font-weight: inherit;
}
@@ -52,10 +51,10 @@ body {
word-wrap: break-word;
}
-.reveal h1 { font-size: 3.77em; }
-.reveal h2 { font-size: 2.11em; }
-.reveal h3 { font-size: 1.55em; }
-.reveal h4 { font-size: 1em; }
+.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;
@@ -68,7 +67,7 @@ body {
.reveal p {
margin-bottom: 10px;
- line-height: 1.2em;
+ line-height: 1.3;
}
/* Ensure certain elements are never larger than the slide itself */
--
cgit v1.2.3
From 05403bcf16e44863e97af776cc566e75f570eef7 Mon Sep 17 00:00:00 2001
From: Hakim El Hattab
Date: Wed, 10 Dec 2014 18:18:57 +0100
Subject: first revision of new default theme #1018
---
css/theme/black.css | 13 ++++++++-----
css/theme/source/black.scss | 13 +++++++++----
index.html | 34 ++++++++++++++++------------------
js/reveal.js | 2 +-
4 files changed, 34 insertions(+), 28 deletions(-)
(limited to 'css/theme/source/black.scss')
diff --git a/css/theme/black.css b/css/theme/black.css
index 6c16a37..21d17b9 100644
--- a/css/theme/black.css
+++ b/css/theme/black.css
@@ -5,12 +5,15 @@
*
* Copyright (C) 2014 Hakim El Hattab, http://hakim.se
*/
+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: #222; }
+
/*********************************************
* GLOBAL STYLES
*********************************************/
body {
- background: #111;
- background-color: #111; }
+ background: #222;
+ background-color: #222; }
.reveal {
font-family: 'Open Sans', Helvetica, sans-serif;
@@ -41,13 +44,13 @@ body {
word-wrap: break-word; }
.reveal h1 {
- font-size: 2.8em; }
+ font-size: 2.5em; }
.reveal h2 {
- font-size: 1.8em; }
+ font-size: 1.6em; }
.reveal h3 {
- font-size: 1.5em; }
+ font-size: 1.3em; }
.reveal h4 {
font-size: 1em; }
diff --git a/css/theme/source/black.scss b/css/theme/source/black.scss
index 6c1e271..c73ca87 100644
--- a/css/theme/source/black.scss
+++ b/css/theme/source/black.scss
@@ -17,7 +17,7 @@
// Override theme settings (see ../template/settings.scss)
-$backgroundColor: #111;
+$backgroundColor: #222;
$mainColor: #fff;
$headingColor: #fff;
@@ -32,11 +32,16 @@ $linkColor: #3992fb;
$linkColorHover: lighten( $linkColor, 15% );
$selectionBackgroundColor: lighten( $linkColor, 25% );
-$heading1Size: 2.8em;
-$heading2Size: 1.8em;
-$heading3Size: 1.5em;
+$heading1Size: 2.5em;
+$heading2Size: 1.6em;
+$heading3Size: 1.3em;
$heading4Size: 1.0em;
+section.has-light-background {
+ &, h1, h2, h3, h4, h5, h6 {
+ color: #222;
+ }
+}
// Theme template ------------------------------
diff --git a/index.html b/index.html
index 98fc49b..6bf40f4 100644
--- a/index.html
+++ b/index.html
@@ -15,7 +15,7 @@
-
+
@@ -131,11 +131,7 @@
Fragments
Hit the next arrow...
... to step through ...
-
- any type
- - of view
- - fragments
-
+ ... a fragmented slide.