xobs
/
fa20-bt
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

first revision of new default theme #1018

This commit is contained in:
Hakim El Hattab 2014-12-10 18:18:57 +01:00
parent ad9e93eae5
commit 05403bcf16
4 changed files with 34 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
css/theme/black.css
View File

@ -5,12 +5,15 @@
* *
* Copyright (C) 2014 Hakim El Hattab, http://hakim.se * Copyright (C) 2014 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; }
/********************************************* /*********************************************
* GLOBAL STYLES * GLOBAL STYLES
*********************************************/ *********************************************/
body { body {
background: #111; background: #222;
background-color: #111; } background-color: #222; }
.reveal { .reveal {
font-family: 'Open Sans', Helvetica, sans-serif; font-family: 'Open Sans', Helvetica, sans-serif;
@ -41,13 +44,13 @@ body {
word-wrap: break-word; } word-wrap: break-word; }
.reveal h1 { .reveal h1 {
font-size: 2.8em; } font-size: 2.5em; }
.reveal h2 { .reveal h2 {
font-size: 1.8em; } font-size: 1.6em; }
.reveal h3 { .reveal h3 {
font-size: 1.5em; } font-size: 1.3em; }
.reveal h4 { .reveal h4 {
font-size: 1em; } font-size: 1em; }

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

@ -17,7 +17,7 @@
// Override theme settings (see ../template/settings.scss) // Override theme settings (see ../template/settings.scss)
$backgroundColor: #111; $backgroundColor: #222;
$mainColor: #fff; $mainColor: #fff;
$headingColor: #fff; $headingColor: #fff;
@ -32,11 +32,16 @@ $linkColor: #3992fb;
$linkColorHover: lighten( $linkColor, 15% ); $linkColorHover: lighten( $linkColor, 15% );
$selectionBackgroundColor: lighten( $linkColor, 25% ); $selectionBackgroundColor: lighten( $linkColor, 25% );
$heading1Size: 2.8em; $heading1Size: 2.5em;
$heading2Size: 1.8em; $heading2Size: 1.6em;
$heading3Size: 1.5em; $heading3Size: 1.3em;
$heading4Size: 1.0em; $heading4Size: 1.0em;
section.has-light-background {
&, h1, h2, h3, h4, h5, h6 {
color: #222;
}
}
// Theme template ------------------------------ // Theme template ------------------------------

34
index.html
View File

@ -15,7 +15,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="css/reveal.css"> <link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/default.css" id="theme"> <link rel="stylesheet" href="css/theme/black.css" id="theme">
<!-- For syntax highlighting --> <!-- For syntax highlighting -->
<link rel="stylesheet" href="lib/css/zenburn.css"> <link rel="stylesheet" href="lib/css/zenburn.css">
@ -131,11 +131,7 @@
<h2>Fragments</h2> <h2>Fragments</h2>
<p>Hit the next arrow...</p> <p>Hit the next arrow...</p>
<p class="fragment">... to step through ...</p> <p class="fragment">... to step through ...</p>
<ol> <p><span class="fragment">... a</span> <span class="fragment">fragmented</span> <span class="fragment">slide.</span></p>
<li class="fragment"><code>any type</code></li>
<li class="fragment"><em>of view</em></li>
<li class="fragment"><strong>fragments</strong></li>
</ol>
<aside class="notes"> <aside class="notes">
This slide has fragments which are also stepped through in the notes window. This slide has fragments which are also stepped through in the notes window.
@ -143,14 +139,14 @@
</section> </section>
<section> <section>
<h2>Fragment Styles</h2> <h2>Fragment Styles</h2>
<p>There's a few styles of fragments, like:</p> <p>There's different types of fragments, like:</p>
<p class="fragment grow">grow</p> <p class="fragment grow">grow</p>
<p class="fragment shrink">shrink</p> <p class="fragment shrink">shrink</p>
<p class="fragment roll-in">roll-in</p> <p class="fragment roll-in">roll-in</p>
<p class="fragment fade-out">fade-out</p> <p class="fragment fade-out">fade-out</p>
<p class="fragment highlight-red">highlight-red</p>
<p class="fragment current-visible">current-visible</p> <p class="fragment current-visible">current-visible</p>
<p class="fragment highlight-current-blue">highlight-current-blue</p> <p class="fragment highlight-red">highlight-red</p>
<p class="fragment highlight-blue">highlight-blue</p>
</section> </section>
</section> </section>
@ -170,7 +166,7 @@
<section id="themes"> <section id="themes">
<h2>Themes</h2> <h2>Themes</h2>
<p> <p>
Reveal.js comes with a few themes built in: <br> reveal.js comes with a few themes built in: <br>
<a href="?#/themes">Default</a> - <a href="?#/themes">Default</a> -
<a href="?theme=sky#/themes">Sky</a> - <a href="?theme=sky#/themes">Sky</a> -
<a href="?theme=beige#/themes">Beige</a> - <a href="?theme=beige#/themes">Beige</a> -
@ -209,10 +205,10 @@ Reveal.addEventListener( 'customevent', function() {
</section> </section>
<section> <section>
<section data-background="#007777"> <section data-background="#dddddd">
<h2>Slide Backgrounds</h2> <h2>Slide Backgrounds</h2>
<p> <p>
Set <code>data-background="#007777"</code> on a slide to change the full page background to the given color. All CSS color formats are supported. Set <code>data-background="#dddddd"</code> on a slide to change the background color. All CSS color formats are supported.
</p> </p>
<a href="#" class="navigate-down"> <a href="#" class="navigate-down">
<img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow"> <img width="178" height="238" data-src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
@ -223,7 +219,7 @@ Reveal.addEventListener( 'customevent', function() {
<pre><code>&lt;section data-background="image.png"&gt;</code></pre> <pre><code>&lt;section data-background="image.png"&gt;</code></pre>
</section> </section>
<section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px"> <section data-background="https://s3.amazonaws.com/hakim-static/reveal-js/image-placeholder.png" data-background-repeat="repeat" data-background-size="100px">
<h2>Tile Backgrounds</h2> <h2>Tiled Backgrounds</h2>
<pre><code style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre> <pre><code style="word-wrap: break-word;">&lt;section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"&gt;</code></pre>
</section> </section>
</section> </section>
@ -231,15 +227,17 @@ Reveal.addEventListener( 'customevent', function() {
<section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom"> <section data-transition="slide" data-background="#4d7e65" data-background-transition="zoom">
<h2>Background Transitions</h2> <h2>Background Transitions</h2>
<p> <p>
Different background transitions are available via the <code>backgroundTransition</code> option. This one's called "zoom". Different background transitions are available via the backgroundTransition option. This one's called "zoom".
</p> </p>
<pre><code>Reveal.configure({ backgroundTransition: 'zoom' })</code></pre>
</section> </section>
<section data-transition="slide" data-background="#8c4738" data-background-transition="zoom"> <section data-transition="slide" data-background="#b5533c" data-background-transition="zoom">
<h2>Background Transitions</h2> <h2>Background Transitions</h2>
<p> <p>
You can override background transitions per slide by using <code>data-background-transition="zoom"</code>. You can override background transitions per-slide.
</p> </p>
<pre><code style="word-wrap: break-word;">&lt;section data-background-transition="zoom"&gt;</code></pre>
</section> </section>
<section> <section>
@ -262,7 +260,7 @@ Reveal.addEventListener( 'customevent', function() {
</section> </section>
<section> <section>
<h2>Superb Tables</h2> <h2>Tabular Tables</h2>
<table> <table>
<thead> <thead>
<tr> <tr>
@ -351,7 +349,7 @@ function linkify( selector ) {
<section> <section>
<h2>Take a Moment</h2> <h2>Take a Moment</h2>
<p> <p>
Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen during a presentation. Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.
</p> </p>
</section> </section>

2
js/reveal.js
View File

@ -43,7 +43,7 @@
// Bounds for smallest/largest possible scale to apply to content // Bounds for smallest/largest possible scale to apply to content
minScale: 0.2, minScale: 0.2,
maxScale: 1.0, maxScale: 1.5,
// Display controls in the bottom right corner // Display controls in the bottom right corner
controls: true, controls: true,