Skip to content

GitLab

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

Merge branch 'add_header' into 'master' 

Add header

See merge request corsi/templates/revealjs-poul!1
parents 4aa71933 24204eb6
Hide whitespace changes
Inline Side-by-side
Showing with 381 additions and 252 deletions
README.md
View file @ 2318165f
......@@ -37,7 +37,8 @@ In case you need the mathjax submodule as well
1. Clone this repo
1. Change origin to your repo
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?
......@@ -50,18 +51,15 @@ four dashes (`----`) to create a new one vertically.
Use `Notes:` to add reader notes to your slide.
Alternatively you can write your slides with pure **html**
### How do I see my stuff?
- You can display `index.html` with your browser
or
- You can run `deploy.py` with Python 3 and open the provided link in your browser.
- 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?
Append `?print-pdf` at the end of the URL.
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`.
Click on the printer symbol in the bottom-left corner to get the printable version of the slides.
Then just use the print function of your browser to make a PDF of the page.
......
index.html
View file @ 2318165f
<!doctype html>
<html lang="it">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style"
content="black-translucent">
<!-- reveal.js base stylesheel. Don't remove nor edit this. -->
<link rel="stylesheet" href="reveal.js/css/reveal.css">
<!-- POuL theme for reveal.js -->
<link rel="stylesheet" href="poul/css/poul.css" id="theme">
<!-- Code syntax highlighting -->
<link rel="stylesheet" href="reveal.js/lib/css_highlight/hopscotch.css">
<!-- 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>
<meta charset="utf-8"/>
<meta content="" name="description"/>
<meta content="" name="author"/>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport"/>
<meta content="yes" name="apple-mobile-web-app-capable"/>
<meta content="black-translucent" name="apple-mobile-web-app-status-bar-style"/>
<!-- reveal.js base stylesheel. Don't remove nor edit this. -->
<link href="./reveal.js/css/reveal.css" rel="stylesheet"/>
<!-- POuL theme for reveal.js -->
<link href="./poul/css/poul.css" id="theme" rel="stylesheet"/>
<!-- Code syntax highlighting -->
<link href="./reveal.js/lib/css_highlight/hopscotch.css" rel="stylesheet"/>
<!-- Printing and PDF exports -->
<script>
let link = document.createElement('link');
link.rel = 'stylesheet';
link.href = window.location.search.match(/print-pdf/gi)
? './poul/css/print/pdf.css' : './poul/css/print/paper.css';
document.getElementsByTagName('head')[0].appendChild(link);
</script>
<script src="./reveal.js/lib/js/head.min.js"></script>
<script src="./reveal.js/js/reveal.js"></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>
<body>
<div class="reveal">
<div class="slides">
<section class="intro">
<h1>Corsi Punto Croce 2018</h1>
<h2>Come fare gli orli</h2>
<img src="poul/img/logo-text-white.svg"/>
<p>Autore &lt;email@email.com&gt;</p>
</section>
<section data-markdown="content.md"
data-charset="utf-8"
data-separator="^\r?\n---\r?\n$"
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:
-->
<div class="reveal">
<div class="slides">
<section data-markdown="./slides/intro.html"></section>
<section data-charset="utf-8"
data-markdown="./slides/content.md"
data-separator="^\r?\n---\r?\n$"
data-separator-notes="^Notes:"
data-separator-vertical="^\r?\n----\r?\n$">
</section>
<section data-markdown="./slides/outro.html"></section>
</div>
</div>
<a class="printable-version" href="?print-pdf"></a>
\ No newline at end of file
poul/css/poul.css
View file @ 2318165f
......@@ -4,6 +4,7 @@
* Forked from the default black theme.
*/
@import url(../../reveal.js/lib/font/source-sans-pro/source-sans-pro.css);
section.has-light-background,
section.has-light-background h1,
section.has-light-background h2,
......@@ -11,30 +12,52 @@ section.has-light-background h3,
section.has-light-background h4,
section.has-light-background h5,
section.has-light-background h6 {
color: #222; }
color: #222;
}
/*********************************************
* GLOBAL STYLES
*********************************************/
body {
background: #191919;
background-color: #191919; }
background: #191919;
background-color: #191919;
}
.reveal {
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 38px;
font-weight: normal;
color: #fff; }
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-size: 38px;
font-weight: normal;
color: #fff;
}
::selection {
color: #fff;
background: #fc4a2c;
text-shadow: none; }
color: #fff;
background: #fc4a2c;
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 > section {
line-height: 1.3;
font-weight: inherit; }
line-height: 1.3;
font-weight: inherit;
}
/*********************************************
* HEADERS
......@@ -45,265 +68,358 @@ body {
.reveal h4,
.reveal h5,
.reveal h6 {
margin: 0 0 20px 0;
color: #ffc600;
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-weight: 600;
line-height: 1.2;
letter-spacing: normal;
text-shadow: none;
word-wrap: break-word; }
margin: 0 0 20px 0;
color: #ffc600;
font-family: "Source Sans Pro", Helvetica, sans-serif;
font-weight: 600;
line-height: 1.2;
letter-spacing: normal;
text-shadow: none;
word-wrap: break-word;
}
.reveal h1 {
font-size: 2.5em; }
font-size: 2.5em;
}
.reveal h2 {
font-size: 1.6em; }
font-size: 1.6em;
}
.reveal h3 {
font-size: 1.3em; }
font-size: 1.3em;
}
.reveal h4 {
font-size: 1em; }
font-size: 1em;
}
.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
*********************************************/
.reveal p {
margin: 20px 0;
line-height: 1.3; }
margin: 20px 0;
line-height: 1.3;
}
/* Ensure certain elements are never larger than the slide itself */
.reveal img,
.reveal video,
.reveal iframe {
max-width: 95%;
max-height: 95%; }
max-width: 95%;
max-height: 95%;
}
.reveal strong,
.reveal b {
font-weight: bold;
color: #ffc600; }
font-weight: bold;
color: #ffc600;
}
.reveal em {
font-style: italic; }
font-style: italic;
}
.reveal ol,
.reveal dl,
.reveal ul {
display: inline-block;
text-align: left;
margin: 0 0 0 1em; }
display: inline-block;
text-align: left;
margin: 0 0 0 1em;
}
.reveal ol {
list-style-type: decimal; }
list-style-type: decimal;
}
.reveal ul {
list-style-type: disc; }
list-style-type: disc;
}
.reveal ul ul {
list-style-type: square; }
list-style-type: square;
}
.reveal ul ul ul {
list-style-type: circle; }
list-style-type: circle;
}
.reveal ul ul,
.reveal ul ol,
.reveal ol ol,
.reveal ol ul {
display: block;
margin-left: 40px; }
display: block;
margin-left: 40px;
}
.reveal dt {
font-weight: bold; }
font-weight: bold;
}
.reveal dd {
margin-left: 40px; }
margin-left: 40px;
}
.reveal q,
.reveal blockquote {
quotes: none; }
quotes: none;
}
.reveal blockquote {
display: block;
position: relative;
width: 70%;
margin: 20px auto;
padding: 5px;
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); }
display: block;
position: relative;
width: 70%;
margin: 20px auto;
padding: 5px;
font-style: italic;
background: rgba(255, 255, 255, 0.05);
box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
}
.reveal blockquote p:first-child,
.reveal blockquote p:last-child {
display: inline-block; }
display: inline-block;
}
.reveal q {
font-style: italic; }
font-style: italic;
}
.reveal pre {
display: block;
position: relative;
width: 90%;
min-width: 40em;
margin: 20px auto;
text-align: left;
font-size: 0.55em;
font-family: monospace;
line-height: 1.2em;
word-wrap: break-word;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3); }
display: block;
position: relative;
width: 90%;
min-width: 40em;
margin: 20px auto;
text-align: left;
font-size: 0.55em;
font-family: monospace;
line-height: 1.2em;
word-wrap: break-word;
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
}
.reveal code {
font-family: monospace; }
font-family: monospace;
}
.reveal pre code {
display: block;
padding: 5px;
overflow: auto;
max-height: 400px;
word-wrap: normal; }
display: block;
padding: 5px;
overflow: auto;
max-height: 400px;
word-wrap: normal;
}
.reveal table {
margin: auto;
border-collapse: collapse;
border-spacing: 0; }
margin: auto;
border-collapse: collapse;
border-spacing: 0;
}
.reveal table th {
font-weight: bold; }
font-weight: bold;
}
.reveal table th,
.reveal table td {
text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid; }
text-align: left;
padding: 0.2em 0.5em 0.2em 0.5em;
border-bottom: 1px solid;
}
.reveal table th[align="center"],
.reveal table td[align="center"] {
text-align: center; }
text-align: center;
}
.reveal table th[align="right"],
.reveal table td[align="right"] {
text-align: right; }
text-align: right;
}
.reveal table tr:last-child td {
border-bottom: none; }
border-bottom: none;
}
.reveal sup {
vertical-align: super; }
vertical-align: super;
}
.reveal sub {
vertical-align: sub; }
vertical-align: sub;
}
.reveal small {
display: inline-block;
font-size: 0.6em;
line-height: 1.2em;
vertical-align: top; }
display: inline-block;
font-size: 0.6em;
line-height: 1.2em;
vertical-align: top;
}
.reveal small * {
vertical-align: top; }
vertical-align: top;
}
/*********************************************
* LINKS
*********************************************/
.reveal a {
color: #ffc600;
text-decoration: none;
-webkit-transition: color 0.15s ease;
-moz-transition: color 0.15s ease;
transition: color 0.15s ease; }
color: #ffc600;
text-decoration: none;
-webkit-transition: color 0.15s ease;
-moz-transition: color 0.15s ease;
transition: color 0.15s ease;
}
.reveal a:hover {
color: #aa8833;
text-shadow: none;
border: none; }
color: #aa8833;
text-shadow: none;
border: none;
}
.reveal .roll span:after {
color: #fff;
background: #068de9; }
color: #fff;
background: #068de9;
}