◊(Local Yarn Code "Check-in [9bce92ab]")

Overview
Comment:Styling enhancements for series pages
Timelines: family | ancestors | descendants | both | trunk
Files: files | file ages | folders
SHA3-256: 9bce92abd59de105d4920f488fff92fa61a4c6b8e313860f113d3eebd90fb243
User & Date: joel on 2019-04-08 01:44:46
Other Links: manifest | tags
Context
2019-04-08
12:37
Notes in listings: shorten titles, fix permlinks, fix styling where no author specified check-in: 5ac5a1e3 user: joel tags: trunk
01:44
Styling enhancements for series pages check-in: 9bce92ab user: joel tags: trunk
2019-04-07
22:23
Implement permlinks in article markup check-in: d3d5e894 user: joel tags: trunk
Changes

Modified code-docs/pollen.scrbl from [ea32843d] to [9e890351].

6
7
8
9
10
11
12

13
14
15
16
17
18
19
...
110
111
112
113
114
115
116








117
118
119
120
121
122
123
@; are permitted in any medium without royalty provided the copyright
@; notice and this notice are preserved.  This file is offered as-is,
@; without any warranty.

@(require "scribble-helpers.rkt")
@(require (for-label "../pollen.rkt"
                     "../dust.rkt"

                     racket/base
                     racket/contract
                     racket/string
                     txexpr
                     pollen/tag
                     pollen/setup
                     pollen/core
................................................................................
If you just need small caps without affecting the paragraph, use @code{smallcaps}.

@deftogether[(@defproc[(section    [element xexpr?] ...) txexpr?]
              @defproc[(subsection [element xexpr?] ...) txexpr?])]

Create second- and third-level headings, respectively. This is counting the article's title as the
first-level header (even if the current article has no title).









@deftogether[(@defproc[(link [link-id stringish?] [link-text xexpr?]) txexpr?]
              @defproc[(url  [link-id stringish?] [url string?]) void?])]

All hyperlinks are specified reference-style. So, to link some text, use the @code{link} tag with
an identifier, which can be a string, symbol or number. Elsewhere in the text, use @code{url} with
the same identifier to specify the URL:







>







 







>
>
>
>
>
>
>
>







6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
...
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
@; are permitted in any medium without royalty provided the copyright
@; notice and this notice are preserved.  This file is offered as-is,
@; without any warranty.

@(require "scribble-helpers.rkt")
@(require (for-label "../pollen.rkt"
                     "../dust.rkt"
                     "../crystalize.rkt"
                     racket/base
                     racket/contract
                     racket/string
                     txexpr
                     pollen/tag
                     pollen/setup
                     pollen/core
................................................................................
If you just need small caps without affecting the paragraph, use @code{smallcaps}.

@deftogether[(@defproc[(section    [element xexpr?] ...) txexpr?]
              @defproc[(subsection [element xexpr?] ...) txexpr?])]

Create second- and third-level headings, respectively. This is counting the article's title as the
first-level header (even if the current article has no title).

@defproc[(block [element xexpr?] ...) txexpr?]

A container for content that should appear grouped together on larger displays. Intended for use in
Series pages, where the template is very minimal. You would want output from
@racket[list-short/articles] to appear inside a @racket[block], but you would want output from
@racket[list-full/articles] to appear outside it (since each article effectively supplies its own
block). Only relevant to HTML output.

@deftogether[(@defproc[(link [link-id stringish?] [link-text xexpr?]) txexpr?]
              @defproc[(url  [link-id stringish?] [url string?]) void?])]

All hyperlinks are specified reference-style. So, to link some text, use the @code{link} tag with
an identifier, which can be a string, symbol or number. Elsewhere in the text, use @code{url} with
the same identifier to specify the URL:

Modified pollen.rkt from [f565258c] to [1380f84d].

109
110
111
112
113
114
115

116
117
118
119
120
121
122

(poly-branch-tag link)
(poly-branch-tag url)
(poly-branch-tag fn)
(poly-branch-tag fndef)

(poly-branch-kwargs-tag note)


;; Not yet implemented
; (poly-branch-tag table)         ; #:columns ""
; (poly-branch-tag inline-math)
; (poly-branch-tag margin-note)
; (poly-branch-tag noun)
; (poly-branch-func index-entry entry)







>







109
110
111
112
113
114
115
116
117
118
119
120
121
122
123

(poly-branch-tag link)
(poly-branch-tag url)
(poly-branch-tag fn)
(poly-branch-tag fndef)

(poly-branch-kwargs-tag note)
(poly-branch-tag block)

;; Not yet implemented
; (poly-branch-tag table)         ; #:columns ""
; (poly-branch-tag inline-math)
; (poly-branch-tag margin-note)
; (poly-branch-tag noun)
; (poly-branch-func index-entry entry)

Modified series/template.html.p from [a5d01b90] to [5863c80f].

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html>
<html lang="en">

◊html$-page-head[(select-from-metas 'title metas)]

◊html$-page-body-open[]

<section class="article-listing">

<h2>◊(select-from-metas 'title metas)</h2>

◊(unfence (->html doc #:splice? #t))

</section>

◊html$-page-body-close[]

</html>









<
<
<
<


<
<





1
2
3
4
5
6
7




8
9


10
11
12
13
14
<!DOCTYPE html>
<html lang="en">

◊html$-page-head[(select-from-metas 'title metas)]

◊html$-page-body-open[]





◊(unfence (->html doc #:splice? #t))



◊html$-page-body-close[]

</html>


Modified tags-html.rkt from [a6c4e837] to [3eb83629].

70
71
72
73
74
75
76

77
78
79
80
81
82
83
..
85
86
87
88
89
90
91



92
93
94
95
96
97
98
(provide html-root
         html-item
         html-section
         html-subsection
         html-newthought
         html-smallcaps
         html-center

         html-blockcode
         html-verse
         html-link
         html-url
         html-fn
         html-fndef
         html-note)
................................................................................
(define html-item (default-tag-function 'li))
(define html-section (default-tag-function 'h2))
(define html-subsection (default-tag-function 'h3))
(define html-newthought (default-tag-function 'span #:class "newthought"))
(define html-smallcaps (default-tag-function 'span #:class "smallcaps"))
(define html-center (default-tag-function 'div #:style "text-align: center"))




(define (html-root . elements)
  (define first-pass
    (decode-elements elements
                     #:txexpr-elements-proc decode-hardwrapped-paragraphs
                     #:exclude-tags '(script style figure table pre)))
  (define second-pass
    (decode-elements first-pass







>







 







>
>
>







70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
..
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
(provide html-root
         html-item
         html-section
         html-subsection
         html-newthought
         html-smallcaps
         html-center
         html-block
         html-blockcode
         html-verse
         html-link
         html-url
         html-fn
         html-fndef
         html-note)
................................................................................
(define html-item (default-tag-function 'li))
(define html-section (default-tag-function 'h2))
(define html-subsection (default-tag-function 'h3))
(define html-newthought (default-tag-function 'span #:class "newthought"))
(define html-smallcaps (default-tag-function 'span #:class "smallcaps"))
(define html-center (default-tag-function 'div #:style "text-align: center"))

(define (html-block . elements)
  `(section [[class "content-block"]] (div [[class "content-block-main"]] ,@elements)))

(define (html-root . elements)
  (define first-pass
    (decode-elements elements
                     #:txexpr-elements-proc decode-hardwrapped-paragraphs
                     #:exclude-tags '(script style figure table pre)))
  (define second-pass
    (decode-elements first-pass

Modified web-extra/martin.css.pp from [4103440b] to [6ce3d0c2].

524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547

548
549
550
551
552
553
554
555
556
557
558
...
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732




733
734
735



736
737
738
739
740
741
742
743
744

745
746
747
748
749
        color: ◊color-xrefmark;
        display: inline-block;
        width: 1em;
    }

    /* ******* (Mobile first) Journal View styling *******
     */
    section.article-listing h2 {
        font-weight: normal; 
        font-style: italic; 
        font-size: ◊x-lineheight[1]; 
        margin: 0 0 ◊x-lineheight[0.5] 0;
    }

    section.article-listing h2::before {
        content: '§\00a0';
        font-family: ◊body-font;
        font-style: normal;
        color: #d0d0d0;
    }

    section.article-listing aside {
        margin-bottom: ◊x-lineheight[1];
        font-style: italic;

    }

    ul.article-list {
        margin: 0; 
        padding: 0;
    }

    ul.article-list li {
        list-style-type: none;
        display: block;
        margin: 0;
................................................................................

        div.note h3 {
        }

        /* ******* (Grid support) Journal View styling *******
         */

        section.article-listing {
            display: grid;
            grid-template-columns: 8rem 7fr 1fr;
            grid-template-rows: auto auto auto;
            grid-template-areas: 
               ". title title"
               "margin main  .";
            align-items: start;     /* Puts everything at the top */
            margin-bottom: 0;
            grid-column-gap: 1rem;




        }

        section.article-listing>h2 {



            grid-area: title;
        }
        section.article-listing>aside {
            grid-area: margin;
            font-size: 0.8rem;
            line-height: ◊derive-lineheight[4 #:per-lines 3];
            text-align: right;
            color: #6b6b6b;
        }

        ul.article-list {
            grid-area: main;
        }
    }
}







<
<
<
<
<
|
<
<
<
<
<
<
<
<
<
<
<
>



|







 







|



|
<
<



>
>
>
>

<
<
>
>
>
|

<
<
<
<
<
<
|
>
|
<



524
525
526
527
528
529
530





531











532
533
534
535
536
537
538
539
540
541
542
543
...
701
702
703
704
705
706
707
708
709
710
711
712


713
714
715
716
717
718
719
720


721
722
723
724
725






726
727
728

729
730
731
        color: ◊color-xrefmark;
        display: inline-block;
        width: 1em;
    }

    /* ******* (Mobile first) Journal View styling *******
     */

















    section.content-block {
    }

    ul.article-list {
        margin-top: ◊x-lineheight[1];
        padding: 0;
    }

    ul.article-list li {
        list-style-type: none;
        display: block;
        margin: 0;
................................................................................

        div.note h3 {
        }

        /* ******* (Grid support) Journal View styling *******
         */

        section.content-block {
            display: grid;
            grid-template-columns: 8rem 7fr 1fr;
            grid-template-rows: auto auto auto;
            grid-template-areas: "margin main .";


            align-items: start;     /* Puts everything at the top */
            margin-bottom: 0;
            grid-column-gap: 1rem;
            box-shadow: 0.4em 0.4em 10px #e3e3e3;
            background: white;
            border: solid 1px #dedede;
            border-radius: 2px;
        }


        div.content-block-main {
            padding-top: ◊x-lineheight[1];
            padding-bottom: ◊x-lineheight[1];
            grid-area: main;
        }







        div.content-block-main > :first-child {
            margin-top: 0 !important;

        }
    }
}