Browse Source

style tweaks for all themes; larger line heights, no default adjustmetn to letter-spacing

Hakim El Hattab 10 years ago
parent
commit
bd176411ef

+ 4 - 5
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,

+ 11 - 11
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 {

+ 4 - 5
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,

+ 4 - 5
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,

+ 5 - 6
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,

+ 4 - 5
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,

+ 5 - 6
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,

+ 5 - 6
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,

+ 4 - 5
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,

+ 5 - 6
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,

+ 12 - 3
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";

+ 1 - 0
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

+ 8 - 3
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% );

+ 6 - 7
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 */