Presentation Title

Yours Truly, Famous Inc.

    •

    Slide Header

    Echo Park 8-bit sustainable umami deep v Kickstarter. DIY cliche typewriter brunch, Odd Future sriracha pickled aesthetic. Farm-to-table bespoke fingerstache, kale chips umami brunch letterpress.

    Whatever authentic disrupt, you probably haven’t heard of them direct trade mlkshk Etsy. Gluten-free roof party plaid four loko quinoa.

    Echo Park 8-bit sustainable umami deep v Kickstarter.

    Example slide notes

    Put some notes or transcript next to the slide by adding a notes section right after the slide section: 

    <section class="slide"> ... </section>
<section class="slide-notes"> ... </section>

    The default slide notes will have the same height as one slide. Long slide notes will be scrollable.

    First Header

    Echo Park 8-bit sustainable umami deep v Kickstarter. DIY cliche typewriter brunch, Odd Future sriracha pickled aesthetic.

    Second Header

    Whatever authentic disrupt, you probably haven’t heard of them direct trade mlkshk Etsy. Gluten-free roof party plaid four loko quinoa.

    Slide notes style customization

    The styling works the same way as the slides:

    <section class="slide-notes" id="my-notes">
	<h2>Slide notes style customization</h2>
	<style>
		#my-notes {
			border: solid 2px var(--color-key);
		}
	</style>
</section>

    Like the slides, slide notes are also a grid item. To make a slide notes span over multiple slides, change its grid settings to span over multiple over rows: 

    #my-notes {
	grid-row-end: span 3;
}

    Cap slide notes maximal width

    While the width of slide notes are confined within the viewport, text on wider viewports can become too wide to read. Cap the maximum width by: 

    .shower {
	--slide-notes-max-width: 80ch;
}

    Additional elements

    <details><summary> are supported too:

    Extra details can go here

    Extra details about the slide notes.

    And it can be nested

    Nested details are like this.

    Hyperlinks are styled to match the key color (--color-key).

    Abbreviations like Abbr and HTML are supported.

    Linked Header

    Retro meh brunch aesthetic Cosby sweater Shoreditch. Banksy Tumblr sriracha, flexitarian pug chia master cleanse vinyl wayfarers fanny pack bespoke Helvetica roof party. Messenger bag retro cred Portland next level. Yr stumptown Schlitz Carles deep v small batch. Echo Park 8-bit sustainable umami deep v Kickstarter. Hella sustainable messenger bag, leggings skateboard literally bicycle rights H₂0 mumblecore banh mi DIY VHS. Semiotics four loko street art asymmetrical.

    Multiline
    Header

    Retro meh brunch aesthetic Cosby sweater Shoreditch. Banksy Tumblr sriracha, flexitarian pug chia master cleanse vinyl wayfarers fanny pack bespoke Helvetica roof party. Messenger bag retro cred Portland next level. Yr stumptown Schlitz Carles deep v small batch. Hella sustainable messenger bag, leggings skateboard literally bicycle rights H₂0 mumblecore banh mi DIY VHS. Semiotics four loko street art asymmetrical.

    Inline Elements

    Retro meh brunch aesthetic Cosby sweater Shoreditch. Banksy Tumblr sriracha, flexitarian pug chia master cleanse vinyl wayfarers fanny pack bespoke Helvetica roof party. Messenger bag retro cred Portland next level. Yr stumptown Schlitz Carles deep v small batch. Hella sustainable messenger bag, leggings skateboard literally1 bicycle rights H20 mumblecore banh mi DIY VHS. Semiotics four loko street art asymmetrical. Asymmetrical <paleo> you probably haven’t heard of.

    Block Quotes

    Flannel bicycle rights locavore selfies skateboard. Authentic fanny pack paleo four loko bespoke. Artisan tattooed chia XOXO ennui, lomo disrupt 8-bit art party Tumblr scenester.

    Post-ironic fashion axe flexitarian, Tonx narwhal messenger bag Tumblr. Portland gentrify deep v kale chips literally.

    Yours Truly

    Ordered List

    1. Literally viral vegan, ugh drinking vinegar photo booth
    2. Wes Anderson chillwave Marfa pour-over Etsy banh mi
    3. Ethnic polaroid lo-fi iPhone ennui
    4. Yr wayfarers before they sold out Kickstarter asymmetrical
    5. Irony flexitarian readymade quinoa, kogi bespoke meggings narwhal
    6. Skateboard Etsy twee artisan Echo Park
    7. Tonx kitsch fingerstache readymade, retro single-origin coffee

    Unordered List

    Multiline List Items

    Nested Lists

    1. Literally viral vegan, ugh drinking vinegar photo booth
    2. Wes Anderson chillwave Marfa pour-over Etsy banh mi
    3. Ethnic polaroid lo-fi iPhone ennui
      • Yr wayfarers before they sold out Kickstarter asymmetrical
      • Irony flexitarian readymade quinoa, kogi bespoke meggings narwhal
      • Skateboard Etsy twee artisan Echo Park
    4. Tonx kitsch fingerstache readymade, retro single-origin coffee

    Nested list in slide notes

    1. Literally viral vegan, ugh drinking vinegar photo booth
    2. Wes Anderson chillwave Marfa pour-over Etsy banh mi
    3. Ethnic polaroid lo-fi iPhone ennui
      • Yr wayfarers before they sold out Kickstarter asymmetrical
      • Irony flexitarian readymade quinoa, kogi bespoke meggings narwhal
      • Skateboard Etsy twee artisan Echo Park
    4. Tonx kitsch fingerstache readymade, retro single-origin coffee

    Latin and Cyrillic List Bullets

    Custom List Bullets

    1. Occupy locavore blog, mustache you probably haven’t heard of them
    2. Skateboard pork belly aesthetic hoodie selfies brunch
    3. Food truck gluten-free disrupt Portland

    Two Text Columns

    Echo Park 8-bit sustainable umami deep v Kickstarter. DIY cliche typewriter brunch, Odd Future sriracha pickled aesthetic. Farm-to-table bespoke fingerstache, kale chips umami brunch.

    American Apparel letterpress. Whatever authentic disrupt, you probably haven’t heard of them direct trade mlkshk Etsy. Gluten-free roof party plaid American Apparel four loko quinoa.

    Two List Columns

    Three List Columns

    Four List Columns

    Column Header 1

    Retro meh brunch aesthetic Cosby sweater Shoreditch. Banksy Tumblr sriracha, flexitarian pug chia master cleanse vinyl wayfarers fanny pack bespoke Helvetica roof party. Messenger bag retro cred Portland next level.

    Column Header 2

    Yr stumptown Schlitz Carles deep v small batch. Echo Park 8-bit sustainable umami deep v Kickstarter. Hella sustainable messenger bag, leggings skateboard literally bicycle rights H₂0 mumblecore banh.

    Simple Table

    Gentrify Twee Artisan Banksy
    Messenger Mixtape Small batch Bicycle rights
    Meggings Freegan Retro biodiesel Slow-carb
    Vegan Occupy Normcore Put a bird on it
    Next level Selfies Sustainable Organic
    Umami Asymmetrical Keytar Craft beer
    Biodiesel Haven’t heard Skateboard Farm-to-table

    Marked Simple Table

    Gentrify Twee Artisan Banksy
    Messenger Mixtape Small batch Bicycle rights
    Meggings Freegan Retro biodiesel Slow-carb
    Vegan Occupy Normcore Put a bird on it
    Next level Selfies Sustainable Organic
    Umami Asymmetrical Keytar Craft beer
    Biodiesel Haven’t heard Skateboard Farm-to-table

    Striped Table

    Gentrify Twee Artisan Banksy
    Messenger Mixtape Small batch Bicycle rights
    Meggings Freegan Retro biodiesel Slow-carb
    Vegan Occupy Normcore Put a bird on it
    Next level Selfies Sustainable Organic
    Umami Asymmetrical Keytar Craft beer
    Biodiesel Haven’t heard Skateboard Farm-to-table

    Marked Striped Table

    Gentrify Twee Artisan Banksy
    Messenger Mixtape Small batch Bicycle rights
    Meggings Freegan Retro biodiesel Slow-carb
    Vegan Occupy Normcore Put a bird on it
    Next level Selfies Sustainable Organic
    Umami Asymmetrical Keytar Craft beer
    Biodiesel Haven’t heard Skateboard Farm-to-table

    Plain Code Block

    <html lang="en">
<head> <!--Comment-->
    <title>Shower</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="screen.css">
    <script src="script.js"></script>
</head>

    Numbered Code Lines

                <html lang="en">
            <head> <!--Comment-->
                <title>Shower</title>
                <meta charset="UTF-8">
                <link rel="stylesheet" href="screen.css">
                <script src="script.js"></script>
            </head>

    Marked Code Lines

                <html lang="en">
            <head> <!--Comment-->
                <title>Shower</title>
                <meta charset="UTF-8">
                <link rel="stylesheet" href="screen.css">
                <script src="script.js"></script>
            </head>

    Stepped Code Lines

                <html lang="en">
            <head> <!--Comment-->
                <title>Shower</title>
                <meta charset="UTF-8">
                <link rel="stylesheet" href="screen.css">
                <script src="script.js"></script>
            </head>

    Stepped Marked Code Lines

                <html lang="en">
            <head> <!--Comment-->
                <title>Shower</title>
                <meta charset="UTF-8">
                <link rel="stylesheet" href="screen.css">
                <script src="script.js"></script>
            </head>

    Gray Slide

    Black Slide

    Clear Slide

    Shout

    Long Multiline Shout

    Linked Shout

    Long Multiline Linked

    Cover

    Picture placeholder.
    Copyright © 3000 Yours Truly, Famous Inc.
    Copyright © 3000 Yours Truly, Famous Inc.
    Copyright © 3000 Yours Truly, Famous Inc.

    Tall Cover

    Tall picture placeholder.

    Wide Cover

    Wide picture placeholder.

    Placed Elements

    Square picture placeholder. Square picture placeholder. Square picture placeholder. Square picture placeholder. Square picture placeholder. Square picture placeholder. Square picture placeholder. Square picture placeholder. Square picture placeholder.

    Stepped List

    1. Ennui keffiyeh thundercats

    Before they sold out master

    Stepped Placed

    Picture placeholder. Picture placeholder. Picture placeholder.

    Spotlight

    Retro meh brunch aesthetic Cosby sweater Shoreditch. Banksy Tumblr sriracha, flexitarian pug chia master cleanse vinyl wayfarers fanny pack bespoke Helvetica roof party. Messenger bag retro cred Portland next level. Yr stumptown Schlitz Carles deep v small batch. Echo Park 8-bit sustainable umami deep v Kickstarter. Hella sustainable messenger bag, leggings skateboard literally bicycle rights H₂0 mumblecore banh mi DIY VHS. Semiotics four loko street art asymmetrical.

    Spotlight

    Retro meh brunch aesthetic Cosby sweater Shoreditch. Banksy Tumblr sriracha, flexitarian pug chia master cleanse vinyl wayfarers fanny pack bespoke Helvetica roof party. Messenger bag retro cred Portland next level. Yr stumptown Schlitz Carles deep v small batch. Echo Park 8-bit sustainable umami deep v Kickstarter. Hella sustainable messenger bag, leggings skateboard literally bicycle rights H₂0 mumblecore banh mi DIY VHS. Semiotics four loko street art asymmetrical.

    Timed Slide

    The End

    Custom
    Layouts

    Twocol and citation demo

    Django Q is a native Django task queue, scheduler and worker application using Python multiprocessing.

    — Django Q documentation
    Ref: Django-Q logo

    Long citation and dense content

    Ref: Left citation with a long description. Django Q is a native Django task queue, scheduler and worker application using Python multiprocessing. Django Q is a native Django task queue, scheduler and worker application using Python multiprocessing.

    Django Q is a native Django task queue, scheduler and worker application using Python multiprocessing. 

    from django_q.humanhash import humanize
def order(request):
    fruit = request.POST.get('fruit_type', '')
    num_fruit = int(request.POST.get('num_fruit', '1'))
    task_id = async(...)  # Create async task
    messages.info(  # Django message as notification
        request,
        'You ordered {fruit:s} x {num_fruit:d} (task: {task})'
        .format(..., task=humanize(task_id))
    )

    This slide has no slide number

    Test $\LaTeX$ rendering by $\KaTeX$

    Simplified RSEM generative model (copied from Roman's blog).

    \[\begin{aligned} p(G,S,R|\theta) &=\prod_{n=1}^N p(G_n,S_n,R_n|\theta)\\ &=\prod_{n=1}^N p(G_n|\theta)p(S_n|G_n)p(R_n|G_n,S_n). \end{aligned}\]

    Slide notes should correctly sit next to the slides

    $\LaTeX$ commands are supported too in the notes. \[ \theta_i = \frac{\tau_i\cdot l_i}{\sum_{k=1}^{M}\tau_{k}\cdot l_{k}}, \hspace{1em} \tau_i = \frac{\theta_i/l_i}{\sum_{k=1}^{M}\theta_k/l_k} \]