Commit 2318165f authored by JackV's avatar JackV
Browse files

Merge branch 'add_header' into 'master'

Add header

See merge request corsi/templates/revealjs-poul!1
parents 4aa71933 24204eb6
...@@ -37,7 +37,8 @@ In case you need the mathjax submodule as well ...@@ -37,7 +37,8 @@ In case you need the mathjax submodule as well
1. Clone this repo 1. Clone this repo
1. Change origin to your repo 1. Change origin to your repo
1. Push 1. Push
1. Edit `content.md` and `index.html` 1. Add author's info in `./slides/intro.html` and `./slides/outro.html`
1. Put your content in `./slides/content.md` or add slides files in `./slides/` and link these in `./index.html`
### How do I write my stuff? ### How do I write my stuff?
...@@ -50,18 +51,15 @@ four dashes (`----`) to create a new one vertically. ...@@ -50,18 +51,15 @@ four dashes (`----`) to create a new one vertically.
Use `Notes:` to add reader notes to your slide. Use `Notes:` to add reader notes to your slide.
Alternatively you can write your slides with pure **html**
### How do I see my stuff? ### How do I see my stuff?
- You can display `index.html` with your browser - You can run `./deploy.py` with Python 3 and open the provided link in your browser.
or
- You can run `deploy.py` with Python 3 and open the provided link in your browser.
## How do I make a PDF out of the slides? ## How do I make a PDF out of the slides?
Append `?print-pdf` at the end of the URL. Click on the printer symbol in the bottom-left corner to get the printable version of the slides.
For instance if you're running the `deploy.py` script locally the URL will be
something like `http://127.0.0.1:8080/?print-pdf`.
Then just use the print function of your browser to make a PDF of the page. Then just use the print function of your browser to make a PDF of the page.
......
<!doctype html> <!doctype html>
<html lang="it">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8"/>
<meta name="description" content=""> <meta content="" name="description"/>
<meta name="author" content=""> <meta content="" name="author"/>
<meta name="viewport" <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, <meta content="yes" name="apple-mobile-web-app-capable"/>
user-scalable=no"> <meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" <!-- reveal.js base stylesheel. Don't remove nor edit this. -->
content="black-translucent"> <link href="./reveal.js/css/reveal.css" rel="stylesheet"/>
<!-- reveal.js base stylesheel. Don't remove nor edit this. --> <!-- POuL theme for reveal.js -->
<link rel="stylesheet" href="reveal.js/css/reveal.css"> <link href="./poul/css/poul.css" id="theme" rel="stylesheet"/>
<!-- POuL theme for reveal.js --> <!-- Code syntax highlighting -->
<link rel="stylesheet" href="poul/css/poul.css" id="theme"> <link href="./reveal.js/lib/css_highlight/hopscotch.css" rel="stylesheet"/>
<!-- Code syntax highlighting --> <!-- Printing and PDF exports -->
<link rel="stylesheet" href="reveal.js/lib/css_highlight/hopscotch.css"> <script>
let link = document.createElement('link');
<!-- Printing and PDF exports --> link.rel = 'stylesheet';
<script> link.href = window.location.search.match(/print-pdf/gi)
var link = document.createElement('link'); ? './poul/css/print/pdf.css' : './poul/css/print/paper.css';
link.rel = 'stylesheet'; document.getElementsByTagName('head')[0].appendChild(link);
link.type = 'text/css'; </script>
link.href = window.location.search.match(/print-pdf/gi)
? 'reveal.js/css/print/pdf.css' : 'reveal.js/css/print/paper.css'; <script src="./reveal.js/lib/js/head.min.js"></script>
document.getElementsByTagName('head')[0].appendChild(link); <script src="./reveal.js/js/reveal.js"></script>
</script>
<!-- Init Reveal.js -->
<script>
document.addEventListener("DOMContentLoaded", () => {
Reveal.initialize({
controls: false,
slideNumber: true,
history: true,
transition: 'none',
pdfMaxPagesPerSlide: 1,
pdfSeparateFragments: false,
display: 'flex',
markdown: {
smartypants: true,
},
keyboard: {
38: 'prev', // Up arrow
40: 'next' // Down arrow
},
math: {
mathjax: './reveal.js/lib/js/mathjax/MathJax.js',
config: 'TeX-AMS_HTML-full' // See http://docs.mathjax.org/en/latest/config-files.html
},
dependencies: [
{
src: './reveal.js/plugin/markdown/marked.js',
condition: function () {
return !!document.querySelector('[data-markdown]');
}
},
{
src: './reveal.js/plugin/markdown/markdown.js',
condition: function () {
return !!document.querySelector('[data-markdown]');
}
},
{
src: './reveal.js/plugin/highlight/highlight.js',
async: true,
callback: function () {
hljs.initHighlightingOnLoad();
}
},
{
src: './reveal.js/plugin/notes/notes.js',
async: true
},
{
src: './reveal.js/plugin/math/math.js',
async: true
}
]
});
});
</script>
</head> </head>
<body> <div class="reveal">
<div class="reveal"> <div class="slides">
<section data-markdown="./slides/intro.html"></section>
<div class="slides"> <section data-charset="utf-8"
<section class="intro"> data-markdown="./slides/content.md"
<h1>Corsi Punto Croce 2018</h1> data-separator="^\r?\n---\r?\n$"
<h2>Come fare gli orli</h2> data-separator-notes="^Notes:"
data-separator-vertical="^\r?\n----\r?\n$">
<img src="poul/img/logo-text-white.svg"/> </section>
<section data-markdown="./slides/outro.html"></section>
<p>Autore &lt;email@email.com&gt;</p> </div>
</section> </div>
<section data-markdown="content.md"
data-charset="utf-8" <a class="printable-version" href="?print-pdf"></a>
data-separator="^\r?\n---\r?\n$" \ No newline at end of file
data-separator-vertical="^\r?\n----\r?\n$"
data-separator-notes="^Notes:">
</section>
<section class="outro">
<h1>Thank you!</h1>
<img class="logo" src="poul/img/logo-notext-white.svg"/>
<p>Rilasciato sotto licenza Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International</p>
<img class="cc" src="poul/img/creativecommons-by-nc-sa.svg"/>
<p>Autore &lt;email@email.com&gt;</p>
</section>
</div>
</div>
<script src="reveal.js/lib/js/head.min.js"></script>
<script src="reveal.js/js/reveal.js"></script>
<script>
Reveal.initialize({
controls: false,
slideNumber: true,
history: true,
transition: 'none',
pdfMaxPagesPerSlide: 1,
markdown: {
smartypants: true,
},
keyboard: {
38: 'prev', // Up arrow
40: 'next' // Down arrow
},
math: {
mathjax: 'reveal.js/lib/js/mathjax/MathJax.js',
config: 'TeX-AMS_HTML-full' // See http://docs.mathjax.org/en/latest/config-files.html
},
dependencies: [
{
src: 'reveal.js/plugin/markdown/marked.js',
condition: function(){ return !!document.querySelector('[data-markdown]'); }
},
{
src: 'reveal.js/plugin/markdown/markdown.js',
condition: function() { return !!document.querySelector('[data-markdown]'); }
},
{
src: 'reveal.js/plugin/highlight/highlight.js',
async: true,
callback: function() { hljs.initHighlightingOnLoad(); }
},
{
src: 'reveal.js/plugin/notes/notes.js',
async: true
},
{
src: 'reveal.js/plugin/math/math.js',
async: true
}
]
});
</script>
</body>
<!--
vim: tabstop=2 shiftwidth=2 expandtab:
-->
...@@ -4,6 +4,7 @@ ...@@ -4,6 +4,7 @@
* Forked from the default black theme. * Forked from the default black theme.
*/ */
@import url(../../reveal.js/lib/font/source-sans-pro/source-sans-pro.css); @import url(../../reveal.js/lib/font/source-sans-pro/source-sans-pro.css);
section.has-light-background, section.has-light-background,
section.has-light-background h1, section.has-light-background h1,
section.has-light-background h2, section.has-light-background h2,
...@@ -11,30 +12,52 @@ section.has-light-background h3, ...@@ -11,30 +12,52 @@ section.has-light-background h3,
section.has-light-background h4, section.has-light-background h4,
section.has-light-background h5, section.has-light-background h5,
section.has-light-background h6 { section.has-light-background h6 {
color: #222; } color: #222;
}
/********************************************* /*********************************************
* GLOBAL STYLES * GLOBAL STYLES
*********************************************/ *********************************************/
body { body {
background: #191919; background: #191919;
background-color: #191919; } background-color: #191919;
}
.reveal { .reveal {
font-family: "Source Sans Pro", Helvetica, sans-serif; font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 38px; font-size: 38px;
font-weight: normal; font-weight: normal;
color: #fff; } color: #fff;
}
::selection { ::selection {
color: #fff; color: #fff;
background: #fc4a2c; background: #fc4a2c;
text-shadow: none; } text-shadow: none;
}
.slides > section {
height: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.slides section > section {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.reveal .slides > section, .reveal .slides > section,
.reveal .slides > section > section { .reveal .slides > section > section {
line-height: 1.3; line-height: 1.3;
font-weight: inherit; } font-weight: inherit;
}
/********************************************* /*********************************************
* HEADERS * HEADERS
...@@ -45,265 +68,358 @@ body { ...@@ -45,265 +68,358 @@ body {
.reveal h4, .reveal h4,
.reveal h5, .reveal h5,
.reveal h6 { .reveal h6 {
margin: 0 0 20px 0; margin: 0 0 20px 0;
color: #ffc600; color: #ffc600;
font-family: "Source Sans Pro", Helvetica, sans-serif; font-family: "Source Sans Pro", Helvetica, sans-serif;
font-weight: 600; font-weight: 600;
line-height: 1.2; line-height: 1.2;
letter-spacing: normal; letter-spacing: normal;
text-shadow: none; text-shadow: none;
word-wrap: break-word; } word-wrap: break-word;
}
.reveal h1 { .reveal h1 {
font-size: 2.5em; } font-size: 2.5em;
}
.reveal h2 { .reveal h2 {
font-size: 1.6em; } font-size: 1.6em;
}
.reveal h3 { .reveal h3 {
font-size: 1.3em; } font-size: 1.3em;
}
.reveal h4 { .reveal h4 {
font-size: 1em; } font-size: 1em;
}
.reveal h1 { .reveal h1 {
text-shadow: none; } text-shadow: none;
}
.reveal x-section-title {
position: absolute;
top: 0;
right: 20px;
color: #ffc600;
font-weight: bold;
text-align: right;
}
/********************************************* /*********************************************
* OTHER * OTHER
*********************************************/ *********************************************/
.reveal p { .reveal p {
margin: 20px 0; margin: 20px 0;
line-height: 1.3; } 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,
.reveal video, .reveal video,
.reveal iframe { .reveal iframe {
max-width: 95%; max-width: 95%;
max-height: 95%; } max-height: 95%;
}
.reveal strong, .reveal strong,
.reveal b { .reveal b {
font-weight: bold; font-weight: bold;
color: #ffc600; } color: #ffc600;
}
.reveal em { .reveal em {
font-style: italic; } font-style: italic;
}
.reveal ol, .reveal ol,
.reveal dl, .reveal dl,
.reveal ul { .reveal ul {
display: inline-block; display: inline-block;
text-align: left; text-align: left;
margin: 0 0 0 1em; } margin: 0 0 0 1em;
}
.reveal ol { .reveal ol {
list-style-type: decimal; } list-style-type: decimal;
}
.reveal ul { .reveal ul {
list-style-type: disc; } list-style-type: disc;
}
.reveal ul ul { .reveal ul ul {
list-style-type: square; } list-style-type: square;
}
.reveal ul ul ul { .reveal ul ul ul {
list-style-type: circle; } list-style-type: circle;
}
.reveal ul ul, .reveal ul ul,
.reveal ul ol, .reveal ul ol,
.reveal ol ol, .reveal ol ol,
.reveal ol ul { .reveal ol ul {
display: block; display: block;
margin-left: 40px; } margin-left: 40px;
}
.reveal dt { .reveal dt {
font-weight: bold; } font-weight: bold;
}
.reveal dd { .reveal dd {
margin-left: 40px; } margin-left: 40px;
}
.reveal q, .reveal q,
.reveal blockquote { .reveal blockquote {
quotes: none; } quotes: none;
}
.reveal blockquote { .reveal blockquote {
display: block; display: block;
position: relative; position: relative;
width: 70%; width: 70%;
margin: 20px auto; margin: 20px auto;
padding: 5px; padding: 5px;
font-style: italic; font-style: italic;
background: rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child, .reveal blockquote p:first-child,
.reveal blockquote p:last-child { .reveal blockquote p:last-child {
display: inline-block; } display: inline-block;
}
.reveal q { .reveal q {
font-style: italic; } font-style: italic;
}
.reveal pre { .reveal pre {
display: block; display: block;
position: relative; position: relative;
width: 90%; width: 90%;
min-width: 40em; min-width: 40em;
margin: 20px auto; margin: 20px auto;
text-align: left; text-align: left;
font-size: 0.55em; font-size: 0.55em;
font-family: monospace; font-family: monospace;
line-height: 1.2em; line-height: 1.2em;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); } box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
}
.reveal code { .reveal code {
font-family: monospace; } font-family: monospace;
}
.reveal pre code { .reveal pre code {
display: block; display: block;
padding: 5px; padding: 5px;
overflow: auto; overflow: auto;
max-height: 400px; max-height: 400px;
word-wrap: normal; } word-wrap: normal;
}
.reveal table { .reveal table {
margin: auto; margin: auto;
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; } border-spacing: 0;
}
.reveal table th { .reveal table th {
font-weight: bold; } font-weight: bold;
}
.reveal table th, .reveal table th,
.reveal table td { .reveal table td {
text-align: left; text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em; padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid; } border-bottom: 1px solid;
}
.reveal table th[align="center"], .reveal table th[align="center"],
.reveal table td[align="center"] { .reveal table td[align="center"] {
text-align: center; } text-align: center;
}