mixin heading(heading)
    .heading
        h2= heading

mixin action(text)
    .action
        p= text

mixin character(character, dialogue, paranthetical = "")
    .character
        h3= character
        if paranthetical != ""
            p.paranthetical (#{paranthetical})
        p= dialogue

mixin transition(transition)
    .transition
        p= transition

mixin shot(shot)
    .shot
        p= shot

header
  h1 Scripticle
  p Screenplays in CSS and Markup
main
  +heading('Int. Meeting Room - Day')

  +action("ANDREW is demonstrating a new thing he's made to the group.")

  +character('Andrew','So what this basically does is use a combination of Pug Mixins and CSS to define a set of markup and styles for writing screenplays!')

  +action('The group at the table looks on, curiously. One of them, DAN, raises his hand. Andrew indicates for him to speak.')

  +character('Dan','Why?')

  +character('Andrew', 'Uh, because why not?')

  +action("The group don't look entirely convinced.")

  +character('Andrew', "Look, okay, so this isn't going to replace actually writing a screenplay in a dedicated app like Final Draft or Celtx or WriterDuet, but it is a fun little experiment.")

  +action('Andrew opens up VS Code.')

  +character('Andrew', 'It demonstrates how we can use Pug mixins to simplify writing repeating blocks of code, as well as how we can use print styles to define our printed layout.')

  +character('Dan', 'Print?')

  +character('Andrew', "Absolutely! Screenplays require specific standard inches of margin on their respective aspects. While the on-page HTML uses some standard positioning to make thing look nice, the print layout formats things up closer to this standard.")

  +character('Dan', 'So is it finished? Can I use this?')

  +character('Andrew', 'Well I guess you could. The proof-of-concept is more about how you can style up screenplays to make them look nice onscreen but keep them printable.')

  +action('Andrew pulls up a slide showing some ideas of where this could go.')

  +character('Andrew', "In theory you could take this and apply it to, say, a Gatsby project that could source content from an original screenplay for online presentation. You could also do things like use JavaScript to add scene numbers and even an index to skip up and down the page.")

  +character('Dan', 'Interesting.')

  +character('Andrew', 'It is!')

  +action('Another person at the table raises their hand. This is JONNY.')

  +character('Jonny', "What's Markup?")

  +character('Andrew', "You're in the wrong room, aren't you?")

  +character('Jonny', 'Will it make my screenplay good?')

  +character('Andrew', "I don't... no? Not unless it's already good?")

  +action('Jonny thinks for a moment...')

  +character('Jonny', "Will it help me sell my screenplay and make millions?")

  +character('Andrew', 'Get out...')

footer
  p Background from 
    a(href="http://backgroundhost.com/") http://backgroundhost.com/
  p Fancy shadows from 
    a(href="https://brumm.af/shadows") https://brumm.af/shadows
View Compiled
body{
    margin: 0;
    padding: 0;
    background: url('http://cdn.backgroundhost.com/backgrounds/subtlepatterns/escheresque.png');
    font-family: 'Source Code Pro', monospace;
}

/**
* Main layout
*/

header{
    text-align: center;
    color: #333;
    padding: 10px 10px 30px 10px;
    h1{
        font-family: 'Satisfy', cursive;
        margin: 0;
        font-size: 66px;
    }
    p{
        margin: 0;
        font-size: 22px;
    }
}

footer{
    text-align: center;
    padding: 30px 10px 10px 10px;
    a{
        color: black;
        &:hover{
            text-decoration: none;
        }
    }
}

header p,
footer p{
    font-family: 'Kulim Park', sans-serif;
}

main{
    max-width: 1000px;
    background: white;
    padding: 30px;
    margin: 0 auto;
    box-shadow:
        0 2.2px 22.6px rgba(0, 0, 0, 0.017),
        0 5.5px 34.5px rgba(0, 0, 0, 0.022),
        0 11.2px 42.6px rgba(0, 0, 0, 0.028),
        0 23px 49px rgba(0, 0, 0, 0.038),
        0 63px 58px rgba(0, 0, 0, 0.07)
    ;
}

/**
* Screenplay element styles
*/
main{    
    div{
        h2, h3, p{
            font-size: 16px;
            margin: 0;
        }
        margin-bottom: 20px;
        &.heading{
            text-transform: uppercase;
        }
        &.character{            
            width: 40%;
            margin: 0 auto 20px;
            p.paranthetical,
            h3{
                text-align: center;
            }
            h3{
                text-transform: uppercase;
            }
        }
        &.transition{
            text-align: right;
            text-transform: uppercase;
        }
        &.shot{
            text-transform: uppercase;
        }
    }
}


/**
* Print styles - these format the screenplay for printing, removing any page elements
*/
@media print{
    @page{
        margin: 1in 1in 1in 1.5in;
    }
    header,footer{
        display: none;
    }
    main{
        box-shadow: none;
        font-size: 12pt;
        font-family: 'Courier New', Courier, monospace;
        div{
            &.character{            
                width: auto;
                p.paranthetical,
                h3{
                    text-align: left;
                }
                h3{
                    margin-left: 2in;
                }
                p.paranthetical{
                    margin-left: 1.5in;
                    margin-right: 2in;
                }
                p{
                    margin-left: 1in;
                    margin-right: 1.5in;
                }
            }
            &.transition{
                text-align: left;
                margin-left: 4in;
            }
        }
    }
}
View Compiled
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Kulim+Park|Satisfy|Source+Code+Pro&display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.