From b25fa5065720a95ead521d148f5384515549d383 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 17 Feb 2014 11:55:38 +0100 Subject: remove all use of :not(.image) --- css/theme/source/blood.scss | 8 ++++---- css/theme/source/serif.scss | 2 +- css/theme/source/sky.scss | 2 +- 3 files changed, 6 insertions(+), 6 deletions(-) (limited to 'css/theme/source') diff --git a/css/theme/source/blood.scss b/css/theme/source/blood.scss index a9925a1..f2e3a09 100644 --- a/css/theme/source/blood.scss +++ b/css/theme/source/blood.scss @@ -70,13 +70,13 @@ $selectionColor: #fff; font-weight: 700; } -.reveal a:not(.image), -.reveal a:not(.image):hover { +.reveal a, +.reveal a:hover { text-shadow: 2px 2px 2px #000; } -.reveal small a:not(.image), -.reveal small a:not(.image):hover { +.reveal small a, +.reveal small a:hover { text-shadow: 1px 1px 1px #000; } diff --git a/css/theme/source/serif.scss b/css/theme/source/serif.scss index 404b8bf..ec3fcb3 100644 --- a/css/theme/source/serif.scss +++ b/css/theme/source/serif.scss @@ -25,7 +25,7 @@ $linkColor: #51483D; $linkColorHover: lighten( $linkColor, 20% ); $selectionBackgroundColor: #26351C; -.reveal a:not(.image) { +.reveal a { line-height: 1.3em; } diff --git a/css/theme/source/sky.scss b/css/theme/source/sky.scss index 72a3a90..3fee67c 100644 --- a/css/theme/source/sky.scss +++ b/css/theme/source/sky.scss @@ -30,7 +30,7 @@ $linkColorHover: lighten( $linkColor, 20% ); $selectionBackgroundColor: #134674; // Fix links so they are not cut off -.reveal a:not(.image) { +.reveal a { line-height: 1.3em; } -- cgit v1.2.3 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 --- Gruntfile.js | 1 + css/theme/black.css | 279 ++++++++++++++++++++++++++++++++++++++++++++ css/theme/source/black.scss | 35 ++++++ 3 files changed, 315 insertions(+) create mode 100644 css/theme/black.css create mode 100644 css/theme/source/black.scss (limited to 'css/theme/source') diff --git a/Gruntfile.js b/Gruntfile.js index a497524..c8ee644 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -41,6 +41,7 @@ module.exports = function(grunt) { main: { files: { 'css/theme/default.css': 'css/theme/source/default.scss', + 'css/theme/black.css': 'css/theme/source/black.scss', 'css/theme/beige.css': 'css/theme/source/beige.scss', 'css/theme/night.css': 'css/theme/source/night.scss', 'css/theme/serif.css': 'css/theme/source/serif.scss', diff --git a/css/theme/black.css b/css/theme/black.css new file mode 100644 index 0000000..734100a --- /dev/null +++ b/css/theme/black.css @@ -0,0 +1,279 @@ +/** + * Black theme for reveal.js. + * + * 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=Open+Sans:400,700,400italic,700italic); +/********************************************* + * GLOBAL STYLES + *********************************************/ +body { + background: #111111; + background-color: #111111; } + +.reveal { + font-family: "Open Sans", Helvetica, sans-serif; + font-size: 32px; + font-weight: normal; + color: #eeeeee; } + +::selection { + color: white; + background: #b6d7fe; + text-shadow: none; } + +.reveal .slides > section, +.reveal .slides > section > section { + line-height: 1.3; + font-weight: inherit; } + +/********************************************* + * HEADERS + *********************************************/ +.reveal h1, +.reveal h2, +.reveal h3, +.reveal h4, +.reveal h5, +.reveal h6 { + margin: 0 0 20px 0; + color: #eeeeee; + font-family: "Montserrat", Helvetica, sans-serif; + line-height: 1em; + letter-spacing: normal; + text-transform: none; + text-shadow: none; + 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 { + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } + +/********************************************* + * OTHER + *********************************************/ +.reveal p { + margin-bottom: 10px; + line-height: 1.3; } + +/* 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; } + +.reveal em { + font-style: italic; } + +.reveal ol, +.reveal dl, +.reveal ul { + display: inline-block; + text-align: left; + margin: 0 0 0 1em; } + +.reveal ol { + list-style-type: decimal; } + +.reveal ul { + list-style-type: disc; } + +.reveal ul ul { + list-style-type: square; } + +.reveal ul ul ul { + list-style-type: circle; } + +.reveal ul ul, +.reveal ul ol, +.reveal ol ol, +.reveal ol ul { + display: block; + margin-left: 40px; } + +.reveal dt { + font-weight: bold; } + +.reveal dd { + margin-left: 40px; } + +.reveal q, +.reveal blockquote { + quotes: none; } + +.reveal blockquote { + display: block; + position: relative; + width: 70%; + margin: 5px auto; + padding: 5px; + font-style: italic; + background: rgba(255, 255, 255, 0.05); + 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 q { + font-style: italic; } + +.reveal pre { + display: block; + position: relative; + width: 90%; + margin: 15px 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); } + +.reveal code { + font-family: monospace; } + +.reveal pre code { + display: block; + padding: 5px; + overflow: auto; + max-height: 400px; + word-wrap: normal; + background: #3F3F3F; + color: #DCDCDC; } + +.reveal table { + margin: auto; + border-collapse: collapse; + border-spacing: 0; } + +.reveal table th { + font-weight: bold; } + +.reveal table th, +.reveal table td { + text-align: left; + padding: 0.2em 0.5em 0.2em 0.5em; + border-bottom: 1px solid; } + +.reveal table tr:last-child td { + border-bottom: none; } + +.reveal sup { + vertical-align: super; } + +.reveal sub { + vertical-align: sub; } + +.reveal small { + display: inline-block; + font-size: 0.6em; + line-height: 1.2em; + vertical-align: top; } + +.reveal small * { + vertical-align: top; } + +/********************************************* + * LINKS + *********************************************/ +.reveal a { + color: #3992fb; + text-decoration: none; + -webkit-transition: color .15s ease; + -moz-transition: color .15s ease; + transition: color .15s ease; } + +.reveal a:hover { + color: #84bbfd; + text-shadow: none; + border: none; } + +.reveal .roll span:after { + color: #fff; + background: #056be3; } + +/********************************************* + * 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); } + +.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: #3992fb; + 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: #3992fb; } + +.reveal .controls div.navigate-right, +.reveal .controls div.navigate-right.enabled { + border-left-color: #3992fb; } + +.reveal .controls div.navigate-up, +.reveal .controls div.navigate-up.enabled { + border-bottom-color: #3992fb; } + +.reveal .controls div.navigate-down, +.reveal .controls div.navigate-down.enabled { + border-top-color: #3992fb; } + +.reveal .controls div.navigate-left.enabled:hover { + border-right-color: #84bbfd; } + +.reveal .controls div.navigate-right.enabled:hover { + border-left-color: #84bbfd; } + +.reveal .controls div.navigate-up.enabled:hover { + border-bottom-color: #84bbfd; } + +.reveal .controls div.navigate-down.enabled:hover { + border-top-color: #84bbfd; } + +/********************************************* + * PROGRESS BAR + *********************************************/ +.reveal .progress { + background: rgba(0, 0, 0, 0.2); } + +.reveal .progress span { + background: #3992fb; + -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); + transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } + +/********************************************* + * SLIDE NUMBER + *********************************************/ +.reveal .slide-number { + color: #3992fb; } 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') 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') 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 ...

-
    -
  1. any type
    2. -
  2. of view
    3. -
  3. fragments
    4. -
+

... a fragmented slide.