all repos — slides @ fd8c9cfab9a3969c5b3d87d9724ed0d645b041d9

Reveal-md slides I made for various occasions

réalise/_static/dist/theme/beige.css (view raw)

  1/**
  2 * Beige theme for reveal.js.
  3 *
  4 * Copyright (C) 2011-2012 Hakim El Hattab, http://hakim.se
  5 */
  6@import url(./fonts/league-gothic/league-gothic.css);
  7@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);
  8section.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 {
  9  color: #fff;
 10}
 11
 12/*********************************************
 13 * GLOBAL STYLES
 14 *********************************************/
 15:root {
 16  --r-background-color: #f7f3de;
 17  --r-main-font: Lato, sans-serif;
 18  --r-main-font-size: 40px;
 19  --r-main-color: #333;
 20  --r-block-margin: 20px;
 21  --r-heading-margin: 0 0 20px 0;
 22  --r-heading-font: League Gothic, Impact, sans-serif;
 23  --r-heading-color: #333;
 24  --r-heading-line-height: 1.2;
 25  --r-heading-letter-spacing: normal;
 26  --r-heading-text-transform: uppercase;
 27  --r-heading-text-shadow: none;
 28  --r-heading-font-weight: normal;
 29  --r-heading1-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);
 30  --r-heading1-size: 3.77em;
 31  --r-heading2-size: 2.11em;
 32  --r-heading3-size: 1.55em;
 33  --r-heading4-size: 1em;
 34  --r-code-font: monospace;
 35  --r-link-color: #8b743d;
 36  --r-link-color-dark: #564826;
 37  --r-link-color-hover: #c0a86e;
 38  --r-selection-background-color: rgba(79, 64, 28, 0.99);
 39  --r-selection-color: #fff;
 40}
 41
 42.reveal-viewport {
 43  background: #f7f2d3;
 44  background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
 45  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3));
 46  background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
 47  background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
 48  background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
 49  background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
 50  background-color: var(--r-background-color);
 51}
 52
 53.reveal {
 54  font-family: var(--r-main-font);
 55  font-size: var(--r-main-font-size);
 56  font-weight: normal;
 57  color: var(--r-main-color);
 58}
 59
 60.reveal ::selection {
 61  color: var(--r-selection-color);
 62  background: var(--r-selection-background-color);
 63  text-shadow: none;
 64}
 65
 66.reveal ::-moz-selection {
 67  color: var(--r-selection-color);
 68  background: var(--r-selection-background-color);
 69  text-shadow: none;
 70}
 71
 72.reveal .slides section,
 73.reveal .slides section > section {
 74  line-height: 1.3;
 75  font-weight: inherit;
 76}
 77
 78/*********************************************
 79 * HEADERS
 80 *********************************************/
 81.reveal h1,
 82.reveal h2,
 83.reveal h3,
 84.reveal h4,
 85.reveal h5,
 86.reveal h6 {
 87  margin: var(--r-heading-margin);
 88  color: var(--r-heading-color);
 89  font-family: var(--r-heading-font);
 90  font-weight: var(--r-heading-font-weight);
 91  line-height: var(--r-heading-line-height);
 92  letter-spacing: var(--r-heading-letter-spacing);
 93  text-transform: var(--r-heading-text-transform);
 94  text-shadow: var(--r-heading-text-shadow);
 95  word-wrap: break-word;
 96}
 97
 98.reveal h1 {
 99  font-size: var(--r-heading1-size);
100}
101
102.reveal h2 {
103  font-size: var(--r-heading2-size);
104}
105
106.reveal h3 {
107  font-size: var(--r-heading3-size);
108}
109
110.reveal h4 {
111  font-size: var(--r-heading4-size);
112}
113
114.reveal h1 {
115  text-shadow: var(--r-heading1-text-shadow);
116}
117
118/*********************************************
119 * OTHER
120 *********************************************/
121.reveal p {
122  margin: var(--r-block-margin) 0;
123  line-height: 1.3;
124}
125
126/* Remove trailing margins after titles */
127.reveal h1:last-child,
128.reveal h2:last-child,
129.reveal h3:last-child,
130.reveal h4:last-child,
131.reveal h5:last-child,
132.reveal h6:last-child {
133  margin-bottom: 0;
134}
135
136/* Ensure certain elements are never larger than the slide itself */
137.reveal img,
138.reveal video,
139.reveal iframe {
140  max-width: 95%;
141  max-height: 95%;
142}
143
144.reveal strong,
145.reveal b {
146  font-weight: bold;
147}
148
149.reveal em {
150  font-style: italic;
151}
152
153.reveal ol,
154.reveal dl,
155.reveal ul {
156  display: inline-block;
157  text-align: left;
158  margin: 0 0 0 1em;
159}
160
161.reveal ol {
162  list-style-type: decimal;
163}
164
165.reveal ul {
166  list-style-type: disc;
167}
168
169.reveal ul ul {
170  list-style-type: square;
171}
172
173.reveal ul ul ul {
174  list-style-type: circle;
175}
176
177.reveal ul ul,
178.reveal ul ol,
179.reveal ol ol,
180.reveal ol ul {
181  display: block;
182  margin-left: 40px;
183}
184
185.reveal dt {
186  font-weight: bold;
187}
188
189.reveal dd {
190  margin-left: 40px;
191}
192
193.reveal blockquote {
194  display: block;
195  position: relative;
196  width: 70%;
197  margin: var(--r-block-margin) auto;
198  padding: 5px;
199  font-style: italic;
200  background: rgba(255, 255, 255, 0.05);
201  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.2);
202}
203
204.reveal blockquote p:first-child,
205.reveal blockquote p:last-child {
206  display: inline-block;
207}
208
209.reveal q {
210  font-style: italic;
211}
212
213.reveal pre {
214  display: block;
215  position: relative;
216  width: 90%;
217  margin: var(--r-block-margin) auto;
218  text-align: left;
219  font-size: 0.55em;
220  font-family: var(--r-code-font);
221  line-height: 1.2em;
222  word-wrap: break-word;
223  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.15);
224}
225
226.reveal code {
227  font-family: var(--r-code-font);
228  text-transform: none;
229  tab-size: 2;
230}
231
232.reveal pre code {
233  display: block;
234  padding: 5px;
235  overflow: auto;
236  max-height: 400px;
237  word-wrap: normal;
238}
239
240.reveal .code-wrapper {
241  white-space: normal;
242}
243
244.reveal .code-wrapper code {
245  white-space: pre;
246}
247
248.reveal table {
249  margin: auto;
250  border-collapse: collapse;
251  border-spacing: 0;
252}
253
254.reveal table th {
255  font-weight: bold;
256}
257
258.reveal table th,
259.reveal table td {
260  text-align: left;
261  padding: 0.2em 0.5em 0.2em 0.5em;
262  border-bottom: 1px solid;
263}
264
265.reveal table th[align=center],
266.reveal table td[align=center] {
267  text-align: center;
268}
269
270.reveal table th[align=right],
271.reveal table td[align=right] {
272  text-align: right;
273}
274
275.reveal table tbody tr:last-child th,
276.reveal table tbody tr:last-child td {
277  border-bottom: none;
278}
279
280.reveal sup {
281  vertical-align: super;
282  font-size: smaller;
283}
284
285.reveal sub {
286  vertical-align: sub;
287  font-size: smaller;
288}
289
290.reveal small {
291  display: inline-block;
292  font-size: 0.6em;
293  line-height: 1.2em;
294  vertical-align: top;
295}
296
297.reveal small * {
298  vertical-align: top;
299}
300
301.reveal img {
302  margin: var(--r-block-margin) 0;
303}
304
305/*********************************************
306 * LINKS
307 *********************************************/
308.reveal a {
309  color: var(--r-link-color);
310  text-decoration: none;
311  transition: color 0.15s ease;
312}
313
314.reveal a:hover {
315  color: var(--r-link-color-hover);
316  text-shadow: none;
317  border: none;
318}
319
320.reveal .roll span:after {
321  color: #fff;
322  background: var(--r-link-color-dark);
323}
324
325/*********************************************
326 * Frame helper
327 *********************************************/
328.reveal .r-frame {
329  border: 4px solid var(--r-main-color);
330  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
331}
332
333.reveal a .r-frame {
334  transition: all 0.15s linear;
335}
336
337.reveal a:hover .r-frame {
338  border-color: var(--r-link-color);
339  box-shadow: 0 0 20px rgba(0, 0, 0, 0.55);
340}
341
342/*********************************************
343 * NAVIGATION CONTROLS
344 *********************************************/
345.reveal .controls {
346  color: var(--r-link-color);
347}
348
349/*********************************************
350 * PROGRESS BAR
351 *********************************************/
352.reveal .progress {
353  background: rgba(0, 0, 0, 0.2);
354  color: var(--r-link-color);
355}
356
357/*********************************************
358 * PRINT BACKGROUND
359 *********************************************/
360@media print {
361  .backgrounds {
362    background-color: var(--r-background-color);
363  }
364}