From 1aadc53eacaa0a474131657c663842768ed5b982 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 25 Feb 2014 12:32:23 +0100 Subject: don't reduce line height for all headings in base theme (#753) --- css/theme/template/settings.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'css/theme/template/settings.scss') diff --git a/css/theme/template/settings.scss b/css/theme/template/settings.scss index 739a609..1b4fe9b 100644 --- a/css/theme/template/settings.scss +++ b/css/theme/template/settings.scss @@ -13,7 +13,7 @@ $mainColor: #eee; $headingMargin: 0 0 20px 0; $headingFont: 'League Gothic', Impact, sans-serif; $headingColor: #eee; -$headingLineHeight: 0.9em; +$headingLineHeight: 1em; $headingLetterSpacing: 0.02em; $headingTextTransform: uppercase; $headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2); -- 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/template/settings.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 b09923551a0ba95fac3631f992793e44d71f474f Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Wed, 5 Nov 2014 11:52:32 +0100 Subject: theme updates, normalized spacing between block-level elements --- css/theme/beige.css | 6 +++--- css/theme/black.css | 6 +++--- css/theme/blood.css | 6 +++--- css/theme/default.css | 6 +++--- css/theme/moon.css | 6 +++--- css/theme/night.css | 6 +++--- css/theme/serif.css | 6 +++--- css/theme/simple.css | 6 +++--- css/theme/sky.css | 6 +++--- css/theme/solarized.css | 6 +++--- css/theme/template/settings.scss | 5 ++++- css/theme/template/theme.scss | 6 +++--- index.html | 4 +--- 13 files changed, 38 insertions(+), 37 deletions(-) (limited to 'css/theme/template/settings.scss') diff --git a/css/theme/beige.css b/css/theme/beige.css index 83263fb..1a57b33 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -71,7 +71,7 @@ body { * OTHER *********************************************/ .reveal p { - margin-bottom: 10px; + margin: 20px 0; line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ @@ -119,7 +119,7 @@ body { display: block; position: relative; width: 70%; - margin: 5px auto; + margin: 20px auto; padding: 5px; font-style: italic; background: rgba(255, 255, 255, 0.05); @@ -135,7 +135,7 @@ body { display: block; position: relative; width: 90%; - margin: 15px auto; + margin: 20px auto; text-align: left; font-size: 0.55em; font-family: monospace; diff --git a/css/theme/black.css b/css/theme/black.css index a790d86..6c16a37 100644 --- a/css/theme/black.css +++ b/css/theme/black.css @@ -59,7 +59,7 @@ body { * OTHER *********************************************/ .reveal p { - margin-bottom: 10px; + margin: 20px 0; line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ @@ -107,7 +107,7 @@ body { display: block; position: relative; width: 70%; - margin: 5px auto; + margin: 20px auto; padding: 5px; font-style: italic; background: rgba(255, 255, 255, 0.05); @@ -123,7 +123,7 @@ body { display: block; position: relative; width: 90%; - margin: 15px auto; + margin: 20px auto; text-align: left; font-size: 0.55em; font-family: monospace; diff --git a/css/theme/blood.css b/css/theme/blood.css index d73dc2f..b2c6941 100644 --- a/css/theme/blood.css +++ b/css/theme/blood.css @@ -70,7 +70,7 @@ body { * OTHER *********************************************/ .reveal p { - margin-bottom: 10px; + margin: 20px 0; line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ @@ -118,7 +118,7 @@ body { display: block; position: relative; width: 70%; - margin: 5px auto; + margin: 20px auto; padding: 5px; font-style: italic; background: rgba(255, 255, 255, 0.05); @@ -134,7 +134,7 @@ body { display: block; position: relative; width: 90%; - margin: 15px auto; + margin: 20px auto; text-align: left; font-size: 0.55em; font-family: monospace; diff --git a/css/theme/default.css b/css/theme/default.css index 8e064bf..c3e5edf 100644 --- a/css/theme/default.css +++ b/css/theme/default.css @@ -71,7 +71,7 @@ body { * OTHER *********************************************/ .reveal p { - margin-bottom: 10px; + margin: 20px 0; line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ @@ -119,7 +119,7 @@ body { display: block; position: relative; width: 70%; - margin: 5px auto; + margin: 20px auto; padding: 5px; font-style: italic; background: rgba(255, 255, 255, 0.05); @@ -135,7 +135,7 @@ body { display: block; position: relative; width: 90%; - margin: 15px auto; + margin: 20px auto; text-align: left; font-size: 0.55em; font-family: monospace; diff --git a/css/theme/moon.css b/css/theme/moon.css index d90616a..4a83bde 100644 --- a/css/theme/moon.css +++ b/css/theme/moon.css @@ -71,7 +71,7 @@ body { * OTHER *********************************************/ .reveal p { - margin-bottom: 10px; + margin: 20px 0; line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ @@ -119,7 +119,7 @@ body { display: block; position: relative; width: 70%; - margin: 5px auto; + margin: 20px auto; padding: 5px; font-style: italic; background: rgba(255, 255, 255, 0.05); @@ -135,7 +135,7 @@ body { display: block; position: relative; width: 90%; - margin: 15px auto; + margin: 20px auto; text-align: left; font-size: 0.55em; font-family: monospace; diff --git a/css/theme/night.css b/css/theme/night.css index 69dd224..f0f3623 100644 --- a/css/theme/night.css +++ b/css/theme/night.css @@ -59,7 +59,7 @@ body { * OTHER *********************************************/ .reveal p { - margin-bottom: 10px; + margin: 20px 0; line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ @@ -107,7 +107,7 @@ body { display: block; position: relative; width: 70%; - margin: 5px auto; + margin: 20px auto; padding: 5px; font-style: italic; background: rgba(255, 255, 255, 0.05); @@ -123,7 +123,7 @@ body { display: block; position: relative; width: 90%; - margin: 15px auto; + margin: 20px auto; text-align: left; font-size: 0.55em; font-family: monospace; diff --git a/css/theme/serif.css b/css/theme/serif.css index 28171ad..c265dc3 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -61,7 +61,7 @@ body { * OTHER *********************************************/ .reveal p { - margin-bottom: 10px; + margin: 20px 0; line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ @@ -109,7 +109,7 @@ body { display: block; position: relative; width: 70%; - margin: 5px auto; + margin: 20px auto; padding: 5px; font-style: italic; background: rgba(255, 255, 255, 0.05); @@ -125,7 +125,7 @@ body { display: block; position: relative; width: 90%; - margin: 15px auto; + margin: 20px auto; text-align: left; font-size: 0.55em; font-family: monospace; diff --git a/css/theme/simple.css b/css/theme/simple.css index 6d65454..58bc3ec 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -61,7 +61,7 @@ body { * OTHER *********************************************/ .reveal p { - margin-bottom: 10px; + margin: 20px 0; line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ @@ -109,7 +109,7 @@ body { display: block; position: relative; width: 70%; - margin: 5px auto; + margin: 20px auto; padding: 5px; font-style: italic; background: rgba(255, 255, 255, 0.05); @@ -125,7 +125,7 @@ body { display: block; position: relative; width: 90%; - margin: 15px auto; + margin: 20px auto; text-align: left; font-size: 0.55em; font-family: monospace; diff --git a/css/theme/sky.css b/css/theme/sky.css index 36d0b02..7f3e689 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -68,7 +68,7 @@ body { * OTHER *********************************************/ .reveal p { - margin-bottom: 10px; + margin: 20px 0; line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ @@ -116,7 +116,7 @@ body { display: block; position: relative; width: 70%; - margin: 5px auto; + margin: 20px auto; padding: 5px; font-style: italic; background: rgba(255, 255, 255, 0.05); @@ -132,7 +132,7 @@ body { display: block; position: relative; width: 90%; - margin: 15px auto; + margin: 20px auto; text-align: left; font-size: 0.55em; font-family: monospace; diff --git a/css/theme/solarized.css b/css/theme/solarized.css index dd4ec2b..5eb2a9d 100644 --- a/css/theme/solarized.css +++ b/css/theme/solarized.css @@ -71,7 +71,7 @@ body { * OTHER *********************************************/ .reveal p { - margin-bottom: 10px; + margin: 20px 0; line-height: 1.3; } /* Ensure certain elements are never larger than the slide itself */ @@ -119,7 +119,7 @@ body { display: block; position: relative; width: 70%; - margin: 5px auto; + margin: 20px auto; padding: 5px; font-style: italic; background: rgba(255, 255, 255, 0.05); @@ -135,7 +135,7 @@ body { display: block; position: relative; width: 90%; - margin: 15px auto; + margin: 20px auto; text-align: left; font-size: 0.55em; font-family: monospace; diff --git a/css/theme/template/settings.scss b/css/theme/template/settings.scss index 88f7d75..7e484f8 100644 --- a/css/theme/template/settings.scss +++ b/css/theme/template/settings.scss @@ -9,8 +9,11 @@ $mainFont: 'Lato', sans-serif; $mainFontSize: 36px; $mainColor: #eee; +// Vertical spacing between blocks of text +$blockMargin: 20px; + // Headings -$headingMargin: 0 0 20px 0; +$headingMargin: 0 0 $blockMargin 0; $headingFont: 'League Gothic', Impact, sans-serif; $headingColor: #eee; $headingLineHeight: 1.2; diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index f2a542e..da907f5 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -66,7 +66,7 @@ body { *********************************************/ .reveal p { - margin-bottom: 10px; + margin: $blockMargin 0; line-height: 1.3; } @@ -136,7 +136,7 @@ body { display: block; position: relative; width: 70%; - margin: 5px auto; + margin: $blockMargin auto; padding: 5px; font-style: italic; @@ -156,7 +156,7 @@ body { display: block; position: relative; width: 90%; - margin: 15px auto; + margin: $blockMargin auto; text-align: left; font-size: 0.55em; diff --git a/index.html b/index.html index 5c34e39..b5be94b 100644 --- a/index.html +++ b/index.html @@ -42,7 +42,7 @@

Reveal.js

-

HTML Presentations Made Easy

+

The HTML Presentation Framwork

Created by Hakim El Hattab / @hakimel

@@ -326,8 +326,6 @@ function linkify( selector ) {

roll-in

fade-out

highlight-red

-

highlight-green

-

highlight-blue

current-visible

highlight-current-blue

-- cgit v1.2.3 From 25a674a3c2de34fe9a51e0d954d198dd419268ae Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 6 Jan 2015 11:42:23 +0100 Subject: new font & type settings for default theme --- css/theme/beige.css | 1 + css/theme/black.css | 42 ++++++++++++++++++++-------------------- css/theme/blood.css | 1 + css/theme/league.css | 1 + css/theme/moon.css | 1 + css/theme/night.css | 1 + css/theme/serif.css | 1 + css/theme/simple.css | 1 + css/theme/sky.css | 1 + css/theme/solarized.css | 1 + css/theme/source/black.scss | 14 +++++++------- css/theme/source/white.scss | 12 ++++++------ css/theme/template/settings.scss | 1 + css/theme/template/theme.scss | 1 + css/theme/white.css | 40 +++++++++++++++++++------------------- 15 files changed, 65 insertions(+), 54 deletions(-) (limited to 'css/theme/template/settings.scss') diff --git a/css/theme/beige.css b/css/theme/beige.css index 1a57b33..72a6de4 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -46,6 +46,7 @@ body { margin: 0 0 20px 0; color: #333; font-family: 'League Gothic', Impact, sans-serif; + font-weight: normal; line-height: 1.2; letter-spacing: normal; text-transform: uppercase; diff --git a/css/theme/black.css b/css/theme/black.css index 21d17b9..700fd46 100644 --- a/css/theme/black.css +++ b/css/theme/black.css @@ -1,9 +1,8 @@ -@import url(https://fonts.googleapis.com/css?family=Montserrat:400); -@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); +@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic&subset=latin,latin-ext); /** * Black theme for reveal.js. * - * Copyright (C) 2014 Hakim El Hattab, http://hakim.se + * Copyright (C) 2015 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; } @@ -16,14 +15,14 @@ body { background-color: #222; } .reveal { - font-family: 'Open Sans', Helvetica, sans-serif; - font-size: 34px; + font-family: 'Source Sans Pro', Helvetica, sans-serif; + font-size: 38px; font-weight: normal; color: #fff; } ::selection { color: #fff; - background: #b6d7fe; + background: #bee4fd; text-shadow: none; } .reveal .slides > section, .reveal .slides > section > section { @@ -36,7 +35,8 @@ body { .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { margin: 0 0 20px 0; color: #fff; - font-family: 'Montserrat', Helvetica, sans-serif; + font-family: 'Source Sans Pro', Helvetica, sans-serif; + font-weight: 600; line-height: 1.2; letter-spacing: normal; text-transform: uppercase; @@ -181,20 +181,20 @@ body { * LINKS *********************************************/ .reveal a { - color: #3992fb; + color: #42affa; text-decoration: none; -webkit-transition: color 0.15s ease; -moz-transition: color 0.15s ease; transition: color 0.15s ease; } .reveal a:hover { - color: #84bcfd; + color: #8dcffc; text-shadow: none; border: none; } .reveal .roll span:after { color: #fff; - background: #056ce3; } + background: #068ee9; } /********************************************* * IMAGES @@ -212,35 +212,35 @@ body { .reveal a:hover img { background: rgba(255, 255, 255, 0.2); - border-color: #3992fb; + border-color: #42affa; 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; } + border-right-color: #42affa; } .reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { - border-left-color: #3992fb; } + border-left-color: #42affa; } .reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { - border-bottom-color: #3992fb; } + border-bottom-color: #42affa; } .reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { - border-top-color: #3992fb; } + border-top-color: #42affa; } .reveal .controls div.navigate-left.enabled:hover { - border-right-color: #84bcfd; } + border-right-color: #8dcffc; } .reveal .controls div.navigate-right.enabled:hover { - border-left-color: #84bcfd; } + border-left-color: #8dcffc; } .reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #84bcfd; } + border-bottom-color: #8dcffc; } .reveal .controls div.navigate-down.enabled:hover { - border-top-color: #84bcfd; } + border-top-color: #8dcffc; } /********************************************* * PROGRESS BAR @@ -249,7 +249,7 @@ body { background: rgba(0, 0, 0, 0.2); } .reveal .progress span { - background: #3992fb; + background: #42affa; -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); } @@ -258,4 +258,4 @@ body { * SLIDE NUMBER *********************************************/ .reveal .slide-number { - color: #3992fb; } + color: #42affa; } diff --git a/css/theme/blood.css b/css/theme/blood.css index b2c6941..768d2a3 100644 --- a/css/theme/blood.css +++ b/css/theme/blood.css @@ -45,6 +45,7 @@ body { margin: 0 0 20px 0; color: #eee; font-family: Ubuntu, 'sans-serif'; + font-weight: normal; line-height: 1.2; letter-spacing: normal; text-transform: uppercase; diff --git a/css/theme/league.css b/css/theme/league.css index 80fb09e..4f44103 100644 --- a/css/theme/league.css +++ b/css/theme/league.css @@ -48,6 +48,7 @@ body { margin: 0 0 20px 0; color: #eee; font-family: 'League Gothic', Impact, sans-serif; + font-weight: normal; line-height: 1.2; letter-spacing: normal; text-transform: uppercase; diff --git a/css/theme/moon.css b/css/theme/moon.css index 4a83bde..5f0ef06 100644 --- a/css/theme/moon.css +++ b/css/theme/moon.css @@ -46,6 +46,7 @@ body { margin: 0 0 20px 0; color: #eee8d5; font-family: 'League Gothic', Impact, sans-serif; + font-weight: normal; line-height: 1.2; letter-spacing: normal; text-transform: uppercase; diff --git a/css/theme/night.css b/css/theme/night.css index f0f3623..71319b2 100644 --- a/css/theme/night.css +++ b/css/theme/night.css @@ -34,6 +34,7 @@ body { margin: 0 0 20px 0; color: #eee; font-family: 'Montserrat', Impact, sans-serif; + font-weight: normal; line-height: 1.2; letter-spacing: -0.03em; text-transform: none; diff --git a/css/theme/serif.css b/css/theme/serif.css index c265dc3..ed85db6 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -36,6 +36,7 @@ body { margin: 0 0 20px 0; color: #383D3D; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; + font-weight: normal; line-height: 1.2; letter-spacing: normal; text-transform: none; diff --git a/css/theme/simple.css b/css/theme/simple.css index 58bc3ec..d9153d7 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -36,6 +36,7 @@ body { margin: 0 0 20px 0; color: #000; font-family: 'News Cycle', Impact, sans-serif; + font-weight: normal; line-height: 1.2; letter-spacing: normal; text-transform: none; diff --git a/css/theme/sky.css b/css/theme/sky.css index 7f3e689..f7e8402 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -43,6 +43,7 @@ body { margin: 0 0 20px 0; color: #333; font-family: 'Quicksand', sans-serif; + font-weight: normal; line-height: 1.2; letter-spacing: -0.08em; text-transform: uppercase; diff --git a/css/theme/solarized.css b/css/theme/solarized.css index 5eb2a9d..bef58a0 100644 --- a/css/theme/solarized.css +++ b/css/theme/solarized.css @@ -46,6 +46,7 @@ body { margin: 0 0 20px 0; color: #586e75; font-family: 'League Gothic', Impact, sans-serif; + font-weight: normal; line-height: 1.2; letter-spacing: normal; text-transform: uppercase; diff --git a/css/theme/source/black.scss b/css/theme/source/black.scss index c73ca87..571a156 100644 --- a/css/theme/source/black.scss +++ b/css/theme/source/black.scss @@ -1,7 +1,7 @@ /** * Black theme for reveal.js. * - * Copyright (C) 2014 Hakim El Hattab, http://hakim.se + * Copyright (C) 2015 Hakim El Hattab, http://hakim.se */ @@ -12,8 +12,7 @@ // Include theme-specific fonts -@import url(https://fonts.googleapis.com/css?family=Montserrat:400); -@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); +@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic&subset=latin,latin-ext); // Override theme settings (see ../template/settings.scss) @@ -22,13 +21,14 @@ $backgroundColor: #222; $mainColor: #fff; $headingColor: #fff; -$mainFont: 'Open Sans', Helvetica, sans-serif; -$mainFontSize: 34px; -$headingFont: 'Montserrat', Helvetica, sans-serif; +$mainFontSize: 38px; +$mainFont: 'Source Sans Pro', Helvetica, sans-serif; +$headingFont: 'Source Sans Pro', Helvetica, sans-serif; $headingTextShadow: none; $headingLetterSpacing: normal; $headingTextTransform: uppercase; -$linkColor: #3992fb; +$headingFontWeight: 600; +$linkColor: #42affa; $linkColorHover: lighten( $linkColor, 15% ); $selectionBackgroundColor: lighten( $linkColor, 25% ); diff --git a/css/theme/source/white.scss b/css/theme/source/white.scss index 52a156e..d470dfe 100644 --- a/css/theme/source/white.scss +++ b/css/theme/source/white.scss @@ -12,8 +12,7 @@ // Include theme-specific fonts -@import url(https://fonts.googleapis.com/css?family=Montserrat:400); -@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); +@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic&subset=latin,latin-ext); // Override theme settings (see ../template/settings.scss) @@ -22,13 +21,14 @@ $backgroundColor: #fff; $mainColor: #222; $headingColor: #222; -$mainFont: 'Open Sans', Helvetica, sans-serif; -$mainFontSize: 34px; -$headingFont: 'Montserrat', Helvetica, sans-serif; +$mainFontSize: 38px; +$mainFont: 'Source Sans Pro', Helvetica, sans-serif; +$headingFont: 'Source Sans Pro', Helvetica, sans-serif; $headingTextShadow: none; $headingLetterSpacing: normal; $headingTextTransform: uppercase; -$linkColor: #3992fb; +$headingFontWeight: 600; +$linkColor: #2a76dd; $linkColorHover: lighten( $linkColor, 15% ); $selectionBackgroundColor: lighten( $linkColor, 25% ); diff --git a/css/theme/template/settings.scss b/css/theme/template/settings.scss index 7e484f8..ffaac23 100644 --- a/css/theme/template/settings.scss +++ b/css/theme/template/settings.scss @@ -20,6 +20,7 @@ $headingLineHeight: 1.2; $headingLetterSpacing: normal; $headingTextTransform: uppercase; $headingTextShadow: none; +$headingFontWeight: normal; $heading1TextShadow: $headingTextShadow; $heading1Size: 3.77em; diff --git a/css/theme/template/theme.scss b/css/theme/template/theme.scss index da907f5..d1be10a 100644 --- a/css/theme/template/theme.scss +++ b/css/theme/template/theme.scss @@ -42,6 +42,7 @@ body { color: $headingColor; font-family: $headingFont; + font-weight: $headingFontWeight; line-height: $headingLineHeight; letter-spacing: $headingLetterSpacing; diff --git a/css/theme/white.css b/css/theme/white.css index e1d78c8..4efdf41 100644 --- a/css/theme/white.css +++ b/css/theme/white.css @@ -1,5 +1,4 @@ -@import url(https://fonts.googleapis.com/css?family=Montserrat:400); -@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); +@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,400italic,600italic&subset=latin,latin-ext); /** * White theme for reveal.js. * @@ -16,14 +15,14 @@ body { background-color: #fff; } .reveal { - font-family: 'Open Sans', Helvetica, sans-serif; - font-size: 34px; + font-family: 'Source Sans Pro', Helvetica, sans-serif; + font-size: 38px; font-weight: normal; color: #222; } ::selection { color: #fff; - background: #b6d7fe; + background: #98bdef; text-shadow: none; } .reveal .slides > section, .reveal .slides > section > section { @@ -36,7 +35,8 @@ body { .reveal h1, .reveal h2, .reveal h3, .reveal h4, .reveal h5, .reveal h6 { margin: 0 0 20px 0; color: #222; - font-family: 'Montserrat', Helvetica, sans-serif; + font-family: 'Source Sans Pro', Helvetica, sans-serif; + font-weight: 600; line-height: 1.2; letter-spacing: normal; text-transform: uppercase; @@ -181,20 +181,20 @@ body { * LINKS *********************************************/ .reveal a { - color: #3992fb; + color: #2a76dd; text-decoration: none; -webkit-transition: color 0.15s ease; -moz-transition: color 0.15s ease; transition: color 0.15s ease; } .reveal a:hover { - color: #84bcfd; + color: #6ca2e8; text-shadow: none; border: none; } .reveal .roll span:after { color: #fff; - background: #056ce3; } + background: #1a54a1; } /********************************************* * IMAGES @@ -212,35 +212,35 @@ body { .reveal a:hover img { background: rgba(255, 255, 255, 0.2); - border-color: #3992fb; + border-color: #2a76dd; 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; } + border-right-color: #2a76dd; } .reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { - border-left-color: #3992fb; } + border-left-color: #2a76dd; } .reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { - border-bottom-color: #3992fb; } + border-bottom-color: #2a76dd; } .reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { - border-top-color: #3992fb; } + border-top-color: #2a76dd; } .reveal .controls div.navigate-left.enabled:hover { - border-right-color: #84bcfd; } + border-right-color: #6ca2e8; } .reveal .controls div.navigate-right.enabled:hover { - border-left-color: #84bcfd; } + border-left-color: #6ca2e8; } .reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #84bcfd; } + border-bottom-color: #6ca2e8; } .reveal .controls div.navigate-down.enabled:hover { - border-top-color: #84bcfd; } + border-top-color: #6ca2e8; } /********************************************* * PROGRESS BAR @@ -249,7 +249,7 @@ body { background: rgba(0, 0, 0, 0.2); } .reveal .progress span { - background: #3992fb; + background: #2a76dd; -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); } @@ -258,4 +258,4 @@ body { * SLIDE NUMBER *********************************************/ .reveal .slide-number { - color: #3992fb; } + color: #2a76dd; } -- cgit v1.2.3