◊(Local Yarn Code "Check-in [8e848ec1]")

(define (html$-note-in-article id date contents author author-url)
  (define maybe-author-class?
    (cond [(or (string=? author default-authorname) (string=? author "")) "by-proprietor"]
          [else ""]))

  ◊string-append{<div class="note ◊maybe-author-class? u-comment" id="◊|id|">
 <h3><a href="#◊|id|"><time class="dt-published" datetime="◊date">◊ymd->english[date]</time>
 <h3><a class="rel-bookmark note-permlink" href="#◊|id|"><time class="dt-published" datetime="◊date">◊ymd->english[date]</time>
 </a></h3>
 <div class="p-content p-name">
 ◊contents
 </div>
 <div class="note-meta">
 &mdash;<a class="u-author h-card" href="◊|author-url|"><i>◊|author|</i></a>
 </div>

        transition: filter 0.25s ease;
    }

    main header:hover h1 {
        color: ◊color-bodytext;
        /* transition: color 0.25s ease; */
    }
    /* Links. Generally, we want them colored that weird springy green, underlines
       only when hovered, thanks.

       I read somewhere years ago that you should specify styling for links in the
    /* I read somewhere years ago that you should specify styling for links in the
       following order: Link, Visited, Hover, Active. 
           → Remember the mnemonic: Lord Vader Has Arrived.
       
       Not sure if that's relevant advice any more but I still follow it. It can't hurt. */
       
    a:link, a:visited {         /* [L]ord [V]ader… */
        color: ◊color-link;

    a.rel-bookmark::after {
        content: '\f894'; 
        margin-left: 4px;
        font-style: normal;
        color: #809102;
    }
    a.rel-bookmark.note-permlink::after {
        content: '-';       /* NB: this is not a hyphen! It is a U+002D glyph, the Unicode “minus sign” */
        content: '\f897';
        margin-left: 4px;
    }

    a.rel-bookmark:hover::after {
        color: #aaba16;
    }