anchor.diff: +//- Title: Ryan Fung's HTML Template v5.2 markup
  +//- Author: Ryan Fung (ryanvfung)
  +//- License: MIT
  +
   mixin meta(n, c)
     meta(name=n content=c)
   mixin css(url)
  -  link(rel="stylesheet" type="text/css" href=url)
  +  link(rel='stylesheet' type='text/css' href=url)
   
   doctype html
   // Ryan Fung's HTML Template v5.2
  -html(lang="en")
  +html(lang='en')
     head
  -    meta(charset="utf-8")
  -    meta(http-equiv="X-UA-Compatible" content="IE=edge")
  -    +meta("viewport", "width=device-width, initial-scale=1")
  +    meta(charset='utf-8')
  +    meta(http-equiv='X-UA-Compatible' content='IE=edge')
  +    +meta('viewport', 'width=device-width, initial-scale=1')
       title 5.2 Hydrazone &middot; HTML Template
  -    +css("https://fonts.googleapis.com/css?family=Maven+Pro:400,700")
  -    //- +css("https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css")
  -    //- +css("https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css")
  -    +css("file:///C:/!/lib/bootstrap/bootstrap-4.0.0-alpha-dist/css/bootstrap.css")
  -    +css("z52.css")
  +    +css('https://fonts.googleapis.com/css?family=Maven+Pro:400,700')
  +    //- +css('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css')
  +    //- +css('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css')
  +    +css('file:///C:/!/lib/bootstrap/bootstrap-4.0.0-alpha-dist/css/bootstrap.css')
  +    +css('z52.css')
       | 
       | <!--[if lt IE 9]>
  -    |   script(src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js")
  -    |   script(src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js")
  +    |   script(src='https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js')
  +    |   script(src='https://oss.maxcdn.com/respond/1.4.2/respond.min.js')
       | <![endif]-->
  -    +meta("author", "Ryan Fung")
  -    //- script(src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js")
  -    script(src="file:///C:/!/lib/jquery/jquery-1.11.2.min.js")
  -    //- script(src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js")
  -    //- script(src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js")
  -    script(src="file:///C:/!/lib/bootstrap/bootstrap-4.0.0-alpha-dist/js/bootstrap.min.js")
  -    //- script(src="https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.14/jquery.scrollTo.min.js")
  -    //- script(src="https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML")
  -    script(src="z52.js")
  +    +meta('author', 'Ryan Fung')
  +    //- script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js')
  +    script(src='file:///C:/!/lib/jquery/jquery-1.11.2.min.js')
  +    //- script(src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js')
  +    //- script(src='https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js')
  +    script(src='file:///C:/!/lib/bootstrap/bootstrap-4.0.0-alpha-dist/js/bootstrap.min.js')
  +    //- script(src='https://cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.14/jquery.scrollTo.min.js')
  +    //- script(src='https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML')
  +    script(src='z52.js')
   
     body
       header.page-header
         nav.navbar.navbar-fixed-top.navbar-dark.bg-inverse
  -        button.navbar-toggler.hidden-sm-up(type="button" data-toggle="collapse" data-target=".c-navbar") &#9776;
  +        button.navbar-toggler.hidden-sm-up(type='button' data-toggle='collapse' data-target='.c-navbar') &#9776;
           div.c-navbar.collapse.navbar-toggleable-xs
  -          a.navbar-brand(href="#") Responsive navbar
  +          a.navbar-brand(href='#') Responsive navbar
             ul.nav.navbar-nav
  -            li.nav-item.active: a.nav-link(href="#") Home #[span.sr-only (current)]
  -            li.nav-item: a.nav-link(href="#") Features
  -            li.nav-item: a.nav-link(href="#") Pricing
  -            li.nav-item: a.nav-link(href="#") About
  +            li.nav-item.active: a.nav-link(href='#') Home #[span.sr-only (current)]
  +            li.nav-item: a.nav-link(href='#') Features
  +            li.nav-item: a.nav-link(href='#') Pricing
  +            li.nav-item: a.nav-link(href='#') About
       div.container: div.row
         main.col-lg-9
           h1#h1 #[span.title HTML Template] #[small#subtitle 5.2 Hydrazone]
  
positive.code:           p The #[code code] tag wraps blocks of #[code code].
            p The #[code kbd] tag instructs users to open new tabs with #[kbd #[kbd Ctrl] + #[kbd T]]
            p The #[code pre] tag wraps the following preformatted block of JavaScript:
            pre document.print("Hello World!");
            pre.c-code-block: code
              <span>&lt;!doctype html&gt;</span>
              <span>&lt;<span style="color:#b58900;">html</span>&gt;&lt;<span style="color:#b58900;">head</span>&gt;</span>
              <span>&lt;/<span style="color:#b58900;">head</span>&gt;&lt;<span style="color:#b58900;">body</span>&gt;</span>
              <span>&lt;/<span style="color:#b58900;">body</span>&gt;&lt;/<span style="color:#b58900;">html</span>&gt;</span>
            pre.c-cmd-block git clone git@github.com:ryanvfung/html.git
          section
            h2#other-w3c-elements Other W3C Elements
            h3#svg SVG Demo
            p: svg(width="200px" height="230px" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink")
              g
                //- circle/(cx="100" cy="100" r="100" fill="#000")
                //- circle/(cx="100" cy="100" r="95" fill="#ff0")
                //- circle/(cx=" 60" cy=" 60" r="10" fill="#000")
                //- circle/(cx="140" cy=" 60" r="10" fill="#000")
                //- ellipse/(cx="100"cy="110" rx="40" ry="20" fill="#fcf" stroke="#000" stroke-width="0.5")
                //- circle/(cx="080" cy="110" r=" 6" fill="#000")
                //- circle/(cx="120" cy="110" r=" 6" fill="#000")
                <circle cx="100" cy="100" r="100" fill="#000" />
                <circle cx="100" cy="100" r="95" fill="#ff0" />
                <circle cx="060" cy="60" r="10" fill="#000" />
                <circle cx="140" cy="60" r="10" fill="#000" />
                <ellipse cx="100" cy="110" rx="40" ry="20" fill="#fcf" stroke="#000" stroke-width="0.5" />
                <circle cx="080" cy="110" r="6" fill="#000" />
                <circle cx="120" cy="110" r="6" fill="#000" />
              g
                //- path/#smile(stroke="black" stroke-width="5" fill="none" d="M 50,147 s 50,50 100,0")
                <path id="smile" stroke="black" stroke-width="5" fill="none" d="M 50,147 s 50,50 100,0" />
              defs
                //- path/#top(d="M 0,100 s 200,-200 200,200")
                //- path/#textend(d="M 150,205 L 150,223")
                <path id="top" d="M 0,100 s 200,-200 200,200" />
                <path id="textend" d="M 150,205 L 150,223" />
              g
                text: textPath(xlink:href="#smile" startOffset="50%" text-anchor="middle"): tspan(dy="-5") M.o.u.s.t.a.c.h.e
                text(x="100" y="220" rotate="10" text-anchor="middle")
                  | <tspan font-weight="bold" fill="#f60">Ryan</tspan><tspan fill="#ccc">&#39;s Smiley</tspan><tspan fill="transparent">:D</tspan>
                text(fill="#000")
                  textPath(xlink:href="#textend" fill="#ccc")
                    | <tspan dy="-2" dx="3">:</tspan><tspan dy="2">D</tspan>
  
            h3#mathml MathML Demo
            h4 Quadratic Equation
            p The solution to the equation:
              math(xmlns="http://www.w3.org/1998/Math/MathML" alttext="ax&sup2;+bx+c=0"): mstyle(displaystyle="true")
                mi a
                | #[msup: #[mi x] #[mn 2]]
                | #[mo +] #[mi b] #[mo +] #[mi c] #[mo =] #[mn 0]
              | is given by the equation:
              math(xmlns="http://www.w3.org/1998/Math/MathML" alttext="x=(-b&plusmn;&radic;[b&sup2; -4ac]) / (2a)"): mstyle(displaystyle="true")
                | #[mi x] #[mo =]
                mfrac
                  mrow
                    | #[mo(form="prefix") -] #[mi b] #[mo &plusmn;]
                    msqrt
                      | #[msup: #[mi b] #[mn 2]]
                      | #[mo -] #[mn 4] #[mi a] #[mi c]
  
negative.code:           h3#inputs Inputs
            form
              fieldset.form-group
                label(for='input-text') Input text
                input#input-text(type='text' class='form-control')
              fieldset.form-group
                label(for='input-password') Input password
                input#input-password(type='password' class='form-control')
              fieldset.form-group
                label Input file
                input(type='file' class='form-control')
              fieldset.form-group
                .checkbox
                  label
                    input#checkbox1(type='checkbox')
                    |  Checkbox 1
                .checkbox
                  label
                    input#checkbox2(type='checkbox')
                    |  Checkbox 2
                .checkbox
                  label
                    input#checkbox3(type='checkbox')
                    |  Checkbox 3
              fieldset.form-group
                .radio
                  label
                    input#radio1(type='radio' name='radio' value='a')
                    |  Radio 1
                .radio
                  label
                    input#radio2(type='radio' name='radio' value='b')
                    |  Radio 2
                .radio
                  label
                    input#radio3(type='radio' name='radio' value='c')
                    |  Radio 3
            h3#selects Selects
            form
              fieldset.form-group
                label(for='select') Select
                select#select.form-control
                  option Option 1
                  option Option 2
                  option Option 3
                  option(selected='selected') Selected Option
                  optgroup(label='Option Group')
                    option Option Group 1
                    option Option Group 2
                    option Option Group 3
              fieldset.form-group
                label(for='select-multiple') Select multiple
                select#select-multiple.form-control(multiple='multiple' size='4')
                  option Option 1
                  option Option 2
                  option Option 3
                  option(selected='selected') Selected Option
            h3#forms-others Other Form Elements
            form
              fieldset.form-group
                label Button
                button#btn.btn.btn-primary(type='button') Button
              fieldset.form-group
                label(for='textarea') Textarea
                textarea#textarea.form-control Textarea
        aside.hidden-md-down.col-lg-3.c-sidebar
          nav.navbar
            h2.c-sidebar__title Contents
            ul.nav.c-sidebar__nav
              li.nav-item.dropdown
                a.nav-link.dropdown-toggle(href='#h1') Headings
                ul
                  li: a.dropdown-item(href='#h2') Heading 2
                  li: a.dropdown-item(href='#h3') Heading 3
                  li: a.dropdown-item(href='#h4') Heading 4
              li.nav-item.dropdown
                a.nav-link.dropdown-toggle(href='#basic-html-tags') Basic HTML Tags
                ul
                  li: a.dropdown-item(href='#lists') Lists
                  li: a.dropdown-item(href='#tables') Tables
                  li: a.dropdown-item(href='#code') Code
              li.nav-item.dropdown
                a.nav-link.dropdown-toggle(href='#other-w3c-elements') Other W3C Elements
                ul
                  li: a.dropdown-item(href='#svg') SVG
                  li: a.dropdown-item(href='#mathml') MathML
              li.nav-item.dropdown
                a.nav-link.dropdown-toggle(href='#forms') Forms
                ul
                  li: a.dropdown-item(href='#inputs') Inputs
                  li: a.dropdown-item(href='#selects') Selects
                  li: a.dropdown-item(href='#forms-others') Other Form Elements
      footer.container.footer
        p
          a.link(href='https://github.com/ryanvfung/html') Ryan Fung's HTML Template 5.2 Hydrazone
          |  (Valid 
          a.link(href='https://validator.nu/?doc=https%3A%2F%2Fryanvfung.github.io%2Fprojects%2Fhtml%2Fz52.html&parser=html5&laxtype=yes') HTML5
          |  &amp; 
          a.link(href='https://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fryanvfung.github.io%2Fprojects%2Fhtml%2Fz52.html&profile=css3&usermedium=all&warning=1&vextwarning=&lang=en') CSS3
          | )
        p Copyright &copy; 2010&ndash;2015 Ryan Fung. All rights reserved.
  