dirk
/
why-cant-we-deploy-today
1
0
Fork 0
Code Releases Activity

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

This commit is contained in:
Hakim El Hattab 2014-09-28 12:14:48 +02:00
parent 9ef0060024
commit bd176411ef
14 changed files with 78 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
css/theme/beige.css
View File

@ -27,7 +27,6 @@ body {
font-family: "Lato", sans-serif; font-family: "Lato", sans-serif;
font-size: 36px; font-size: 36px;
font-weight: normal; font-weight: normal;
letter-spacing: -0.02em;
color: #333333; } color: #333333; }
::selection { ::selection {
@ -37,7 +36,7 @@ body {
.reveal .slides > section, .reveal .slides > section,
.reveal .slides > section > section { .reveal .slides > section > section {
line-height: 1.2em; line-height: 1.3;
font-weight: inherit; } font-weight: inherit; }
/********************************************* /*********************************************
@ -52,8 +51,8 @@ body {
margin: 0 0 20px 0; margin: 0 0 20px 0;
color: #333333; color: #333333;
font-family: "League Gothic", Impact, sans-serif; font-family: "League Gothic", Impact, sans-serif;
line-height: 1em; line-height: 1.2;
letter-spacing: 0.02em; letter-spacing: normal;
text-transform: uppercase; text-transform: uppercase;
text-shadow: none; text-shadow: none;
word-wrap: break-word; } word-wrap: break-word; }
@ -78,7 +77,7 @@ body {
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin-bottom: 10px; margin-bottom: 10px;
line-height: 1.2em; } line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
.reveal img, .reveal img,

22
css/theme/black.css
View File

@ -3,7 +3,7 @@
* *
* Copyright (C) 2014 Hakim El Hattab, http://hakim.se * 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); @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
/********************************************* /*********************************************
* GLOBAL STYLES * GLOBAL STYLES
@ -14,9 +14,9 @@ body {
.reveal { .reveal {
font-family: "Open Sans", Helvetica, sans-serif; font-family: "Open Sans", Helvetica, sans-serif;
font-size: 32px; font-size: 34px;
font-weight: normal; font-weight: normal;
color: #eeeeee; } color: white; }
::selection { ::selection {
color: white; color: white;
@ -38,28 +38,28 @@ body {
.reveal h5, .reveal h5,
.reveal h6 { .reveal h6 {
margin: 0 0 20px 0; margin: 0 0 20px 0;
color: #eeeeee; color: white;
font-family: "Montserrat", Helvetica, sans-serif; font-family: "Montserrat", Helvetica, sans-serif;
line-height: 1em; line-height: 1.2;
letter-spacing: normal; letter-spacing: normal;
text-transform: none; text-transform: uppercase;
text-shadow: none; text-shadow: none;
word-wrap: break-word; } word-wrap: break-word; }
.reveal h1 { .reveal h1 {
font-size: 3.77em; } font-size: 2.8em; }
.reveal h2 { .reveal h2 {
font-size: 2.11em; } font-size: 1.8em; }
.reveal h3 { .reveal h3 {
font-size: 1.55em; } font-size: 1.5em; }
.reveal h4 { .reveal h4 {
font-size: 1em; } font-size: 1em; }
.reveal h1 { .reveal h1 {
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } text-shadow: none; }
/********************************************* /*********************************************
* OTHER * OTHER
@ -216,7 +216,7 @@ body {
.reveal section img { .reveal section img {
margin: 15px 0px; margin: 15px 0px;
background: rgba(255, 255, 255, 0.12); 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); } box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); }
.reveal a img { .reveal a img {

9
css/theme/blood.css
View File

@ -27,7 +27,6 @@ body {
font-family: Ubuntu, "sans-serif"; font-family: Ubuntu, "sans-serif";
font-size: 36px; font-size: 36px;
font-weight: normal; font-weight: normal;
letter-spacing: -0.02em;
color: #eeeeee; } color: #eeeeee; }
::selection { ::selection {
@ -37,7 +36,7 @@ body {
.reveal .slides > section, .reveal .slides > section,
.reveal .slides > section > section { .reveal .slides > section > section {
line-height: 1.2em; line-height: 1.3;
font-weight: inherit; } font-weight: inherit; }
/********************************************* /*********************************************
@ -52,8 +51,8 @@ body {
margin: 0 0 20px 0; margin: 0 0 20px 0;
color: #eeeeee; color: #eeeeee;
font-family: Ubuntu, "sans-serif"; font-family: Ubuntu, "sans-serif";
line-height: 1em; line-height: 1.2;
letter-spacing: 0.02em; letter-spacing: normal;
text-transform: uppercase; text-transform: uppercase;
text-shadow: 2px 2px 2px #222222; text-shadow: 2px 2px 2px #222222;
word-wrap: break-word; } word-wrap: break-word; }
@ -78,7 +77,7 @@ body {
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin-bottom: 10px; margin-bottom: 10px;
line-height: 1.2em; } line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
.reveal img, .reveal img,

9
css/theme/default.css
View File

@ -27,7 +27,6 @@ body {
font-family: "Lato", sans-serif; font-family: "Lato", sans-serif;
font-size: 36px; font-size: 36px;
font-weight: normal; font-weight: normal;
letter-spacing: -0.02em;
color: #eeeeee; } color: #eeeeee; }
::selection { ::selection {
@ -37,7 +36,7 @@ body {
.reveal .slides > section, .reveal .slides > section,
.reveal .slides > section > section { .reveal .slides > section > section {
line-height: 1.2em; line-height: 1.3;
font-weight: inherit; } font-weight: inherit; }
/********************************************* /*********************************************
@ -52,8 +51,8 @@ body {
margin: 0 0 20px 0; margin: 0 0 20px 0;
color: #eeeeee; color: #eeeeee;
font-family: "League Gothic", Impact, sans-serif; font-family: "League Gothic", Impact, sans-serif;
line-height: 1em; line-height: 1.2;
letter-spacing: 0.02em; letter-spacing: normal;
text-transform: uppercase; text-transform: uppercase;
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
word-wrap: break-word; } word-wrap: break-word; }
@ -78,7 +77,7 @@ body {
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin-bottom: 10px; margin-bottom: 10px;
line-height: 1.2em; } line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
.reveal img, .reveal img,

11
css/theme/moon.css
View File

@ -27,7 +27,6 @@ body {
font-family: "Lato", sans-serif; font-family: "Lato", sans-serif;
font-size: 36px; font-size: 36px;
font-weight: normal; font-weight: normal;
letter-spacing: -0.02em;
color: #93a1a1; } color: #93a1a1; }
::selection { ::selection {
@ -37,7 +36,7 @@ body {
.reveal .slides > section, .reveal .slides > section,
.reveal .slides > section > section { .reveal .slides > section > section {
line-height: 1.2em; line-height: 1.3;
font-weight: inherit; } font-weight: inherit; }
/********************************************* /*********************************************
@ -52,8 +51,8 @@ body {
margin: 0 0 20px 0; margin: 0 0 20px 0;
color: #eee8d5; color: #eee8d5;
font-family: "League Gothic", Impact, sans-serif; font-family: "League Gothic", Impact, sans-serif;
line-height: 1em; line-height: 1.2;
letter-spacing: 0.02em; letter-spacing: normal;
text-transform: uppercase; text-transform: uppercase;
text-shadow: none; text-shadow: none;
word-wrap: break-word; } word-wrap: break-word; }
@ -71,14 +70,14 @@ body {
font-size: 1em; } font-size: 1em; }
.reveal h1 { .reveal h1 {
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } text-shadow: none; }
/********************************************* /*********************************************
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin-bottom: 10px; margin-bottom: 10px;
line-height: 1.2em; } line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
.reveal img, .reveal img,

9
css/theme/night.css
View File

@ -16,7 +16,6 @@ body {
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
font-size: 30px; font-size: 30px;
font-weight: normal; font-weight: normal;
letter-spacing: -0.02em;
color: #eeeeee; } color: #eeeeee; }
::selection { ::selection {
@ -26,7 +25,7 @@ body {
.reveal .slides > section, .reveal .slides > section,
.reveal .slides > section > section { .reveal .slides > section > section {
line-height: 1.2em; line-height: 1.3;
font-weight: inherit; } font-weight: inherit; }
/********************************************* /*********************************************
@ -41,7 +40,7 @@ body {
margin: 0 0 20px 0; margin: 0 0 20px 0;
color: #eeeeee; color: #eeeeee;
font-family: "Montserrat", Impact, sans-serif; font-family: "Montserrat", Impact, sans-serif;
line-height: 1em; line-height: 1.2;
letter-spacing: -0.03em; letter-spacing: -0.03em;
text-transform: none; text-transform: none;
text-shadow: none; text-shadow: none;
@ -60,14 +59,14 @@ body {
font-size: 1em; } font-size: 1em; }
.reveal h1 { .reveal h1 {
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } text-shadow: none; }
/********************************************* /*********************************************
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin-bottom: 10px; margin-bottom: 10px;
line-height: 1.2em; } line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
.reveal img, .reveal img,

11
css/theme/serif.css
View File

@ -18,7 +18,6 @@ body {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
font-size: 36px; font-size: 36px;
font-weight: normal; font-weight: normal;
letter-spacing: -0.02em;
color: black; } color: black; }
::selection { ::selection {
@ -28,7 +27,7 @@ body {
.reveal .slides > section, .reveal .slides > section,
.reveal .slides > section > section { .reveal .slides > section > section {
line-height: 1.2em; line-height: 1.3;
font-weight: inherit; } font-weight: inherit; }
/********************************************* /*********************************************
@ -43,8 +42,8 @@ body {
margin: 0 0 20px 0; margin: 0 0 20px 0;
color: #383d3d; color: #383d3d;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
line-height: 1em; line-height: 1.2;
letter-spacing: 0.02em; letter-spacing: normal;
text-transform: none; text-transform: none;
text-shadow: none; text-shadow: none;
word-wrap: break-word; } word-wrap: break-word; }
@ -62,14 +61,14 @@ body {
font-size: 1em; } font-size: 1em; }
.reveal h1 { .reveal h1 {
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } text-shadow: none; }
/********************************************* /*********************************************
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin-bottom: 10px; margin-bottom: 10px;
line-height: 1.2em; } line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
.reveal img, .reveal img,

11
css/theme/simple.css
View File

@ -18,7 +18,6 @@ body {
font-family: "Lato", sans-serif; font-family: "Lato", sans-serif;
font-size: 36px; font-size: 36px;
font-weight: normal; font-weight: normal;
letter-spacing: -0.02em;
color: black; } color: black; }
::selection { ::selection {
@ -28,7 +27,7 @@ body {
.reveal .slides > section, .reveal .slides > section,
.reveal .slides > section > section { .reveal .slides > section > section {
line-height: 1.2em; line-height: 1.3;
font-weight: inherit; } font-weight: inherit; }
/********************************************* /*********************************************
@ -43,8 +42,8 @@ body {
margin: 0 0 20px 0; margin: 0 0 20px 0;
color: black; color: black;
font-family: "News Cycle", Impact, sans-serif; font-family: "News Cycle", Impact, sans-serif;
line-height: 1em; line-height: 1.2;
letter-spacing: 0.02em; letter-spacing: normal;
text-transform: none; text-transform: none;
text-shadow: none; text-shadow: none;
word-wrap: break-word; } word-wrap: break-word; }
@ -62,14 +61,14 @@ body {
font-size: 1em; } font-size: 1em; }
.reveal h1 { .reveal h1 {
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } text-shadow: none; }
/********************************************* /*********************************************
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin-bottom: 10px; margin-bottom: 10px;
line-height: 1.2em; } line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
.reveal img, .reveal img,

9
css/theme/sky.css
View File

@ -25,7 +25,6 @@ body {
font-family: "Open Sans", sans-serif; font-family: "Open Sans", sans-serif;
font-size: 36px; font-size: 36px;
font-weight: normal; font-weight: normal;
letter-spacing: -0.02em;
color: #333333; } color: #333333; }
::selection { ::selection {
@ -35,7 +34,7 @@ body {
.reveal .slides > section, .reveal .slides > section,
.reveal .slides > section > section { .reveal .slides > section > section {
line-height: 1.2em; line-height: 1.3;
font-weight: inherit; } font-weight: inherit; }
/********************************************* /*********************************************
@ -50,7 +49,7 @@ body {
margin: 0 0 20px 0; margin: 0 0 20px 0;
color: #333333; color: #333333;
font-family: "Quicksand", sans-serif; font-family: "Quicksand", sans-serif;
line-height: 1em; line-height: 1.2;
letter-spacing: -0.08em; letter-spacing: -0.08em;
text-transform: uppercase; text-transform: uppercase;
text-shadow: none; text-shadow: none;
@ -69,14 +68,14 @@ body {
font-size: 1em; } font-size: 1em; }
.reveal h1 { .reveal h1 {
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } text-shadow: none; }
/********************************************* /*********************************************
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin-bottom: 10px; margin-bottom: 10px;
line-height: 1.2em; } line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
.reveal img, .reveal img,

11
css/theme/solarized.css
View File

@ -27,7 +27,6 @@ body {
font-family: "Lato", sans-serif; font-family: "Lato", sans-serif;
font-size: 36px; font-size: 36px;
font-weight: normal; font-weight: normal;
letter-spacing: -0.02em;
color: #657b83; } color: #657b83; }
::selection { ::selection {
@ -37,7 +36,7 @@ body {
.reveal .slides > section, .reveal .slides > section,
.reveal .slides > section > section { .reveal .slides > section > section {
line-height: 1.2em; line-height: 1.3;
font-weight: inherit; } font-weight: inherit; }
/********************************************* /*********************************************
@ -52,8 +51,8 @@ body {
margin: 0 0 20px 0; margin: 0 0 20px 0;
color: #586e75; color: #586e75;
font-family: "League Gothic", Impact, sans-serif; font-family: "League Gothic", Impact, sans-serif;
line-height: 1em; line-height: 1.2;
letter-spacing: 0.02em; letter-spacing: normal;
text-transform: uppercase; text-transform: uppercase;
text-shadow: none; text-shadow: none;
word-wrap: break-word; } word-wrap: break-word; }
@ -71,14 +70,14 @@ body {
font-size: 1em; } font-size: 1em; }
.reveal h1 { .reveal h1 {
text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } text-shadow: none; }
/********************************************* /*********************************************
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin-bottom: 10px; margin-bottom: 10px;
line-height: 1.2em; } line-height: 1.3; }
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */
.reveal img, .reveal img,

15
css/theme/source/black.scss
View File

@ -12,23 +12,32 @@
// Include theme-specific fonts // 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); @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic);
// Override theme settings (see ../template/settings.scss) // Override theme settings (see ../template/settings.scss)
$backgroundColor: #111; $backgroundColor: #111;
$mainColor: #fff;
$headingColor: #fff;
$mainFont: 'Open Sans', Helvetica, sans-serif; $mainFont: 'Open Sans', Helvetica, sans-serif;
$mainFontSize: 32px; $mainFontSize: 34px;
$headingFont: 'Montserrat', Helvetica, sans-serif; $headingFont: 'Montserrat', Helvetica, sans-serif;
$headingTextShadow: none; $headingTextShadow: none;
$headingLetterSpacing: normal; $headingLetterSpacing: normal;
$headingTextTransform: none; $headingTextTransform: uppercase;
$linkColor: #3992fb; $linkColor: #3992fb;
$linkColorHover: lighten( $linkColor, 15% ); $linkColorHover: lighten( $linkColor, 15% );
$selectionBackgroundColor: lighten( $linkColor, 25% ); $selectionBackgroundColor: lighten( $linkColor, 25% );
$heading1Size: 2.8em;
$heading2Size: 1.8em;
$heading3Size: 1.5em;
$heading4Size: 1.0em;
// Theme template ------------------------------ // Theme template ------------------------------
@import "../template/theme"; @import "../template/theme";

1
css/theme/source/default.scss
View File

@ -28,6 +28,7 @@
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
// Override theme settings (see ../template/settings.scss) // 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); $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 // Background generator

11
css/theme/template/settings.scss
View File

@ -13,12 +13,17 @@ $mainColor: #eee;
$headingMargin: 0 0 20px 0; $headingMargin: 0 0 20px 0;
$headingFont: 'League Gothic', Impact, sans-serif; $headingFont: 'League Gothic', Impact, sans-serif;
$headingColor: #eee; $headingColor: #eee;
$headingLineHeight: 1em; $headingLineHeight: 1.2;
$headingLetterSpacing: 0.02em; $headingLetterSpacing: normal;
$headingTextTransform: uppercase; $headingTextTransform: uppercase;
$headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2); $headingTextShadow: none;
$heading1TextShadow: $headingTextShadow; $heading1TextShadow: $headingTextShadow;
$heading1Size: 3.77em;
$heading2Size: 2.11em;
$heading3Size: 1.55em;
$heading4Size: 1.00em;
// Links and actions // Links and actions
$linkColor: #13DAEC; $linkColor: #13DAEC;
$linkColorHover: lighten( $linkColor, 20% ); $linkColorHover: lighten( $linkColor, 20% );

13
css/theme/template/theme.scss
View File

@ -13,7 +13,6 @@ body {
font-family: $mainFont; font-family: $mainFont;
font-size: $mainFontSize; font-size: $mainFontSize;
font-weight: normal; font-weight: normal;
letter-spacing: -0.02em;
color: $mainColor; color: $mainColor;
} }
@ -25,7 +24,7 @@ body {
.reveal .slides>section, .reveal .slides>section,
.reveal .slides>section>section { .reveal .slides>section>section {
line-height: 1.2em; line-height: 1.3;
font-weight: inherit; font-weight: inherit;
} }
@ -52,10 +51,10 @@ body {
word-wrap: break-word; word-wrap: break-word;
} }
.reveal h1 { font-size: 3.77em; } .reveal h1 {font-size: $heading1Size; }
.reveal h2 { font-size: 2.11em; } .reveal h2 {font-size: $heading2Size; }
.reveal h3 { font-size: 1.55em; } .reveal h3 {font-size: $heading3Size; }
.reveal h4 { font-size: 1em; } .reveal h4 {font-size: $heading4Size; }
.reveal h1 { .reveal h1 {
text-shadow: $heading1TextShadow; text-shadow: $heading1TextShadow;
@ -68,7 +67,7 @@ body {
.reveal p { .reveal p {
margin-bottom: 10px; margin-bottom: 10px;
line-height: 1.2em; line-height: 1.3;
} }
/* Ensure certain elements are never larger than the slide itself */ /* Ensure certain elements are never larger than the slide itself */