├── LICENSE.md ├── README.md ├── homework ├── module-exercices │ ├── 1-add-an-accessible-date-picker.html │ └── README.md ├── week-1-project │ ├── 0-blank-page-setup │ │ ├── index.html │ │ └── style.css │ ├── 1-head-and-header │ │ ├── index.html │ │ └── style.css │ ├── 2-rules-of-the-game │ │ ├── index.html │ │ └── style.css │ ├── 3-unplayable-board │ │ ├── index.html │ │ └── style.css │ ├── 4-playable-board │ │ ├── index.html │ │ └── style.css │ ├── 5-up-to-you │ │ ├── index.html │ │ └── style.css │ ├── README.md │ └── index.html ├── week-2-project │ ├── 0-blank-page-setup │ │ ├── index.html │ │ └── style.css │ ├── README.md │ └── index.html └── week-3-project │ ├── README.md │ └── index.html ├── slides ├── README.md ├── assets │ └── img │ │ └── module-1--unicorn.png ├── lib │ ├── css │ │ ├── print │ │ │ ├── paper.css │ │ │ └── pdf.css │ │ ├── reset.css │ │ ├── reveal.css │ │ ├── reveal.scss │ │ └── theme │ │ │ ├── README.md │ │ │ ├── beige.css │ │ │ ├── black.css │ │ │ ├── blood.css │ │ │ ├── league.css │ │ │ ├── moon.css │ │ │ ├── night.css │ │ │ ├── serif.css │ │ │ ├── simple.css │ │ │ ├── sky.css │ │ │ ├── solarized.css │ │ │ ├── source │ │ │ ├── beige.scss │ │ │ ├── black.scss │ │ │ ├── blood.scss │ │ │ ├── league.scss │ │ │ ├── moon.scss │ │ │ ├── night.scss │ │ │ ├── serif.scss │ │ │ ├── simple.scss │ │ │ ├── sky.scss │ │ │ ├── solarized.scss │ │ │ └── white.scss │ │ │ ├── template │ │ │ ├── mixins.scss │ │ │ ├── settings.scss │ │ │ └── theme.scss │ │ │ └── white.css │ ├── initReveal.js │ └── js │ │ ├── markdown.js │ │ ├── marked.js │ │ └── reveal.js ├── week-1.html ├── week-2.html └── week-3.html └── study-code ├── README.md └── example-project-feedback-form ├── 0-blank-page-setup ├── index.html └── style.css ├── 1-head-and-header ├── index.html └── style.css ├── 2-empty-form ├── index.html └── style.css ├── 3-personal-info ├── index.html └── style.css ├── 4-multiple-choice-feedback ├── index.html └── style.css ├── 5-open-ended-feedback ├── index.html └── style.css ├── README.md └── index.html /LICENSE.md: -------------------------------------------------------------------------------- 1 | [![License: CC BY 4.0](https://licensebuttons.net/l/by/4.0/80x15.png)](https://creativecommons.org/licenses/by/4.0/) : 2019 -> Present 2 | 3 | Licensed by Hack Your Future Belgium: @HackYourFutureBelgium, https://hackyourfuture.be, contact@hackyourfuture.be 4 | 5 | ___ 6 | ___ 7 | ### 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

HackYourFuture Belgium

2 | 3 |
4 | 5 | 6 | 7 |
8 | 9 | # Getting started 10 | 11 | > Welcome to your first training at HYF. Please read completely this file and make sure you understand everything. 12 | Happy learning 😁 13 | 14 | This repo contains all the materials for the module 1: `HTML, CSS`. The homework, exercises, and study code are in the main repository for you to fork and complete, all the lesson plans and weekly information are [in the wiki](https://github.com/be-hacking-hyf/HTML-CSS-GitHub/wiki) and the slides from class are [right here](https://be-hacking-hyf.github.io/HTML-CSS-GitHub/slides/). 15 | 16 | While this module is called "HTML & CSS", it's important to remember that you also need to learn how to Fork & Pull Request on GitHub, to Push and Pull your work between GitHub and your computer, and to develop locally on your computer using a browser+DevTools and a specialized text editor. 17 | 18 | In the first weeks it's very likely that you'll spend as much time figuring out how to publish and turn in your projects as you will spend building them. _This is totally normal and OK!_ Working like a developer takes time and practice to get good at, and at this point in your learning it's even more important than mastering HTML & CSS! 19 | 20 | So on days when you find yourself spending a couple hours trying to push your homework or send a PR for your coach to look over your homework, remind yourself that it's all time well spent. Mastering these skills _now_ will free your time _later_ to focus on studying the more interesting and challenging skills in this course. 21 | 22 | ### Your mission 23 | 24 | - Prepare each class by reading the [wiki](https://github.com/be-hacking-hyf/HTML-CSS-GitHub/wiki) preparation work called [Prep Work (for week 1)](https://github.com/be-hacking-hyf/HTML-CSS-GitHub/wiki/Prep-Work-wk-1) 25 | - During class, be focus, ask questions as much as you can, help your teammates when they are struggling. 26 | 27 | --- 28 | 29 | ## It's not finished... yet! 30 | 31 | If only four hours a week were enough to learn web development! But sadly it's not :( Along side coming to class, you will have homework assignments. 32 | 33 | There are three types of homework: 34 | * [__Weekly Projects__](#weekly-projects): The goal of these projects is for you to practice integrating all of your skills into one live web site. These assignments are due each Thursday. 35 | * [__Module Exercises__](#module-exercises): The module exercises are a chance for you to focus in on some of the trickier or more important new skills without having to think about an entire project. These exercises are due at the end of the module with the third week's project. 36 | * [__Suggested Study__](#suggested-study): The goal of Suggested Studies is to help you review old skills and prepare for new ones by providing you with small exercises that don't always result in a finished product but are always worth your time. If you ever find yourself with some time to study but not enough to dig into the Projects or Exercises, Suggested Studies are there for you! We won't be checking that you do these exercises, but you'll feel it later on if you don't :) 37 | 38 | ### Weekly Projects 39 | 40 | Each week you will be required to complete a small project that integrates everything you've learned so far (HTML, CSS, GitHub, working locally, incremental development). The goal of these projects is to practice planning and building projects in a methodical and structured way, and to write the cleanest and most correct code possible. The goal of these projects _is not_ to build the fanciest most beautiful website, to use all the latest CSS tricks, or to use cool libraries and API's. 41 | 42 | Here's a short list of do's and don't's that can help you stay on track: 43 | 44 | __DO__ 45 | * ... use only plain HTML & CSS (no CSS frameworks like Bootstrap or Material!) 46 | * ... completely finish one step of the project before moving on to the next 47 | * ... be very careful about your CSS classes, selectors and id's 48 | * ... Properly indent your code 49 | * ... find the simplest solution to each step of the project 50 | * ... start each step of the project by copy-pasting the last step 51 | 52 | __Don't__ 53 | * ... think that your site can be pretty enough to make up for messy code 54 | * ... use any CSS libraries or frameworks 55 | * ... make the any steps of your project do less _or more_ than is assigned 56 | * ... move on to the next step before the previous one is finished 57 | * ... include any JavaScript 58 | 59 | Take a look at the completed example to study to get an idea what's expected of you: 60 | * [the live example](https://be-hacking-hyf.github.io/HTML-CSS-GitHub/study-code/example-project-feedback-form/) 61 | * [it's source code](https://github.com/be-hacking-hyf/HTML-CSS-GitHub/tree/master/study-code/example-project-feedback-form). 62 | 63 | You can also preview the assignments here: 64 | 1. [human-intelligence TicTacToe board](./homework/week-1-project) 65 | 1. [responsive Web Designer site](./homework/week-3-project) 66 | 1. [replicate DuckDuckGo](./homework/week-3-project) 67 | 68 | ### Module Exercises 69 | 70 | Along side Sunday classes and weekly projects which focus on integrating your skills, you'll be expected to complete a set of exercises to focus in and practice certain skills in isolation. While the project teaches how to integrate your skills, the exercises will focus on strengthening individual skills. This module's exercises can be found [in the exercise folder](./homework/module-exercises). 71 | 72 | Exercises are all due at the end of the Module, we won't be checking your exercises each week (unless you have some questions of course!). We also won't accept any homework for JavaScript 1 until you have submitted your exercises from HTML & CSS. 73 | 74 | So be organized about this! It's a lot easier to finish these exercises if you study them an hour a day than if you cram it all into the last weekend, and you'll learn a whole lot more along the way. 75 | 76 | 77 | ### Suggested Study 78 | 79 | You can find our study suggestions in each week's ```Homework``` page from the wiki. 80 | 81 | 82 | --- 83 | --- 84 | ### Hack Your Future: Belgium 85 | -------------------------------------------------------------------------------- /homework/module-exercices/1-add-an-accessible-date-picker.html: -------------------------------------------------------------------------------- 1 | 5 | 6 | 7 |
8 |

Tournaments

9 |
10 |
11 |
12 |

Mortal Kombat Tournament Survey

13 |
14 |

Tell us the best date for the competition

15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /homework/module-exercices/README.md: -------------------------------------------------------------------------------- 1 | ## HTML & CSS Exercises 2 | 3 | This folder is for your Module 1 exercises, which are all due at the end of the module. We won't be checking your exercises every week but that doesn't mean you shouldn't be working on them every week! It'll be a lot more work to finish all of this in 2 days than 3 weeks. 4 | 5 | But what's this all about with exercises? Isn't a weekly project enough? Not it's not! The weekly project will help you learn to plan and build whole projects, but that's not the same thing as practicing all the little skills it takes to get there. 6 | 7 | For this module, we expect you to complete the [Applied Accessiblity](https://learn.freecodecamp.org/responsive-web-design/applied-accessibility) lessons from FreeCodeCamp then to copy your solutions into this folder. We've completed the first exercise so you can see how we expect you to submit solutions. 8 | 9 | You can read more about Applied Accessibility [right here](https://guide.freecodecamp.org/accessibility). 10 | 11 | --- 12 | 13 | ### Live Demos 14 | 15 | Along with completing each example, we'd like you to put each one as a live web page on GitHub pages. This will help us grade it, and help you see how much you've built so far! 16 | 17 | We've set up the first completed exercise as an example for you to see how this works. (ps. this will only run if you turn on GitHub pages for your repo!) 18 | 19 | [__See my Live Demos__](https://your user name.github.io/HTML-CSS-GitHub/homework/module-exercises): 20 | 1. [Add an Accessible Date Picker](./1-add-an-accessible-date-picker.html) 21 | 1. [Add a Text Alternative to Images for Visually Impaired Accessibility](fill this in!) 22 | 1. 23 | 24 | 25 | 26 | --- 27 | --- 28 | ### Hack Your Future: Belgium 29 | -------------------------------------------------------------------------------- /homework/week-1-project/0-blank-page-setup/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /homework/week-1-project/0-blank-page-setup/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/be-hacking-hyf/HTML-CSS-GitHub/45af52a26423602ec162decbeaa73b9179243005/homework/week-1-project/0-blank-page-setup/style.css -------------------------------------------------------------------------------- /homework/week-1-project/1-head-and-header/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/be-hacking-hyf/HTML-CSS-GitHub/45af52a26423602ec162decbeaa73b9179243005/homework/week-1-project/1-head-and-header/index.html -------------------------------------------------------------------------------- /homework/week-1-project/1-head-and-header/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/be-hacking-hyf/HTML-CSS-GitHub/45af52a26423602ec162decbeaa73b9179243005/homework/week-1-project/1-head-and-header/style.css -------------------------------------------------------------------------------- /homework/week-1-project/2-rules-of-the-game/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/be-hacking-hyf/HTML-CSS-GitHub/45af52a26423602ec162decbeaa73b9179243005/homework/week-1-project/2-rules-of-the-game/index.html -------------------------------------------------------------------------------- /homework/week-1-project/2-rules-of-the-game/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/be-hacking-hyf/HTML-CSS-GitHub/45af52a26423602ec162decbeaa73b9179243005/homework/week-1-project/2-rules-of-the-game/style.css -------------------------------------------------------------------------------- /homework/week-1-project/3-unplayable-board/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/be-hacking-hyf/HTML-CSS-GitHub/45af52a26423602ec162decbeaa73b9179243005/homework/week-1-project/3-unplayable-board/index.html -------------------------------------------------------------------------------- /homework/week-1-project/3-unplayable-board/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/be-hacking-hyf/HTML-CSS-GitHub/45af52a26423602ec162decbeaa73b9179243005/homework/week-1-project/3-unplayable-board/style.css -------------------------------------------------------------------------------- /homework/week-1-project/4-playable-board/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/be-hacking-hyf/HTML-CSS-GitHub/45af52a26423602ec162decbeaa73b9179243005/homework/week-1-project/4-playable-board/index.html -------------------------------------------------------------------------------- /homework/week-1-project/4-playable-board/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/be-hacking-hyf/HTML-CSS-GitHub/45af52a26423602ec162decbeaa73b9179243005/homework/week-1-project/4-playable-board/style.css -------------------------------------------------------------------------------- /homework/week-1-project/5-up-to-you/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/be-hacking-hyf/HTML-CSS-GitHub/45af52a26423602ec162decbeaa73b9179243005/homework/week-1-project/5-up-to-you/index.html -------------------------------------------------------------------------------- /homework/week-1-project/5-up-to-you/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/be-hacking-hyf/HTML-CSS-GitHub/45af52a26423602ec162decbeaa73b9179243005/homework/week-1-project/5-up-to-you/style.css -------------------------------------------------------------------------------- /homework/week-1-project/README.md: -------------------------------------------------------------------------------- 1 | ## Week 1 Project 2 | 3 | To complete this week's project (a simple, interactive tic-tac-toe board) you'll need to code each user story described [in this user story table](https://be-hacking-hyf.github.io/HTML-CSS-GitHub/homework/week-1-project/). You will start by forking [this repository](https://github.com/be-hacking-hyf/HTML-CSS-GitHub), cloning it to your computer, and writing the HTML and CSS for each folder. For more information on what is expected from the project you can read about weekly projects [right here](https://github.com/be-hacking-hyf/html-css-github/#weekly-projects). 4 | 5 | But wait! It's not enough to have a tic-tac-toe board that workss It's even more important that you understand how this tic-tac-toe board can be broken into small steps and developed incrementally. To show us that you are mastering this skill you will be required to save each step of your progress in a different folder, as a fully-working (but incomplete) web site. Each step will use the previous one as a starting point. 6 | 7 | Take a look at the completed example to get an idea of what a finished project looks like, notice that each folder has code in it and each row in the table links to a working web page: 8 | * [it's source code](https://github.com/be-hacking-hyf/HTML-CSS-GitHub/tree/master/study-code/example-project-feedback-form) 9 | * [the live example](https://be-hacking-hyf.github.io/HTML-CSS-GitHub/study-code/example-project-feedback-form/) 10 | 11 | 12 | When you've written your code for each folder, tested the table and each page on your computer, have pushed your work to your github account, _and_ turned on GitHub pages, you're ready to turn in your homework! You can find instructions for homework submission [right here](https://github.com/be-hacking-hyf/html-css-github/wiki/Homework-Submission). 13 | 14 | --- 15 | --- 16 | ### Hack Your Future: Belgium 17 | -------------------------------------------------------------------------------- /homework/week-1-project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | HTML/CSS Week 21Project Table 9 | 10 | 11 | 12 | 13 |

Human-Intelligence TicTacToe

14 |

15 | Build a non-interactive (but responsive!) TicTacToe board. The board should get bigger and smaller as the screen 16 | changes sizes, and users should be able to mark each box with an X or an O 17 |

18 |

19 | 20 | Be sure to use HTML5 21 | Semantic Elements whenever possible! 22 | 23 |

24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 |
a user can ...HTMLCSS
... open a website empty HTML template, requiring CSS fileempty CSS file
... know what the site is abouttitle, main div, header, descriptionstyle for body, main and title
... read the rules for TicTacToea section describing the rules of TicTactoestyle the rules so they are not visible until a user wants to see them
... see a boarda 3x3 TicTacToe board (there's more than one way to do this!)style the board!
... mark the squares of the boardup to you!up to you!
... (what can the user do?)up to you!up to you!
66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /homework/week-2-project/0-blank-page-setup/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /homework/week-2-project/0-blank-page-setup/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/be-hacking-hyf/HTML-CSS-GitHub/45af52a26423602ec162decbeaa73b9179243005/homework/week-2-project/0-blank-page-setup/style.css -------------------------------------------------------------------------------- /homework/week-2-project/README.md: -------------------------------------------------------------------------------- 1 | # Week 2 Project: 2 | 3 | 4 | This week's project is to build a website with correct repsonsive layout _in small steps_! Your web page will be larger and more complex than the last project, but you will have [this video tutorial](https://www.youtube.com/watch?v=Wm6CUkswsNw) for support. Mr. Traversy is one of the best coaches on YouTube so you're in good hands. 5 | 6 | But wait. A working website is not a finished project! 7 | 8 | The true focus of this week's project is to practice breaking websites down into small steps. If you are still not fully confident in your HTML/CSS skills, that's fine! Feel free to use the exact code you wrote while following the tutorial. You will learn an enormous amout about HTML & CSS by breaking your finished code into smaller (working!) projects. 9 | 10 | If you want to push your HTML & CSS to the next level, go for it! As long as your project is broken into smaller pieces, feel free to elaborate on each step or even to add new steps at the end. 11 | 12 | Feeling very ambitious? Start a whole new project from scratch! 13 | 14 | 15 | --- 16 | 17 | ## What will we be checking for? 18 | 19 | We still expect your Week 2 project to be broken down into working steps with a table in the ```index.html``` to describe your user stories, and for each step to be saved separately in it's own folder. Only this time we don't tell you what the steps are! 20 | 21 | Part of your assignment is to decide when one user story begins and the next ends. (We won't even tell you how many user stories there are ;) You'll get a chance in class next Sunday to discuss the different ways this project an be broken down into user stories. 22 | 23 | > No matter how wonderful and responsive your website is, it's still not complete unless it's broken into steps. 24 | 25 | --- 26 | --- 27 | ### Hack Your Future: Belgium 28 | -------------------------------------------------------------------------------- /homework/week-2-project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | HTML/CSS Week 2 Project Table 9 | 10 | 11 | 12 |

Traversy Media: Build An HTML5 Website With A Responsive Layout

13 |

14 | 15 |

16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 |
a user can ...index.htmlabout.htmlservices.htmlCSS
... open a website empty HTML template, requiring CSS file, title tag(doesn't exist yet!)(doesn't exist yet!)empty CSS file
38 | 39 | 40 | 41 | -------------------------------------------------------------------------------- /homework/week-3-project/README.md: -------------------------------------------------------------------------------- 1 | ## Replicate [DuckDuckGo](https://duckduckgo.com/) 2 | 3 | This week's project is to build your own copy of the DuckDuckGo home page (See the assignment table [live on GitHub Pages](https://be-hacking-hyf.github.io/HTML-CSS-GitHub/homework/week-3-project/)). We don't expect it to be identical if we open the inspector, but visually it should be as close as possible. This week's project will be a good chance to practice [Inspecting the DOM](http://hackyourfuture.be/inspecting-the-dom/), Here's some helpful articles: 4 | * [Finding which colors a website uses](https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors) 5 | * [Which fonts a website uses](https://wpshout.com/quick-guides/how-to-see-what-fonts-a-website-is-using/) 6 | * [Which images a website uses](https://www.lifewire.com/copy-image-web-address-url-1174175) 7 | 8 | 9 | As in the last weeks, you should also practice _incremental development_. Turning your homework in using one folder per step is enough, but if you're looking for a challenge ... [Build With Branches](https://github.com/HackYourFutureBelgium/built-with-branches)! 10 | 11 | To push yourself to the next level, give a shot at using branches and clearly labeled commits to organize your development. In the last weeks you had one folder per step. Using git you'll have one branch per step, when the step is complete you will merge your changes to ```master``` and start a new branch for the new step. 12 | 13 | To see what a finished project would look like, clone [Built with Branches](https://github.com/HackYourFutureBelgium/built-with-branches) and study it in GitKraken & VSC. Try checking out a commit, looking in your editor, and opening ```index.html``` in the browser. 14 | 15 | For more info on how to study Built with Branches you can revise the [week 3 lesson plan](https://github.com/be-hacking-hyf/HTML-CSS-GitHub/wiki/Lesson-Plan-wk-3#developing-with-branches). For more info on Git, GitHub and using branches checkout the links in [Helpful Resources](https://github.com/be-hacking-hyf/HTML-CSS-GitHub/wiki/Helpful-Resources) 16 | 17 | -------------------------------------------------------------------------------- /homework/week-3-project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | HTML/CSS Week 3 Project Table 9 | 10 | 11 | 12 |

DuckDuckGo

13 |

14 | Replicate DuckDuckGo using just HTML & CSS. Users should be 15 | able to type into the search bar, but nothing needs to happen when they hit "enter".

16 |

17 | 18 |

Be sure to use the same colors, the same images, and the same 23 | font as DuckDuckGo. 24 |

25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 |
a user can ...HTMLCSS
... open a website empty HTML template, requiring CSS file, title tagempty CSS file
... type into the search bara section structured like the top of DuckDuckGosome styling to make it visually match DuckDuckGo
... know DuckDuckGo doesn't store personal dataa section based off the second section of DuckDuckGosome styling to make it visually match DuckDuckGo
... be assured they won't be targeted for adsa section based off the third section of DuckDuckGosome styling to make it visually match DuckDuckGo
... be assured they won't be trackeda section based off the fourth section of DuckDuckGosome styling to make it visually match DuckDuckGo
... read the call to actiona section based off the fifth section of DuckDuckGosome styling to make it visually match DuckDuckGo
68 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /slides/README.md: -------------------------------------------------------------------------------- 1 | ## Slide Shows for HTML, CSS & GitHub 2 | 3 | * [week 1](./week-1.html) 4 | * [week 2](./week-2.html) 5 | * [week 3](./week-3.html) 6 | 7 | --- 8 | --- 9 | ### Hack Your Future: Belgium 10 | -------------------------------------------------------------------------------- /slides/assets/img/module-1--unicorn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/be-hacking-hyf/HTML-CSS-GitHub/45af52a26423602ec162decbeaa73b9179243005/slides/assets/img/module-1--unicorn.png -------------------------------------------------------------------------------- /slides/lib/css/print/paper.css: -------------------------------------------------------------------------------- 1 | /* Default Print Stylesheet Template 2 | by Rob Glazebrook of CSSnewbie.com 3 | Last Updated: June 4, 2008 4 | 5 | Feel free (nay, compelled) to edit, append, and 6 | manipulate this file as you see fit. */ 7 | 8 | 9 | @media print { 10 | 11 | /* SECTION 1: Set default width, margin, float, and 12 | background. This prevents elements from extending 13 | beyond the edge of the printed page, and prevents 14 | unnecessary background images from printing */ 15 | html { 16 | background: #fff; 17 | width: auto; 18 | height: auto; 19 | overflow: visible; 20 | } 21 | body { 22 | background: #fff; 23 | font-size: 20pt; 24 | width: auto; 25 | height: auto; 26 | border: 0; 27 | margin: 0 5%; 28 | padding: 0; 29 | overflow: visible; 30 | float: none !important; 31 | } 32 | 33 | /* SECTION 2: Remove any elements not needed in print. 34 | This would include navigation, ads, sidebars, etc. */ 35 | .nestedarrow, 36 | .controls, 37 | .fork-reveal, 38 | .share-reveal, 39 | .state-background, 40 | .reveal .progress, 41 | .reveal .backgrounds, 42 | .reveal .slide-number { 43 | display: none !important; 44 | } 45 | 46 | /* SECTION 3: Set body font face, size, and color. 47 | Consider using a serif font for readability. */ 48 | body, p, td, li, div { 49 | font-size: 20pt!important; 50 | font-family: Georgia, "Times New Roman", Times, serif !important; 51 | color: #000; 52 | } 53 | 54 | /* SECTION 4: Set heading font face, sizes, and color. 55 | Differentiate your headings from your body text. 56 | Perhaps use a large sans-serif for distinction. */ 57 | h1,h2,h3,h4,h5,h6 { 58 | color: #000!important; 59 | height: auto; 60 | line-height: normal; 61 | font-family: Georgia, "Times New Roman", Times, serif !important; 62 | text-shadow: 0 0 0 #000 !important; 63 | text-align: left; 64 | letter-spacing: normal; 65 | } 66 | /* Need to reduce the size of the fonts for printing */ 67 | h1 { font-size: 28pt !important; } 68 | h2 { font-size: 24pt !important; } 69 | h3 { font-size: 22pt !important; } 70 | h4 { font-size: 22pt !important; font-variant: small-caps; } 71 | h5 { font-size: 21pt !important; } 72 | h6 { font-size: 20pt !important; font-style: italic; } 73 | 74 | /* SECTION 5: Make hyperlinks more usable. 75 | Ensure links are underlined, and consider appending 76 | the URL to the end of the link for usability. */ 77 | a:link, 78 | a:visited { 79 | color: #000 !important; 80 | font-weight: bold; 81 | text-decoration: underline; 82 | } 83 | /* 84 | .reveal a:link:after, 85 | .reveal a:visited:after { 86 | content: " (" attr(href) ") "; 87 | color: #222 !important; 88 | font-size: 90%; 89 | } 90 | */ 91 | 92 | 93 | /* SECTION 6: more reveal.js specific additions by @skypanther */ 94 | ul, ol, div, p { 95 | visibility: visible; 96 | position: static; 97 | width: auto; 98 | height: auto; 99 | display: block; 100 | overflow: visible; 101 | margin: 0; 102 | text-align: left !important; 103 | } 104 | .reveal pre, 105 | .reveal table { 106 | margin-left: 0; 107 | margin-right: 0; 108 | } 109 | .reveal pre code { 110 | padding: 20px; 111 | border: 1px solid #ddd; 112 | } 113 | .reveal blockquote { 114 | margin: 20px 0; 115 | } 116 | .reveal .slides { 117 | position: static !important; 118 | width: auto !important; 119 | height: auto !important; 120 | 121 | left: 0 !important; 122 | top: 0 !important; 123 | margin-left: 0 !important; 124 | margin-top: 0 !important; 125 | padding: 0 !important; 126 | zoom: 1 !important; 127 | 128 | overflow: visible !important; 129 | display: block !important; 130 | 131 | text-align: left !important; 132 | -webkit-perspective: none; 133 | -moz-perspective: none; 134 | -ms-perspective: none; 135 | perspective: none; 136 | 137 | -webkit-perspective-origin: 50% 50%; 138 | -moz-perspective-origin: 50% 50%; 139 | -ms-perspective-origin: 50% 50%; 140 | perspective-origin: 50% 50%; 141 | } 142 | .reveal .slides section { 143 | visibility: visible !important; 144 | position: static !important; 145 | width: auto !important; 146 | height: auto !important; 147 | display: block !important; 148 | overflow: visible !important; 149 | 150 | left: 0 !important; 151 | top: 0 !important; 152 | margin-left: 0 !important; 153 | margin-top: 0 !important; 154 | padding: 60px 20px !important; 155 | z-index: auto !important; 156 | 157 | opacity: 1 !important; 158 | 159 | page-break-after: always !important; 160 | 161 | -webkit-transform-style: flat !important; 162 | -moz-transform-style: flat !important; 163 | -ms-transform-style: flat !important; 164 | transform-style: flat !important; 165 | 166 | -webkit-transform: none !important; 167 | -moz-transform: none !important; 168 | -ms-transform: none !important; 169 | transform: none !important; 170 | 171 | -webkit-transition: none !important; 172 | -moz-transition: none !important; 173 | -ms-transition: none !important; 174 | transition: none !important; 175 | } 176 | .reveal .slides section.stack { 177 | padding: 0 !important; 178 | } 179 | .reveal section:last-of-type { 180 | page-break-after: avoid !important; 181 | } 182 | .reveal section .fragment { 183 | opacity: 1 !important; 184 | visibility: visible !important; 185 | 186 | -webkit-transform: none !important; 187 | -moz-transform: none !important; 188 | -ms-transform: none !important; 189 | transform: none !important; 190 | } 191 | .reveal section img { 192 | display: block; 193 | margin: 15px 0px; 194 | background: rgba(255,255,255,1); 195 | border: 1px solid #666; 196 | box-shadow: none; 197 | } 198 | 199 | .reveal section small { 200 | font-size: 0.8em; 201 | } 202 | 203 | } 204 | -------------------------------------------------------------------------------- /slides/lib/css/print/pdf.css: -------------------------------------------------------------------------------- 1 | /** 2 | * This stylesheet is used to print reveal.js 3 | * presentations to PDF. 4 | * 5 | * https://github.com/hakimel/reveal.js#pdf-export 6 | */ 7 | 8 | * { 9 | -webkit-print-color-adjust: exact; 10 | } 11 | 12 | body { 13 | margin: 0 auto !important; 14 | border: 0; 15 | padding: 0; 16 | float: none !important; 17 | overflow: visible; 18 | } 19 | 20 | html { 21 | width: 100%; 22 | height: 100%; 23 | overflow: visible; 24 | } 25 | 26 | /* Remove any elements not needed in print. */ 27 | .nestedarrow, 28 | .reveal .controls, 29 | .reveal .progress, 30 | .reveal .playback, 31 | .reveal.overview, 32 | .fork-reveal, 33 | .share-reveal, 34 | .state-background { 35 | display: none !important; 36 | } 37 | 38 | h1, h2, h3, h4, h5, h6 { 39 | text-shadow: 0 0 0 #000 !important; 40 | } 41 | 42 | .reveal pre code { 43 | overflow: hidden !important; 44 | font-family: Courier, 'Courier New', monospace !important; 45 | } 46 | 47 | ul, ol, div, p { 48 | visibility: visible; 49 | position: static; 50 | width: auto; 51 | height: auto; 52 | display: block; 53 | overflow: visible; 54 | margin: auto; 55 | } 56 | .reveal { 57 | width: auto !important; 58 | height: auto !important; 59 | overflow: hidden !important; 60 | } 61 | .reveal .slides { 62 | position: static; 63 | width: 100% !important; 64 | height: auto !important; 65 | zoom: 1 !important; 66 | 67 | left: auto; 68 | top: auto; 69 | margin: 0 !important; 70 | padding: 0 !important; 71 | 72 | overflow: visible; 73 | display: block; 74 | 75 | perspective: none; 76 | perspective-origin: 50% 50%; 77 | } 78 | 79 | .reveal .slides .pdf-page { 80 | position: relative; 81 | overflow: hidden; 82 | z-index: 1; 83 | 84 | page-break-after: always; 85 | } 86 | 87 | .reveal .slides section { 88 | visibility: visible !important; 89 | display: block !important; 90 | position: absolute !important; 91 | 92 | margin: 0 !important; 93 | padding: 0 !important; 94 | box-sizing: border-box !important; 95 | min-height: 1px; 96 | 97 | opacity: 1 !important; 98 | 99 | transform-style: flat !important; 100 | transform: none !important; 101 | } 102 | 103 | .reveal section.stack { 104 | position: relative !important; 105 | margin: 0 !important; 106 | padding: 0 !important; 107 | page-break-after: avoid !important; 108 | height: auto !important; 109 | min-height: auto !important; 110 | } 111 | 112 | .reveal img { 113 | box-shadow: none; 114 | } 115 | 116 | .reveal .roll { 117 | overflow: visible; 118 | line-height: 1em; 119 | } 120 | 121 | /* Slide backgrounds are placed inside of their slide when exporting to PDF */ 122 | .reveal .slide-background { 123 | display: block !important; 124 | position: absolute; 125 | top: 0; 126 | left: 0; 127 | width: 100%; 128 | height: 100%; 129 | z-index: auto !important; 130 | } 131 | 132 | /* Display slide speaker notes when 'showNotes' is enabled */ 133 | .reveal.show-notes { 134 | max-width: none; 135 | max-height: none; 136 | } 137 | .reveal .speaker-notes-pdf { 138 | display: block; 139 | width: 100%; 140 | height: auto; 141 | max-height: none; 142 | top: auto; 143 | right: auto; 144 | bottom: auto; 145 | left: auto; 146 | z-index: 100; 147 | } 148 | 149 | /* Layout option which makes notes appear on a separate page */ 150 | .reveal .speaker-notes-pdf[data-layout="separate-page"] { 151 | position: relative; 152 | color: inherit; 153 | background-color: transparent; 154 | padding: 20px; 155 | page-break-after: always; 156 | border: 0; 157 | } 158 | 159 | /* Display slide numbers when 'slideNumber' is enabled */ 160 | .reveal .slide-number-pdf { 161 | display: block; 162 | position: absolute; 163 | font-size: 14px; 164 | } 165 | -------------------------------------------------------------------------------- /slides/lib/css/reset.css: -------------------------------------------------------------------------------- 1 | /* http://meyerweb.com/eric/tools/css/reset/ 2 | v4.0 | 20180602 3 | License: none (public domain) 4 | */ 5 | 6 | html, body, div, span, applet, object, iframe, 7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, 8 | a, abbr, acronym, address, big, cite, code, 9 | del, dfn, em, img, ins, kbd, q, s, samp, 10 | small, strike, strong, sub, sup, tt, var, 11 | b, u, i, center, 12 | dl, dt, dd, ol, ul, li, 13 | fieldset, form, label, legend, 14 | table, caption, tbody, tfoot, thead, tr, th, td, 15 | article, aside, canvas, details, embed, 16 | figure, figcaption, footer, header, hgroup, 17 | main, menu, nav, output, ruby, section, summary, 18 | time, mark, audio, video { 19 | margin: 0; 20 | padding: 0; 21 | border: 0; 22 | font-size: 100%; 23 | font: inherit; 24 | vertical-align: baseline; 25 | } 26 | /* HTML5 display-role reset for older browsers */ 27 | article, aside, details, figcaption, figure, 28 | footer, header, hgroup, main, menu, nav, section { 29 | display: block; 30 | } -------------------------------------------------------------------------------- /slides/lib/css/theme/README.md: -------------------------------------------------------------------------------- 1 | ## Dependencies 2 | 3 | Themes are written using Sass to keep things modular and reduce the need for repeated selectors across files. Make sure that you have the reveal.js development environment including the Grunt dependencies installed before proceeding: https://github.com/hakimel/reveal.js#full-setup 4 | 5 | ## Creating a Theme 6 | 7 | To create your own theme, start by duplicating a ```.scss``` file in [/css/theme/source](https://github.com/hakimel/reveal.js/blob/master/css/theme/source). It will be automatically compiled by Grunt from Sass to CSS (see the [Gruntfile](https://github.com/hakimel/reveal.js/blob/master/Gruntfile.js)) when you run `npm run build -- css-themes`. 8 | 9 | Each theme file does four things in the following order: 10 | 11 | 1. **Include [/css/theme/template/mixins.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/mixins.scss)** 12 | Shared utility functions. 13 | 14 | 2. **Include [/css/theme/template/settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss)** 15 | Declares a set of custom variables that the template file (step 4) expects. Can be overridden in step 3. 16 | 17 | 3. **Override** 18 | This is where you override the default theme. Either by specifying variables (see [settings.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/settings.scss) for reference) or by adding any selectors and styles you please. 19 | 20 | 4. **Include [/css/theme/template/theme.scss](https://github.com/hakimel/reveal.js/blob/master/css/theme/template/theme.scss)** 21 | The template theme file which will generate final CSS output based on the currently defined variables. 22 | -------------------------------------------------------------------------------- /slides/lib/css/theme/beige.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Beige theme for reveal.js. 3 | * 4 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 5 | */ 6 | @import url(../../lib/font/league-gothic/league-gothic.css); 7 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 8 | /********************************************* 9 | * GLOBAL STYLES 10 | *********************************************/ 11 | body { 12 | background: #f7f2d3; 13 | background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); 14 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3)); 15 | background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); 16 | background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); 17 | background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); 18 | background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%); 19 | background-color: #f7f3de; } 20 | 21 | .reveal { 22 | font-family: "Lato", sans-serif; 23 | font-size: 40px; 24 | font-weight: normal; 25 | color: #333; } 26 | 27 | ::selection { 28 | color: #fff; 29 | background: rgba(79, 64, 28, 0.99); 30 | text-shadow: none; } 31 | 32 | ::-moz-selection { 33 | color: #fff; 34 | background: rgba(79, 64, 28, 0.99); 35 | text-shadow: none; } 36 | 37 | .reveal .slides section, 38 | .reveal .slides section > section { 39 | line-height: 1.3; 40 | font-weight: inherit; } 41 | 42 | /********************************************* 43 | * HEADERS 44 | *********************************************/ 45 | .reveal h1, 46 | .reveal h2, 47 | .reveal h3, 48 | .reveal h4, 49 | .reveal h5, 50 | .reveal h6 { 51 | margin: 0 0 20px 0; 52 | color: #333; 53 | font-family: "League Gothic", Impact, sans-serif; 54 | font-weight: normal; 55 | line-height: 1.2; 56 | letter-spacing: normal; 57 | text-transform: uppercase; 58 | text-shadow: none; 59 | word-wrap: break-word; } 60 | 61 | .reveal h1 { 62 | font-size: 3.77em; } 63 | 64 | .reveal h2 { 65 | font-size: 2.11em; } 66 | 67 | .reveal h3 { 68 | font-size: 1.55em; } 69 | 70 | .reveal h4 { 71 | font-size: 1em; } 72 | 73 | .reveal h1 { 74 | text-shadow: 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, 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); } 75 | 76 | /********************************************* 77 | * OTHER 78 | *********************************************/ 79 | .reveal p { 80 | margin: 20px 0; 81 | line-height: 1.3; } 82 | 83 | /* Ensure certain elements are never larger than the slide itself */ 84 | .reveal img, 85 | .reveal video, 86 | .reveal iframe { 87 | max-width: 95%; 88 | max-height: 95%; } 89 | 90 | .reveal strong, 91 | .reveal b { 92 | font-weight: bold; } 93 | 94 | .reveal em { 95 | font-style: italic; } 96 | 97 | .reveal ol, 98 | .reveal dl, 99 | .reveal ul { 100 | display: inline-block; 101 | text-align: left; 102 | margin: 0 0 0 1em; } 103 | 104 | .reveal ol { 105 | list-style-type: decimal; } 106 | 107 | .reveal ul { 108 | list-style-type: disc; } 109 | 110 | .reveal ul ul { 111 | list-style-type: square; } 112 | 113 | .reveal ul ul ul { 114 | list-style-type: circle; } 115 | 116 | .reveal ul ul, 117 | .reveal ul ol, 118 | .reveal ol ol, 119 | .reveal ol ul { 120 | display: block; 121 | margin-left: 40px; } 122 | 123 | .reveal dt { 124 | font-weight: bold; } 125 | 126 | .reveal dd { 127 | margin-left: 40px; } 128 | 129 | .reveal blockquote { 130 | display: block; 131 | position: relative; 132 | width: 70%; 133 | margin: 20px auto; 134 | padding: 5px; 135 | font-style: italic; 136 | background: rgba(255, 255, 255, 0.05); 137 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } 138 | 139 | .reveal blockquote p:first-child, 140 | .reveal blockquote p:last-child { 141 | display: inline-block; } 142 | 143 | .reveal q { 144 | font-style: italic; } 145 | 146 | .reveal pre { 147 | display: block; 148 | position: relative; 149 | width: 90%; 150 | margin: 20px auto; 151 | text-align: left; 152 | font-size: 0.55em; 153 | font-family: monospace; 154 | line-height: 1.2em; 155 | word-wrap: break-word; 156 | box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } 157 | 158 | .reveal code { 159 | font-family: monospace; 160 | text-transform: none; } 161 | 162 | .reveal pre code { 163 | display: block; 164 | padding: 5px; 165 | overflow: auto; 166 | max-height: 400px; 167 | word-wrap: normal; } 168 | 169 | .reveal table { 170 | margin: auto; 171 | border-collapse: collapse; 172 | border-spacing: 0; } 173 | 174 | .reveal table th { 175 | font-weight: bold; } 176 | 177 | .reveal table th, 178 | .reveal table td { 179 | text-align: left; 180 | padding: 0.2em 0.5em 0.2em 0.5em; 181 | border-bottom: 1px solid; } 182 | 183 | .reveal table th[align="center"], 184 | .reveal table td[align="center"] { 185 | text-align: center; } 186 | 187 | .reveal table th[align="right"], 188 | .reveal table td[align="right"] { 189 | text-align: right; } 190 | 191 | .reveal table tbody tr:last-child th, 192 | .reveal table tbody tr:last-child td { 193 | border-bottom: none; } 194 | 195 | .reveal sup { 196 | vertical-align: super; 197 | font-size: smaller; } 198 | 199 | .reveal sub { 200 | vertical-align: sub; 201 | font-size: smaller; } 202 | 203 | .reveal small { 204 | display: inline-block; 205 | font-size: 0.6em; 206 | line-height: 1.2em; 207 | vertical-align: top; } 208 | 209 | .reveal small * { 210 | vertical-align: top; } 211 | 212 | /********************************************* 213 | * LINKS 214 | *********************************************/ 215 | .reveal a { 216 | color: #8b743d; 217 | text-decoration: none; 218 | -webkit-transition: color .15s ease; 219 | -moz-transition: color .15s ease; 220 | transition: color .15s ease; } 221 | 222 | .reveal a:hover { 223 | color: #c0a86e; 224 | text-shadow: none; 225 | border: none; } 226 | 227 | .reveal .roll span:after { 228 | color: #fff; 229 | background: #564826; } 230 | 231 | /********************************************* 232 | * IMAGES 233 | *********************************************/ 234 | .reveal section img { 235 | margin: 15px 0px; 236 | background: rgba(255, 255, 255, 0.12); 237 | border: 4px solid #333; 238 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } 239 | 240 | .reveal section img.plain { 241 | border: 0; 242 | box-shadow: none; } 243 | 244 | .reveal a img { 245 | -webkit-transition: all .15s linear; 246 | -moz-transition: all .15s linear; 247 | transition: all .15s linear; } 248 | 249 | .reveal a:hover img { 250 | background: rgba(255, 255, 255, 0.2); 251 | border-color: #8b743d; 252 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 253 | 254 | /********************************************* 255 | * NAVIGATION CONTROLS 256 | *********************************************/ 257 | .reveal .controls { 258 | color: #8b743d; } 259 | 260 | /********************************************* 261 | * PROGRESS BAR 262 | *********************************************/ 263 | .reveal .progress { 264 | background: rgba(0, 0, 0, 0.2); 265 | color: #8b743d; } 266 | 267 | .reveal .progress span { 268 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 269 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 270 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 271 | 272 | /********************************************* 273 | * PRINT BACKGROUND 274 | *********************************************/ 275 | @media print { 276 | .backgrounds { 277 | background-color: #f7f3de; } } 278 | -------------------------------------------------------------------------------- /slides/lib/css/theme/black.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Black theme for reveal.js. This is the opposite of the 'white' theme. 3 | * 4 | * By Hakim El Hattab, http://hakim.se 5 | */ 6 | @import url(../../lib/font/source-sans-pro/source-sans-pro.css); 7 | 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 { 8 | color: #222; } 9 | 10 | /********************************************* 11 | * GLOBAL STYLES 12 | *********************************************/ 13 | body { 14 | background: #191919; 15 | background-color: #191919; } 16 | 17 | .reveal { 18 | font-family: "Source Sans Pro", Helvetica, sans-serif; 19 | font-size: 42px; 20 | font-weight: normal; 21 | color: #fff; } 22 | 23 | ::selection { 24 | color: #fff; 25 | background: #bee4fd; 26 | text-shadow: none; } 27 | 28 | ::-moz-selection { 29 | color: #fff; 30 | background: #bee4fd; 31 | text-shadow: none; } 32 | 33 | .reveal .slides section, 34 | .reveal .slides section > section { 35 | line-height: 1.3; 36 | font-weight: inherit; } 37 | 38 | /********************************************* 39 | * HEADERS 40 | *********************************************/ 41 | .reveal h1, 42 | .reveal h2, 43 | .reveal h3, 44 | .reveal h4, 45 | .reveal h5, 46 | .reveal h6 { 47 | margin: 0 0 20px 0; 48 | color: #fff; 49 | font-family: "Source Sans Pro", Helvetica, sans-serif; 50 | font-weight: 600; 51 | line-height: 1.2; 52 | letter-spacing: normal; 53 | text-transform: uppercase; 54 | text-shadow: none; 55 | word-wrap: break-word; } 56 | 57 | .reveal h1 { 58 | font-size: 2.5em; } 59 | 60 | .reveal h2 { 61 | font-size: 1.6em; } 62 | 63 | .reveal h3 { 64 | font-size: 1.3em; } 65 | 66 | .reveal h4 { 67 | font-size: 1em; } 68 | 69 | .reveal h1 { 70 | text-shadow: none; } 71 | 72 | /********************************************* 73 | * OTHER 74 | *********************************************/ 75 | .reveal p { 76 | margin: 20px 0; 77 | line-height: 1.3; } 78 | 79 | /* Ensure certain elements are never larger than the slide itself */ 80 | .reveal img, 81 | .reveal video, 82 | .reveal iframe { 83 | max-width: 95%; 84 | max-height: 95%; } 85 | 86 | .reveal strong, 87 | .reveal b { 88 | font-weight: bold; } 89 | 90 | .reveal em { 91 | font-style: italic; } 92 | 93 | .reveal ol, 94 | .reveal dl, 95 | .reveal ul { 96 | display: inline-block; 97 | text-align: left; 98 | margin: 0 0 0 1em; } 99 | 100 | .reveal ol { 101 | list-style-type: decimal; } 102 | 103 | .reveal ul { 104 | list-style-type: disc; } 105 | 106 | .reveal ul ul { 107 | list-style-type: square; } 108 | 109 | .reveal ul ul ul { 110 | list-style-type: circle; } 111 | 112 | .reveal ul ul, 113 | .reveal ul ol, 114 | .reveal ol ol, 115 | .reveal ol ul { 116 | display: block; 117 | margin-left: 40px; } 118 | 119 | .reveal dt { 120 | font-weight: bold; } 121 | 122 | .reveal dd { 123 | margin-left: 40px; } 124 | 125 | .reveal blockquote { 126 | display: block; 127 | position: relative; 128 | width: 70%; 129 | margin: 20px auto; 130 | padding: 5px; 131 | font-style: italic; 132 | background: rgba(255, 255, 255, 0.05); 133 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } 134 | 135 | .reveal blockquote p:first-child, 136 | .reveal blockquote p:last-child { 137 | display: inline-block; } 138 | 139 | .reveal q { 140 | font-style: italic; } 141 | 142 | .reveal pre { 143 | display: block; 144 | position: relative; 145 | width: 90%; 146 | margin: 20px auto; 147 | text-align: left; 148 | font-size: 0.55em; 149 | font-family: monospace; 150 | line-height: 1.2em; 151 | word-wrap: break-word; 152 | box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } 153 | 154 | .reveal code { 155 | font-family: monospace; 156 | text-transform: none; } 157 | 158 | .reveal pre code { 159 | display: block; 160 | padding: 5px; 161 | overflow: auto; 162 | max-height: 400px; 163 | word-wrap: normal; } 164 | 165 | .reveal table { 166 | margin: auto; 167 | border-collapse: collapse; 168 | border-spacing: 0; } 169 | 170 | .reveal table th { 171 | font-weight: bold; } 172 | 173 | .reveal table th, 174 | .reveal table td { 175 | text-align: left; 176 | padding: 0.2em 0.5em 0.2em 0.5em; 177 | border-bottom: 1px solid; } 178 | 179 | .reveal table th[align="center"], 180 | .reveal table td[align="center"] { 181 | text-align: center; } 182 | 183 | .reveal table th[align="right"], 184 | .reveal table td[align="right"] { 185 | text-align: right; } 186 | 187 | .reveal table tbody tr:last-child th, 188 | .reveal table tbody tr:last-child td { 189 | border-bottom: none; } 190 | 191 | .reveal sup { 192 | vertical-align: super; 193 | font-size: smaller; } 194 | 195 | .reveal sub { 196 | vertical-align: sub; 197 | font-size: smaller; } 198 | 199 | .reveal small { 200 | display: inline-block; 201 | font-size: 0.6em; 202 | line-height: 1.2em; 203 | vertical-align: top; } 204 | 205 | .reveal small * { 206 | vertical-align: top; } 207 | 208 | /********************************************* 209 | * LINKS 210 | *********************************************/ 211 | .reveal a { 212 | color: #42affa; 213 | text-decoration: none; 214 | -webkit-transition: color .15s ease; 215 | -moz-transition: color .15s ease; 216 | transition: color .15s ease; } 217 | 218 | .reveal a:hover { 219 | color: #8dcffc; 220 | text-shadow: none; 221 | border: none; } 222 | 223 | .reveal .roll span:after { 224 | color: #fff; 225 | background: #068de9; } 226 | 227 | /********************************************* 228 | * IMAGES 229 | *********************************************/ 230 | .reveal section img { 231 | margin: 15px 0px; 232 | background: rgba(255, 255, 255, 0.12); 233 | border: 4px solid #fff; 234 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } 235 | 236 | .reveal section img.plain { 237 | border: 0; 238 | box-shadow: none; } 239 | 240 | .reveal a img { 241 | -webkit-transition: all .15s linear; 242 | -moz-transition: all .15s linear; 243 | transition: all .15s linear; } 244 | 245 | .reveal a:hover img { 246 | background: rgba(255, 255, 255, 0.2); 247 | border-color: #42affa; 248 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 249 | 250 | /********************************************* 251 | * NAVIGATION CONTROLS 252 | *********************************************/ 253 | .reveal .controls { 254 | color: #42affa; } 255 | 256 | /********************************************* 257 | * PROGRESS BAR 258 | *********************************************/ 259 | .reveal .progress { 260 | background: rgba(0, 0, 0, 0.2); 261 | color: #42affa; } 262 | 263 | .reveal .progress span { 264 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 265 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 266 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 267 | 268 | /********************************************* 269 | * PRINT BACKGROUND 270 | *********************************************/ 271 | @media print { 272 | .backgrounds { 273 | background-color: #191919; } } 274 | -------------------------------------------------------------------------------- /slides/lib/css/theme/blood.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Blood theme for reveal.js 3 | * Author: Walther http://github.com/Walther 4 | * 5 | * Designed to be used with highlight.js theme 6 | * "monokai_sublime.css" available from 7 | * https://github.com/isagalaev/highlight.js/ 8 | * 9 | * For other themes, change $codeBackground accordingly. 10 | * 11 | */ 12 | @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic); 13 | /********************************************* 14 | * GLOBAL STYLES 15 | *********************************************/ 16 | body { 17 | background: #222; 18 | background-color: #222; } 19 | 20 | .reveal { 21 | font-family: Ubuntu, "sans-serif"; 22 | font-size: 40px; 23 | font-weight: normal; 24 | color: #eee; } 25 | 26 | ::selection { 27 | color: #fff; 28 | background: #a23; 29 | text-shadow: none; } 30 | 31 | ::-moz-selection { 32 | color: #fff; 33 | background: #a23; 34 | text-shadow: none; } 35 | 36 | .reveal .slides section, 37 | .reveal .slides section > section { 38 | line-height: 1.3; 39 | font-weight: inherit; } 40 | 41 | /********************************************* 42 | * HEADERS 43 | *********************************************/ 44 | .reveal h1, 45 | .reveal h2, 46 | .reveal h3, 47 | .reveal h4, 48 | .reveal h5, 49 | .reveal h6 { 50 | margin: 0 0 20px 0; 51 | color: #eee; 52 | font-family: Ubuntu, "sans-serif"; 53 | font-weight: normal; 54 | line-height: 1.2; 55 | letter-spacing: normal; 56 | text-transform: uppercase; 57 | text-shadow: 2px 2px 2px #222; 58 | word-wrap: break-word; } 59 | 60 | .reveal h1 { 61 | font-size: 3.77em; } 62 | 63 | .reveal h2 { 64 | font-size: 2.11em; } 65 | 66 | .reveal h3 { 67 | font-size: 1.55em; } 68 | 69 | .reveal h4 { 70 | font-size: 1em; } 71 | 72 | .reveal h1 { 73 | text-shadow: 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, 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); } 74 | 75 | /********************************************* 76 | * OTHER 77 | *********************************************/ 78 | .reveal p { 79 | margin: 20px 0; 80 | line-height: 1.3; } 81 | 82 | /* Ensure certain elements are never larger than the slide itself */ 83 | .reveal img, 84 | .reveal video, 85 | .reveal iframe { 86 | max-width: 95%; 87 | max-height: 95%; } 88 | 89 | .reveal strong, 90 | .reveal b { 91 | font-weight: bold; } 92 | 93 | .reveal em { 94 | font-style: italic; } 95 | 96 | .reveal ol, 97 | .reveal dl, 98 | .reveal ul { 99 | display: inline-block; 100 | text-align: left; 101 | margin: 0 0 0 1em; } 102 | 103 | .reveal ol { 104 | list-style-type: decimal; } 105 | 106 | .reveal ul { 107 | list-style-type: disc; } 108 | 109 | .reveal ul ul { 110 | list-style-type: square; } 111 | 112 | .reveal ul ul ul { 113 | list-style-type: circle; } 114 | 115 | .reveal ul ul, 116 | .reveal ul ol, 117 | .reveal ol ol, 118 | .reveal ol ul { 119 | display: block; 120 | margin-left: 40px; } 121 | 122 | .reveal dt { 123 | font-weight: bold; } 124 | 125 | .reveal dd { 126 | margin-left: 40px; } 127 | 128 | .reveal blockquote { 129 | display: block; 130 | position: relative; 131 | width: 70%; 132 | margin: 20px auto; 133 | padding: 5px; 134 | font-style: italic; 135 | background: rgba(255, 255, 255, 0.05); 136 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } 137 | 138 | .reveal blockquote p:first-child, 139 | .reveal blockquote p:last-child { 140 | display: inline-block; } 141 | 142 | .reveal q { 143 | font-style: italic; } 144 | 145 | .reveal pre { 146 | display: block; 147 | position: relative; 148 | width: 90%; 149 | margin: 20px auto; 150 | text-align: left; 151 | font-size: 0.55em; 152 | font-family: monospace; 153 | line-height: 1.2em; 154 | word-wrap: break-word; 155 | box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } 156 | 157 | .reveal code { 158 | font-family: monospace; 159 | text-transform: none; } 160 | 161 | .reveal pre code { 162 | display: block; 163 | padding: 5px; 164 | overflow: auto; 165 | max-height: 400px; 166 | word-wrap: normal; } 167 | 168 | .reveal table { 169 | margin: auto; 170 | border-collapse: collapse; 171 | border-spacing: 0; } 172 | 173 | .reveal table th { 174 | font-weight: bold; } 175 | 176 | .reveal table th, 177 | .reveal table td { 178 | text-align: left; 179 | padding: 0.2em 0.5em 0.2em 0.5em; 180 | border-bottom: 1px solid; } 181 | 182 | .reveal table th[align="center"], 183 | .reveal table td[align="center"] { 184 | text-align: center; } 185 | 186 | .reveal table th[align="right"], 187 | .reveal table td[align="right"] { 188 | text-align: right; } 189 | 190 | .reveal table tbody tr:last-child th, 191 | .reveal table tbody tr:last-child td { 192 | border-bottom: none; } 193 | 194 | .reveal sup { 195 | vertical-align: super; 196 | font-size: smaller; } 197 | 198 | .reveal sub { 199 | vertical-align: sub; 200 | font-size: smaller; } 201 | 202 | .reveal small { 203 | display: inline-block; 204 | font-size: 0.6em; 205 | line-height: 1.2em; 206 | vertical-align: top; } 207 | 208 | .reveal small * { 209 | vertical-align: top; } 210 | 211 | /********************************************* 212 | * LINKS 213 | *********************************************/ 214 | .reveal a { 215 | color: #a23; 216 | text-decoration: none; 217 | -webkit-transition: color .15s ease; 218 | -moz-transition: color .15s ease; 219 | transition: color .15s ease; } 220 | 221 | .reveal a:hover { 222 | color: #dd5566; 223 | text-shadow: none; 224 | border: none; } 225 | 226 | .reveal .roll span:after { 227 | color: #fff; 228 | background: #6a1520; } 229 | 230 | /********************************************* 231 | * IMAGES 232 | *********************************************/ 233 | .reveal section img { 234 | margin: 15px 0px; 235 | background: rgba(255, 255, 255, 0.12); 236 | border: 4px solid #eee; 237 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } 238 | 239 | .reveal section img.plain { 240 | border: 0; 241 | box-shadow: none; } 242 | 243 | .reveal a img { 244 | -webkit-transition: all .15s linear; 245 | -moz-transition: all .15s linear; 246 | transition: all .15s linear; } 247 | 248 | .reveal a:hover img { 249 | background: rgba(255, 255, 255, 0.2); 250 | border-color: #a23; 251 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 252 | 253 | /********************************************* 254 | * NAVIGATION CONTROLS 255 | *********************************************/ 256 | .reveal .controls { 257 | color: #a23; } 258 | 259 | /********************************************* 260 | * PROGRESS BAR 261 | *********************************************/ 262 | .reveal .progress { 263 | background: rgba(0, 0, 0, 0.2); 264 | color: #a23; } 265 | 266 | .reveal .progress span { 267 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 268 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 269 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 270 | 271 | /********************************************* 272 | * PRINT BACKGROUND 273 | *********************************************/ 274 | @media print { 275 | .backgrounds { 276 | background-color: #222; } } 277 | 278 | .reveal p { 279 | font-weight: 300; 280 | text-shadow: 1px 1px #222; } 281 | 282 | .reveal h1, 283 | .reveal h2, 284 | .reveal h3, 285 | .reveal h4, 286 | .reveal h5, 287 | .reveal h6 { 288 | font-weight: 700; } 289 | 290 | .reveal p code { 291 | background-color: #23241f; 292 | display: inline-block; 293 | border-radius: 7px; } 294 | 295 | .reveal small code { 296 | vertical-align: baseline; } 297 | -------------------------------------------------------------------------------- /slides/lib/css/theme/league.css: -------------------------------------------------------------------------------- 1 | /** 2 | * League theme for reveal.js. 3 | * 4 | * This was the default theme pre-3.0.0. 5 | * 6 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 7 | */ 8 | @import url(../../lib/font/league-gothic/league-gothic.css); 9 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 10 | /********************************************* 11 | * GLOBAL STYLES 12 | *********************************************/ 13 | body { 14 | background: #1c1e20; 15 | background: -moz-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); 16 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #555a5f), color-stop(100%, #1c1e20)); 17 | background: -webkit-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); 18 | background: -o-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); 19 | background: -ms-radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); 20 | background: radial-gradient(center, circle cover, #555a5f 0%, #1c1e20 100%); 21 | background-color: #2b2b2b; } 22 | 23 | .reveal { 24 | font-family: "Lato", sans-serif; 25 | font-size: 40px; 26 | font-weight: normal; 27 | color: #eee; } 28 | 29 | ::selection { 30 | color: #fff; 31 | background: #FF5E99; 32 | text-shadow: none; } 33 | 34 | ::-moz-selection { 35 | color: #fff; 36 | background: #FF5E99; 37 | text-shadow: none; } 38 | 39 | .reveal .slides section, 40 | .reveal .slides section > section { 41 | line-height: 1.3; 42 | font-weight: inherit; } 43 | 44 | /********************************************* 45 | * HEADERS 46 | *********************************************/ 47 | .reveal h1, 48 | .reveal h2, 49 | .reveal h3, 50 | .reveal h4, 51 | .reveal h5, 52 | .reveal h6 { 53 | margin: 0 0 20px 0; 54 | color: #eee; 55 | font-family: "League Gothic", Impact, sans-serif; 56 | font-weight: normal; 57 | line-height: 1.2; 58 | letter-spacing: normal; 59 | text-transform: uppercase; 60 | text-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2); 61 | word-wrap: break-word; } 62 | 63 | .reveal h1 { 64 | font-size: 3.77em; } 65 | 66 | .reveal h2 { 67 | font-size: 2.11em; } 68 | 69 | .reveal h3 { 70 | font-size: 1.55em; } 71 | 72 | .reveal h4 { 73 | font-size: 1em; } 74 | 75 | .reveal h1 { 76 | text-shadow: 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, 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); } 77 | 78 | /********************************************* 79 | * OTHER 80 | *********************************************/ 81 | .reveal p { 82 | margin: 20px 0; 83 | line-height: 1.3; } 84 | 85 | /* Ensure certain elements are never larger than the slide itself */ 86 | .reveal img, 87 | .reveal video, 88 | .reveal iframe { 89 | max-width: 95%; 90 | max-height: 95%; } 91 | 92 | .reveal strong, 93 | .reveal b { 94 | font-weight: bold; } 95 | 96 | .reveal em { 97 | font-style: italic; } 98 | 99 | .reveal ol, 100 | .reveal dl, 101 | .reveal ul { 102 | display: inline-block; 103 | text-align: left; 104 | margin: 0 0 0 1em; } 105 | 106 | .reveal ol { 107 | list-style-type: decimal; } 108 | 109 | .reveal ul { 110 | list-style-type: disc; } 111 | 112 | .reveal ul ul { 113 | list-style-type: square; } 114 | 115 | .reveal ul ul ul { 116 | list-style-type: circle; } 117 | 118 | .reveal ul ul, 119 | .reveal ul ol, 120 | .reveal ol ol, 121 | .reveal ol ul { 122 | display: block; 123 | margin-left: 40px; } 124 | 125 | .reveal dt { 126 | font-weight: bold; } 127 | 128 | .reveal dd { 129 | margin-left: 40px; } 130 | 131 | .reveal blockquote { 132 | display: block; 133 | position: relative; 134 | width: 70%; 135 | margin: 20px auto; 136 | padding: 5px; 137 | font-style: italic; 138 | background: rgba(255, 255, 255, 0.05); 139 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } 140 | 141 | .reveal blockquote p:first-child, 142 | .reveal blockquote p:last-child { 143 | display: inline-block; } 144 | 145 | .reveal q { 146 | font-style: italic; } 147 | 148 | .reveal pre { 149 | display: block; 150 | position: relative; 151 | width: 90%; 152 | margin: 20px auto; 153 | text-align: left; 154 | font-size: 0.55em; 155 | font-family: monospace; 156 | line-height: 1.2em; 157 | word-wrap: break-word; 158 | box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } 159 | 160 | .reveal code { 161 | font-family: monospace; 162 | text-transform: none; } 163 | 164 | .reveal pre code { 165 | display: block; 166 | padding: 5px; 167 | overflow: auto; 168 | max-height: 400px; 169 | word-wrap: normal; } 170 | 171 | .reveal table { 172 | margin: auto; 173 | border-collapse: collapse; 174 | border-spacing: 0; } 175 | 176 | .reveal table th { 177 | font-weight: bold; } 178 | 179 | .reveal table th, 180 | .reveal table td { 181 | text-align: left; 182 | padding: 0.2em 0.5em 0.2em 0.5em; 183 | border-bottom: 1px solid; } 184 | 185 | .reveal table th[align="center"], 186 | .reveal table td[align="center"] { 187 | text-align: center; } 188 | 189 | .reveal table th[align="right"], 190 | .reveal table td[align="right"] { 191 | text-align: right; } 192 | 193 | .reveal table tbody tr:last-child th, 194 | .reveal table tbody tr:last-child td { 195 | border-bottom: none; } 196 | 197 | .reveal sup { 198 | vertical-align: super; 199 | font-size: smaller; } 200 | 201 | .reveal sub { 202 | vertical-align: sub; 203 | font-size: smaller; } 204 | 205 | .reveal small { 206 | display: inline-block; 207 | font-size: 0.6em; 208 | line-height: 1.2em; 209 | vertical-align: top; } 210 | 211 | .reveal small * { 212 | vertical-align: top; } 213 | 214 | /********************************************* 215 | * LINKS 216 | *********************************************/ 217 | .reveal a { 218 | color: #13DAEC; 219 | text-decoration: none; 220 | -webkit-transition: color .15s ease; 221 | -moz-transition: color .15s ease; 222 | transition: color .15s ease; } 223 | 224 | .reveal a:hover { 225 | color: #71e9f4; 226 | text-shadow: none; 227 | border: none; } 228 | 229 | .reveal .roll span:after { 230 | color: #fff; 231 | background: #0d99a5; } 232 | 233 | /********************************************* 234 | * IMAGES 235 | *********************************************/ 236 | .reveal section img { 237 | margin: 15px 0px; 238 | background: rgba(255, 255, 255, 0.12); 239 | border: 4px solid #eee; 240 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } 241 | 242 | .reveal section img.plain { 243 | border: 0; 244 | box-shadow: none; } 245 | 246 | .reveal a img { 247 | -webkit-transition: all .15s linear; 248 | -moz-transition: all .15s linear; 249 | transition: all .15s linear; } 250 | 251 | .reveal a:hover img { 252 | background: rgba(255, 255, 255, 0.2); 253 | border-color: #13DAEC; 254 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 255 | 256 | /********************************************* 257 | * NAVIGATION CONTROLS 258 | *********************************************/ 259 | .reveal .controls { 260 | color: #13DAEC; } 261 | 262 | /********************************************* 263 | * PROGRESS BAR 264 | *********************************************/ 265 | .reveal .progress { 266 | background: rgba(0, 0, 0, 0.2); 267 | color: #13DAEC; } 268 | 269 | .reveal .progress span { 270 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 271 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 272 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 273 | 274 | /********************************************* 275 | * PRINT BACKGROUND 276 | *********************************************/ 277 | @media print { 278 | .backgrounds { 279 | background-color: #2b2b2b; } } 280 | -------------------------------------------------------------------------------- /slides/lib/css/theme/moon.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Solarized Dark theme for reveal.js. 3 | * Author: Achim Staebler 4 | */ 5 | @import url(../../lib/font/league-gothic/league-gothic.css); 6 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 7 | /** 8 | * Solarized colors by Ethan Schoonover 9 | */ 10 | html * { 11 | color-profile: sRGB; 12 | rendering-intent: auto; } 13 | 14 | /********************************************* 15 | * GLOBAL STYLES 16 | *********************************************/ 17 | body { 18 | background: #002b36; 19 | background-color: #002b36; } 20 | 21 | .reveal { 22 | font-family: "Lato", sans-serif; 23 | font-size: 40px; 24 | font-weight: normal; 25 | color: #93a1a1; } 26 | 27 | ::selection { 28 | color: #fff; 29 | background: #d33682; 30 | text-shadow: none; } 31 | 32 | ::-moz-selection { 33 | color: #fff; 34 | background: #d33682; 35 | text-shadow: none; } 36 | 37 | .reveal .slides section, 38 | .reveal .slides section > section { 39 | line-height: 1.3; 40 | font-weight: inherit; } 41 | 42 | /********************************************* 43 | * HEADERS 44 | *********************************************/ 45 | .reveal h1, 46 | .reveal h2, 47 | .reveal h3, 48 | .reveal h4, 49 | .reveal h5, 50 | .reveal h6 { 51 | margin: 0 0 20px 0; 52 | color: #eee8d5; 53 | font-family: "League Gothic", Impact, sans-serif; 54 | font-weight: normal; 55 | line-height: 1.2; 56 | letter-spacing: normal; 57 | text-transform: uppercase; 58 | text-shadow: none; 59 | word-wrap: break-word; } 60 | 61 | .reveal h1 { 62 | font-size: 3.77em; } 63 | 64 | .reveal h2 { 65 | font-size: 2.11em; } 66 | 67 | .reveal h3 { 68 | font-size: 1.55em; } 69 | 70 | .reveal h4 { 71 | font-size: 1em; } 72 | 73 | .reveal h1 { 74 | text-shadow: none; } 75 | 76 | /********************************************* 77 | * OTHER 78 | *********************************************/ 79 | .reveal p { 80 | margin: 20px 0; 81 | line-height: 1.3; } 82 | 83 | /* Ensure certain elements are never larger than the slide itself */ 84 | .reveal img, 85 | .reveal video, 86 | .reveal iframe { 87 | max-width: 95%; 88 | max-height: 95%; } 89 | 90 | .reveal strong, 91 | .reveal b { 92 | font-weight: bold; } 93 | 94 | .reveal em { 95 | font-style: italic; } 96 | 97 | .reveal ol, 98 | .reveal dl, 99 | .reveal ul { 100 | display: inline-block; 101 | text-align: left; 102 | margin: 0 0 0 1em; } 103 | 104 | .reveal ol { 105 | list-style-type: decimal; } 106 | 107 | .reveal ul { 108 | list-style-type: disc; } 109 | 110 | .reveal ul ul { 111 | list-style-type: square; } 112 | 113 | .reveal ul ul ul { 114 | list-style-type: circle; } 115 | 116 | .reveal ul ul, 117 | .reveal ul ol, 118 | .reveal ol ol, 119 | .reveal ol ul { 120 | display: block; 121 | margin-left: 40px; } 122 | 123 | .reveal dt { 124 | font-weight: bold; } 125 | 126 | .reveal dd { 127 | margin-left: 40px; } 128 | 129 | .reveal blockquote { 130 | display: block; 131 | position: relative; 132 | width: 70%; 133 | margin: 20px auto; 134 | padding: 5px; 135 | font-style: italic; 136 | background: rgba(255, 255, 255, 0.05); 137 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } 138 | 139 | .reveal blockquote p:first-child, 140 | .reveal blockquote p:last-child { 141 | display: inline-block; } 142 | 143 | .reveal q { 144 | font-style: italic; } 145 | 146 | .reveal pre { 147 | display: block; 148 | position: relative; 149 | width: 90%; 150 | margin: 20px auto; 151 | text-align: left; 152 | font-size: 0.55em; 153 | font-family: monospace; 154 | line-height: 1.2em; 155 | word-wrap: break-word; 156 | box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } 157 | 158 | .reveal code { 159 | font-family: monospace; 160 | text-transform: none; } 161 | 162 | .reveal pre code { 163 | display: block; 164 | padding: 5px; 165 | overflow: auto; 166 | max-height: 400px; 167 | word-wrap: normal; } 168 | 169 | .reveal table { 170 | margin: auto; 171 | border-collapse: collapse; 172 | border-spacing: 0; } 173 | 174 | .reveal table th { 175 | font-weight: bold; } 176 | 177 | .reveal table th, 178 | .reveal table td { 179 | text-align: left; 180 | padding: 0.2em 0.5em 0.2em 0.5em; 181 | border-bottom: 1px solid; } 182 | 183 | .reveal table th[align="center"], 184 | .reveal table td[align="center"] { 185 | text-align: center; } 186 | 187 | .reveal table th[align="right"], 188 | .reveal table td[align="right"] { 189 | text-align: right; } 190 | 191 | .reveal table tbody tr:last-child th, 192 | .reveal table tbody tr:last-child td { 193 | border-bottom: none; } 194 | 195 | .reveal sup { 196 | vertical-align: super; 197 | font-size: smaller; } 198 | 199 | .reveal sub { 200 | vertical-align: sub; 201 | font-size: smaller; } 202 | 203 | .reveal small { 204 | display: inline-block; 205 | font-size: 0.6em; 206 | line-height: 1.2em; 207 | vertical-align: top; } 208 | 209 | .reveal small * { 210 | vertical-align: top; } 211 | 212 | /********************************************* 213 | * LINKS 214 | *********************************************/ 215 | .reveal a { 216 | color: #268bd2; 217 | text-decoration: none; 218 | -webkit-transition: color .15s ease; 219 | -moz-transition: color .15s ease; 220 | transition: color .15s ease; } 221 | 222 | .reveal a:hover { 223 | color: #78b9e6; 224 | text-shadow: none; 225 | border: none; } 226 | 227 | .reveal .roll span:after { 228 | color: #fff; 229 | background: #1a6091; } 230 | 231 | /********************************************* 232 | * IMAGES 233 | *********************************************/ 234 | .reveal section img { 235 | margin: 15px 0px; 236 | background: rgba(255, 255, 255, 0.12); 237 | border: 4px solid #93a1a1; 238 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } 239 | 240 | .reveal section img.plain { 241 | border: 0; 242 | box-shadow: none; } 243 | 244 | .reveal a img { 245 | -webkit-transition: all .15s linear; 246 | -moz-transition: all .15s linear; 247 | transition: all .15s linear; } 248 | 249 | .reveal a:hover img { 250 | background: rgba(255, 255, 255, 0.2); 251 | border-color: #268bd2; 252 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 253 | 254 | /********************************************* 255 | * NAVIGATION CONTROLS 256 | *********************************************/ 257 | .reveal .controls { 258 | color: #268bd2; } 259 | 260 | /********************************************* 261 | * PROGRESS BAR 262 | *********************************************/ 263 | .reveal .progress { 264 | background: rgba(0, 0, 0, 0.2); 265 | color: #268bd2; } 266 | 267 | .reveal .progress span { 268 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 269 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 270 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 271 | 272 | /********************************************* 273 | * PRINT BACKGROUND 274 | *********************************************/ 275 | @media print { 276 | .backgrounds { 277 | background-color: #002b36; } } 278 | -------------------------------------------------------------------------------- /slides/lib/css/theme/night.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Black theme for reveal.js. 3 | * 4 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 5 | */ 6 | @import url(https://fonts.googleapis.com/css?family=Montserrat:700); 7 | @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); 8 | /********************************************* 9 | * GLOBAL STYLES 10 | *********************************************/ 11 | body { 12 | background: #111; 13 | background-color: #111; } 14 | 15 | .reveal { 16 | font-family: "Open Sans", sans-serif; 17 | font-size: 40px; 18 | font-weight: normal; 19 | color: #eee; } 20 | 21 | ::selection { 22 | color: #fff; 23 | background: #e7ad52; 24 | text-shadow: none; } 25 | 26 | ::-moz-selection { 27 | color: #fff; 28 | background: #e7ad52; 29 | text-shadow: none; } 30 | 31 | .reveal .slides section, 32 | .reveal .slides section > section { 33 | line-height: 1.3; 34 | font-weight: inherit; } 35 | 36 | /********************************************* 37 | * HEADERS 38 | *********************************************/ 39 | .reveal h1, 40 | .reveal h2, 41 | .reveal h3, 42 | .reveal h4, 43 | .reveal h5, 44 | .reveal h6 { 45 | margin: 0 0 20px 0; 46 | color: #eee; 47 | font-family: "Montserrat", Impact, sans-serif; 48 | font-weight: normal; 49 | line-height: 1.2; 50 | letter-spacing: -0.03em; 51 | text-transform: none; 52 | text-shadow: none; 53 | word-wrap: break-word; } 54 | 55 | .reveal h1 { 56 | font-size: 3.77em; } 57 | 58 | .reveal h2 { 59 | font-size: 2.11em; } 60 | 61 | .reveal h3 { 62 | font-size: 1.55em; } 63 | 64 | .reveal h4 { 65 | font-size: 1em; } 66 | 67 | .reveal h1 { 68 | text-shadow: none; } 69 | 70 | /********************************************* 71 | * OTHER 72 | *********************************************/ 73 | .reveal p { 74 | margin: 20px 0; 75 | line-height: 1.3; } 76 | 77 | /* Ensure certain elements are never larger than the slide itself */ 78 | .reveal img, 79 | .reveal video, 80 | .reveal iframe { 81 | max-width: 95%; 82 | max-height: 95%; } 83 | 84 | .reveal strong, 85 | .reveal b { 86 | font-weight: bold; } 87 | 88 | .reveal em { 89 | font-style: italic; } 90 | 91 | .reveal ol, 92 | .reveal dl, 93 | .reveal ul { 94 | display: inline-block; 95 | text-align: left; 96 | margin: 0 0 0 1em; } 97 | 98 | .reveal ol { 99 | list-style-type: decimal; } 100 | 101 | .reveal ul { 102 | list-style-type: disc; } 103 | 104 | .reveal ul ul { 105 | list-style-type: square; } 106 | 107 | .reveal ul ul ul { 108 | list-style-type: circle; } 109 | 110 | .reveal ul ul, 111 | .reveal ul ol, 112 | .reveal ol ol, 113 | .reveal ol ul { 114 | display: block; 115 | margin-left: 40px; } 116 | 117 | .reveal dt { 118 | font-weight: bold; } 119 | 120 | .reveal dd { 121 | margin-left: 40px; } 122 | 123 | .reveal blockquote { 124 | display: block; 125 | position: relative; 126 | width: 70%; 127 | margin: 20px auto; 128 | padding: 5px; 129 | font-style: italic; 130 | background: rgba(255, 255, 255, 0.05); 131 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } 132 | 133 | .reveal blockquote p:first-child, 134 | .reveal blockquote p:last-child { 135 | display: inline-block; } 136 | 137 | .reveal q { 138 | font-style: italic; } 139 | 140 | .reveal pre { 141 | display: block; 142 | position: relative; 143 | width: 90%; 144 | margin: 20px auto; 145 | text-align: left; 146 | font-size: 0.55em; 147 | font-family: monospace; 148 | line-height: 1.2em; 149 | word-wrap: break-word; 150 | box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } 151 | 152 | .reveal code { 153 | font-family: monospace; 154 | text-transform: none; } 155 | 156 | .reveal pre code { 157 | display: block; 158 | padding: 5px; 159 | overflow: auto; 160 | max-height: 400px; 161 | word-wrap: normal; } 162 | 163 | .reveal table { 164 | margin: auto; 165 | border-collapse: collapse; 166 | border-spacing: 0; } 167 | 168 | .reveal table th { 169 | font-weight: bold; } 170 | 171 | .reveal table th, 172 | .reveal table td { 173 | text-align: left; 174 | padding: 0.2em 0.5em 0.2em 0.5em; 175 | border-bottom: 1px solid; } 176 | 177 | .reveal table th[align="center"], 178 | .reveal table td[align="center"] { 179 | text-align: center; } 180 | 181 | .reveal table th[align="right"], 182 | .reveal table td[align="right"] { 183 | text-align: right; } 184 | 185 | .reveal table tbody tr:last-child th, 186 | .reveal table tbody tr:last-child td { 187 | border-bottom: none; } 188 | 189 | .reveal sup { 190 | vertical-align: super; 191 | font-size: smaller; } 192 | 193 | .reveal sub { 194 | vertical-align: sub; 195 | font-size: smaller; } 196 | 197 | .reveal small { 198 | display: inline-block; 199 | font-size: 0.6em; 200 | line-height: 1.2em; 201 | vertical-align: top; } 202 | 203 | .reveal small * { 204 | vertical-align: top; } 205 | 206 | /********************************************* 207 | * LINKS 208 | *********************************************/ 209 | .reveal a { 210 | color: #e7ad52; 211 | text-decoration: none; 212 | -webkit-transition: color .15s ease; 213 | -moz-transition: color .15s ease; 214 | transition: color .15s ease; } 215 | 216 | .reveal a:hover { 217 | color: #f3d7ac; 218 | text-shadow: none; 219 | border: none; } 220 | 221 | .reveal .roll span:after { 222 | color: #fff; 223 | background: #d08a1d; } 224 | 225 | /********************************************* 226 | * IMAGES 227 | *********************************************/ 228 | .reveal section img { 229 | margin: 15px 0px; 230 | background: rgba(255, 255, 255, 0.12); 231 | border: 4px solid #eee; 232 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } 233 | 234 | .reveal section img.plain { 235 | border: 0; 236 | box-shadow: none; } 237 | 238 | .reveal a img { 239 | -webkit-transition: all .15s linear; 240 | -moz-transition: all .15s linear; 241 | transition: all .15s linear; } 242 | 243 | .reveal a:hover img { 244 | background: rgba(255, 255, 255, 0.2); 245 | border-color: #e7ad52; 246 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 247 | 248 | /********************************************* 249 | * NAVIGATION CONTROLS 250 | *********************************************/ 251 | .reveal .controls { 252 | color: #e7ad52; } 253 | 254 | /********************************************* 255 | * PROGRESS BAR 256 | *********************************************/ 257 | .reveal .progress { 258 | background: rgba(0, 0, 0, 0.2); 259 | color: #e7ad52; } 260 | 261 | .reveal .progress span { 262 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 263 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 264 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 265 | 266 | /********************************************* 267 | * PRINT BACKGROUND 268 | *********************************************/ 269 | @media print { 270 | .backgrounds { 271 | background-color: #111; } } 272 | -------------------------------------------------------------------------------- /slides/lib/css/theme/serif.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A simple theme for reveal.js presentations, similar 3 | * to the default theme. The accent color is brown. 4 | * 5 | * This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed. 6 | */ 7 | .reveal a { 8 | line-height: 1.3em; } 9 | 10 | /********************************************* 11 | * GLOBAL STYLES 12 | *********************************************/ 13 | body { 14 | background: #F0F1EB; 15 | background-color: #F0F1EB; } 16 | 17 | .reveal { 18 | font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; 19 | font-size: 40px; 20 | font-weight: normal; 21 | color: #000; } 22 | 23 | ::selection { 24 | color: #fff; 25 | background: #26351C; 26 | text-shadow: none; } 27 | 28 | ::-moz-selection { 29 | color: #fff; 30 | background: #26351C; 31 | text-shadow: none; } 32 | 33 | .reveal .slides section, 34 | .reveal .slides section > section { 35 | line-height: 1.3; 36 | font-weight: inherit; } 37 | 38 | /********************************************* 39 | * HEADERS 40 | *********************************************/ 41 | .reveal h1, 42 | .reveal h2, 43 | .reveal h3, 44 | .reveal h4, 45 | .reveal h5, 46 | .reveal h6 { 47 | margin: 0 0 20px 0; 48 | color: #383D3D; 49 | font-family: "Palatino Linotype", "Book Antiqua", Palatino, FreeSerif, serif; 50 | font-weight: normal; 51 | line-height: 1.2; 52 | letter-spacing: normal; 53 | text-transform: none; 54 | text-shadow: none; 55 | word-wrap: break-word; } 56 | 57 | .reveal h1 { 58 | font-size: 3.77em; } 59 | 60 | .reveal h2 { 61 | font-size: 2.11em; } 62 | 63 | .reveal h3 { 64 | font-size: 1.55em; } 65 | 66 | .reveal h4 { 67 | font-size: 1em; } 68 | 69 | .reveal h1 { 70 | text-shadow: none; } 71 | 72 | /********************************************* 73 | * OTHER 74 | *********************************************/ 75 | .reveal p { 76 | margin: 20px 0; 77 | line-height: 1.3; } 78 | 79 | /* Ensure certain elements are never larger than the slide itself */ 80 | .reveal img, 81 | .reveal video, 82 | .reveal iframe { 83 | max-width: 95%; 84 | max-height: 95%; } 85 | 86 | .reveal strong, 87 | .reveal b { 88 | font-weight: bold; } 89 | 90 | .reveal em { 91 | font-style: italic; } 92 | 93 | .reveal ol, 94 | .reveal dl, 95 | .reveal ul { 96 | display: inline-block; 97 | text-align: left; 98 | margin: 0 0 0 1em; } 99 | 100 | .reveal ol { 101 | list-style-type: decimal; } 102 | 103 | .reveal ul { 104 | list-style-type: disc; } 105 | 106 | .reveal ul ul { 107 | list-style-type: square; } 108 | 109 | .reveal ul ul ul { 110 | list-style-type: circle; } 111 | 112 | .reveal ul ul, 113 | .reveal ul ol, 114 | .reveal ol ol, 115 | .reveal ol ul { 116 | display: block; 117 | margin-left: 40px; } 118 | 119 | .reveal dt { 120 | font-weight: bold; } 121 | 122 | .reveal dd { 123 | margin-left: 40px; } 124 | 125 | .reveal blockquote { 126 | display: block; 127 | position: relative; 128 | width: 70%; 129 | margin: 20px auto; 130 | padding: 5px; 131 | font-style: italic; 132 | background: rgba(255, 255, 255, 0.05); 133 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } 134 | 135 | .reveal blockquote p:first-child, 136 | .reveal blockquote p:last-child { 137 | display: inline-block; } 138 | 139 | .reveal q { 140 | font-style: italic; } 141 | 142 | .reveal pre { 143 | display: block; 144 | position: relative; 145 | width: 90%; 146 | margin: 20px auto; 147 | text-align: left; 148 | font-size: 0.55em; 149 | font-family: monospace; 150 | line-height: 1.2em; 151 | word-wrap: break-word; 152 | box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } 153 | 154 | .reveal code { 155 | font-family: monospace; 156 | text-transform: none; } 157 | 158 | .reveal pre code { 159 | display: block; 160 | padding: 5px; 161 | overflow: auto; 162 | max-height: 400px; 163 | word-wrap: normal; } 164 | 165 | .reveal table { 166 | margin: auto; 167 | border-collapse: collapse; 168 | border-spacing: 0; } 169 | 170 | .reveal table th { 171 | font-weight: bold; } 172 | 173 | .reveal table th, 174 | .reveal table td { 175 | text-align: left; 176 | padding: 0.2em 0.5em 0.2em 0.5em; 177 | border-bottom: 1px solid; } 178 | 179 | .reveal table th[align="center"], 180 | .reveal table td[align="center"] { 181 | text-align: center; } 182 | 183 | .reveal table th[align="right"], 184 | .reveal table td[align="right"] { 185 | text-align: right; } 186 | 187 | .reveal table tbody tr:last-child th, 188 | .reveal table tbody tr:last-child td { 189 | border-bottom: none; } 190 | 191 | .reveal sup { 192 | vertical-align: super; 193 | font-size: smaller; } 194 | 195 | .reveal sub { 196 | vertical-align: sub; 197 | font-size: smaller; } 198 | 199 | .reveal small { 200 | display: inline-block; 201 | font-size: 0.6em; 202 | line-height: 1.2em; 203 | vertical-align: top; } 204 | 205 | .reveal small * { 206 | vertical-align: top; } 207 | 208 | /********************************************* 209 | * LINKS 210 | *********************************************/ 211 | .reveal a { 212 | color: #51483D; 213 | text-decoration: none; 214 | -webkit-transition: color .15s ease; 215 | -moz-transition: color .15s ease; 216 | transition: color .15s ease; } 217 | 218 | .reveal a:hover { 219 | color: #8b7c69; 220 | text-shadow: none; 221 | border: none; } 222 | 223 | .reveal .roll span:after { 224 | color: #fff; 225 | background: #25211c; } 226 | 227 | /********************************************* 228 | * IMAGES 229 | *********************************************/ 230 | .reveal section img { 231 | margin: 15px 0px; 232 | background: rgba(255, 255, 255, 0.12); 233 | border: 4px solid #000; 234 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } 235 | 236 | .reveal section img.plain { 237 | border: 0; 238 | box-shadow: none; } 239 | 240 | .reveal a img { 241 | -webkit-transition: all .15s linear; 242 | -moz-transition: all .15s linear; 243 | transition: all .15s linear; } 244 | 245 | .reveal a:hover img { 246 | background: rgba(255, 255, 255, 0.2); 247 | border-color: #51483D; 248 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 249 | 250 | /********************************************* 251 | * NAVIGATION CONTROLS 252 | *********************************************/ 253 | .reveal .controls { 254 | color: #51483D; } 255 | 256 | /********************************************* 257 | * PROGRESS BAR 258 | *********************************************/ 259 | .reveal .progress { 260 | background: rgba(0, 0, 0, 0.2); 261 | color: #51483D; } 262 | 263 | .reveal .progress span { 264 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 265 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 266 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 267 | 268 | /********************************************* 269 | * PRINT BACKGROUND 270 | *********************************************/ 271 | @media print { 272 | .backgrounds { 273 | background-color: #F0F1EB; } } 274 | -------------------------------------------------------------------------------- /slides/lib/css/theme/simple.css: -------------------------------------------------------------------------------- 1 | /** 2 | * A simple theme for reveal.js presentations, similar 3 | * to the default theme. The accent color is darkblue. 4 | * 5 | * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. 6 | * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 7 | */ 8 | @import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700); 9 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 10 | section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 { 11 | color: #fff; } 12 | 13 | /********************************************* 14 | * GLOBAL STYLES 15 | *********************************************/ 16 | body { 17 | background: #fff; 18 | background-color: #fff; } 19 | 20 | .reveal { 21 | font-family: "Lato", sans-serif; 22 | font-size: 40px; 23 | font-weight: normal; 24 | color: #000; } 25 | 26 | ::selection { 27 | color: #fff; 28 | background: rgba(0, 0, 0, 0.99); 29 | text-shadow: none; } 30 | 31 | ::-moz-selection { 32 | color: #fff; 33 | background: rgba(0, 0, 0, 0.99); 34 | text-shadow: none; } 35 | 36 | .reveal .slides section, 37 | .reveal .slides section > section { 38 | line-height: 1.3; 39 | font-weight: inherit; } 40 | 41 | /********************************************* 42 | * HEADERS 43 | *********************************************/ 44 | .reveal h1, 45 | .reveal h2, 46 | .reveal h3, 47 | .reveal h4, 48 | .reveal h5, 49 | .reveal h6 { 50 | margin: 0 0 20px 0; 51 | color: #000; 52 | font-family: "News Cycle", Impact, sans-serif; 53 | font-weight: normal; 54 | line-height: 1.2; 55 | letter-spacing: normal; 56 | text-transform: none; 57 | text-shadow: none; 58 | word-wrap: break-word; } 59 | 60 | .reveal h1 { 61 | font-size: 3.77em; } 62 | 63 | .reveal h2 { 64 | font-size: 2.11em; } 65 | 66 | .reveal h3 { 67 | font-size: 1.55em; } 68 | 69 | .reveal h4 { 70 | font-size: 1em; } 71 | 72 | .reveal h1 { 73 | text-shadow: none; } 74 | 75 | /********************************************* 76 | * OTHER 77 | *********************************************/ 78 | .reveal p { 79 | margin: 20px 0; 80 | line-height: 1.3; } 81 | 82 | /* Ensure certain elements are never larger than the slide itself */ 83 | .reveal img, 84 | .reveal video, 85 | .reveal iframe { 86 | max-width: 95%; 87 | max-height: 95%; } 88 | 89 | .reveal strong, 90 | .reveal b { 91 | font-weight: bold; } 92 | 93 | .reveal em { 94 | font-style: italic; } 95 | 96 | .reveal ol, 97 | .reveal dl, 98 | .reveal ul { 99 | display: inline-block; 100 | text-align: left; 101 | margin: 0 0 0 1em; } 102 | 103 | .reveal ol { 104 | list-style-type: decimal; } 105 | 106 | .reveal ul { 107 | list-style-type: disc; } 108 | 109 | .reveal ul ul { 110 | list-style-type: square; } 111 | 112 | .reveal ul ul ul { 113 | list-style-type: circle; } 114 | 115 | .reveal ul ul, 116 | .reveal ul ol, 117 | .reveal ol ol, 118 | .reveal ol ul { 119 | display: block; 120 | margin-left: 40px; } 121 | 122 | .reveal dt { 123 | font-weight: bold; } 124 | 125 | .reveal dd { 126 | margin-left: 40px; } 127 | 128 | .reveal blockquote { 129 | display: block; 130 | position: relative; 131 | width: 70%; 132 | margin: 20px auto; 133 | padding: 5px; 134 | font-style: italic; 135 | background: rgba(255, 255, 255, 0.05); 136 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } 137 | 138 | .reveal blockquote p:first-child, 139 | .reveal blockquote p:last-child { 140 | display: inline-block; } 141 | 142 | .reveal q { 143 | font-style: italic; } 144 | 145 | .reveal pre { 146 | display: block; 147 | position: relative; 148 | width: 90%; 149 | margin: 20px auto; 150 | text-align: left; 151 | font-size: 0.55em; 152 | font-family: monospace; 153 | line-height: 1.2em; 154 | word-wrap: break-word; 155 | box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } 156 | 157 | .reveal code { 158 | font-family: monospace; 159 | text-transform: none; } 160 | 161 | .reveal pre code { 162 | display: block; 163 | padding: 5px; 164 | overflow: auto; 165 | max-height: 400px; 166 | word-wrap: normal; } 167 | 168 | .reveal table { 169 | margin: auto; 170 | border-collapse: collapse; 171 | border-spacing: 0; } 172 | 173 | .reveal table th { 174 | font-weight: bold; } 175 | 176 | .reveal table th, 177 | .reveal table td { 178 | text-align: left; 179 | padding: 0.2em 0.5em 0.2em 0.5em; 180 | border-bottom: 1px solid; } 181 | 182 | .reveal table th[align="center"], 183 | .reveal table td[align="center"] { 184 | text-align: center; } 185 | 186 | .reveal table th[align="right"], 187 | .reveal table td[align="right"] { 188 | text-align: right; } 189 | 190 | .reveal table tbody tr:last-child th, 191 | .reveal table tbody tr:last-child td { 192 | border-bottom: none; } 193 | 194 | .reveal sup { 195 | vertical-align: super; 196 | font-size: smaller; } 197 | 198 | .reveal sub { 199 | vertical-align: sub; 200 | font-size: smaller; } 201 | 202 | .reveal small { 203 | display: inline-block; 204 | font-size: 0.6em; 205 | line-height: 1.2em; 206 | vertical-align: top; } 207 | 208 | .reveal small * { 209 | vertical-align: top; } 210 | 211 | /********************************************* 212 | * LINKS 213 | *********************************************/ 214 | .reveal a { 215 | color: #00008B; 216 | text-decoration: none; 217 | -webkit-transition: color .15s ease; 218 | -moz-transition: color .15s ease; 219 | transition: color .15s ease; } 220 | 221 | .reveal a:hover { 222 | color: #0000f1; 223 | text-shadow: none; 224 | border: none; } 225 | 226 | .reveal .roll span:after { 227 | color: #fff; 228 | background: #00003f; } 229 | 230 | /********************************************* 231 | * IMAGES 232 | *********************************************/ 233 | .reveal section img { 234 | margin: 15px 0px; 235 | background: rgba(255, 255, 255, 0.12); 236 | border: 4px solid #000; 237 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } 238 | 239 | .reveal section img.plain { 240 | border: 0; 241 | box-shadow: none; } 242 | 243 | .reveal a img { 244 | -webkit-transition: all .15s linear; 245 | -moz-transition: all .15s linear; 246 | transition: all .15s linear; } 247 | 248 | .reveal a:hover img { 249 | background: rgba(255, 255, 255, 0.2); 250 | border-color: #00008B; 251 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 252 | 253 | /********************************************* 254 | * NAVIGATION CONTROLS 255 | *********************************************/ 256 | .reveal .controls { 257 | color: #00008B; } 258 | 259 | /********************************************* 260 | * PROGRESS BAR 261 | *********************************************/ 262 | .reveal .progress { 263 | background: rgba(0, 0, 0, 0.2); 264 | color: #00008B; } 265 | 266 | .reveal .progress span { 267 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 268 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 269 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 270 | 271 | /********************************************* 272 | * PRINT BACKGROUND 273 | *********************************************/ 274 | @media print { 275 | .backgrounds { 276 | background-color: #fff; } } 277 | -------------------------------------------------------------------------------- /slides/lib/css/theme/sky.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Sky theme for reveal.js. 3 | * 4 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 5 | */ 6 | @import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); 7 | @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); 8 | .reveal a { 9 | line-height: 1.3em; } 10 | 11 | /********************************************* 12 | * GLOBAL STYLES 13 | *********************************************/ 14 | body { 15 | background: #add9e4; 16 | background: -moz-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); 17 | background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #f7fbfc), color-stop(100%, #add9e4)); 18 | background: -webkit-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); 19 | background: -o-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); 20 | background: -ms-radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); 21 | background: radial-gradient(center, circle cover, #f7fbfc 0%, #add9e4 100%); 22 | background-color: #f7fbfc; } 23 | 24 | .reveal { 25 | font-family: "Open Sans", sans-serif; 26 | font-size: 40px; 27 | font-weight: normal; 28 | color: #333; } 29 | 30 | ::selection { 31 | color: #fff; 32 | background: #134674; 33 | text-shadow: none; } 34 | 35 | ::-moz-selection { 36 | color: #fff; 37 | background: #134674; 38 | text-shadow: none; } 39 | 40 | .reveal .slides section, 41 | .reveal .slides section > section { 42 | line-height: 1.3; 43 | font-weight: inherit; } 44 | 45 | /********************************************* 46 | * HEADERS 47 | *********************************************/ 48 | .reveal h1, 49 | .reveal h2, 50 | .reveal h3, 51 | .reveal h4, 52 | .reveal h5, 53 | .reveal h6 { 54 | margin: 0 0 20px 0; 55 | color: #333; 56 | font-family: "Quicksand", sans-serif; 57 | font-weight: normal; 58 | line-height: 1.2; 59 | letter-spacing: -0.08em; 60 | text-transform: uppercase; 61 | text-shadow: none; 62 | word-wrap: break-word; } 63 | 64 | .reveal h1 { 65 | font-size: 3.77em; } 66 | 67 | .reveal h2 { 68 | font-size: 2.11em; } 69 | 70 | .reveal h3 { 71 | font-size: 1.55em; } 72 | 73 | .reveal h4 { 74 | font-size: 1em; } 75 | 76 | .reveal h1 { 77 | text-shadow: none; } 78 | 79 | /********************************************* 80 | * OTHER 81 | *********************************************/ 82 | .reveal p { 83 | margin: 20px 0; 84 | line-height: 1.3; } 85 | 86 | /* Ensure certain elements are never larger than the slide itself */ 87 | .reveal img, 88 | .reveal video, 89 | .reveal iframe { 90 | max-width: 95%; 91 | max-height: 95%; } 92 | 93 | .reveal strong, 94 | .reveal b { 95 | font-weight: bold; } 96 | 97 | .reveal em { 98 | font-style: italic; } 99 | 100 | .reveal ol, 101 | .reveal dl, 102 | .reveal ul { 103 | display: inline-block; 104 | text-align: left; 105 | margin: 0 0 0 1em; } 106 | 107 | .reveal ol { 108 | list-style-type: decimal; } 109 | 110 | .reveal ul { 111 | list-style-type: disc; } 112 | 113 | .reveal ul ul { 114 | list-style-type: square; } 115 | 116 | .reveal ul ul ul { 117 | list-style-type: circle; } 118 | 119 | .reveal ul ul, 120 | .reveal ul ol, 121 | .reveal ol ol, 122 | .reveal ol ul { 123 | display: block; 124 | margin-left: 40px; } 125 | 126 | .reveal dt { 127 | font-weight: bold; } 128 | 129 | .reveal dd { 130 | margin-left: 40px; } 131 | 132 | .reveal blockquote { 133 | display: block; 134 | position: relative; 135 | width: 70%; 136 | margin: 20px auto; 137 | padding: 5px; 138 | font-style: italic; 139 | background: rgba(255, 255, 255, 0.05); 140 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } 141 | 142 | .reveal blockquote p:first-child, 143 | .reveal blockquote p:last-child { 144 | display: inline-block; } 145 | 146 | .reveal q { 147 | font-style: italic; } 148 | 149 | .reveal pre { 150 | display: block; 151 | position: relative; 152 | width: 90%; 153 | margin: 20px auto; 154 | text-align: left; 155 | font-size: 0.55em; 156 | font-family: monospace; 157 | line-height: 1.2em; 158 | word-wrap: break-word; 159 | box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } 160 | 161 | .reveal code { 162 | font-family: monospace; 163 | text-transform: none; } 164 | 165 | .reveal pre code { 166 | display: block; 167 | padding: 5px; 168 | overflow: auto; 169 | max-height: 400px; 170 | word-wrap: normal; } 171 | 172 | .reveal table { 173 | margin: auto; 174 | border-collapse: collapse; 175 | border-spacing: 0; } 176 | 177 | .reveal table th { 178 | font-weight: bold; } 179 | 180 | .reveal table th, 181 | .reveal table td { 182 | text-align: left; 183 | padding: 0.2em 0.5em 0.2em 0.5em; 184 | border-bottom: 1px solid; } 185 | 186 | .reveal table th[align="center"], 187 | .reveal table td[align="center"] { 188 | text-align: center; } 189 | 190 | .reveal table th[align="right"], 191 | .reveal table td[align="right"] { 192 | text-align: right; } 193 | 194 | .reveal table tbody tr:last-child th, 195 | .reveal table tbody tr:last-child td { 196 | border-bottom: none; } 197 | 198 | .reveal sup { 199 | vertical-align: super; 200 | font-size: smaller; } 201 | 202 | .reveal sub { 203 | vertical-align: sub; 204 | font-size: smaller; } 205 | 206 | .reveal small { 207 | display: inline-block; 208 | font-size: 0.6em; 209 | line-height: 1.2em; 210 | vertical-align: top; } 211 | 212 | .reveal small * { 213 | vertical-align: top; } 214 | 215 | /********************************************* 216 | * LINKS 217 | *********************************************/ 218 | .reveal a { 219 | color: #3b759e; 220 | text-decoration: none; 221 | -webkit-transition: color .15s ease; 222 | -moz-transition: color .15s ease; 223 | transition: color .15s ease; } 224 | 225 | .reveal a:hover { 226 | color: #74a7cb; 227 | text-shadow: none; 228 | border: none; } 229 | 230 | .reveal .roll span:after { 231 | color: #fff; 232 | background: #264c66; } 233 | 234 | /********************************************* 235 | * IMAGES 236 | *********************************************/ 237 | .reveal section img { 238 | margin: 15px 0px; 239 | background: rgba(255, 255, 255, 0.12); 240 | border: 4px solid #333; 241 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } 242 | 243 | .reveal section img.plain { 244 | border: 0; 245 | box-shadow: none; } 246 | 247 | .reveal a img { 248 | -webkit-transition: all .15s linear; 249 | -moz-transition: all .15s linear; 250 | transition: all .15s linear; } 251 | 252 | .reveal a:hover img { 253 | background: rgba(255, 255, 255, 0.2); 254 | border-color: #3b759e; 255 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 256 | 257 | /********************************************* 258 | * NAVIGATION CONTROLS 259 | *********************************************/ 260 | .reveal .controls { 261 | color: #3b759e; } 262 | 263 | /********************************************* 264 | * PROGRESS BAR 265 | *********************************************/ 266 | .reveal .progress { 267 | background: rgba(0, 0, 0, 0.2); 268 | color: #3b759e; } 269 | 270 | .reveal .progress span { 271 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 272 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 273 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 274 | 275 | /********************************************* 276 | * PRINT BACKGROUND 277 | *********************************************/ 278 | @media print { 279 | .backgrounds { 280 | background-color: #f7fbfc; } } 281 | -------------------------------------------------------------------------------- /slides/lib/css/theme/solarized.css: -------------------------------------------------------------------------------- 1 | /** 2 | * Solarized Light theme for reveal.js. 3 | * Author: Achim Staebler 4 | */ 5 | @import url(../../lib/font/league-gothic/league-gothic.css); 6 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 7 | /** 8 | * Solarized colors by Ethan Schoonover 9 | */ 10 | html * { 11 | color-profile: sRGB; 12 | rendering-intent: auto; } 13 | 14 | /********************************************* 15 | * GLOBAL STYLES 16 | *********************************************/ 17 | body { 18 | background: #fdf6e3; 19 | background-color: #fdf6e3; } 20 | 21 | .reveal { 22 | font-family: "Lato", sans-serif; 23 | font-size: 40px; 24 | font-weight: normal; 25 | color: #657b83; } 26 | 27 | ::selection { 28 | color: #fff; 29 | background: #d33682; 30 | text-shadow: none; } 31 | 32 | ::-moz-selection { 33 | color: #fff; 34 | background: #d33682; 35 | text-shadow: none; } 36 | 37 | .reveal .slides section, 38 | .reveal .slides section > section { 39 | line-height: 1.3; 40 | font-weight: inherit; } 41 | 42 | /********************************************* 43 | * HEADERS 44 | *********************************************/ 45 | .reveal h1, 46 | .reveal h2, 47 | .reveal h3, 48 | .reveal h4, 49 | .reveal h5, 50 | .reveal h6 { 51 | margin: 0 0 20px 0; 52 | color: #586e75; 53 | font-family: "League Gothic", Impact, sans-serif; 54 | font-weight: normal; 55 | line-height: 1.2; 56 | letter-spacing: normal; 57 | text-transform: uppercase; 58 | text-shadow: none; 59 | word-wrap: break-word; } 60 | 61 | .reveal h1 { 62 | font-size: 3.77em; } 63 | 64 | .reveal h2 { 65 | font-size: 2.11em; } 66 | 67 | .reveal h3 { 68 | font-size: 1.55em; } 69 | 70 | .reveal h4 { 71 | font-size: 1em; } 72 | 73 | .reveal h1 { 74 | text-shadow: none; } 75 | 76 | /********************************************* 77 | * OTHER 78 | *********************************************/ 79 | .reveal p { 80 | margin: 20px 0; 81 | line-height: 1.3; } 82 | 83 | /* Ensure certain elements are never larger than the slide itself */ 84 | .reveal img, 85 | .reveal video, 86 | .reveal iframe { 87 | max-width: 95%; 88 | max-height: 95%; } 89 | 90 | .reveal strong, 91 | .reveal b { 92 | font-weight: bold; } 93 | 94 | .reveal em { 95 | font-style: italic; } 96 | 97 | .reveal ol, 98 | .reveal dl, 99 | .reveal ul { 100 | display: inline-block; 101 | text-align: left; 102 | margin: 0 0 0 1em; } 103 | 104 | .reveal ol { 105 | list-style-type: decimal; } 106 | 107 | .reveal ul { 108 | list-style-type: disc; } 109 | 110 | .reveal ul ul { 111 | list-style-type: square; } 112 | 113 | .reveal ul ul ul { 114 | list-style-type: circle; } 115 | 116 | .reveal ul ul, 117 | .reveal ul ol, 118 | .reveal ol ol, 119 | .reveal ol ul { 120 | display: block; 121 | margin-left: 40px; } 122 | 123 | .reveal dt { 124 | font-weight: bold; } 125 | 126 | .reveal dd { 127 | margin-left: 40px; } 128 | 129 | .reveal blockquote { 130 | display: block; 131 | position: relative; 132 | width: 70%; 133 | margin: 20px auto; 134 | padding: 5px; 135 | font-style: italic; 136 | background: rgba(255, 255, 255, 0.05); 137 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } 138 | 139 | .reveal blockquote p:first-child, 140 | .reveal blockquote p:last-child { 141 | display: inline-block; } 142 | 143 | .reveal q { 144 | font-style: italic; } 145 | 146 | .reveal pre { 147 | display: block; 148 | position: relative; 149 | width: 90%; 150 | margin: 20px auto; 151 | text-align: left; 152 | font-size: 0.55em; 153 | font-family: monospace; 154 | line-height: 1.2em; 155 | word-wrap: break-word; 156 | box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } 157 | 158 | .reveal code { 159 | font-family: monospace; 160 | text-transform: none; } 161 | 162 | .reveal pre code { 163 | display: block; 164 | padding: 5px; 165 | overflow: auto; 166 | max-height: 400px; 167 | word-wrap: normal; } 168 | 169 | .reveal table { 170 | margin: auto; 171 | border-collapse: collapse; 172 | border-spacing: 0; } 173 | 174 | .reveal table th { 175 | font-weight: bold; } 176 | 177 | .reveal table th, 178 | .reveal table td { 179 | text-align: left; 180 | padding: 0.2em 0.5em 0.2em 0.5em; 181 | border-bottom: 1px solid; } 182 | 183 | .reveal table th[align="center"], 184 | .reveal table td[align="center"] { 185 | text-align: center; } 186 | 187 | .reveal table th[align="right"], 188 | .reveal table td[align="right"] { 189 | text-align: right; } 190 | 191 | .reveal table tbody tr:last-child th, 192 | .reveal table tbody tr:last-child td { 193 | border-bottom: none; } 194 | 195 | .reveal sup { 196 | vertical-align: super; 197 | font-size: smaller; } 198 | 199 | .reveal sub { 200 | vertical-align: sub; 201 | font-size: smaller; } 202 | 203 | .reveal small { 204 | display: inline-block; 205 | font-size: 0.6em; 206 | line-height: 1.2em; 207 | vertical-align: top; } 208 | 209 | .reveal small * { 210 | vertical-align: top; } 211 | 212 | /********************************************* 213 | * LINKS 214 | *********************************************/ 215 | .reveal a { 216 | color: #268bd2; 217 | text-decoration: none; 218 | -webkit-transition: color .15s ease; 219 | -moz-transition: color .15s ease; 220 | transition: color .15s ease; } 221 | 222 | .reveal a:hover { 223 | color: #78b9e6; 224 | text-shadow: none; 225 | border: none; } 226 | 227 | .reveal .roll span:after { 228 | color: #fff; 229 | background: #1a6091; } 230 | 231 | /********************************************* 232 | * IMAGES 233 | *********************************************/ 234 | .reveal section img { 235 | margin: 15px 0px; 236 | background: rgba(255, 255, 255, 0.12); 237 | border: 4px solid #657b83; 238 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } 239 | 240 | .reveal section img.plain { 241 | border: 0; 242 | box-shadow: none; } 243 | 244 | .reveal a img { 245 | -webkit-transition: all .15s linear; 246 | -moz-transition: all .15s linear; 247 | transition: all .15s linear; } 248 | 249 | .reveal a:hover img { 250 | background: rgba(255, 255, 255, 0.2); 251 | border-color: #268bd2; 252 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 253 | 254 | /********************************************* 255 | * NAVIGATION CONTROLS 256 | *********************************************/ 257 | .reveal .controls { 258 | color: #268bd2; } 259 | 260 | /********************************************* 261 | * PROGRESS BAR 262 | *********************************************/ 263 | .reveal .progress { 264 | background: rgba(0, 0, 0, 0.2); 265 | color: #268bd2; } 266 | 267 | .reveal .progress span { 268 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 269 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 270 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 271 | 272 | /********************************************* 273 | * PRINT BACKGROUND 274 | *********************************************/ 275 | @media print { 276 | .backgrounds { 277 | background-color: #fdf6e3; } } 278 | -------------------------------------------------------------------------------- /slides/lib/css/theme/source/beige.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Beige theme for reveal.js. 3 | * 4 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 5 | */ 6 | 7 | 8 | // Default mixins and settings ----------------- 9 | @import "../template/mixins"; 10 | @import "../template/settings"; 11 | // --------------------------------------------- 12 | 13 | 14 | 15 | // Include theme-specific fonts 16 | @import url(../../lib/font/league-gothic/league-gothic.css); 17 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 18 | 19 | 20 | // Override theme settings (see ../template/settings.scss) 21 | $mainColor: #333; 22 | $headingColor: #333; 23 | $headingTextShadow: none; 24 | $backgroundColor: #f7f3de; 25 | $linkColor: #8b743d; 26 | $linkColorHover: lighten( $linkColor, 20% ); 27 | $selectionBackgroundColor: rgba(79, 64, 28, 0.99); 28 | $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); 29 | 30 | // Background generator 31 | @mixin bodyBackground() { 32 | @include radial-gradient( rgba(247,242,211,1), rgba(255,255,255,1) ); 33 | } 34 | 35 | 36 | 37 | // Theme template ------------------------------ 38 | @import "../template/theme"; 39 | // --------------------------------------------- -------------------------------------------------------------------------------- /slides/lib/css/theme/source/black.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Black theme for reveal.js. This is the opposite of the 'white' theme. 3 | * 4 | * By Hakim El Hattab, http://hakim.se 5 | */ 6 | 7 | 8 | // Default mixins and settings ----------------- 9 | @import "../template/mixins"; 10 | @import "../template/settings"; 11 | // --------------------------------------------- 12 | 13 | 14 | // Include theme-specific fonts 15 | @import url(../../lib/font/source-sans-pro/source-sans-pro.css); 16 | 17 | 18 | // Override theme settings (see ../template/settings.scss) 19 | $backgroundColor: #191919; 20 | 21 | $mainColor: #fff; 22 | $headingColor: #fff; 23 | 24 | $mainFontSize: 42px; 25 | $mainFont: 'Source Sans Pro', Helvetica, sans-serif; 26 | $headingFont: 'Source Sans Pro', Helvetica, sans-serif; 27 | $headingTextShadow: none; 28 | $headingLetterSpacing: normal; 29 | $headingTextTransform: uppercase; 30 | $headingFontWeight: 600; 31 | $linkColor: #42affa; 32 | $linkColorHover: lighten( $linkColor, 15% ); 33 | $selectionBackgroundColor: lighten( $linkColor, 25% ); 34 | 35 | $heading1Size: 2.5em; 36 | $heading2Size: 1.6em; 37 | $heading3Size: 1.3em; 38 | $heading4Size: 1.0em; 39 | 40 | section.has-light-background { 41 | &, h1, h2, h3, h4, h5, h6 { 42 | color: #222; 43 | } 44 | } 45 | 46 | 47 | // Theme template ------------------------------ 48 | @import "../template/theme"; 49 | // --------------------------------------------- -------------------------------------------------------------------------------- /slides/lib/css/theme/source/blood.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Blood theme for reveal.js 3 | * Author: Walther http://github.com/Walther 4 | * 5 | * Designed to be used with highlight.js theme 6 | * "monokai_sublime.css" available from 7 | * https://github.com/isagalaev/highlight.js/ 8 | * 9 | * For other themes, change $codeBackground accordingly. 10 | * 11 | */ 12 | 13 | // Default mixins and settings ----------------- 14 | @import "../template/mixins"; 15 | @import "../template/settings"; 16 | // --------------------------------------------- 17 | 18 | // Include theme-specific fonts 19 | 20 | @import url(https://fonts.googleapis.com/css?family=Ubuntu:300,700,300italic,700italic); 21 | 22 | // Colors used in the theme 23 | $blood: #a23; 24 | $coal: #222; 25 | $codeBackground: #23241f; 26 | 27 | $backgroundColor: $coal; 28 | 29 | // Main text 30 | $mainFont: Ubuntu, 'sans-serif'; 31 | $mainColor: #eee; 32 | 33 | // Headings 34 | $headingFont: Ubuntu, 'sans-serif'; 35 | $headingTextShadow: 2px 2px 2px $coal; 36 | 37 | // h1 shadow, borrowed humbly from 38 | // (c) Default theme by Hakim El Hattab 39 | $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); 40 | 41 | // Links 42 | $linkColor: $blood; 43 | $linkColorHover: lighten( $linkColor, 20% ); 44 | 45 | // Text selection 46 | $selectionBackgroundColor: $blood; 47 | $selectionColor: #fff; 48 | 49 | 50 | // Theme template ------------------------------ 51 | @import "../template/theme"; 52 | // --------------------------------------------- 53 | 54 | // some overrides after theme template import 55 | 56 | .reveal p { 57 | font-weight: 300; 58 | text-shadow: 1px 1px $coal; 59 | } 60 | 61 | .reveal h1, 62 | .reveal h2, 63 | .reveal h3, 64 | .reveal h4, 65 | .reveal h5, 66 | .reveal h6 { 67 | font-weight: 700; 68 | } 69 | 70 | .reveal p code { 71 | background-color: $codeBackground; 72 | display: inline-block; 73 | border-radius: 7px; 74 | } 75 | 76 | .reveal small code { 77 | vertical-align: baseline; 78 | } -------------------------------------------------------------------------------- /slides/lib/css/theme/source/league.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * League theme for reveal.js. 3 | * 4 | * This was the default theme pre-3.0.0. 5 | * 6 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 7 | */ 8 | 9 | 10 | // Default mixins and settings ----------------- 11 | @import "../template/mixins"; 12 | @import "../template/settings"; 13 | // --------------------------------------------- 14 | 15 | 16 | 17 | // Include theme-specific fonts 18 | @import url(../../lib/font/league-gothic/league-gothic.css); 19 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 20 | 21 | // Override theme settings (see ../template/settings.scss) 22 | $headingTextShadow: 0px 0px 6px rgba(0,0,0,0.2); 23 | $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); 24 | 25 | // Background generator 26 | @mixin bodyBackground() { 27 | @include radial-gradient( rgba(28,30,32,1), rgba(85,90,95,1) ); 28 | } 29 | 30 | 31 | 32 | // Theme template ------------------------------ 33 | @import "../template/theme"; 34 | // --------------------------------------------- -------------------------------------------------------------------------------- /slides/lib/css/theme/source/moon.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Solarized Dark theme for reveal.js. 3 | * Author: Achim Staebler 4 | */ 5 | 6 | 7 | // Default mixins and settings ----------------- 8 | @import "../template/mixins"; 9 | @import "../template/settings"; 10 | // --------------------------------------------- 11 | 12 | 13 | 14 | // Include theme-specific fonts 15 | @import url(../../lib/font/league-gothic/league-gothic.css); 16 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 17 | 18 | /** 19 | * Solarized colors by Ethan Schoonover 20 | */ 21 | html * { 22 | color-profile: sRGB; 23 | rendering-intent: auto; 24 | } 25 | 26 | // Solarized colors 27 | $base03: #002b36; 28 | $base02: #073642; 29 | $base01: #586e75; 30 | $base00: #657b83; 31 | $base0: #839496; 32 | $base1: #93a1a1; 33 | $base2: #eee8d5; 34 | $base3: #fdf6e3; 35 | $yellow: #b58900; 36 | $orange: #cb4b16; 37 | $red: #dc322f; 38 | $magenta: #d33682; 39 | $violet: #6c71c4; 40 | $blue: #268bd2; 41 | $cyan: #2aa198; 42 | $green: #859900; 43 | 44 | // Override theme settings (see ../template/settings.scss) 45 | $mainColor: $base1; 46 | $headingColor: $base2; 47 | $headingTextShadow: none; 48 | $backgroundColor: $base03; 49 | $linkColor: $blue; 50 | $linkColorHover: lighten( $linkColor, 20% ); 51 | $selectionBackgroundColor: $magenta; 52 | 53 | 54 | 55 | // Theme template ------------------------------ 56 | @import "../template/theme"; 57 | // --------------------------------------------- 58 | -------------------------------------------------------------------------------- /slides/lib/css/theme/source/night.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Black theme for reveal.js. 3 | * 4 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 5 | */ 6 | 7 | 8 | // Default mixins and settings ----------------- 9 | @import "../template/mixins"; 10 | @import "../template/settings"; 11 | // --------------------------------------------- 12 | 13 | 14 | // Include theme-specific fonts 15 | @import url(https://fonts.googleapis.com/css?family=Montserrat:700); 16 | @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic,700italic); 17 | 18 | 19 | // Override theme settings (see ../template/settings.scss) 20 | $backgroundColor: #111; 21 | 22 | $mainFont: 'Open Sans', sans-serif; 23 | $linkColor: #e7ad52; 24 | $linkColorHover: lighten( $linkColor, 20% ); 25 | $headingFont: 'Montserrat', Impact, sans-serif; 26 | $headingTextShadow: none; 27 | $headingLetterSpacing: -0.03em; 28 | $headingTextTransform: none; 29 | $selectionBackgroundColor: #e7ad52; 30 | 31 | 32 | // Theme template ------------------------------ 33 | @import "../template/theme"; 34 | // --------------------------------------------- -------------------------------------------------------------------------------- /slides/lib/css/theme/source/serif.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * A simple theme for reveal.js presentations, similar 3 | * to the default theme. The accent color is brown. 4 | * 5 | * This theme is Copyright (C) 2012-2013 Owen Versteeg, http://owenversteeg.com - it is MIT licensed. 6 | */ 7 | 8 | 9 | // Default mixins and settings ----------------- 10 | @import "../template/mixins"; 11 | @import "../template/settings"; 12 | // --------------------------------------------- 13 | 14 | 15 | 16 | // Override theme settings (see ../template/settings.scss) 17 | $mainFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; 18 | $mainColor: #000; 19 | $headingFont: 'Palatino Linotype', 'Book Antiqua', Palatino, FreeSerif, serif; 20 | $headingColor: #383D3D; 21 | $headingTextShadow: none; 22 | $headingTextTransform: none; 23 | $backgroundColor: #F0F1EB; 24 | $linkColor: #51483D; 25 | $linkColorHover: lighten( $linkColor, 20% ); 26 | $selectionBackgroundColor: #26351C; 27 | 28 | .reveal a { 29 | line-height: 1.3em; 30 | } 31 | 32 | 33 | // Theme template ------------------------------ 34 | @import "../template/theme"; 35 | // --------------------------------------------- 36 | -------------------------------------------------------------------------------- /slides/lib/css/theme/source/simple.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * A simple theme for reveal.js presentations, similar 3 | * to the default theme. The accent color is darkblue. 4 | * 5 | * This theme is Copyright (C) 2012 Owen Versteeg, https://github.com/StereotypicalApps. It is MIT licensed. 6 | * reveal.js is Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 7 | */ 8 | 9 | 10 | // Default mixins and settings ----------------- 11 | @import "../template/mixins"; 12 | @import "../template/settings"; 13 | // --------------------------------------------- 14 | 15 | 16 | 17 | // Include theme-specific fonts 18 | @import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700); 19 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 20 | 21 | 22 | // Override theme settings (see ../template/settings.scss) 23 | $mainFont: 'Lato', sans-serif; 24 | $mainColor: #000; 25 | $headingFont: 'News Cycle', Impact, sans-serif; 26 | $headingColor: #000; 27 | $headingTextShadow: none; 28 | $headingTextTransform: none; 29 | $backgroundColor: #fff; 30 | $linkColor: #00008B; 31 | $linkColorHover: lighten( $linkColor, 20% ); 32 | $selectionBackgroundColor: rgba(0, 0, 0, 0.99); 33 | 34 | section.has-dark-background { 35 | &, h1, h2, h3, h4, h5, h6 { 36 | color: #fff; 37 | } 38 | } 39 | 40 | 41 | // Theme template ------------------------------ 42 | @import "../template/theme"; 43 | // --------------------------------------------- -------------------------------------------------------------------------------- /slides/lib/css/theme/source/sky.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Sky theme for reveal.js. 3 | * 4 | * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se 5 | */ 6 | 7 | 8 | // Default mixins and settings ----------------- 9 | @import "../template/mixins"; 10 | @import "../template/settings"; 11 | // --------------------------------------------- 12 | 13 | 14 | 15 | // Include theme-specific fonts 16 | @import url(https://fonts.googleapis.com/css?family=Quicksand:400,700,400italic,700italic); 17 | @import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700); 18 | 19 | 20 | // Override theme settings (see ../template/settings.scss) 21 | $mainFont: 'Open Sans', sans-serif; 22 | $mainColor: #333; 23 | $headingFont: 'Quicksand', sans-serif; 24 | $headingColor: #333; 25 | $headingLetterSpacing: -0.08em; 26 | $headingTextShadow: none; 27 | $backgroundColor: #f7fbfc; 28 | $linkColor: #3b759e; 29 | $linkColorHover: lighten( $linkColor, 20% ); 30 | $selectionBackgroundColor: #134674; 31 | 32 | // Fix links so they are not cut off 33 | .reveal a { 34 | line-height: 1.3em; 35 | } 36 | 37 | // Background generator 38 | @mixin bodyBackground() { 39 | @include radial-gradient( #add9e4, #f7fbfc ); 40 | } 41 | 42 | 43 | 44 | // Theme template ------------------------------ 45 | @import "../template/theme"; 46 | // --------------------------------------------- 47 | -------------------------------------------------------------------------------- /slides/lib/css/theme/source/solarized.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * Solarized Light theme for reveal.js. 3 | * Author: Achim Staebler 4 | */ 5 | 6 | 7 | // Default mixins and settings ----------------- 8 | @import "../template/mixins"; 9 | @import "../template/settings"; 10 | // --------------------------------------------- 11 | 12 | 13 | 14 | // Include theme-specific fonts 15 | @import url(../../lib/font/league-gothic/league-gothic.css); 16 | @import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic); 17 | 18 | 19 | /** 20 | * Solarized colors by Ethan Schoonover 21 | */ 22 | html * { 23 | color-profile: sRGB; 24 | rendering-intent: auto; 25 | } 26 | 27 | // Solarized colors 28 | $base03: #002b36; 29 | $base02: #073642; 30 | $base01: #586e75; 31 | $base00: #657b83; 32 | $base0: #839496; 33 | $base1: #93a1a1; 34 | $base2: #eee8d5; 35 | $base3: #fdf6e3; 36 | $yellow: #b58900; 37 | $orange: #cb4b16; 38 | $red: #dc322f; 39 | $magenta: #d33682; 40 | $violet: #6c71c4; 41 | $blue: #268bd2; 42 | $cyan: #2aa198; 43 | $green: #859900; 44 | 45 | // Override theme settings (see ../template/settings.scss) 46 | $mainColor: $base00; 47 | $headingColor: $base01; 48 | $headingTextShadow: none; 49 | $backgroundColor: $base3; 50 | $linkColor: $blue; 51 | $linkColorHover: lighten( $linkColor, 20% ); 52 | $selectionBackgroundColor: $magenta; 53 | 54 | // Background generator 55 | // @mixin bodyBackground() { 56 | // @include radial-gradient( rgba($base3,1), rgba(lighten($base3, 20%),1) ); 57 | // } 58 | 59 | 60 | 61 | // Theme template ------------------------------ 62 | @import "../template/theme"; 63 | // --------------------------------------------- 64 | -------------------------------------------------------------------------------- /slides/lib/css/theme/source/white.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * White theme for reveal.js. This is the opposite of the 'black' theme. 3 | * 4 | * By Hakim El Hattab, http://hakim.se 5 | */ 6 | 7 | 8 | // Default mixins and settings ----------------- 9 | @import "../template/mixins"; 10 | @import "../template/settings"; 11 | // --------------------------------------------- 12 | 13 | 14 | // Include theme-specific fonts 15 | @import url(../../lib/font/source-sans-pro/source-sans-pro.css); 16 | 17 | 18 | // Override theme settings (see ../template/settings.scss) 19 | $backgroundColor: #fff; 20 | 21 | $mainColor: #222; 22 | $headingColor: #222; 23 | 24 | $mainFontSize: 42px; 25 | $mainFont: 'Source Sans Pro', Helvetica, sans-serif; 26 | $headingFont: 'Source Sans Pro', Helvetica, sans-serif; 27 | $headingTextShadow: none; 28 | $headingLetterSpacing: normal; 29 | $headingTextTransform: uppercase; 30 | $headingFontWeight: 600; 31 | $linkColor: #2a76dd; 32 | $linkColorHover: lighten( $linkColor, 15% ); 33 | $selectionBackgroundColor: lighten( $linkColor, 25% ); 34 | 35 | $heading1Size: 2.5em; 36 | $heading2Size: 1.6em; 37 | $heading3Size: 1.3em; 38 | $heading4Size: 1.0em; 39 | 40 | section.has-dark-background { 41 | &, h1, h2, h3, h4, h5, h6 { 42 | color: #fff; 43 | } 44 | } 45 | 46 | 47 | // Theme template ------------------------------ 48 | @import "../template/theme"; 49 | // --------------------------------------------- -------------------------------------------------------------------------------- /slides/lib/css/theme/template/mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin vertical-gradient( $top, $bottom ) { 2 | background: $top; 3 | background: -moz-linear-gradient( top, $top 0%, $bottom 100% ); 4 | background: -webkit-gradient( linear, left top, left bottom, color-stop(0%,$top), color-stop(100%,$bottom) ); 5 | background: -webkit-linear-gradient( top, $top 0%, $bottom 100% ); 6 | background: -o-linear-gradient( top, $top 0%, $bottom 100% ); 7 | background: -ms-linear-gradient( top, $top 0%, $bottom 100% ); 8 | background: linear-gradient( top, $top 0%, $bottom 100% ); 9 | } 10 | 11 | @mixin horizontal-gradient( $top, $bottom ) { 12 | background: $top; 13 | background: -moz-linear-gradient( left, $top 0%, $bottom 100% ); 14 | background: -webkit-gradient( linear, left top, right top, color-stop(0%,$top), color-stop(100%,$bottom) ); 15 | background: -webkit-linear-gradient( left, $top 0%, $bottom 100% ); 16 | background: -o-linear-gradient( left, $top 0%, $bottom 100% ); 17 | background: -ms-linear-gradient( left, $top 0%, $bottom 100% ); 18 | background: linear-gradient( left, $top 0%, $bottom 100% ); 19 | } 20 | 21 | @mixin radial-gradient( $outer, $inner, $type: circle ) { 22 | background: $outer; 23 | background: -moz-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 24 | background: -webkit-gradient( radial, center center, 0px, center center, 100%, color-stop(0%,$inner), color-stop(100%,$outer) ); 25 | background: -webkit-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 26 | background: -o-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 27 | background: -ms-radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 28 | background: radial-gradient( center, $type cover, $inner 0%, $outer 100% ); 29 | } -------------------------------------------------------------------------------- /slides/lib/css/theme/template/settings.scss: -------------------------------------------------------------------------------- 1 | // Base settings for all themes that can optionally be 2 | // overridden by the super-theme 3 | 4 | // Background of the presentation 5 | $backgroundColor: #2b2b2b; 6 | 7 | // Primary/body text 8 | $mainFont: 'Lato', sans-serif; 9 | $mainFontSize: 40px; 10 | $mainColor: #eee; 11 | 12 | // Vertical spacing between blocks of text 13 | $blockMargin: 20px; 14 | 15 | // Headings 16 | $headingMargin: 0 0 $blockMargin 0; 17 | $headingFont: 'League Gothic', Impact, sans-serif; 18 | $headingColor: #eee; 19 | $headingLineHeight: 1.2; 20 | $headingLetterSpacing: normal; 21 | $headingTextTransform: uppercase; 22 | $headingTextShadow: none; 23 | $headingFontWeight: normal; 24 | $heading1TextShadow: $headingTextShadow; 25 | 26 | $heading1Size: 3.77em; 27 | $heading2Size: 2.11em; 28 | $heading3Size: 1.55em; 29 | $heading4Size: 1.00em; 30 | 31 | $codeFont: monospace; 32 | 33 | // Links and actions 34 | $linkColor: #13DAEC; 35 | $linkColorHover: lighten( $linkColor, 20% ); 36 | 37 | // Text selection 38 | $selectionBackgroundColor: #FF5E99; 39 | $selectionColor: #fff; 40 | 41 | // Generates the presentation background, can be overridden 42 | // to return a background image or gradient 43 | @mixin bodyBackground() { 44 | background: $backgroundColor; 45 | } 46 | -------------------------------------------------------------------------------- /slides/lib/css/theme/template/theme.scss: -------------------------------------------------------------------------------- 1 | // Base theme template for reveal.js 2 | 3 | /********************************************* 4 | * GLOBAL STYLES 5 | *********************************************/ 6 | 7 | body { 8 | @include bodyBackground(); 9 | background-color: $backgroundColor; 10 | } 11 | 12 | .reveal { 13 | font-family: $mainFont; 14 | font-size: $mainFontSize; 15 | font-weight: normal; 16 | color: $mainColor; 17 | } 18 | 19 | ::selection { 20 | color: $selectionColor; 21 | background: $selectionBackgroundColor; 22 | text-shadow: none; 23 | } 24 | 25 | ::-moz-selection { 26 | color: $selectionColor; 27 | background: $selectionBackgroundColor; 28 | text-shadow: none; 29 | } 30 | 31 | .reveal .slides section, 32 | .reveal .slides section>section { 33 | line-height: 1.3; 34 | font-weight: inherit; 35 | } 36 | 37 | /********************************************* 38 | * HEADERS 39 | *********************************************/ 40 | 41 | .reveal h1, 42 | .reveal h2, 43 | .reveal h3, 44 | .reveal h4, 45 | .reveal h5, 46 | .reveal h6 { 47 | margin: $headingMargin; 48 | color: $headingColor; 49 | 50 | font-family: $headingFont; 51 | font-weight: $headingFontWeight; 52 | line-height: $headingLineHeight; 53 | letter-spacing: $headingLetterSpacing; 54 | 55 | text-transform: $headingTextTransform; 56 | text-shadow: $headingTextShadow; 57 | 58 | word-wrap: break-word; 59 | } 60 | 61 | .reveal h1 {font-size: $heading1Size; } 62 | .reveal h2 {font-size: $heading2Size; } 63 | .reveal h3 {font-size: $heading3Size; } 64 | .reveal h4 {font-size: $heading4Size; } 65 | 66 | .reveal h1 { 67 | text-shadow: $heading1TextShadow; 68 | } 69 | 70 | 71 | /********************************************* 72 | * OTHER 73 | *********************************************/ 74 | 75 | .reveal p { 76 | margin: $blockMargin 0; 77 | line-height: 1.3; 78 | } 79 | 80 | /* Ensure certain elements are never larger than the slide itself */ 81 | .reveal img, 82 | .reveal video, 83 | .reveal iframe { 84 | max-width: 95%; 85 | max-height: 95%; 86 | } 87 | .reveal strong, 88 | .reveal b { 89 | font-weight: bold; 90 | } 91 | 92 | .reveal em { 93 | font-style: italic; 94 | } 95 | 96 | .reveal ol, 97 | .reveal dl, 98 | .reveal ul { 99 | display: inline-block; 100 | 101 | text-align: left; 102 | margin: 0 0 0 1em; 103 | } 104 | 105 | .reveal ol { 106 | list-style-type: decimal; 107 | } 108 | 109 | .reveal ul { 110 | list-style-type: disc; 111 | } 112 | 113 | .reveal ul ul { 114 | list-style-type: square; 115 | } 116 | 117 | .reveal ul ul ul { 118 | list-style-type: circle; 119 | } 120 | 121 | .reveal ul ul, 122 | .reveal ul ol, 123 | .reveal ol ol, 124 | .reveal ol ul { 125 | display: block; 126 | margin-left: 40px; 127 | } 128 | 129 | .reveal dt { 130 | font-weight: bold; 131 | } 132 | 133 | .reveal dd { 134 | margin-left: 40px; 135 | } 136 | 137 | .reveal blockquote { 138 | display: block; 139 | position: relative; 140 | width: 70%; 141 | margin: $blockMargin auto; 142 | padding: 5px; 143 | 144 | font-style: italic; 145 | background: rgba(255, 255, 255, 0.05); 146 | box-shadow: 0px 0px 2px rgba(0,0,0,0.2); 147 | } 148 | .reveal blockquote p:first-child, 149 | .reveal blockquote p:last-child { 150 | display: inline-block; 151 | } 152 | 153 | .reveal q { 154 | font-style: italic; 155 | } 156 | 157 | .reveal pre { 158 | display: block; 159 | position: relative; 160 | width: 90%; 161 | margin: $blockMargin auto; 162 | 163 | text-align: left; 164 | font-size: 0.55em; 165 | font-family: $codeFont; 166 | line-height: 1.2em; 167 | 168 | word-wrap: break-word; 169 | 170 | box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); 171 | } 172 | 173 | .reveal code { 174 | font-family: $codeFont; 175 | text-transform: none; 176 | } 177 | 178 | .reveal pre code { 179 | display: block; 180 | padding: 5px; 181 | overflow: auto; 182 | max-height: 400px; 183 | word-wrap: normal; 184 | } 185 | 186 | .reveal table { 187 | margin: auto; 188 | border-collapse: collapse; 189 | border-spacing: 0; 190 | } 191 | 192 | .reveal table th { 193 | font-weight: bold; 194 | } 195 | 196 | .reveal table th, 197 | .reveal table td { 198 | text-align: left; 199 | padding: 0.2em 0.5em 0.2em 0.5em; 200 | border-bottom: 1px solid; 201 | } 202 | 203 | .reveal table th[align="center"], 204 | .reveal table td[align="center"] { 205 | text-align: center; 206 | } 207 | 208 | .reveal table th[align="right"], 209 | .reveal table td[align="right"] { 210 | text-align: right; 211 | } 212 | 213 | .reveal table tbody tr:last-child th, 214 | .reveal table tbody tr:last-child td { 215 | border-bottom: none; 216 | } 217 | 218 | .reveal sup { 219 | vertical-align: super; 220 | font-size: smaller; 221 | } 222 | .reveal sub { 223 | vertical-align: sub; 224 | font-size: smaller; 225 | } 226 | 227 | .reveal small { 228 | display: inline-block; 229 | font-size: 0.6em; 230 | line-height: 1.2em; 231 | vertical-align: top; 232 | } 233 | 234 | .reveal small * { 235 | vertical-align: top; 236 | } 237 | 238 | 239 | /********************************************* 240 | * LINKS 241 | *********************************************/ 242 | 243 | .reveal a { 244 | color: $linkColor; 245 | text-decoration: none; 246 | 247 | -webkit-transition: color .15s ease; 248 | -moz-transition: color .15s ease; 249 | transition: color .15s ease; 250 | } 251 | .reveal a:hover { 252 | color: $linkColorHover; 253 | 254 | text-shadow: none; 255 | border: none; 256 | } 257 | 258 | .reveal .roll span:after { 259 | color: #fff; 260 | background: darken( $linkColor, 15% ); 261 | } 262 | 263 | 264 | /********************************************* 265 | * IMAGES 266 | *********************************************/ 267 | 268 | .reveal section img { 269 | margin: 15px 0px; 270 | background: rgba(255,255,255,0.12); 271 | border: 4px solid $mainColor; 272 | 273 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); 274 | } 275 | 276 | .reveal section img.plain { 277 | border: 0; 278 | box-shadow: none; 279 | } 280 | 281 | .reveal a img { 282 | -webkit-transition: all .15s linear; 283 | -moz-transition: all .15s linear; 284 | transition: all .15s linear; 285 | } 286 | 287 | .reveal a:hover img { 288 | background: rgba(255,255,255,0.2); 289 | border-color: $linkColor; 290 | 291 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); 292 | } 293 | 294 | 295 | /********************************************* 296 | * NAVIGATION CONTROLS 297 | *********************************************/ 298 | 299 | .reveal .controls { 300 | color: $linkColor; 301 | } 302 | 303 | 304 | /********************************************* 305 | * PROGRESS BAR 306 | *********************************************/ 307 | 308 | .reveal .progress { 309 | background: rgba(0,0,0,0.2); 310 | color: $linkColor; 311 | } 312 | .reveal .progress span { 313 | -webkit-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 314 | -moz-transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 315 | transition: width 800ms cubic-bezier(0.260, 0.860, 0.440, 0.985); 316 | } 317 | 318 | /********************************************* 319 | * PRINT BACKGROUND 320 | *********************************************/ 321 | @media print { 322 | .backgrounds { 323 | background-color: $backgroundColor; 324 | } 325 | } 326 | -------------------------------------------------------------------------------- /slides/lib/css/theme/white.css: -------------------------------------------------------------------------------- 1 | /** 2 | * White theme for reveal.js. This is the opposite of the 'black' theme. 3 | * 4 | * By Hakim El Hattab, http://hakim.se 5 | */ 6 | @import url(../../lib/font/source-sans-pro/source-sans-pro.css); 7 | section.has-dark-background, section.has-dark-background h1, section.has-dark-background h2, section.has-dark-background h3, section.has-dark-background h4, section.has-dark-background h5, section.has-dark-background h6 { 8 | color: #fff; } 9 | 10 | /********************************************* 11 | * GLOBAL STYLES 12 | *********************************************/ 13 | body { 14 | background: #fff; 15 | background-color: #fff; } 16 | 17 | .reveal { 18 | font-family: "Source Sans Pro", Helvetica, sans-serif; 19 | font-size: 42px; 20 | font-weight: normal; 21 | color: #222; } 22 | 23 | ::selection { 24 | color: #fff; 25 | background: #98bdef; 26 | text-shadow: none; } 27 | 28 | ::-moz-selection { 29 | color: #fff; 30 | background: #98bdef; 31 | text-shadow: none; } 32 | 33 | .reveal .slides section, 34 | .reveal .slides section > section { 35 | line-height: 1.3; 36 | font-weight: inherit; } 37 | 38 | /********************************************* 39 | * HEADERS 40 | *********************************************/ 41 | .reveal h1, 42 | .reveal h2, 43 | .reveal h3, 44 | .reveal h4, 45 | .reveal h5, 46 | .reveal h6 { 47 | margin: 0 0 20px 0; 48 | color: #222; 49 | font-family: "Source Sans Pro", Helvetica, sans-serif; 50 | font-weight: 600; 51 | line-height: 1.2; 52 | letter-spacing: normal; 53 | text-transform: uppercase; 54 | text-shadow: none; 55 | word-wrap: break-word; } 56 | 57 | .reveal h1 { 58 | font-size: 2.5em; } 59 | 60 | .reveal h2 { 61 | font-size: 1.6em; } 62 | 63 | .reveal h3 { 64 | font-size: 1.3em; } 65 | 66 | .reveal h4 { 67 | font-size: 1em; } 68 | 69 | .reveal h1 { 70 | text-shadow: none; } 71 | 72 | /********************************************* 73 | * OTHER 74 | *********************************************/ 75 | .reveal p { 76 | margin: 20px 0; 77 | line-height: 1.3; } 78 | 79 | /* Ensure certain elements are never larger than the slide itself */ 80 | .reveal img, 81 | .reveal video, 82 | .reveal iframe { 83 | max-width: 95%; 84 | max-height: 95%; } 85 | 86 | .reveal strong, 87 | .reveal b { 88 | font-weight: bold; } 89 | 90 | .reveal em { 91 | font-style: italic; } 92 | 93 | .reveal ol, 94 | .reveal dl, 95 | .reveal ul { 96 | display: inline-block; 97 | text-align: left; 98 | margin: 0 0 0 1em; } 99 | 100 | .reveal ol { 101 | list-style-type: decimal; } 102 | 103 | .reveal ul { 104 | list-style-type: disc; } 105 | 106 | .reveal ul ul { 107 | list-style-type: square; } 108 | 109 | .reveal ul ul ul { 110 | list-style-type: circle; } 111 | 112 | .reveal ul ul, 113 | .reveal ul ol, 114 | .reveal ol ol, 115 | .reveal ol ul { 116 | display: block; 117 | margin-left: 40px; } 118 | 119 | .reveal dt { 120 | font-weight: bold; } 121 | 122 | .reveal dd { 123 | margin-left: 40px; } 124 | 125 | .reveal blockquote { 126 | display: block; 127 | position: relative; 128 | width: 70%; 129 | margin: 20px auto; 130 | padding: 5px; 131 | font-style: italic; 132 | background: rgba(255, 255, 255, 0.05); 133 | box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2); } 134 | 135 | .reveal blockquote p:first-child, 136 | .reveal blockquote p:last-child { 137 | display: inline-block; } 138 | 139 | .reveal q { 140 | font-style: italic; } 141 | 142 | .reveal pre { 143 | display: block; 144 | position: relative; 145 | width: 90%; 146 | margin: 20px auto; 147 | text-align: left; 148 | font-size: 0.55em; 149 | font-family: monospace; 150 | line-height: 1.2em; 151 | word-wrap: break-word; 152 | box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15); } 153 | 154 | .reveal code { 155 | font-family: monospace; 156 | text-transform: none; } 157 | 158 | .reveal pre code { 159 | display: block; 160 | padding: 5px; 161 | overflow: auto; 162 | max-height: 400px; 163 | word-wrap: normal; } 164 | 165 | .reveal table { 166 | margin: auto; 167 | border-collapse: collapse; 168 | border-spacing: 0; } 169 | 170 | .reveal table th { 171 | font-weight: bold; } 172 | 173 | .reveal table th, 174 | .reveal table td { 175 | text-align: left; 176 | padding: 0.2em 0.5em 0.2em 0.5em; 177 | border-bottom: 1px solid; } 178 | 179 | .reveal table th[align="center"], 180 | .reveal table td[align="center"] { 181 | text-align: center; } 182 | 183 | .reveal table th[align="right"], 184 | .reveal table td[align="right"] { 185 | text-align: right; } 186 | 187 | .reveal table tbody tr:last-child th, 188 | .reveal table tbody tr:last-child td { 189 | border-bottom: none; } 190 | 191 | .reveal sup { 192 | vertical-align: super; 193 | font-size: smaller; } 194 | 195 | .reveal sub { 196 | vertical-align: sub; 197 | font-size: smaller; } 198 | 199 | .reveal small { 200 | display: inline-block; 201 | font-size: 0.6em; 202 | line-height: 1.2em; 203 | vertical-align: top; } 204 | 205 | .reveal small * { 206 | vertical-align: top; } 207 | 208 | /********************************************* 209 | * LINKS 210 | *********************************************/ 211 | .reveal a { 212 | color: #2a76dd; 213 | text-decoration: none; 214 | -webkit-transition: color .15s ease; 215 | -moz-transition: color .15s ease; 216 | transition: color .15s ease; } 217 | 218 | .reveal a:hover { 219 | color: #6ca0e8; 220 | text-shadow: none; 221 | border: none; } 222 | 223 | .reveal .roll span:after { 224 | color: #fff; 225 | background: #1a53a1; } 226 | 227 | /********************************************* 228 | * IMAGES 229 | *********************************************/ 230 | .reveal section img { 231 | margin: 15px 0px; 232 | background: rgba(255, 255, 255, 0.12); 233 | border: 4px solid #222; 234 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); } 235 | 236 | .reveal section img.plain { 237 | border: 0; 238 | box-shadow: none; } 239 | 240 | .reveal a img { 241 | -webkit-transition: all .15s linear; 242 | -moz-transition: all .15s linear; 243 | transition: all .15s linear; } 244 | 245 | .reveal a:hover img { 246 | background: rgba(255, 255, 255, 0.2); 247 | border-color: #2a76dd; 248 | box-shadow: 0 0 20px rgba(0, 0, 0, 0.55); } 249 | 250 | /********************************************* 251 | * NAVIGATION CONTROLS 252 | *********************************************/ 253 | .reveal .controls { 254 | color: #2a76dd; } 255 | 256 | /********************************************* 257 | * PROGRESS BAR 258 | *********************************************/ 259 | .reveal .progress { 260 | background: rgba(0, 0, 0, 0.2); 261 | color: #2a76dd; } 262 | 263 | .reveal .progress span { 264 | -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 265 | -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); 266 | transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); } 267 | 268 | /********************************************* 269 | * PRINT BACKGROUND 270 | *********************************************/ 271 | @media print { 272 | .backgrounds { 273 | background-color: #fff; } } 274 | -------------------------------------------------------------------------------- /slides/lib/initReveal.js: -------------------------------------------------------------------------------- 1 | Reveal.initialize(); -------------------------------------------------------------------------------- /slides/lib/js/markdown.js: -------------------------------------------------------------------------------- 1 | /** 2 | * The reveal.js markdown plugin. Handles parsing of 3 | * markdown inside of presentations as well as loading 4 | * of external markdown documents. 5 | */ 6 | (function( root, factory ) { 7 | if (typeof define === 'function' && define.amd) { 8 | root.marked = require( './marked' ); 9 | root.RevealMarkdown = factory( root.marked ); 10 | } else if( typeof exports === 'object' ) { 11 | module.exports = factory( require( './marked' ) ); 12 | } else { 13 | // Browser globals (root is window) 14 | root.RevealMarkdown = factory( root.marked ); 15 | } 16 | }( this, function( marked ) { 17 | 18 | var DEFAULT_SLIDE_SEPARATOR = '^\r?\n---\r?\n$', 19 | DEFAULT_NOTES_SEPARATOR = 'notes?:', 20 | DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR = '\\\.element\\\s*?(.+?)$', 21 | DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR = '\\\.slide:\\\s*?(\\\S.+?)$'; 22 | 23 | var SCRIPT_END_PLACEHOLDER = '__SCRIPT_END__'; 24 | 25 | 26 | /** 27 | * Retrieves the markdown contents of a slide section 28 | * element. Normalizes leading tabs/whitespace. 29 | */ 30 | function getMarkdownFromSlide( section ) { 31 | 32 | // look for a ' ); 40 | 41 | var leadingWs = text.match( /^\n?(\s*)/ )[1].length, 42 | leadingTabs = text.match( /^\n?(\t*)/ )[1].length; 43 | 44 | if( leadingTabs > 0 ) { 45 | text = text.replace( new RegExp('\\n?\\t{' + leadingTabs + '}','g'), '\n' ); 46 | } 47 | else if( leadingWs > 1 ) { 48 | text = text.replace( new RegExp('\\n? {' + leadingWs + '}', 'g'), '\n' ); 49 | } 50 | 51 | return text; 52 | 53 | } 54 | 55 | /** 56 | * Given a markdown slide section element, this will 57 | * return all arguments that aren't related to markdown 58 | * parsing. Used to forward any other user-defined arguments 59 | * to the output markdown slide. 60 | */ 61 | function getForwardedAttributes( section ) { 62 | 63 | var attributes = section.attributes; 64 | var result = []; 65 | 66 | for( var i = 0, len = attributes.length; i < len; i++ ) { 67 | var name = attributes[i].name, 68 | value = attributes[i].value; 69 | 70 | // disregard attributes that are used for markdown loading/parsing 71 | if( /data\-(markdown|separator|vertical|notes)/gi.test( name ) ) continue; 72 | 73 | if( value ) { 74 | result.push( name + '="' + value + '"' ); 75 | } 76 | else { 77 | result.push( name ); 78 | } 79 | } 80 | 81 | return result.join( ' ' ); 82 | 83 | } 84 | 85 | /** 86 | * Inspects the given options and fills out default 87 | * values for what's not defined. 88 | */ 89 | function getSlidifyOptions( options ) { 90 | 91 | options = options || {}; 92 | options.separator = options.separator || DEFAULT_SLIDE_SEPARATOR; 93 | options.notesSeparator = options.notesSeparator || DEFAULT_NOTES_SEPARATOR; 94 | options.attributes = options.attributes || ''; 95 | 96 | return options; 97 | 98 | } 99 | 100 | /** 101 | * Helper function for constructing a markdown slide. 102 | */ 103 | function createMarkdownSlide( content, options ) { 104 | 105 | options = getSlidifyOptions( options ); 106 | 107 | var notesMatch = content.split( new RegExp( options.notesSeparator, 'mgi' ) ); 108 | 109 | if( notesMatch.length === 2 ) { 110 | content = notesMatch[0] + ''; 111 | } 112 | 113 | // prevent script end tags in the content from interfering 114 | // with parsing 115 | content = content.replace( /<\/script>/g, SCRIPT_END_PLACEHOLDER ); 116 | 117 | return ''; 118 | 119 | } 120 | 121 | /** 122 | * Parses a data string into multiple slides based 123 | * on the passed in separator arguments. 124 | */ 125 | function slidify( markdown, options ) { 126 | 127 | options = getSlidifyOptions( options ); 128 | 129 | var separatorRegex = new RegExp( options.separator + ( options.verticalSeparator ? '|' + options.verticalSeparator : '' ), 'mg' ), 130 | horizontalSeparatorRegex = new RegExp( options.separator ); 131 | 132 | var matches, 133 | lastIndex = 0, 134 | isHorizontal, 135 | wasHorizontal = true, 136 | content, 137 | sectionStack = []; 138 | 139 | // iterate until all blocks between separators are stacked up 140 | while( matches = separatorRegex.exec( markdown ) ) { 141 | notes = null; 142 | 143 | // determine direction (horizontal by default) 144 | isHorizontal = horizontalSeparatorRegex.test( matches[0] ); 145 | 146 | if( !isHorizontal && wasHorizontal ) { 147 | // create vertical stack 148 | sectionStack.push( [] ); 149 | } 150 | 151 | // pluck slide content from markdown input 152 | content = markdown.substring( lastIndex, matches.index ); 153 | 154 | if( isHorizontal && wasHorizontal ) { 155 | // add to horizontal stack 156 | sectionStack.push( content ); 157 | } 158 | else { 159 | // add to vertical stack 160 | sectionStack[sectionStack.length-1].push( content ); 161 | } 162 | 163 | lastIndex = separatorRegex.lastIndex; 164 | wasHorizontal = isHorizontal; 165 | } 166 | 167 | // add the remaining slide 168 | ( wasHorizontal ? sectionStack : sectionStack[sectionStack.length-1] ).push( markdown.substring( lastIndex ) ); 169 | 170 | var markdownSections = ''; 171 | 172 | // flatten the hierarchical stack, and insert
tags 173 | for( var i = 0, len = sectionStack.length; i < len; i++ ) { 174 | // vertical 175 | if( sectionStack[i] instanceof Array ) { 176 | markdownSections += '
'; 177 | 178 | sectionStack[i].forEach( function( child ) { 179 | markdownSections += '
' + createMarkdownSlide( child, options ) + '
'; 180 | } ); 181 | 182 | markdownSections += '
'; 183 | } 184 | else { 185 | markdownSections += '
' + createMarkdownSlide( sectionStack[i], options ) + '
'; 186 | } 187 | } 188 | 189 | return markdownSections; 190 | 191 | } 192 | 193 | /** 194 | * Parses any current data-markdown slides, splits 195 | * multi-slide markdown into separate sections and 196 | * handles loading of external markdown. 197 | */ 198 | function processSlides() { 199 | 200 | return new Promise( function( resolve ) { 201 | 202 | var externalPromises = []; 203 | 204 | [].slice.call( document.querySelectorAll( '[data-markdown]') ).forEach( function( section, i ) { 205 | 206 | if( section.getAttribute( 'data-markdown' ).length ) { 207 | 208 | externalPromises.push( loadExternalMarkdown( section ).then( 209 | 210 | // Finished loading external file 211 | function( xhr, url ) { 212 | section.outerHTML = slidify( xhr.responseText, { 213 | separator: section.getAttribute( 'data-separator' ), 214 | verticalSeparator: section.getAttribute( 'data-separator-vertical' ), 215 | notesSeparator: section.getAttribute( 'data-separator-notes' ), 216 | attributes: getForwardedAttributes( section ) 217 | }); 218 | }, 219 | 220 | // Failed to load markdown 221 | function( xhr, url ) { 222 | section.outerHTML = '
' + 223 | 'ERROR: The attempt to fetch ' + url + ' failed with HTTP status ' + xhr.status + '.' + 224 | 'Check your browser\'s JavaScript console for more details.' + 225 | '

Remember that you need to serve the presentation HTML from a HTTP server.

' + 226 | '
'; 227 | } 228 | 229 | ) ); 230 | 231 | } 232 | else if( section.getAttribute( 'data-separator' ) || section.getAttribute( 'data-separator-vertical' ) || section.getAttribute( 'data-separator-notes' ) ) { 233 | 234 | section.outerHTML = slidify( getMarkdownFromSlide( section ), { 235 | separator: section.getAttribute( 'data-separator' ), 236 | verticalSeparator: section.getAttribute( 'data-separator-vertical' ), 237 | notesSeparator: section.getAttribute( 'data-separator-notes' ), 238 | attributes: getForwardedAttributes( section ) 239 | }); 240 | 241 | } 242 | else { 243 | section.innerHTML = createMarkdownSlide( getMarkdownFromSlide( section ) ); 244 | } 245 | 246 | }); 247 | 248 | Promise.all( externalPromises ).then( resolve ); 249 | 250 | } ); 251 | 252 | } 253 | 254 | function loadExternalMarkdown( section ) { 255 | 256 | return new Promise( function( resolve, reject ) { 257 | 258 | var xhr = new XMLHttpRequest(), 259 | url = section.getAttribute( 'data-markdown' ); 260 | 261 | datacharset = section.getAttribute( 'data-charset' ); 262 | 263 | // see https://developer.mozilla.org/en-US/docs/Web/API/element.getAttribute#Notes 264 | if( datacharset != null && datacharset != '' ) { 265 | xhr.overrideMimeType( 'text/html; charset=' + datacharset ); 266 | } 267 | 268 | xhr.onreadystatechange = function( section, xhr ) { 269 | if( xhr.readyState === 4 ) { 270 | // file protocol yields status code 0 (useful for local debug, mobile applications etc.) 271 | if ( ( xhr.status >= 200 && xhr.status < 300 ) || xhr.status === 0 ) { 272 | 273 | resolve( xhr, url ); 274 | 275 | } 276 | else { 277 | 278 | reject( xhr, url ); 279 | 280 | } 281 | } 282 | }.bind( this, section, xhr ); 283 | 284 | xhr.open( 'GET', url, true ); 285 | 286 | try { 287 | xhr.send(); 288 | } 289 | catch ( e ) { 290 | alert( 'Failed to get the Markdown file ' + url + '. Make sure that the presentation and the file are served by a HTTP server and the file can be found there. ' + e ); 291 | resolve( xhr, url ); 292 | } 293 | 294 | } ); 295 | 296 | } 297 | 298 | /** 299 | * Check if a node value has the attributes pattern. 300 | * If yes, extract it and add that value as one or several attributes 301 | * to the target element. 302 | * 303 | * You need Cache Killer on Chrome to see the effect on any FOM transformation 304 | * directly on refresh (F5) 305 | * http://stackoverflow.com/questions/5690269/disabling-chrome-cache-for-website-development/7000899#answer-11786277 306 | */ 307 | function addAttributeInElement( node, elementTarget, separator ) { 308 | 309 | var mardownClassesInElementsRegex = new RegExp( separator, 'mg' ); 310 | var mardownClassRegex = new RegExp( "([^\"= ]+?)=\"([^\"=]+?)\"", 'mg' ); 311 | var nodeValue = node.nodeValue; 312 | if( matches = mardownClassesInElementsRegex.exec( nodeValue ) ) { 313 | 314 | var classes = matches[1]; 315 | nodeValue = nodeValue.substring( 0, matches.index ) + nodeValue.substring( mardownClassesInElementsRegex.lastIndex ); 316 | node.nodeValue = nodeValue; 317 | while( matchesClass = mardownClassRegex.exec( classes ) ) { 318 | elementTarget.setAttribute( matchesClass[1], matchesClass[2] ); 319 | } 320 | return true; 321 | } 322 | return false; 323 | } 324 | 325 | /** 326 | * Add attributes to the parent element of a text node, 327 | * or the element of an attribute node. 328 | */ 329 | function addAttributes( section, element, previousElement, separatorElementAttributes, separatorSectionAttributes ) { 330 | 331 | if ( element != null && element.childNodes != undefined && element.childNodes.length > 0 ) { 332 | previousParentElement = element; 333 | for( var i = 0; i < element.childNodes.length; i++ ) { 334 | childElement = element.childNodes[i]; 335 | if ( i > 0 ) { 336 | j = i - 1; 337 | while ( j >= 0 ) { 338 | aPreviousChildElement = element.childNodes[j]; 339 | if ( typeof aPreviousChildElement.setAttribute == 'function' && aPreviousChildElement.tagName != "BR" ) { 340 | previousParentElement = aPreviousChildElement; 341 | break; 342 | } 343 | j = j - 1; 344 | } 345 | } 346 | parentSection = section; 347 | if( childElement.nodeName == "section" ) { 348 | parentSection = childElement ; 349 | previousParentElement = childElement ; 350 | } 351 | if ( typeof childElement.setAttribute == 'function' || childElement.nodeType == Node.COMMENT_NODE ) { 352 | addAttributes( parentSection, childElement, previousParentElement, separatorElementAttributes, separatorSectionAttributes ); 353 | } 354 | } 355 | } 356 | 357 | if ( element.nodeType == Node.COMMENT_NODE ) { 358 | if ( addAttributeInElement( element, previousElement, separatorElementAttributes ) == false ) { 359 | addAttributeInElement( element, section, separatorSectionAttributes ); 360 | } 361 | } 362 | } 363 | 364 | /** 365 | * Converts any current data-markdown slides in the 366 | * DOM to HTML. 367 | */ 368 | function convertSlides() { 369 | 370 | var sections = document.querySelectorAll( '[data-markdown]:not([data-markdown-parsed])'); 371 | 372 | [].slice.call( sections ).forEach( function( section ) { 373 | 374 | section.setAttribute( 'data-markdown-parsed', true ) 375 | 376 | var notes = section.querySelector( 'aside.notes' ); 377 | var markdown = getMarkdownFromSlide( section ); 378 | 379 | section.innerHTML = marked( markdown ); 380 | addAttributes( section, section, null, section.getAttribute( 'data-element-attributes' ) || 381 | section.parentNode.getAttribute( 'data-element-attributes' ) || 382 | DEFAULT_ELEMENT_ATTRIBUTES_SEPARATOR, 383 | section.getAttribute( 'data-attributes' ) || 384 | section.parentNode.getAttribute( 'data-attributes' ) || 385 | DEFAULT_SLIDE_ATTRIBUTES_SEPARATOR); 386 | 387 | // If there were notes, we need to re-add them after 388 | // having overwritten the section's HTML 389 | if( notes ) { 390 | section.appendChild( notes ); 391 | } 392 | 393 | } ); 394 | 395 | return Promise.resolve(); 396 | 397 | } 398 | 399 | // API 400 | var RevealMarkdown = { 401 | 402 | /** 403 | * Starts processing and converting Markdown within the 404 | * current reveal.js deck. 405 | * 406 | * @param {function} callback function to invoke once 407 | * we've finished loading and parsing Markdown 408 | */ 409 | init: function( callback ) { 410 | 411 | if( typeof marked === 'undefined' ) { 412 | throw 'The reveal.js Markdown plugin requires marked to be loaded'; 413 | } 414 | 415 | if( typeof hljs !== 'undefined' ) { 416 | marked.setOptions({ 417 | highlight: function( code, lang ) { 418 | return hljs.highlightAuto( code, [lang] ).value; 419 | } 420 | }); 421 | } 422 | 423 | // marked can be configured via reveal.js config options 424 | var options = Reveal.getConfig().markdown; 425 | if( options ) { 426 | marked.setOptions( options ); 427 | } 428 | 429 | return processSlides().then( convertSlides ); 430 | 431 | }, 432 | 433 | // TODO: Do these belong in the API? 434 | processSlides: processSlides, 435 | convertSlides: convertSlides, 436 | slidify: slidify 437 | 438 | }; 439 | 440 | // Register our plugin so that reveal.js will call our 441 | // plugin 'init' method as part of the initialization 442 | Reveal.registerPlugin( 'markdown', RevealMarkdown ); 443 | 444 | return RevealMarkdown; 445 | 446 | })); 447 | -------------------------------------------------------------------------------- /slides/lib/js/marked.js: -------------------------------------------------------------------------------- 1 | /** 2 | * marked - a markdown parser 3 | * Copyright (c) 2011-2018, Christopher Jeffrey. (MIT Licensed) 4 | * https://github.com/markedjs/marked 5 | */ 6 | !function(e){"use strict";var k={newline:/^\n+/,code:/^( {4}[^\n]+\n*)+/,fences:f,hr:/^ {0,3}((?:- *){3,}|(?:_ *){3,}|(?:\* *){3,})(?:\n+|$)/,heading:/^ *(#{1,6}) *([^\n]+?) *(?:#+ *)?(?:\n+|$)/,nptable:f,blockquote:/^( {0,3}> ?(paragraph|[^\n]*)(?:\n|$))+/,list:/^( {0,3})(bull) [\s\S]+?(?:hr|def|\n{2,}(?! )(?!\1bull )\n*|\s*$)/,html:"^ {0,3}(?:<(script|pre|style)[\\s>][\\s\\S]*?(?:[^\\n]*\\n+|$)|comment[^\\n]*(\\n+|$)|<\\?[\\s\\S]*?\\?>\\n*|\\n*|\\n*|)[\\s\\S]*?(?:\\n{2,}|$)|<(?!script|pre|style)([a-z][\\w-]*)(?:attribute)*? */?>(?=\\h*\\n)[\\s\\S]*?(?:\\n{2,}|$)|(?=\\h*\\n)[\\s\\S]*?(?:\\n{2,}|$))",def:/^ {0,3}\[(label)\]: *\n? *]+)>?(?:(?: +\n? *| *\n *)(title))? *(?:\n+|$)/,table:f,lheading:/^([^\n]+)\n *(=|-){2,} *(?:\n+|$)/,paragraph:/^([^\n]+(?:\n(?!hr|heading|lheading| {0,3}>|<\/?(?:tag)(?: +|\n|\/?>)|<(?:script|pre|style|!--))[^\n]+)*)/,text:/^[^\n]+/};function a(e){this.tokens=[],this.tokens.links=Object.create(null),this.options=e||m.defaults,this.rules=k.normal,this.options.pedantic?this.rules=k.pedantic:this.options.gfm&&(this.options.tables?this.rules=k.tables:this.rules=k.gfm)}k._label=/(?!\s*\])(?:\\[\[\]]|[^\[\]])+/,k._title=/(?:"(?:\\"?|[^"\\])*"|'[^'\n]*(?:\n[^'\n]+)*\n?'|\([^()]*\))/,k.def=i(k.def).replace("label",k._label).replace("title",k._title).getRegex(),k.bullet=/(?:[*+-]|\d{1,9}\.)/,k.item=/^( *)(bull) ?[^\n]*(?:\n(?!\1bull ?)[^\n]*)*/,k.item=i(k.item,"gm").replace(/bull/g,k.bullet).getRegex(),k.list=i(k.list).replace(/bull/g,k.bullet).replace("hr","\\n+(?=\\1?(?:(?:- *){3,}|(?:_ *){3,}|(?:\\* *){3,})(?:\\n+|$))").replace("def","\\n+(?="+k.def.source+")").getRegex(),k._tag="address|article|aside|base|basefont|blockquote|body|caption|center|col|colgroup|dd|details|dialog|dir|div|dl|dt|fieldset|figcaption|figure|footer|form|frame|frameset|h[1-6]|head|header|hr|html|iframe|legend|li|link|main|menu|menuitem|meta|nav|noframes|ol|optgroup|option|p|param|section|source|summary|table|tbody|td|tfoot|th|thead|title|tr|track|ul",k._comment=//,k.html=i(k.html,"i").replace("comment",k._comment).replace("tag",k._tag).replace("attribute",/ +[a-zA-Z:_][\w.:-]*(?: *= *"[^"\n]*"| *= *'[^'\n]*'| *= *[^\s"'=<>`]+)?/).getRegex(),k.paragraph=i(k.paragraph).replace("hr",k.hr).replace("heading",k.heading).replace("lheading",k.lheading).replace("tag",k._tag).getRegex(),k.blockquote=i(k.blockquote).replace("paragraph",k.paragraph).getRegex(),k.normal=d({},k),k.gfm=d({},k.normal,{fences:/^ {0,3}(`{3,}|~{3,})([^`\n]*)\n(?:|([\s\S]*?)\n)(?: {0,3}\1[~`]* *(?:\n+|$)|$)/,paragraph:/^/,heading:/^ *(#{1,6}) +([^\n]+?) *#* *(?:\n+|$)/}),k.gfm.paragraph=i(k.paragraph).replace("(?!","(?!"+k.gfm.fences.source.replace("\\1","\\2")+"|"+k.list.source.replace("\\1","\\3")+"|").getRegex(),k.tables=d({},k.gfm,{nptable:/^ *([^|\n ].*\|.*)\n *([-:]+ *\|[-| :]*)(?:\n((?:.*[^>\n ].*(?:\n|$))*)\n*|$)/,table:/^ *\|(.+)\n *\|?( *[-:]+[-| :]*)(?:\n((?: *[^>\n ].*(?:\n|$))*)\n*|$)/}),k.pedantic=d({},k.normal,{html:i("^ *(?:comment *(?:\\n|\\s*$)|<(tag)[\\s\\S]+? *(?:\\n{2,}|\\s*$)|\\s]*)*?/?> *(?:\\n{2,}|\\s*$))").replace("comment",k._comment).replace(/tag/g,"(?!(?:a|em|strong|small|s|cite|q|dfn|abbr|data|time|code|var|samp|kbd|sub|sup|i|b|u|mark|ruby|rt|rp|bdi|bdo|span|br|wbr|ins|del|img)\\b)\\w+(?!:|[^\\w\\s@]*@)\\b").getRegex(),def:/^ *\[([^\]]+)\]: *]+)>?(?: +(["(][^\n]+[")]))? *(?:\n+|$)/}),a.rules=k,a.lex=function(e,t){return new a(t).lex(e)},a.prototype.lex=function(e){return e=e.replace(/\r\n|\r/g,"\n").replace(/\t/g," ").replace(/\u00a0/g," ").replace(/\u2424/g,"\n"),this.token(e,!0)},a.prototype.token=function(e,t){var n,r,s,i,l,o,a,h,p,u,c,g,f,d,m,b;for(e=e.replace(/^ +$/gm,"");e;)if((s=this.rules.newline.exec(e))&&(e=e.substring(s[0].length),1 ?/gm,""),this.token(s,t),this.tokens.push({type:"blockquote_end"});else if(s=this.rules.list.exec(e)){for(e=e.substring(s[0].length),a={type:"list_start",ordered:d=1<(i=s[2]).length,start:d?+i:"",loose:!1},this.tokens.push(a),n=!(h=[]),f=(s=s[0].match(this.rules.item)).length,c=0;c?@\[\]\\^_`{|}~])/,autolink:/^<(scheme:[^\s\x00-\x1f<>]*|email)>/,url:f,tag:"^comment|^|^<[a-zA-Z][\\w-]*(?:attribute)*?\\s*/?>|^<\\?[\\s\\S]*?\\?>|^|^",link:/^!?\[(label)\]\(href(?:\s+(title))?\s*\)/,reflink:/^!?\[(label)\]\[(?!\s*\])((?:\\[\[\]]?|[^\[\]\\])+)\]/,nolink:/^!?\[(?!\s*\])((?:\[[^\[\]]*\]|\\[\[\]]|[^\[\]])*)\](?:\[\])?/,strong:/^__([^\s_])__(?!_)|^\*\*([^\s*])\*\*(?!\*)|^__([^\s][\s\S]*?[^\s])__(?!_)|^\*\*([^\s][\s\S]*?[^\s])\*\*(?!\*)/,em:/^_([^\s_])_(?!_)|^\*([^\s*"<\[])\*(?!\*)|^_([^\s][\s\S]*?[^\s_])_(?!_|[^\spunctuation])|^_([^\s_][\s\S]*?[^\s])_(?!_|[^\spunctuation])|^\*([^\s"<\[][\s\S]*?[^\s*])\*(?!\*)|^\*([^\s*"<\[][\s\S]*?[^\s])\*(?!\*)/,code:/^(`+)([^`]|[^`][\s\S]*?[^`])\1(?!`)/,br:/^( {2,}|\\)\n(?!\s*$)/,del:f,text:/^(`+|[^`])[\s\S]*?(?=[\\?@\\[^_{|}~",n.em=i(n.em).replace(/punctuation/g,n._punctuation).getRegex(),n._escapes=/\\([!"#$%&'()*+,\-./:;<=>?@\[\]\\^_`{|}~])/g,n._scheme=/[a-zA-Z][a-zA-Z0-9+.-]{1,31}/,n._email=/[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+(@)[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)+(?![-_])/,n.autolink=i(n.autolink).replace("scheme",n._scheme).replace("email",n._email).getRegex(),n._attribute=/\s+[a-zA-Z:_][\w.:-]*(?:\s*=\s*"[^"]*"|\s*=\s*'[^']*'|\s*=\s*[^\s"'=<>`]+)?/,n.tag=i(n.tag).replace("comment",k._comment).replace("attribute",n._attribute).getRegex(),n._label=/(?:\[[^\[\]]*\]|\\[\[\]]?|`[^`]*`|[^\[\]\\])*?/,n._href=/\s*(<(?:\\[<>]?|[^\s<>\\])*>|(?:\\[()]?|\([^\s\x00-\x1f\\]*\)|[^\s\x00-\x1f()\\])*?)/,n._title=/"(?:\\"?|[^"\\])*"|'(?:\\'?|[^'\\])*'|\((?:\\\)?|[^)\\])*\)/,n.link=i(n.link).replace("label",n._label).replace("href",n._href).replace("title",n._title).getRegex(),n.reflink=i(n.reflink).replace("label",n._label).getRegex(),n.normal=d({},n),n.pedantic=d({},n.normal,{strong:/^__(?=\S)([\s\S]*?\S)__(?!_)|^\*\*(?=\S)([\s\S]*?\S)\*\*(?!\*)/,em:/^_(?=\S)([\s\S]*?\S)_(?!_)|^\*(?=\S)([\s\S]*?\S)\*(?!\*)/,link:i(/^!?\[(label)\]\((.*?)\)/).replace("label",n._label).getRegex(),reflink:i(/^!?\[(label)\]\s*\[([^\]]*)\]/).replace("label",n._label).getRegex()}),n.gfm=d({},n.normal,{escape:i(n.escape).replace("])","~|])").getRegex(),_extended_email:/[A-Za-z0-9._+-]+(@)[a-zA-Z0-9-_]+(?:\.[a-zA-Z0-9-_]*[a-zA-Z0-9])+(?![-_])/,url:/^((?:ftp|https?):\/\/|www\.)(?:[a-zA-Z0-9\-]+\.?)+[^\s<]*|^email/,_backpedal:/(?:[^?!.,:;*_~()&]+|\([^)]*\)|&(?![a-zA-Z0-9]+;$)|[?!.,:;*_~)]+(?!$))+/,del:/^~+(?=\S)([\s\S]*?\S)~+/,text:i(n.text).replace("]|","~]|").replace("|$","|https?://|ftp://|www\\.|[a-zA-Z0-9.!#$%&'*+/=?^_`{\\|}~-]+@|$").getRegex()}),n.gfm.url=i(n.gfm.url,"i").replace("email",n.gfm._extended_email).getRegex(),n.breaks=d({},n.gfm,{br:i(n.br).replace("{2,}","*").getRegex(),text:i(n.gfm.text).replace("{2,}","*").getRegex()}),h.rules=n,h.output=function(e,t,n){return new h(t,n).output(e)},h.prototype.output=function(e){for(var t,n,r,s,i,l,o="";e;)if(i=this.rules.escape.exec(e))e=e.substring(i[0].length),o+=u(i[1]);else if(i=this.rules.tag.exec(e))!this.inLink&&/^/i.test(i[0])&&(this.inLink=!1),!this.inRawBlock&&/^<(pre|code|kbd|script)(\s|>)/i.test(i[0])?this.inRawBlock=!0:this.inRawBlock&&/^<\/(pre|code|kbd|script)(\s|>)/i.test(i[0])&&(this.inRawBlock=!1),e=e.substring(i[0].length),o+=this.options.sanitize?this.options.sanitizer?this.options.sanitizer(i[0]):u(i[0]):i[0];else if(i=this.rules.link.exec(e))e=e.substring(i[0].length),this.inLink=!0,r=i[2],this.options.pedantic?(t=/^([^'"]*[^\s])\s+(['"])(.*)\2/.exec(r))?(r=t[1],s=t[3]):s="":s=i[3]?i[3].slice(1,-1):"",r=r.trim().replace(/^<([\s\S]*)>$/,"$1"),o+=this.outputLink(i,{href:h.escapes(r),title:h.escapes(s)}),this.inLink=!1;else if((i=this.rules.reflink.exec(e))||(i=this.rules.nolink.exec(e))){if(e=e.substring(i[0].length),t=(i[2]||i[1]).replace(/\s+/g," "),!(t=this.links[t.toLowerCase()])||!t.href){o+=i[0].charAt(0),e=i[0].substring(1)+e;continue}this.inLink=!0,o+=this.outputLink(i,t),this.inLink=!1}else if(i=this.rules.strong.exec(e))e=e.substring(i[0].length),o+=this.renderer.strong(this.output(i[4]||i[3]||i[2]||i[1]));else if(i=this.rules.em.exec(e))e=e.substring(i[0].length),o+=this.renderer.em(this.output(i[6]||i[5]||i[4]||i[3]||i[2]||i[1]));else if(i=this.rules.code.exec(e))e=e.substring(i[0].length),o+=this.renderer.codespan(u(i[2].trim(),!0));else if(i=this.rules.br.exec(e))e=e.substring(i[0].length),o+=this.renderer.br();else if(i=this.rules.del.exec(e))e=e.substring(i[0].length),o+=this.renderer.del(this.output(i[1]));else if(i=this.rules.autolink.exec(e))e=e.substring(i[0].length),r="@"===i[2]?"mailto:"+(n=u(this.mangle(i[1]))):n=u(i[1]),o+=this.renderer.link(r,null,n);else if(this.inLink||!(i=this.rules.url.exec(e))){if(i=this.rules.text.exec(e))e=e.substring(i[0].length),this.inRawBlock?o+=this.renderer.text(i[0]):o+=this.renderer.text(u(this.smartypants(i[0])));else if(e)throw new Error("Infinite loop on byte: "+e.charCodeAt(0))}else{if("@"===i[2])r="mailto:"+(n=u(i[0]));else{for(;l=i[0],i[0]=this.rules._backpedal.exec(i[0])[0],l!==i[0];);n=u(i[0]),r="www."===i[1]?"http://"+n:n}e=e.substring(i[0].length),o+=this.renderer.link(r,null,n)}return o},h.escapes=function(e){return e?e.replace(h.rules._escapes,"$1"):e},h.prototype.outputLink=function(e,t){var n=t.href,r=t.title?u(t.title):null;return"!"!==e[0].charAt(0)?this.renderer.link(n,r,this.output(e[1])):this.renderer.image(n,r,u(e[1]))},h.prototype.smartypants=function(e){return this.options.smartypants?e.replace(/---/g,"—").replace(/--/g,"–").replace(/(^|[-\u2014/(\[{"\s])'/g,"$1‘").replace(/'/g,"’").replace(/(^|[-\u2014/(\[{\u2018\s])"/g,"$1“").replace(/"/g,"”").replace(/\.{3}/g,"…"):e},h.prototype.mangle=function(e){if(!this.options.mangle)return e;for(var t,n="",r=e.length,s=0;s'+(n?e:u(e,!0))+"\n":"
"+(n?e:u(e,!0))+"
"},r.prototype.blockquote=function(e){return"
\n"+e+"
\n"},r.prototype.html=function(e){return e},r.prototype.heading=function(e,t,n,r){return this.options.headerIds?"'+e+"\n":""+e+"\n"},r.prototype.hr=function(){return this.options.xhtml?"
\n":"
\n"},r.prototype.list=function(e,t,n){var r=t?"ol":"ul";return"<"+r+(t&&1!==n?' start="'+n+'"':"")+">\n"+e+"\n"},r.prototype.listitem=function(e){return"
  • "+e+"
    • \n"},r.prototype.checkbox=function(e){return" "},r.prototype.paragraph=function(e){return"

    "+e+"

    \n"},r.prototype.table=function(e,t){return t&&(t=""+t+""),"\n\n"+e+"\n"+t+"
    \n"},r.prototype.tablerow=function(e){return"\n"+e+"\n"},r.prototype.tablecell=function(e,t){var n=t.header?"th":"td";return(t.align?"<"+n+' align="'+t.align+'">':"<"+n+">")+e+"\n"},r.prototype.strong=function(e){return""+e+""},r.prototype.em=function(e){return""+e+""},r.prototype.codespan=function(e){return""+e+""},r.prototype.br=function(){return this.options.xhtml?"
    ":"
    "},r.prototype.del=function(e){return""+e+""},r.prototype.link=function(e,t,n){if(null===(e=l(this.options.sanitize,this.options.baseUrl,e)))return n;var r='    "},r.prototype.image=function(e,t,n){if(null===(e=l(this.options.sanitize,this.options.baseUrl,e)))return n;var r=''+n+'":">"},r.prototype.text=function(e){return e},s.prototype.strong=s.prototype.em=s.prototype.codespan=s.prototype.del=s.prototype.text=function(e){return e},s.prototype.link=s.prototype.image=function(e,t,n){return""+n},s.prototype.br=function(){return""},p.parse=function(e,t){return new p(t).parse(e)},p.prototype.parse=function(e){this.inline=new h(e.links,this.options),this.inlineText=new h(e.links,d({},this.options,{renderer:new s})),this.tokens=e.reverse();for(var t="";this.next();)t+=this.tok();return t},p.prototype.next=function(){return this.token=this.tokens.pop()},p.prototype.peek=function(){return this.tokens[this.tokens.length-1]||0},p.prototype.parseText=function(){for(var e=this.token.text;"text"===this.peek().type;)e+="\n"+this.next().text;return this.inline.output(e)},p.prototype.tok=function(){switch(this.token.type){case"space":return"";case"hr":return this.renderer.hr();case"heading":return this.renderer.heading(this.inline.output(this.token.text),this.token.depth,c(this.inlineText.output(this.token.text)),this.slugger);case"code":return this.renderer.code(this.token.text,this.token.lang,this.token.escaped);case"table":var e,t,n,r,s="",i="";for(n="",e=0;e?@[\]^`{|}~]/g,"").replace(/\s/g,"-");if(this.seen.hasOwnProperty(t))for(var n=t;this.seen[n]++,t=n+"-"+this.seen[n],this.seen.hasOwnProperty(t););return this.seen[t]=0,t},u.escapeTest=/[&<>"']/,u.escapeReplace=/[&<>"']/g,u.replacements={"&":"&","<":"<",">":">",'"':""","'":"'"},u.escapeTestNoEncode=/[<>"']|&(?!#?\w+;)/,u.escapeReplaceNoEncode=/[<>"']|&(?!#?\w+;)/g;var o={},g=/^$|^[a-z][a-z0-9+.-]*:|^[?#]/i;function f(){}function d(e){for(var t,n,r=1;rt)n.splice(t);else for(;n.lengthAn error occurred:

    "+u(e.message+"",!0)+"
    ";throw e}}f.exec=f,m.options=m.setOptions=function(e){return d(m.defaults,e),m},m.getDefaults=function(){return{baseUrl:null,breaks:!1,gfm:!0,headerIds:!0,headerPrefix:"",highlight:null,langPrefix:"language-",mangle:!0,pedantic:!1,renderer:new r,sanitize:!1,sanitizer:null,silent:!1,smartLists:!1,smartypants:!1,tables:!0,xhtml:!1}},m.defaults=m.getDefaults(),m.Parser=p,m.parser=p.parse,m.Renderer=r,m.TextRenderer=s,m.Lexer=a,m.lexer=a.lex,m.InlineLexer=h,m.inlineLexer=h.output,m.Slugger=t,m.parse=m,"undefined"!=typeof module&&"object"==typeof exports?module.exports=m:"function"==typeof define&&define.amd?define(function(){return m}):e.marked=m}(this||("undefined"!=typeof window?window:global)); -------------------------------------------------------------------------------- /slides/week-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |
    8 |
    9 | 10 | 11 |
    12 |

    🙌 Welcome 🙌

    13 |

    HTML - CSS - Git

    14 |
    — week 2 —
    15 |
    16 | 17 | 18 |
    19 |
    20 |

    Refresher

    21 |
    22 |
    23 |

    HTML

    24 |
    25 |
    26 |

    CSS

    27 |
    28 |
    29 |

    Git

    30 |
    31 |
    32 |

    Visual Studio Code

    33 |
    34 |
    35 |

    Git Kraken

    36 |
    37 |
    38 | 39 | 40 |
    41 |
    42 |

    Let's work

    43 |
    44 |
    45 |

    Goal

    46 |
      47 |
    • By team, create a website page
      • 48 |
    • You should split de work
      • 49 |
    • Choose a project manager (who will drive the team)
      • 50 |
    • The PM create the new repo
      • 51 |
    52 |
    53 |
    54 |

    Instructions

    55 |     68 |
    69 |
    70 | 71 |
    72 |
    73 | 74 | 75 | 76 | -------------------------------------------------------------------------------- /slides/week-3.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/be-hacking-hyf/HTML-CSS-GitHub/45af52a26423602ec162decbeaa73b9179243005/slides/week-3.html -------------------------------------------------------------------------------- /study-code/README.md: -------------------------------------------------------------------------------- 1 | ## Study Code 2 | 3 | This folder contains code for you to study. We agree, it's well-named. 4 | 5 | While video tutorials and articles can be very helpful while first getting started in programming, you'll never be fully confident until you are confident reading and studying from code directly. 6 | 7 | So here you have it! a folder full of finished projects, code-alongs, and helpful examples to learn to program directly from your coaches fingers. 8 | 9 | --- 10 | --- 11 | ### Hack Your Future: Belgium 12 | -------------------------------------------------------------------------------- /study-code/example-project-feedback-form/0-blank-page-setup/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /study-code/example-project-feedback-form/0-blank-page-setup/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/be-hacking-hyf/HTML-CSS-GitHub/45af52a26423602ec162decbeaa73b9179243005/study-code/example-project-feedback-form/0-blank-page-setup/style.css -------------------------------------------------------------------------------- /study-code/example-project-feedback-form/1-head-and-header/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Survey Form 11 | 12 | 13 | 14 | 15 |
    16 | 17 |
    18 |

    Survey Form

    19 |
    20 | 21 |
    22 |

    Let us know how to improve freecodecamp

    23 |
    24 |
    25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /study-code/example-project-feedback-form/1-head-and-header/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html, 6 | body { 7 | padding: 0; 8 | margin: 0; 9 | font-size: 62.5%; 10 | } 11 | 12 | .body { 13 | background-color: lightblue; 14 | } 15 | 16 | .body-wrapper { 17 | background-color: white; 18 | border-radius: 1rem; 19 | width: 85vw; 20 | margin: 5vh auto; 21 | padding: 2vh; 22 | } 23 | 24 | .title { 25 | font-size: 4rem; 26 | } 27 | 28 | .main { 29 | font-size: 1.7rem; 30 | } 31 | 32 | @media screen and (min-width: 1000px) { 33 | .body-wrapper { 34 | width: 1000px; 35 | padding: 1vw 5vw 3vw 5vw; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /study-code/example-project-feedback-form/2-empty-form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Survey Form 12 | 13 | 14 | 15 | 16 | 17 |
    18 |
    19 |

    Survey Form

    20 |
    21 | 22 |
    23 |

    Let us know how to improve freecodecamp

    24 |
    25 |
    26 | 27 |
    28 |
    29 |
    30 |
    31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /study-code/example-project-feedback-form/2-empty-form/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html, 6 | body { 7 | padding: 0; 8 | margin: 0; 9 | font-size: 62.5%; 10 | } 11 | 12 | .body { 13 | background-color: lightblue; 14 | } 15 | 16 | .body-wrapper { 17 | background-color: white; 18 | border-radius: 1rem; 19 | width: 85vw; 20 | margin: 5vh auto; 21 | padding: 2vh; 22 | } 23 | 24 | .title { 25 | font-size: 4rem; 26 | } 27 | 28 | .main { 29 | font-size: 1.7rem; 30 | } 31 | 32 | .form { 33 | display: flex; 34 | flex-direction: column; 35 | } 36 | 37 | .form__submit { 38 | margin-top: 1rem; 39 | padding: 1rem; 40 | border: 1px solid gray; 41 | } 42 | 43 | @media screen and (min-width: 600px) { 44 | 45 | .form__submit { 46 | align-self: center; 47 | padding: 1rem; 48 | font-size: 1.7rem; 49 | background-color: lightgray; 50 | } 51 | } 52 | 53 | @media screen and (min-width: 1000px) { 54 | .body-wrapper { 55 | width: 1000px; 56 | padding: 1vw 5vw 3vw 5vw; 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /study-code/example-project-feedback-form/3-personal-info/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Survey Form 11 | 12 | 13 | 14 |
    15 |
    16 |

    Survey Form

    17 |
    18 | 19 |
    20 |

    Let us know how to improve freecodecamp

    21 |
    22 |
    23 |
    24 | 25 | 26 |
    27 |
    28 | 29 | 30 |
    31 |
    32 | 33 | 34 |
    35 |
    36 | 37 | 43 |
    44 | 45 |
    46 |
    47 |
    48 |
    49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /study-code/example-project-feedback-form/3-personal-info/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html, 6 | body { 7 | padding: 0; 8 | margin: 0; 9 | font-size: 62.5%; 10 | } 11 | 12 | .body { 13 | background-color: lightblue; 14 | } 15 | 16 | .body-wrapper { 17 | background-color: white; 18 | border-radius: 1rem; 19 | width: 85vw; 20 | margin: 5vh auto; 21 | padding: 2vh; 22 | } 23 | 24 | .title { 25 | font-size: 4rem; 26 | } 27 | 28 | .main { 29 | font-size: 1.7rem; 30 | } 31 | 32 | .form { 33 | display: flex; 34 | flex-direction: column; 35 | } 36 | 37 | .form__item { 38 | margin-top: 1rem; 39 | display: grid; 40 | grid-gap: 1rem; 41 | grid-template-columns: 1fr; 42 | } 43 | 44 | .form__label { 45 | text-align: start; 46 | } 47 | 48 | .form__input { 49 | text-align: left; 50 | font-size: 1.7rem; 51 | border: 1px solid gray; 52 | padding: 0.5rem; 53 | } 54 | 55 | .form__submit { 56 | margin-top: 1rem; 57 | padding: 1rem; 58 | border: 1px solid gray; 59 | } 60 | 61 | @media screen and (min-width: 600px) { 62 | .form__item { 63 | grid-template-columns: 1fr 1fr; 64 | } 65 | .form__label { 66 | text-align: end; 67 | } 68 | 69 | .form__submit { 70 | align-self: center; 71 | padding: 1rem; 72 | font-size: 1.7rem; 73 | background-color: lightgray; 74 | } 75 | } 76 | 77 | @media screen and (min-width: 1000px) { 78 | .body-wrapper { 79 | width: 1000px; 80 | padding: 1vw 5vw 3vw 5vw; 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /study-code/example-project-feedback-form/4-multiple-choice-feedback/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Survey Form 12 | 13 | 14 | 15 |
    16 |
    17 |

    Survey Form

    18 |
    19 | 20 |
    21 |

    Let us know how to improve freecodecamp

    22 |
    23 |
    24 |
    25 | 26 | 27 |
    28 |
    29 | 30 | 31 |
    32 |
    33 | 34 | 35 |
    36 |
    37 | 38 | 44 |
    45 |
    46 | 47 |
    48 |
    49 | 50 | 51 |
    52 |
    53 | 54 | 55 |
    56 |
    57 | 58 | 59 |
    60 |
    61 | 62 |
    63 |
    64 | 65 |
    66 |
    67 | 68 | 69 |
    70 |
    71 | 72 | 73 |
    74 |
    75 | 76 | 77 |
    78 |
    79 | 80 | 81 |
    82 |
    83 | 84 | 85 |
    86 |
    87 |
    88 | 89 |
    90 |
    91 |
    92 |
    93 | 94 | 95 | 96 | -------------------------------------------------------------------------------- /study-code/example-project-feedback-form/4-multiple-choice-feedback/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html, 6 | body { 7 | padding: 0; 8 | margin: 0; 9 | font-size: 62.5%; 10 | } 11 | 12 | .body { 13 | background-color: lightblue; 14 | } 15 | 16 | .body-wrapper { 17 | background-color: white; 18 | border-radius: 1rem; 19 | width: 85vw; 20 | margin: 5vh auto; 21 | padding: 2vh; 22 | } 23 | 24 | .title { 25 | font-size: 4rem; 26 | } 27 | 28 | .main { 29 | font-size: 1.7rem; 30 | } 31 | 32 | .form { 33 | display: flex; 34 | flex-direction: column; 35 | } 36 | 37 | .form__item { 38 | margin-top: 1rem; 39 | display: grid; 40 | grid-gap: 1rem; 41 | grid-template-columns: 1fr; 42 | } 43 | 44 | .form__label { 45 | text-align: start; 46 | } 47 | 48 | .form__input { 49 | text-align: left; 50 | font-size: 1.7rem; 51 | border: 1px solid gray; 52 | padding: 0.5rem; 53 | } 54 | 55 | .form__submit { 56 | margin-top: 1rem; 57 | padding: 1rem; 58 | border: 1px solid gray; 59 | } 60 | 61 | @media screen and (min-width: 600px) { 62 | .form__item { 63 | grid-template-columns: 1fr 1fr; 64 | } 65 | .form__label { 66 | text-align: end; 67 | } 68 | 69 | .form__submit { 70 | align-self: center; 71 | padding: 1rem; 72 | font-size: 1.7rem; 73 | background-color: lightgray; 74 | } 75 | } 76 | 77 | @media screen and (min-width: 1000px) { 78 | .body-wrapper { 79 | width: 1000px; 80 | padding: 1vw 5vw 3vw 5vw; 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /study-code/example-project-feedback-form/5-open-ended-feedback/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | Survey Form 12 | 13 | 14 | 15 |
    16 |
    17 |

    Survey Form

    18 |
    19 | 20 |
    21 |

    Let us know how to improve freecodecamp

    22 |
    23 |
    24 |
    25 | 26 | 27 |
    28 |
    29 | 30 | 31 |
    32 |
    33 | 34 | 35 |
    36 |
    37 | 38 | 44 |
    45 |
    46 | 47 |
    48 |
    49 | 50 | 51 |
    52 |
    53 | 54 | 55 |
    56 |
    57 | 58 | 59 |
    60 |
    61 | 62 |
    63 |
    64 | 65 |
    66 |
    67 | 68 | 69 |
    70 |
    71 | 72 | 73 |
    74 |
    75 | 76 | 77 |
    78 |
    79 | 80 | 81 |
    82 |
    83 | 84 | 85 |
    86 |
    87 |
    88 |
    89 | 90 | 91 |
    92 | 93 |
    94 |
    95 |
    96 |
    97 | 98 | 99 | 100 | -------------------------------------------------------------------------------- /study-code/example-project-feedback-form/5-open-ended-feedback/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | html, 6 | body { 7 | padding: 0; 8 | margin: 0; 9 | font-size: 62.5%; 10 | } 11 | 12 | .body { 13 | background-color: lightblue; 14 | } 15 | 16 | .body-wrapper { 17 | background-color: white; 18 | border-radius: 1rem; 19 | width: 85vw; 20 | margin: 5vh auto; 21 | padding: 2vh; 22 | } 23 | 24 | .title { 25 | font-size: 4rem; 26 | } 27 | 28 | .main { 29 | font-size: 1.7rem; 30 | } 31 | 32 | .form { 33 | display: flex; 34 | flex-direction: column; 35 | } 36 | 37 | .form__item { 38 | margin-top: 1rem; 39 | display: grid; 40 | grid-gap: 1rem; 41 | grid-template-columns: 1fr; 42 | } 43 | 44 | .form__label { 45 | text-align: start; 46 | } 47 | 48 | .form__input { 49 | text-align: left; 50 | font-size: 1.7rem; 51 | border: 1px solid gray; 52 | padding: 0.5rem; 53 | } 54 | 55 | .form__submit { 56 | margin-top: 1rem; 57 | padding: 1rem; 58 | border: 1px solid gray; 59 | } 60 | 61 | @media screen and (min-width: 600px) { 62 | .form__item { 63 | grid-template-columns: 1fr 1fr; 64 | } 65 | .form__label { 66 | text-align: end; 67 | } 68 | 69 | .form__submit { 70 | align-self: center; 71 | padding: 1rem; 72 | font-size: 1.7rem; 73 | background-color: lightgray; 74 | } 75 | } 76 | 77 | @media screen and (min-width: 1000px) { 78 | .body-wrapper { 79 | width: 1000px; 80 | padding: 1vw 5vw 3vw 5vw; 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /study-code/example-project-feedback-form/README.md: -------------------------------------------------------------------------------- 1 | An example project for you to study. 2 | 3 | > credit to [jm18457](https://github.com/jm18457/freecodecamp-projects/blob/master/responsive-web-design/build-a-survey-form/) for the code in this repo 4 | -------------------------------------------------------------------------------- /study-code/example-project-feedback-form/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | HTML/CSS Demo Project Table 9 | 10 | 11 | 12 |

    Feedback Form for FreeCodeCamp

    13 |

    a site for users to submit feedback about their time at FreeCodeCamp

    14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 |
    a user can ...HTMLCSS
    ... open a website empty HTML template, requiring CSS fileempty CSS file
    ... know what the site is abouttitle, main div, header, descriptionstyle for body, main and title
    ... submit a formempty form with a submit button, form scriptstyle for form & form__submit
    ... submit personal infoinputs for name, email, number & roleform__item, form__label, form__submit
    ... give multiple-choice feedbackradios & checkboxes for "recommend" and "to improve"(no changes)
    ... give open-ended feedbacktextarea input field(no changes)
    56 | 57 | 58 | 59 | 60 | --------------------------------------------------------------------------------