From d5bf12275c0c84f02e73e321f09389649b515d54 Mon Sep 17 00:00:00 2001 From: Hakim El Hattab Date: Mon, 4 Mar 2013 16:37:15 -0500 Subject: [PATCH] better choice of fallback fonts (closes #328) --- css/theme/beige.css | 81 ++++++++++++-------------------- css/theme/default.css | 81 ++++++++++++-------------------- css/theme/night.css | 78 ++++++++++++------------------ css/theme/serif.css | 80 ++++++++++++------------------- css/theme/simple.css | 78 ++++++++++++------------------ css/theme/sky.css | 76 +++++++++++------------------- css/theme/source/night.scss | 2 +- css/theme/source/serif.scss | 4 +- css/theme/source/simple.scss | 2 +- css/theme/template/settings.scss | 4 +- 10 files changed, 182 insertions(+), 304 deletions(-) diff --git a/css/theme/beige.css b/css/theme/beige.css index d9f8501e..b0610d40 100644 --- a/css/theme/beige.css +++ b/css/theme/beige.css @@ -9,8 +9,7 @@ src: url("../../lib/font/league_gothic-webfont.eot"); src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg"); font-weight: normal; - font-style: normal; -} + font-style: normal; } /********************************************* * GLOBAL STYLES @@ -23,22 +22,19 @@ body { background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); - background-color: #f7f3de; -} + background-color: #f7f3de; } .reveal { - font-family: "Lato", Times, "Times New Roman", serif; + font-family: "Lato", sans-serif; font-size: 36px; font-weight: 200; letter-spacing: -0.02em; - color: #333333; -} + color: #333333; } ::selection { color: white; background: rgba(79, 64, 28, 0.99); - text-shadow: none; -} + text-shadow: none; } /********************************************* * HEADERS @@ -55,12 +51,10 @@ body { line-height: 0.9em; letter-spacing: 0.02em; text-transform: uppercase; - text-shadow: none; -} + text-shadow: none; } .reveal h1 { - text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); -} + text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); } /********************************************* * LINKS @@ -68,23 +62,20 @@ body { .reveal a:not(.image) { color: #8b743d; text-decoration: none; - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; - -ms-transition: color .15s ease; - -o-transition: color .15s ease; - transition: color .15s ease; -} + -webkit-transition: color 0.15s ease; + -moz-transition: color 0.15s ease; + -ms-transition: color 0.15s ease; + -o-transition: color 0.15s ease; + transition: color 0.15s ease; } .reveal a:not(.image):hover { color: #c0a86e; text-shadow: none; - border: none; -} + border: none; } .reveal .roll span:after { color: #fff; - background: #564826; -} + background: #564826; } /********************************************* * IMAGES @@ -94,64 +85,53 @@ body { background: rgba(255, 255, 255, 0.12); border: 4px solid #333333; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - -webkit-transition: all .2s linear; - -moz-transition: all .2s linear; - -ms-transition: all .2s linear; - -o-transition: all .2s linear; - transition: all .2s linear; -} + -webkit-transition: all 0.2s linear; + -moz-transition: all 0.2s linear; + -ms-transition: all 0.2s linear; + -o-transition: all 0.2s linear; + transition: all 0.2s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); border-color: #8b743d; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); -} + 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: #8b743d; -} + border-right-color: #8b743d; } .reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { - border-left-color: #8b743d; -} + border-left-color: #8b743d; } .reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { - border-bottom-color: #8b743d; -} + border-bottom-color: #8b743d; } .reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { - border-top-color: #8b743d; -} + border-top-color: #8b743d; } .reveal .controls div.navigate-left.enabled:hover { - border-right-color: #c0a86e; -} + border-right-color: #c0a86e; } .reveal .controls div.navigate-right.enabled:hover { - border-left-color: #c0a86e; -} + border-left-color: #c0a86e; } .reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #c0a86e; -} + border-bottom-color: #c0a86e; } .reveal .controls div.navigate-down.enabled:hover { - border-top-color: #c0a86e; -} + border-top-color: #c0a86e; } /********************************************* * PROGRESS BAR *********************************************/ .reveal .progress { - background: rgba(0, 0, 0, 0.2); -} + background: rgba(0, 0, 0, 0.2); } .reveal .progress span { background: #8b743d; @@ -159,5 +139,4 @@ body { -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -o-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); -} + transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } diff --git a/css/theme/default.css b/css/theme/default.css index 86e65ce4..480ac69e 100644 --- a/css/theme/default.css +++ b/css/theme/default.css @@ -9,8 +9,7 @@ src: url("../../lib/font/league_gothic-webfont.eot"); src: url("../../lib/font/league_gothic-webfont.eot?#iefix") format("embedded-opentype"), url("../../lib/font/league_gothic-webfont.woff") format("woff"), url("../../lib/font/league_gothic-webfont.ttf") format("truetype"), url("../../lib/font/league_gothic-webfont.svg#LeagueGothicRegular") format("svg"); font-weight: normal; - font-style: normal; -} + font-style: normal; } /********************************************* * GLOBAL STYLES @@ -23,22 +22,19 @@ body { background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); - background-color: #2b2b2b; -} + background-color: #2b2b2b; } .reveal { - font-family: "Lato", Times, "Times New Roman", serif; + font-family: "Lato", sans-serif; font-size: 36px; font-weight: 200; letter-spacing: -0.02em; - color: #eeeeee; -} + color: #eeeeee; } ::selection { color: white; background: #ff5e99; - text-shadow: none; -} + text-shadow: none; } /********************************************* * HEADERS @@ -55,12 +51,10 @@ body { line-height: 0.9em; letter-spacing: 0.02em; 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); } .reveal h1 { - text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); -} + text-shadow: 0 1px 0 #cccccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbbbbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaaaaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25), 0 20px 20px rgba(0, 0, 0, 0.15); } /********************************************* * LINKS @@ -68,23 +62,20 @@ body { .reveal a:not(.image) { color: #13daec; text-decoration: none; - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; - -ms-transition: color .15s ease; - -o-transition: color .15s ease; - transition: color .15s ease; -} + -webkit-transition: color 0.15s ease; + -moz-transition: color 0.15s ease; + -ms-transition: color 0.15s ease; + -o-transition: color 0.15s ease; + transition: color 0.15s ease; } .reveal a:not(.image):hover { color: #71e9f4; text-shadow: none; - border: none; -} + border: none; } .reveal .roll span:after { color: #fff; - background: #0d99a5; -} + background: #0d99a5; } /********************************************* * IMAGES @@ -94,64 +85,53 @@ body { background: rgba(255, 255, 255, 0.12); border: 4px solid #eeeeee; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - -webkit-transition: all .2s linear; - -moz-transition: all .2s linear; - -ms-transition: all .2s linear; - -o-transition: all .2s linear; - transition: all .2s linear; -} + -webkit-transition: all 0.2s linear; + -moz-transition: all 0.2s linear; + -ms-transition: all 0.2s linear; + -o-transition: all 0.2s linear; + transition: all 0.2s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); border-color: #13daec; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); -} + 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: #13daec; -} + border-right-color: #13daec; } .reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { - border-left-color: #13daec; -} + border-left-color: #13daec; } .reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { - border-bottom-color: #13daec; -} + border-bottom-color: #13daec; } .reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { - border-top-color: #13daec; -} + border-top-color: #13daec; } .reveal .controls div.navigate-left.enabled:hover { - border-right-color: #71e9f4; -} + border-right-color: #71e9f4; } .reveal .controls div.navigate-right.enabled:hover { - border-left-color: #71e9f4; -} + border-left-color: #71e9f4; } .reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #71e9f4; -} + border-bottom-color: #71e9f4; } .reveal .controls div.navigate-down.enabled:hover { - border-top-color: #71e9f4; -} + border-top-color: #71e9f4; } /********************************************* * PROGRESS BAR *********************************************/ .reveal .progress { - background: rgba(0, 0, 0, 0.2); -} + background: rgba(0, 0, 0, 0.2); } .reveal .progress span { background: #13daec; @@ -159,5 +139,4 @@ body { -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -o-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); -} + transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } diff --git a/css/theme/night.css b/css/theme/night.css index f10598f9..e2e95080 100644 --- a/css/theme/night.css +++ b/css/theme/night.css @@ -10,22 +10,19 @@ *********************************************/ body { background: #111111; - background-color: #111111; -} + background-color: #111111; } .reveal { - font-family: "Open Sans", Times, "Times New Roman", serif; + font-family: "Open Sans", sans-serif; font-size: 30px; font-weight: 200; letter-spacing: -0.02em; - color: #eeeeee; -} + color: #eeeeee; } ::selection { color: white; background: #e7ad52; - text-shadow: none; -} + text-shadow: none; } /********************************************* * HEADERS @@ -42,12 +39,10 @@ body { line-height: 0.9em; letter-spacing: -0.03em; text-transform: none; - text-shadow: none; -} + text-shadow: none; } .reveal h1 { - text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); -} + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } /********************************************* * LINKS @@ -55,23 +50,20 @@ body { .reveal a:not(.image) { color: #e7ad52; text-decoration: none; - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; - -ms-transition: color .15s ease; - -o-transition: color .15s ease; - transition: color .15s ease; -} + -webkit-transition: color 0.15s ease; + -moz-transition: color 0.15s ease; + -ms-transition: color 0.15s ease; + -o-transition: color 0.15s ease; + transition: color 0.15s ease; } .reveal a:not(.image):hover { color: #f3d7ac; text-shadow: none; - border: none; -} + border: none; } .reveal .roll span:after { color: #fff; - background: #d08a1d; -} + background: #d08a1d; } /********************************************* * IMAGES @@ -81,64 +73,53 @@ body { background: rgba(255, 255, 255, 0.12); border: 4px solid #eeeeee; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - -webkit-transition: all .2s linear; - -moz-transition: all .2s linear; - -ms-transition: all .2s linear; - -o-transition: all .2s linear; - transition: all .2s linear; -} + -webkit-transition: all 0.2s linear; + -moz-transition: all 0.2s linear; + -ms-transition: all 0.2s linear; + -o-transition: all 0.2s linear; + transition: all 0.2s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); border-color: #e7ad52; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); -} + 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: #e7ad52; -} + border-right-color: #e7ad52; } .reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { - border-left-color: #e7ad52; -} + border-left-color: #e7ad52; } .reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { - border-bottom-color: #e7ad52; -} + border-bottom-color: #e7ad52; } .reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { - border-top-color: #e7ad52; -} + border-top-color: #e7ad52; } .reveal .controls div.navigate-left.enabled:hover { - border-right-color: #f3d7ac; -} + border-right-color: #f3d7ac; } .reveal .controls div.navigate-right.enabled:hover { - border-left-color: #f3d7ac; -} + border-left-color: #f3d7ac; } .reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #f3d7ac; -} + border-bottom-color: #f3d7ac; } .reveal .controls div.navigate-down.enabled:hover { - border-top-color: #f3d7ac; -} + border-top-color: #f3d7ac; } /********************************************* * PROGRESS BAR *********************************************/ .reveal .progress { - background: rgba(0, 0, 0, 0.2); -} + background: rgba(0, 0, 0, 0.2); } .reveal .progress span { background: #e7ad52; @@ -146,5 +127,4 @@ body { -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -o-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); -} + transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } diff --git a/css/theme/serif.css b/css/theme/serif.css index aaabf47d..2b1f4fd2 100644 --- a/css/theme/serif.css +++ b/css/theme/serif.css @@ -1,7 +1,7 @@ /** - * A simple theme for reveal.js presentations, similar + * A simple theme for reveal.js presentations, similar * to the default theme. The accent color is darkblue. - * + * * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se; so is the theme - beige.css - that this is based off of. */ @@ -10,22 +10,19 @@ *********************************************/ body { background: #f0f1eb; - background-color: #f0f1eb; -} + background-color: #f0f1eb; } .reveal { font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; font-size: 36px; font-weight: 200; letter-spacing: -0.02em; - color: black; -} + color: black; } ::selection { color: white; background: #26351c; - text-shadow: none; -} + text-shadow: none; } /********************************************* * HEADERS @@ -42,12 +39,10 @@ body { line-height: 0.9em; letter-spacing: 0.02em; text-transform: none; - text-shadow: none; -} + text-shadow: none; } .reveal h1 { - text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); -} + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } /********************************************* * LINKS @@ -55,23 +50,20 @@ body { .reveal a:not(.image) { color: #51483d; text-decoration: none; - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; - -ms-transition: color .15s ease; - -o-transition: color .15s ease; - transition: color .15s ease; -} + -webkit-transition: color 0.15s ease; + -moz-transition: color 0.15s ease; + -ms-transition: color 0.15s ease; + -o-transition: color 0.15s ease; + transition: color 0.15s ease; } .reveal a:not(.image):hover { color: #8b7c69; text-shadow: none; - border: none; -} + border: none; } .reveal .roll span:after { color: #fff; - background: #25211c; -} + background: #25211c; } /********************************************* * IMAGES @@ -81,64 +73,53 @@ body { background: rgba(255, 255, 255, 0.12); border: 4px solid black; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - -webkit-transition: all .2s linear; - -moz-transition: all .2s linear; - -ms-transition: all .2s linear; - -o-transition: all .2s linear; - transition: all .2s linear; -} + -webkit-transition: all 0.2s linear; + -moz-transition: all 0.2s linear; + -ms-transition: all 0.2s linear; + -o-transition: all 0.2s linear; + transition: all 0.2s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); border-color: #51483d; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); -} + 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: #51483d; -} + border-right-color: #51483d; } .reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { - border-left-color: #51483d; -} + border-left-color: #51483d; } .reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { - border-bottom-color: #51483d; -} + border-bottom-color: #51483d; } .reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { - border-top-color: #51483d; -} + border-top-color: #51483d; } .reveal .controls div.navigate-left.enabled:hover { - border-right-color: #8b7c69; -} + border-right-color: #8b7c69; } .reveal .controls div.navigate-right.enabled:hover { - border-left-color: #8b7c69; -} + border-left-color: #8b7c69; } .reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #8b7c69; -} + border-bottom-color: #8b7c69; } .reveal .controls div.navigate-down.enabled:hover { - border-top-color: #8b7c69; -} + border-top-color: #8b7c69; } /********************************************* * PROGRESS BAR *********************************************/ .reveal .progress { - background: rgba(0, 0, 0, 0.2); -} + background: rgba(0, 0, 0, 0.2); } .reveal .progress span { background: #51483d; @@ -146,5 +127,4 @@ body { -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -o-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); -} + transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } diff --git a/css/theme/simple.css b/css/theme/simple.css index a68729f3..0aef9160 100644 --- a/css/theme/simple.css +++ b/css/theme/simple.css @@ -12,22 +12,19 @@ *********************************************/ body { background: white; - background-color: white; -} + background-color: white; } .reveal { - font-family: "Lato", Times, "Times New Roman", serif; + font-family: "Lato", sans-serif; font-size: 36px; font-weight: 200; letter-spacing: -0.02em; - color: black; -} + color: black; } ::selection { color: white; background: rgba(0, 0, 0, 0.99); - text-shadow: none; -} + text-shadow: none; } /********************************************* * HEADERS @@ -44,12 +41,10 @@ body { line-height: 0.9em; letter-spacing: 0.02em; text-transform: none; - text-shadow: none; -} + text-shadow: none; } .reveal h1 { - text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); -} + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } /********************************************* * LINKS @@ -57,23 +52,20 @@ body { .reveal a:not(.image) { color: darkblue; text-decoration: none; - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; - -ms-transition: color .15s ease; - -o-transition: color .15s ease; - transition: color .15s ease; -} + -webkit-transition: color 0.15s ease; + -moz-transition: color 0.15s ease; + -ms-transition: color 0.15s ease; + -o-transition: color 0.15s ease; + transition: color 0.15s ease; } .reveal a:not(.image):hover { color: #0000f1; text-shadow: none; - border: none; -} + border: none; } .reveal .roll span:after { color: #fff; - background: #00003f; -} + background: #00003f; } /********************************************* * IMAGES @@ -83,64 +75,53 @@ body { background: rgba(255, 255, 255, 0.12); border: 4px solid black; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - -webkit-transition: all .2s linear; - -moz-transition: all .2s linear; - -ms-transition: all .2s linear; - -o-transition: all .2s linear; - transition: all .2s linear; -} + -webkit-transition: all 0.2s linear; + -moz-transition: all 0.2s linear; + -ms-transition: all 0.2s linear; + -o-transition: all 0.2s linear; + transition: all 0.2s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); border-color: darkblue; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); -} + 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: darkblue; -} + border-right-color: darkblue; } .reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { - border-left-color: darkblue; -} + border-left-color: darkblue; } .reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { - border-bottom-color: darkblue; -} + border-bottom-color: darkblue; } .reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { - border-top-color: darkblue; -} + border-top-color: darkblue; } .reveal .controls div.navigate-left.enabled:hover { - border-right-color: #0000f1; -} + border-right-color: #0000f1; } .reveal .controls div.navigate-right.enabled:hover { - border-left-color: #0000f1; -} + border-left-color: #0000f1; } .reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #0000f1; -} + border-bottom-color: #0000f1; } .reveal .controls div.navigate-down.enabled:hover { - border-top-color: #0000f1; -} + border-top-color: #0000f1; } /********************************************* * PROGRESS BAR *********************************************/ .reveal .progress { - background: rgba(0, 0, 0, 0.2); -} + background: rgba(0, 0, 0, 0.2); } .reveal .progress span { background: darkblue; @@ -148,5 +129,4 @@ body { -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -o-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); -} + transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } diff --git a/css/theme/sky.css b/css/theme/sky.css index a1b3b967..c5cbbeb4 100644 --- a/css/theme/sky.css +++ b/css/theme/sky.css @@ -16,22 +16,19 @@ body { background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); - background-color: #f7fbfc; -} + background-color: #f7fbfc; } .reveal { font-family: "Open Sans", sans-serif; font-size: 36px; font-weight: 200; letter-spacing: -0.02em; - color: #333333; -} + color: #333333; } ::selection { color: white; background: #134674; - text-shadow: none; -} + text-shadow: none; } /********************************************* * HEADERS @@ -48,12 +45,10 @@ body { line-height: 0.9em; letter-spacing: -0.08em; text-transform: uppercase; - text-shadow: none; -} + text-shadow: none; } .reveal h1 { - text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); -} + text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); } /********************************************* * LINKS @@ -61,23 +56,20 @@ body { .reveal a:not(.image) { color: #3b759e; text-decoration: none; - -webkit-transition: color .15s ease; - -moz-transition: color .15s ease; - -ms-transition: color .15s ease; - -o-transition: color .15s ease; - transition: color .15s ease; -} + -webkit-transition: color 0.15s ease; + -moz-transition: color 0.15s ease; + -ms-transition: color 0.15s ease; + -o-transition: color 0.15s ease; + transition: color 0.15s ease; } .reveal a:not(.image):hover { color: #74a7cb; text-shadow: none; - border: none; -} + border: none; } .reveal .roll span:after { color: #fff; - background: #264c66; -} + background: #264c66; } /********************************************* * IMAGES @@ -87,64 +79,53 @@ body { background: rgba(255, 255, 255, 0.12); border: 4px solid #333333; box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); - -webkit-transition: all .2s linear; - -moz-transition: all .2s linear; - -ms-transition: all .2s linear; - -o-transition: all .2s linear; - transition: all .2s linear; -} + -webkit-transition: all 0.2s linear; + -moz-transition: all 0.2s linear; + -ms-transition: all 0.2s linear; + -o-transition: all 0.2s linear; + transition: all 0.2s linear; } .reveal a:hover img { background: rgba(255, 255, 255, 0.2); border-color: #3b759e; - box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); -} + 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: #3b759e; -} + border-right-color: #3b759e; } .reveal .controls div.navigate-right, .reveal .controls div.navigate-right.enabled { - border-left-color: #3b759e; -} + border-left-color: #3b759e; } .reveal .controls div.navigate-up, .reveal .controls div.navigate-up.enabled { - border-bottom-color: #3b759e; -} + border-bottom-color: #3b759e; } .reveal .controls div.navigate-down, .reveal .controls div.navigate-down.enabled { - border-top-color: #3b759e; -} + border-top-color: #3b759e; } .reveal .controls div.navigate-left.enabled:hover { - border-right-color: #74a7cb; -} + border-right-color: #74a7cb; } .reveal .controls div.navigate-right.enabled:hover { - border-left-color: #74a7cb; -} + border-left-color: #74a7cb; } .reveal .controls div.navigate-up.enabled:hover { - border-bottom-color: #74a7cb; -} + border-bottom-color: #74a7cb; } .reveal .controls div.navigate-down.enabled:hover { - border-top-color: #74a7cb; -} + border-top-color: #74a7cb; } /********************************************* * PROGRESS BAR *********************************************/ .reveal .progress { - background: rgba(0, 0, 0, 0.2); -} + background: rgba(0, 0, 0, 0.2); } .reveal .progress span { background: #3b759e; @@ -152,5 +133,4 @@ body { -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); -o-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); -} + transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } diff --git a/css/theme/source/night.scss b/css/theme/source/night.scss index 66468573..4a1e3f5c 100644 --- a/css/theme/source/night.scss +++ b/css/theme/source/night.scss @@ -19,7 +19,7 @@ // Override theme settings (see ../template/settings.scss) $backgroundColor: #111; -$mainFont: 'Open Sans', Times, 'Times New Roman', serif; +$mainFont: 'Open Sans', sans-serif; $linkColor: #e7ad52; $linkColorHover: lighten( $linkColor, 20% ); $headingFont: 'Montserrat', Impact, sans-serif; diff --git a/css/theme/source/serif.scss b/css/theme/source/serif.scss index dc0935f7..06eaca8e 100644 --- a/css/theme/source/serif.scss +++ b/css/theme/source/serif.scss @@ -1,7 +1,7 @@ /** - * A simple theme for reveal.js presentations, similar + * A simple theme for reveal.js presentations, similar * to the default theme. The accent color is darkblue. - * + * * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se; so is the theme - beige.css - that this is based off of. */ diff --git a/css/theme/source/simple.scss b/css/theme/source/simple.scss index 713ab449..a9c4000a 100644 --- a/css/theme/source/simple.scss +++ b/css/theme/source/simple.scss @@ -20,7 +20,7 @@ // Override theme settings (see ../template/settings.scss) -$mainFont: 'Lato', Times, 'Times New Roman', serif; +$mainFont: 'Lato', sans-serif; $mainColor: #000; $headingFont: 'News Cycle', Impact, sans-serif; $headingColor: #000; diff --git a/css/theme/template/settings.scss b/css/theme/template/settings.scss index bc9f1380..7e9ffd8a 100644 --- a/css/theme/template/settings.scss +++ b/css/theme/template/settings.scss @@ -1,11 +1,11 @@ -// Base settings for all themes that can optionally be +// Base settings for all themes that can optionally be // overridden by the super-theme // Background of the presentation $backgroundColor: #2b2b2b; // Primary/body text -$mainFont: 'Lato', Times, 'Times New Roman', serif; +$mainFont: 'Lato', sans-serif; $mainFontSize: 36px; $mainColor: #eee;