mirror of
https://github.com/php/web-pres2.git
synced 2026-03-23 23:12:07 +01:00
Dark background
This commit is contained in:
Rasmus Lerdorf
175
reveal_template_dark.php
Normal file
175
reveal_template_dark.php
Normal file
@@ -0,0 +1,175 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
|
||||
<title><?=$title?></title>
|
||||
|
||||
<meta name="description" content="<?=$title?>">
|
||||
<meta name="author" content="<?=$speaker?>">
|
||||
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
|
||||
|
||||
<link rel="stylesheet" href="/reveal.js/css/reveal.css">
|
||||
<link rel="stylesheet" href="/reveal.js/css/theme/black.css" id="theme">
|
||||
|
||||
<!-- For syntax highlighting - note that these are not the generic highlight.js theme files - see https://github.com/nwinkler/reveal-highlight-themes -->
|
||||
<link rel="stylesheet" href="/styles/agate.css">
|
||||
|
||||
<!-- Override a few styles -->
|
||||
<style>
|
||||
/*
|
||||
Not actually sure why this block isn't being picked up from the syntax highlight css
|
||||
If you change the syntax highlight theme, copy the first block here
|
||||
*/
|
||||
.reveal pre {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.reveal pre code {
|
||||
display: block;
|
||||
max-height: 600px;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
line-height: 125%;
|
||||
background: #000;
|
||||
color: white;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
|
||||
.reveal section img {
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.reveal code.shell {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
background: #000;
|
||||
color: #ddd;
|
||||
line-height: 125%;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
/* Left-align h3 and h4 if they are p elements */
|
||||
h3.p {
|
||||
text-align: left;
|
||||
}
|
||||
h4.p {
|
||||
text-align: left;
|
||||
}
|
||||
/* and left-aligned but slightly indented bullet lists */
|
||||
.reveal ul {
|
||||
display: block;
|
||||
margin: 0 0 1em 3em;
|
||||
}
|
||||
/* Example titles */
|
||||
p.example {
|
||||
text-align: left;
|
||||
margin: 0 0 -0.5em 1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
/* Example output style */
|
||||
pre.output {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
background: #222;
|
||||
color: white;
|
||||
line-height: 200%;
|
||||
-webkit-text-size-adjust: none;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<!-- Printing and PDF exports -->
|
||||
<script>
|
||||
var link = document.createElement( 'link' );
|
||||
link.rel = 'stylesheet';
|
||||
link.type = 'text/css';
|
||||
link.href = window.location.search.match( /print-pdf/gi ) ? '/reveal.js/css/print/pdf.css' : '/reveal.js/css/print/paper.css';
|
||||
document.getElementsByTagName( 'head' )[0].appendChild( link );
|
||||
</script>
|
||||
|
||||
<!-- Needed for charts to work. Fall back to network if no local copy -->
|
||||
<script type='text/javascript' src='/jquery.min.js'></script>
|
||||
<script>window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">\x3C/script>')</script>
|
||||
<script src="/highcharts.js"></script>
|
||||
<script>window.Highcharts || document.write('<script src="http://code.highcharts.com/highcharts.js">\x3C/script>')</script>
|
||||
|
||||
<!--[if lt IE 9]>
|
||||
<script src="/reveal.js/lib/js/html5shiv.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<div class="reveal">
|
||||
|
||||
<!-- Any section element inside of this container is displayed as a slide -->
|
||||
<div class="slides">
|
||||
<section>
|
||||
<h1><?=$title?></h1>
|
||||
<h3><?=$event?></h3>
|
||||
<h3><?=$location?></h3>
|
||||
<h3><?=$date?></h3>
|
||||
<a href="<?=$url?>"><?=$url?></a><br><br>
|
||||
<p><?=$speaker?><br>
|
||||
<small><a href="http://twitter.com/<?=$twitter?>"><?=$twitter?></a></small>
|
||||
</p>
|
||||
<aside class="notes">
|
||||
<?php if(!empty($notes)) echo nl2br(trim($notes)); ?>
|
||||
</aside>
|
||||
</section>
|
||||
<?=$slides?>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script src="/reveal.js/lib/js/head.min.js"></script>
|
||||
<script src="/reveal.js/js/reveal.js"></script>
|
||||
|
||||
<script>
|
||||
|
||||
Reveal.initialize({
|
||||
controls: true,
|
||||
progress: true,
|
||||
history: true,
|
||||
center: true,
|
||||
width: 1024,
|
||||
height: 768,
|
||||
|
||||
transition: 'slide', // none/fade/slide/convex/concave/zoom
|
||||
transitionSpeed: 'fast',
|
||||
|
||||
// Optional reveal.js plugins
|
||||
dependencies: [
|
||||
{ src: '/reveal.js/lib/js/classList.js', condition: function() { return !document.body.classList; } },
|
||||
{ src: '/highlight.min.js', async: true, condition: function() { return !!document.querySelector( 'pre code' ); }, callback: function() { hljs.initHighlightingOnLoad(); } },
|
||||
{ src: '/reveal.js/plugin/zoom-js/zoom.js', async: true },
|
||||
{ src: '/reveal.js/plugin/notes/notes.js', async: true },
|
||||
{ src: '/reveal.js/plugin/line-numbers/line-numbers.js' }
|
||||
]
|
||||
});
|
||||
/* This draws the graph on the slide on a slidechanged event */
|
||||
Reveal.addEventListener('slidechanged', function(event) {
|
||||
var callback = "render_"+event.currentSlide.id;
|
||||
if(typeof(window[callback])=="function") {
|
||||
window[callback]();
|
||||
}
|
||||
} );
|
||||
/* This draws the graph if we got here directly without coming from another slide */
|
||||
Reveal.addEventListener('ready', function(event) {
|
||||
var callback = "render_"+event.currentSlide.id;
|
||||
if(typeof(window[callback])=="function") {
|
||||
window[callback]();
|
||||
}
|
||||
} );
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
108
styles/agate.css
Normal file
108
styles/agate.css
Normal file
@@ -0,0 +1,108 @@
|
||||
/*!
|
||||
* Agate by Taufik Nurrohman <https://github.com/tovic>
|
||||
* ----------------------------------------------------
|
||||
*
|
||||
* #ade5fc
|
||||
* #a2fca2
|
||||
* #c6b4f0
|
||||
* #d36363
|
||||
* #fcc28c
|
||||
* #fc9b9b
|
||||
* #ffa
|
||||
* #fff
|
||||
* #333
|
||||
* #62c8f3
|
||||
* #888
|
||||
*
|
||||
*/
|
||||
|
||||
.hljs {
|
||||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
background: #333;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hljs-name,
|
||||
.hljs-strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.hljs-code,
|
||||
.hljs-emphasis {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-tag {
|
||||
color: #62c8f3;
|
||||
}
|
||||
|
||||
.hljs-variable,
|
||||
.hljs-template-variable,
|
||||
.hljs-selector-id,
|
||||
.hljs-selector-class {
|
||||
color: #ade5fc;
|
||||
}
|
||||
|
||||
.hljs-string,
|
||||
.hljs-bullet {
|
||||
color: #a2fca2;
|
||||
}
|
||||
|
||||
.hljs-type,
|
||||
.hljs-title,
|
||||
.hljs-section,
|
||||
.hljs-attribute,
|
||||
.hljs-quote,
|
||||
.hljs-built_in,
|
||||
.hljs-builtin-name {
|
||||
color: #ffa;
|
||||
}
|
||||
|
||||
.hljs-number,
|
||||
.hljs-symbol,
|
||||
.hljs-bullet {
|
||||
color: #d36363;
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-literal {
|
||||
color: #fcc28c;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-deletion,
|
||||
.hljs-code {
|
||||
color: #888;
|
||||
}
|
||||
|
||||
.hljs-regexp,
|
||||
.hljs-link {
|
||||
color: #c6b4f0;
|
||||
}
|
||||
|
||||
.hljs-meta {
|
||||
color: #fc9b9b;
|
||||
}
|
||||
|
||||
.hljs-deletion {
|
||||
background-color: #fc9b9b;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.hljs-addition {
|
||||
background-color: #a2fca2;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.hljs a {
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.hljs a:focus,
|
||||
.hljs a:hover {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
Reference in New Issue
Block a user