From bd176411ef7fa4b584af5deef538ab8f63f43746 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Sun, 28 Sep 2014 12:14:48 +0200 Subject: [PATCH] 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(-) 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 */