Skip to content

Styling

Jump to bottom Edit New page
gnab edited this page Mar 8, 2013 · 14 revisions

Work in progress.

DOM hierarchy

Below is a visualization of the DOM hierachy of a slideshow:

html
 | - body
      | - div#slideshow                    # Slideshow container
               | - div.slide               # First slide
               |      | - div.content      # First slide content
               | - div.slide               # Second slide
               ...

Every slide is represented by a separate div.slide that is visible when it's the current slide and hidden when not. The div.slide has display: table, and contains a div.content with display: table-cell that holds the actual slide content.

The default styles are defined using LESS in remark.less.

Applying styles

class slide property

Besides writing your own CSS targeting the above DOM hierarchy in a general fashion, CSS classes can be assigned on a per-slide basis using the [[class|Slide-Properties#wiki-class]] slide property:

class: middle, center

# Slide title

This will extend the div.content to div.content.middle.center.

<title>Title</title> <style> @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz); @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic); @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic); 
  body { font-family: 'Droid Serif'; }
  h1, h2, h3 {
    font-family: 'Yanone Kaffeesatz';
    font-weight: normal;
  }
  .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
</style>
<textarea id="source">

Code:

def add(a,b)
  a + b
end
</textarea>
<script src="https://remarkjs.com/downloads/remark-latest.min.js">
</script>
<script>
  var slideshow = remark.create();
</script>
Clone this wiki locally