anchor.diff:          This is the rest of the text.
           This is the rest of the text.
           This is the rest of the text.
  -  section#c-Pullquote
  -    h2 The #[code .c-Pullquote] Component
  -    p.
  -      A #[code .c-Pullquote] tends to have a stronger effect than generic #[code blockquote] elements.
  -      Use it when the original source is less than 40 words and contains no paragraph breaks.
  -      Do not include child #[code p] Elements. To cite the source, add a child
  -      #[code .c-Pullquote__Src] Component.
  +  section#pull-quote-component
  +    h2 The Pull&nbsp;Quote Component
  +    p.
  +      A pull quote has a stronger effect than unstyled text, even if it does belong
  +      in a #[code blockquote] element.
  +      To cite the source, add a child #[code .c-Pullquote__Src] Component.
  +    p.
  +      Use this Component when the original source text is less than 40 words and contains
  +      no paragraph breaks. Do not include child #[code p] elements.
  +      If the original source is long enough and/or has paragraph breaks, you shouldn&rsquo;t be
  +      using this large component.
       figure
         blockquote.c-Pullquote(cite="http://www.imdb.com/title/tt1648163/quotes").
           Look at you, soaring through the air like an eagle&hellip; piloting a blimp.
           #[cite.c-Pullquote__Src: abbr(title="Genetic Lifeform and Disk Operating System") GLaDOS]
  -  section#c-ListAction
  -    h2 The #[code .c-ListAction] Component
  -    p.
  -      The following is a #[code .c-ListAction]. Action lists are used
  -      specifically for short, one-line, textual hyperlinks.
  +      pre.
  +        &lt;blockquote class="#[u c-Pullquote]" cite="..."&gt;
  +          Look at you, soaring through the air ...
  +          &lt;cite class="#[u c-Pullquote__Src]"&gt;GLaDOS&lt;/cite&gt;
  +        &lt;/blockquote&gt;
  +  section#action-list-component
  +    h2 The Action&nbsp;List Component
  +    p Action lists are used specifically for short, one-line, textual hyperlinks.
       figure
         ul.c-ListAction
  -        li.c-ListAction__Item                             .c-ListAction &gt; .c-ListAction__Item
  -        li.c-ListAction__Item: a                          .c-ListAction &gt; .c-ListAction__Item &gt; a
  -        li.c-ListAction__Item: a(href="")                 .c-ListAction &gt; .c-ListAction__Item &gt; a[href]
  -        li.c-ListAction__Item: a(rel="external")          .c-ListAction &gt; .c-ListAction__Item &gt; a[rel=&quot;external&quot;]
  -        li.c-ListAction__Item: a(href="" rel="external")  .c-ListAction &gt; .c-ListAction__Item &gt; a[href][rel=&quot;external&quot;]
  -  section#c-ListFootnotes
  -    h2 The #[code .c-ListFootnotes] Component
  -    p.
  -      In the #[code footer] of a document or section, insert a #[code .c-ListFootnotes]
  -      for a Footnotes List Component.
  +        li.c-ListAction__Item a normal action list item
  +        li.c-ListAction__Item: a an anchored action list item
  +        li.c-ListAction__Item: a(href="") a linked action list item
  +      pre.
  +        &lt;ul class="#[u c-ListAction]"&gt;
  +          &lt;li class="#[u c-ListAction__Item]"&gt; normal &lt;/li&gt;
  +          &lt;li class="#[u c-ListAction__Item]"&gt;&lt;a&gt; anchored &lt;/a&gt;&lt;/li&gt;
  +          &lt;li class="#[u c-ListAction__Item]"&gt;&lt;a href=""&gt; linked &lt;/a&gt;&lt;/li&gt;
  +        &lt;/ul&gt;
  +  section#footnotes-list-component
  +    h2 The Footnotes&nbsp;List Component
  +    p.
  +      If you have footnotes
  +      in the #[code footer] of a document or section, use a Footnotes List Component.
         Read
         #[a(rel="external" href="https://github.com/chharvey/chharvey.github.io/wiki/Footnotes") my technical report on footnotes]
         for more information.
       figure
         p.
           Conversion gel is made with moon rocks.#[sup: a.Rf#rf-rocks(rel="this" href="#fn-rocks") 1]
  -        Some panels are made with conversion gel.#[sup: a.Rf#rf-panels(rel="this" href="#fn-panels") 2]
  +        Some panels are coated with conversion gel.#[sup: a.Rf#rf-panels(rel="this" href="#fn-panels") 2]
         footer
           ul.c-ListFootnotes
             li.
               #[sup: a.Fn#fn-rocks(rel="this" href="#rf-rocks") 1]
               #[sup: a.Fn#fn-panels(rel="this" href="#rf-panels") 2]
               Don&rsquo;t breathe in moon rocks; they will give you lung cancer.
  -            This footnote contains a lot of text that goes on and on forever and ever until at some
  -            point it reaches the next line.
  +            However this may be unavoidable, given the amount of conversion gel on these panels.
             li.
               #[sup: a.Fn(href="#") 3]
  -            Another empty footnote. A footnote may include a citation, work cited, or simply a
  +            An empty footnote. A footnote may include a citation, work cited, or simply a
               parenthetical remark.
  -  section#c-Table.a-bc-aperturewhite
  -    h2 The #[code .c-Table#[span.-va-st &lowast;]] Family of Components
  -    p Use the following Components for extra styles on #[code table] and #[code dl] Elements.
  +      pre.
  +        ... moon rocks.&lt;sup&gt;&lt;a&gt;1&lt;/a&gt;&lt;/sup&gt;
  +        ... conversion gel.&lt;sup&gt;&lt;a&gt;2&lt;/a&gt;&lt;/sup&gt;
  +        &lt;footer&gt;
  +          &lt;ul class="#[u c-ListFootnotes]"&gt;
  +            &lt;li&gt;
  +              &lt;sup&gt;&lt;a&gt;1&lt;/a&gt;&lt;/sup&gt;
  +              &lt;sup&gt;&lt;a&gt;2&lt;/a&gt;&lt;/sup&gt;
  +              Don&rsquo;t breathe in moon rocks ...
  +            &lt;/li&gt;
  +            &lt;li&gt;&lt;sup&gt;&lt;a&gt;3&lt;/a&gt;&lt;/sup&gt;An empty footnote ...&lt;/li&gt;
  +          &lt;/ul&gt;
  +        &lt;/footer&gt;
  +  section.a-bc-aperturewhite#components-for-tables
  +    h2 Components for Tables
  +    p Use the following classes for extra styles on #[code table] and #[code dl] elements.
       form
         fieldset(style="margin-bottom:1.5rem;")
           dl.o-GridFlex.-mb-0
  
positive.code:         dd.update
            time(datetime="2014-05-08 14:53") May 8, 2013 #[span.tod 2:53 PM]
            span.o-Textbox.c-Label.c-Label--dang.-ml-1 Latest
    section#text-level
      h2 Text-Level Components
      section#c-Acro
        h3 The #[code .c-Acro] Component
        p Use #[span.c-Acro ACROnym] for a generic acronym.
        p.
          Use #[span.c-Acro #[span.c-Acro__First A]CROnym] for
          an acronym that begins a paragraph, sentence, or list item.
      section#c-Camo
        h3 The #[code .c-Camo] Component
        p.
          A #[code .c-Camo] is a #[a.c-Camo(href="") camouflaged hyperlink].
          Even though it&rsquo;s a link, it looks like normal text (until hover).
          It even works on #[a.c-Camo a:not([href]) links].
          Best used for printing.
    section#breadcrumbs
      h2 Breadcrumbs
      p.
        Read
  
negative.code:         dd.o-Box.a-w-p3  .a-w-p3  (&asymp; 23.607%)
          dt.o-Box.a-w-p4c .a-w-p4c (&asymp; 85.410%)
          dd.o-Box.a-w-p4  .a-w-p4  (&asymp; 14.590%)
    section#document-component
      h2 The Document Component
      p.
        Use #[code .c-Document] to mark up a document such as an article or blog post.
        A #[dfn#dfn-document document] may take the form of a #[code body &gt; main] or
        #[code body #[abbr(title="descendant") &gt;&gt;] article].
        It should have a #[b status] and be marked up
        with metadata. Read
        #[a(rel="external" href="https://github.com/chharvey/chharvey.github.io/wiki/Document-Status") my technical report on document status]
        for more information.
        Any element inside a #[code .c-Document] may be marked with subcomponent classes indicating their status.
      p.
        A Document is normative by default, but may also have informative (non-essential) elements,
        which typically have the boolean #[code [data-informative]] attribute.
      figure
        article.c-Document
          p Lorem ipsum dolor sit amet.
          p.c-Document__Draft Suspendisse ut auctor enim.
          p.c-Document__Complete Pellentesque habitant morbi tristique senectus.
          p.c-Document__Released Aenean consectetur suscipit urna.
          p.c-Document__Informative Donec finibus ut lectus finibus pellentesque.
        pre.
          &lt;article class="#[u c-Document]"&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet.&lt;/p&gt;
            &lt;p class="#[u c-Document__Draft]"&gt;Suspendisse ut auctor enim.&lt;/p&gt;
            &lt;p class="#[u c-Document__Complete]"&gt;Pellentesque habitant morbi tristique senectus.&lt;/p&gt;
            &lt;p class="#[u c-Document__Released]"&gt;Aenean consectetur suscipit urna.&lt;/p&gt;
            &lt;p class="#[u c-Document__Informative]"&gt;Donec finibus ut lectus finibus pellentesque.&lt;/p&gt;
          &lt;/article&gt;
      section#document-meta(style="opacity: 0.3;")
        h3 Document Meta
        p #[code .c-Document__Meta] marks up meta-information about a document.
        p.
          Read
  