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

Overview
Comment:Fix styles for note permlinks in individual article pages
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256: 8e848ec1e1d34c8cce3e44b24ccab9105d8742088407f5ba0a5b3dc6e7dc0f7b
User & Date: joel on 2018-09-26 03:39:01
Other Links: manifest | tags
Context
2019-02-09
19:32
Rename template-html.rkt → snippets-html.rkt check-in: 99fe3246 user: joel tags: trunk
2018-09-26
03:39
Fix styles for note permlinks in individual article pages check-in: 8e848ec1 user: joel tags: trunk
02:57
Make note author bylines italic check-in: 6069a320 user: joel tags: trunk
Changes

Modified template-html.rkt from [f7768941] to [38947f14].

140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

(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>
 </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>







|







140
141
142
143
144
145
146
147
148
149
150
151
152
153
154

(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 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>

Modified web-extra/martin.css.pp from [8449f20b] to [de63ae31].

149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
        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
       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;







<
<

|







149
150
151
152
153
154
155


156
157
158
159
160
161
162
163
164
        transition: filter 0.25s ease;
    }

    main header:hover h1 {
        color: ◊color-bodytext;
        /* transition: color 0.25s ease; */
    }



    /* 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;
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
    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” */
        margin-left: 4px;
    }

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








|







253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
    a.rel-bookmark::after {
        content: '\f894'; 
        margin-left: 4px;
        font-style: normal;
        color: #809102;
    }
    a.rel-bookmark.note-permlink::after {
        content: '\f897';
        margin-left: 4px;
    }

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