First work on theme

This commit is contained in:
Phyks 2014-07-02 13:50:49 +02:00
parent fb4cc87673
commit 57d772ae2a
22 changed files with 564 additions and 85 deletions

View File

@ -25,7 +25,7 @@ body {
.reveal {
font-family: "Lato", sans-serif;
font-size: 36px;
font-size: 30px;
font-weight: normal;
letter-spacing: -0.02em;
color: #333333; }

View File

@ -25,7 +25,7 @@ body {
.reveal {
font-family: "Lato", sans-serif;
font-size: 36px;
font-size: 30px;
font-weight: normal;
letter-spacing: -0.02em;
color: #eeeeee; }

View File

@ -25,7 +25,7 @@ body {
.reveal {
font-family: "Lato", sans-serif;
font-size: 36px;
font-size: 30px;
font-weight: normal;
letter-spacing: -0.02em;
color: #93a1a1; }

View File

@ -10,48 +10,57 @@
font-weight: normal;
font-style: normal; }
@font-face {
font-family: 'Lato';
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local("Lato Regular"), local("Lato-Regular"), url("../../lib/font/lato-regular.woff") format("woff"); }
src: local("Open Sans"), local("OpenSans"), url("../../lib/font/open-sans-regular.woff") format("woff"); }
@font-face {
font-family: 'Lato';
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local("Lato Bold"), local("Lato-Bold"), url("../../lib/font/lato-bold.woff") format("woff"); }
src: local("Open Sans Bold"), local("OpenSans-Bold"), url("../../lib/font/open-sans-bold.woff") format("woff"); }
@font-face {
font-family: 'Lato';
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local("Lato Italic"), local("Lato-Italic"), url("../../lib/font/lato-italic.woff") format("woff"); }
src: local("Open Sans Italic"), local("OpenSans-Italic"), url("../../lib/font/open-sans-italic.woff") format("woff"); }
@font-face {
font-family: 'Lato';
font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
src: local("Lato Bold Italic"), local("Lato-BoldItalic"), url("../../lib/font/lato-bolditalic.woff") format("woff"); }
src: local("Open Sans Bold Italic"), local("OpenSans-BoldItalic"), url("../../lib/font/open-sans-bold-italic.woff") format("woff"); }
@font-face {
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 400;
src: local("Source Code Pro"), local("SourceCodePro-Regular"), url("../../lib/font/source-code-pro-regular.woff") format("woff"); }
@font-face {
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 500;
src: local("Source Code Pro Medium"), local("SourceCodePro-Medium"), url("../../lib/font/source-code-pro-500.woff") format("woff"); }
@font-face {
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 700;
src: local("Source Code Pro Bold"), local("SourceCodePro-Bold"), url("../../lib/font/source-code-pro-bold.woff") format("woff"); }
/*********************************************
* GLOBAL STYLES
*********************************************/
body {
background: #1c1e20;
background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20));
background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%);
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: #0b5662;
background-color: #0b5662; }
.reveal {
font-family: "Lato", sans-serif;
font-size: 36px;
font-family: "Open Sans", sans-serif;
font-size: 30px;
font-weight: normal;
letter-spacing: -0.02em;
color: #eeeeee; }
::selection {
color: white;
background: #ff5e99;
color: #0b5662;
background: white;
text-shadow: none; }
/*********************************************
@ -64,21 +73,21 @@ body {
.reveal h5,
.reveal h6 {
margin: 0 0 20px 0;
color: #eeeeee;
color: #e2aa3b;
font-family: "League Gothic", Impact, sans-serif;
line-height: 0.9em;
letter-spacing: 0.02em;
text-transform: uppercase;
text-transform: none;
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: 0px 0px 6px rgba(0, 0, 0, 0.2); }
/*********************************************
* LINKS
*********************************************/
.reveal a:not(.image) {
color: #13daec;
color: #e2aa3b;
text-decoration: none;
-webkit-transition: color .15s ease;
-moz-transition: color .15s ease;
@ -87,13 +96,13 @@ body {
transition: color .15s ease; }
.reveal a:not(.image):hover {
color: #71e9f4;
color: #33c067;
text-shadow: none;
border: none; }
.reveal .roll span:after {
color: #fff;
background: #0d99a5; }
background: #b6821b; }
/*********************************************
* IMAGES
@ -111,7 +120,7 @@ body {
.reveal a:hover img {
background: rgba(255, 255, 255, 0.2);
border-color: #13daec;
border-color: #e2aa3b;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); }
/*********************************************
@ -119,31 +128,31 @@ body {
*********************************************/
.reveal .controls div.navigate-left,
.reveal .controls div.navigate-left.enabled {
border-right-color: #13daec; }
border-right-color: #e2aa3b; }
.reveal .controls div.navigate-right,
.reveal .controls div.navigate-right.enabled {
border-left-color: #13daec; }
border-left-color: #e2aa3b; }
.reveal .controls div.navigate-up,
.reveal .controls div.navigate-up.enabled {
border-bottom-color: #13daec; }
border-bottom-color: #e2aa3b; }
.reveal .controls div.navigate-down,
.reveal .controls div.navigate-down.enabled {
border-top-color: #13daec; }
border-top-color: #e2aa3b; }
.reveal .controls div.navigate-left.enabled:hover {
border-right-color: #71e9f4; }
border-right-color: #33c067; }
.reveal .controls div.navigate-right.enabled:hover {
border-left-color: #71e9f4; }
border-left-color: #33c067; }
.reveal .controls div.navigate-up.enabled:hover {
border-bottom-color: #71e9f4; }
border-bottom-color: #33c067; }
.reveal .controls div.navigate-down.enabled:hover {
border-top-color: #71e9f4; }
border-top-color: #33c067; }
/*********************************************
* PROGRESS BAR
@ -152,7 +161,7 @@ body {
background: rgba(0, 0, 0, 0.2); }
.reveal .progress span {
background: #13daec;
background: #e2aa3b;
-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);
-ms-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
@ -163,4 +172,137 @@ body {
* SLIDE NUMBER
*********************************************/
.reveal .slide-number {
color: #13daec; }
color: #e2aa3b; }
::-moz-selection {
color: #0b5662;
background: white;
text-shadow: none; }
.reveal h1 {
text-transform: uppercase;
line-height: 1em;
margin-bottom: 1em; }
.reveal .slides > section:first-child > section:first-child h1 {
color: white;
-moz-hyphens: none;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
word-spacing: 0.075em; }
.reveal .slides > section:first-child > section:first-child h2 {
font-style: italic; }
.reveal section:not(:first-child) h2 {
text-align: left;
border-bottom: 3px solid #a05007; }
.reveal h2::-moz-selection {
color: #0b5662;
background: #e2aa3b;
text-shadow: none; }
.reveal h2::selection {
color: #0b5662;
background: #e2aa3b;
text-shadow: none; }
.reveal .slides > section:first-child > section:first-child h2 *::-moz-selection {
color: #0b5662;
background: #e2aa3b;
text-shadow: none; }
.reveal .slides > section:first-child > section:first-child h2 *::selection {
color: #0b5662;
background: #e2aa3b;
text-shadow: none; }
.reveal .slides > section:first-child > section:first-child h3::-moz-selection {
color: #0b5662;
background: #e2aa3b;
text-shadow: none; }
.reveal .slides > section:first-child > section:first-child h3::selection {
color: #0b5662;
background: #e2aa3b;
text-shadow: none; }
.reveal .slides > section:first-child > section:first-child h3 *::-moz-selection {
color: #0b5662;
background: #e2aa3b;
text-shadow: none; }
.reveal .slides > section:first-child > section:first-child h3 *::selection {
color: #0b5662;
background: #e2aa3b;
text-shadow: none; }
.reveal .slides a::selection {
color: #0b5662;
background: #e2aa3b;
text-shadow: none; }
.reveal .slides a::-moz-selection {
color: #0b5662;
background: #e2aa3b;
text-shadow: none; }
#summary h2 {
color: white; }
#summary h2::selection {
color: #0b5662;
background: white; }
#summary h2::-moz-selection {
color: #0b5662;
background: white; }
.reveal pre {
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
/* background-color: #0e6a79;
padding: 1em;*/ }
.reveal code {
font-family: "Source Code Pro", monospace;
font-weight: 500; }
.reveal blockquote {
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
background-color: #0e6a79;
padding: 1em; }
.reveal .progress {
height: 0.5em; }
.reveal .progress span {
background: #cb6512; }
.reveal .slide-number {
font-size: 0.75em;
font-weight: bold;
margin-bottom: 0.25em;
opacity: 0.5; }
.reveal table {
margin: auto;
border-collapse: collapse;
border-spacing: 0; }
.reveal table th {
font-weight: bold;
color: #e2aa3b; }
.reveal table th,
.reveal table td {
text-align: center;
padding: 0.2em 0.5em;
border-bottom: 2px solid white; }
.reveal table tr:last-child td {
border-bottom: none; }
#presentable-toc li li {
font-style: italic; }

View File

@ -16,7 +16,7 @@ body {
.reveal {
font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif;
font-size: 36px;
font-size: 30px;
font-weight: normal;
letter-spacing: -0.02em;
color: black; }

View File

@ -16,7 +16,7 @@ body {
.reveal {
font-family: "Lato", sans-serif;
font-size: 36px;
font-size: 30px;
font-weight: normal;
letter-spacing: -0.02em;
color: black; }

View File

@ -23,7 +23,7 @@ body {
.reveal {
font-family: "Open Sans", sans-serif;
font-size: 36px;
font-size: 30px;
font-weight: normal;
letter-spacing: -0.02em;
color: #333333; }

View File

@ -25,7 +25,7 @@ body {
.reveal {
font-family: "Lato", sans-serif;
font-size: 36px;
font-size: 30px;
font-weight: normal;
letter-spacing: -0.02em;
color: #657b83; }

View File

@ -26,43 +26,226 @@
}
@font-face {
font-family: 'Lato';
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url('../../lib/font/lato-regular.woff') format('woff');
src: local('Open Sans'), local('OpenSans'), url('../../lib/font/open-sans-regular.woff') format('woff');
}
@font-face {
font-family: 'Lato';
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url('../../lib/font/lato-bold.woff') format('woff');
src: local('Open Sans Bold'), local('OpenSans-Bold'), url('../../lib/font/open-sans-bold.woff') format('woff');
}
@font-face {
font-family: 'Lato';
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Lato Italic'), local('Lato-Italic'), url('../../lib/font/lato-italic.woff') format('woff');
src: local('Open Sans Italic'), local('OpenSans-Italic'), url('../../lib/font/open-sans-italic.woff') format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 700;
src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url('../../lib/font/open-sans-bold-italic.woff') format('woff');
}
@font-face {
font-family: 'Lato';
font-style: italic;
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 400;
src: local('Source Code Pro'), local('SourceCodePro-Regular'), url('../../lib/font/source-code-pro-regular.woff') format('woff');
}
@font-face {
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 500;
src: local('Source Code Pro Medium'), local('SourceCodePro-Medium'), url('../../lib/font/source-code-pro-500.woff') format('woff');
}
@font-face {
font-family: 'Source Code Pro';
font-style: normal;
font-weight: 700;
src: local('Lato Bold Italic'), local('Lato-BoldItalic'), url('../../lib/font/lato-bolditalic.woff') format('woff');
src: local('Source Code Pro Bold'), local('SourceCodePro-Bold'), url('../../lib/font/source-code-pro-bold.woff') format('woff');
}
// Override theme settings (see ../template/settings.scss)
$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
@mixin bodyBackground() {
@include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) );
}
$mainFont: 'Open Sans', sans-serif;
$codeFont: 'Source Code Pro', monospace;
$backgroundColor: #0b5662;
$headingTextTransform: none;
$headingColor: #e2aa3b;
$mainHeadingColor: white;
$borderColor: #a05007;
$linkColor: #e2aa3b;
$linkColorHover: #33c067;
$backgroundQuotes: #0e6a79;
$selectionColor: $backgroundColor;
$selectionBackgroundColor: white;
$borderTableColor: white;
$thColor: $headingColor;
// Theme template ------------------------------
@import "../template/theme";
// ---------------------------------------------
::-moz-selection {
color: $selectionColor;
background: $selectionBackgroundColor;
text-shadow: none;
}
.reveal h1 {
text-transform: uppercase;
line-height: 1em;
margin-bottom: 1em;
}
.reveal .slides>section:first-child>section:first-child h1 {
color: $mainHeadingColor;
-moz-hyphens: none;
-webkit-hyphens: none;
-ms-hyphens: none;
hyphens: none;
word-spacing: 0.075em;
}
.reveal .slides>section:first-child>section:first-child h2 {
font-style: italic;
}
.reveal section:not(:first-child) h2 {
text-align: left;
border-bottom: 3px solid $borderColor;
}
.reveal h2::-moz-selection {
color: $selectionColor;
background: $headingColor;
text-shadow: none;
}
.reveal h2::selection {
color: $selectionColor;
background: $headingColor;
text-shadow: none;
}
.reveal .slides>section:first-child>section:first-child h2 *::-moz-selection {
color: $selectionColor;
background: $headingColor;
text-shadow: none;
}
.reveal .slides>section:first-child>section:first-child h2 *::selection {
color: $selectionColor;
background: $headingColor;
text-shadow: none;
}
.reveal .slides>section:first-child>section:first-child h3::-moz-selection {
color: $selectionColor;
background: $headingColor;
text-shadow: none;
}
.reveal .slides>section:first-child>section:first-child h3::selection {
color: $selectionColor;
background: $headingColor;
text-shadow: none;
}
.reveal .slides>section:first-child>section:first-child h3 *::-moz-selection {
color: $selectionColor;
background: $headingColor;
text-shadow: none;
}
.reveal .slides>section:first-child>section:first-child h3 *::selection {
color: $selectionColor;
background: $headingColor;
text-shadow: none;
}
.reveal .slides a::selection {
color: $selectionColor;
background: $headingColor;
text-shadow: none;
}
.reveal .slides a::-moz-selection {
color: $selectionColor;
background: $headingColor;
text-shadow: none;
}
#summary h2 {
color: $mainHeadingColor;
}
#summary h2::selection {
color: $selectionColor;
background: $mainHeadingColor;
}
#summary h2::-moz-selection {
color: $selectionColor;
background: $mainHeadingColor;
}
.reveal pre {
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
/* background-color: #0e6a79;
padding: 1em;*/
}
.reveal code {
font-family: $codeFont;
font-weight: 500;
}
.reveal blockquote {
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.5);
background-color: $backgroundQuotes;
padding: 1em;
}
.reveal .progress {
height: 0.5em;
}
.reveal .progress span {
background: #cb6512;
}
.reveal .slide-number {
font-size: 0.75em;
font-weight: bold;
margin-bottom: 0.25em;
opacity: 0.5;
}
.reveal table {
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
.reveal table th {
font-weight: bold;
color: $thColor;
}
.reveal table th,
.reveal table td {
text-align: center;
padding: 0.2em 0.5em;
border-bottom: 2px solid $borderTableColor;
}
.reveal table tr:last-child td {
border-bottom: none;
}
#presentable-toc li li {
font-style: italic;
}

View File

@ -6,7 +6,7 @@ $backgroundColor: #2b2b2b;
// Primary/body text
$mainFont: 'Lato', sans-serif;
$mainFontSize: 36px;
$mainFontSize: 30px;
$mainColor: #eee;
// Headings

View File

@ -37,15 +37,21 @@
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<section>
<div class="dual_head">
<h1>Reveal.js</h1>
<h3>HTML Presentations Made Easy</h3>
<h2>Lab / Company</h2>
<h2>Speaker</h2>
<h2>Date</h2>
</div>
<div class="dual_foot">
<p>
<small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small>
</p>
</div>
</section>
<section>
<h2>Heads Up</h2>
<h2 class="headtitle">Heads Up</h2>
<p>
reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with
support for CSS 3D transforms to see it in its full glory.
@ -421,7 +427,7 @@ function linkify( selector ) {
// Transition style for full page slide backgrounds : default / none / slide / concave / convex / zoom
backgroundTransition: 'default',
// Number of slides away from the current that are visible
viewDistance: 3,
viewDistance: 5,
// Parallax background image
parallaxBackgroundImage: '',
// Parallax background size

149
lib/css/phyks.css Normal file
View File

@ -0,0 +1,149 @@
/*
Monokai Sublime style. Derived from Monokai by noformnocontent http://nn.mit-license.org/
*/
.hljs {
display: block;
padding: 0.5em;
background: #23241f;
}
.hljs,
.hljs-tag,
.css .hljs-rules,
.css .hljs-value,
.css .hljs-function
.hljs-preprocessor,
.hljs-pragma {
color: #f8f8f2;
}
.hljs-strongemphasis,
.hljs-strong,
.hljs-emphasis {
color: #a8a8a2;
}
.hljs-bullet,
.hljs-blockquote,
.hljs-horizontal_rule,
.hljs-number,
.hljs-regexp,
.alias .hljs-keyword,
.hljs-literal,
.hljs-hexcolor {
color: #ae81ff;
}
.hljs-tag .hljs-value,
.hljs-code,
.hljs-title,
.css .hljs-class,
.hljs-class .hljs-title:last-child {
color: #a6e22e;
}
.hljs-link_url {
font-size: 80%;
}
.hljs-strong,
.hljs-strongemphasis {
font-weight: bold;
}
.hljs-emphasis,
.hljs-strongemphasis,
.hljs-class .hljs-title:last-child {
font-style: italic;
}
.hljs-keyword,
.hljs-function,
.hljs-change,
.hljs-winutils,
.hljs-flow,
.lisp .hljs-title,
.clojure .hljs-built_in,
.nginx .hljs-title,
.tex .hljs-special,
.hljs-header,
.hljs-attribute,
.hljs-symbol,
.hljs-symbol .hljs-string,
.hljs-tag .hljs-title,
.hljs-value,
.alias .hljs-keyword:first-child,
.css .hljs-tag,
.css .unit,
.css .hljs-important {
color: #F92672;
}
.hljs-function .hljs-keyword,
.hljs-class .hljs-keyword:first-child,
.hljs-constant,
.css .hljs-attribute {
color: #66d9ef;
}
.hljs-variable,
.hljs-params,
.hljs-class .hljs-title {
color: #f8f8f2;
}
.hljs-string,
.css .hljs-id,
.hljs-subst,
.haskell .hljs-type,
.ruby .hljs-class .hljs-parent,
.hljs-built_in,
.sql .hljs-aggregate,
.django .hljs-template_tag,
.django .hljs-variable,
.smalltalk .hljs-class,
.django .hljs-filter .hljs-argument,
.smalltalk .hljs-localvars,
.smalltalk .hljs-array,
.hljs-attr_selector,
.hljs-pseudo,
.hljs-addition,
.hljs-stream,
.hljs-envvar,
.apache .hljs-tag,
.apache .hljs-cbracket,
.tex .hljs-command,
.hljs-prompt,
.hljs-link_label,
.hljs-link_url {
color: #e6db74;
}
.hljs-comment,
.hljs-javadoc,
.java .hljs-annotation,
.python .hljs-decorator,
.hljs-template_comment,
.hljs-pi,
.hljs-doctype,
.hljs-deletion,
.hljs-shebang,
.apache .hljs-sqbracket,
.tex .hljs-formula {
color: #75715e;
}
.coffeescript .javascript,
.javascript .xml,
.tex .hljs-formula,
.xml .javascript,
.xml .vbscript,
.xml .css,
.xml .hljs-cdata,
.xml .php,
.php .xml {
opacity: 0.5;
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

File diff suppressed because one or more lines are too long

1
plugin/presentable Submodule

@ -0,0 +1 @@
Subproject commit 478399ed6f7da905680e82c1841bf6461c858f70