From 25a674a3c2de34fe9a51e0d954d198dd419268ae Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Tue, 6 Jan 2015 11:42:23 +0100 Subject: [PATCH] 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(-) 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; }