◊(Local Yarn Code "Changes On Branch alt-logo")

Login
About History Code Code Docs Road Map Issues
Hide Diff Patch Side-by-Side Diff

Changes In Branch alt-logo Excluding Merge-Ins

This is equivalent to a diff from fdc47974 to 671acdae

2019-04-04
15:48
Merge alternate header/logo concept check-in: 5dbeca0e user: joel tags: trunk
15:22
Subtler header + new logo concept Leaf check-in: 671acdae user: joel tags: alt-logo
2019-03-31
20:19
Remove attr-present (redundant) check-in: fdc47974 user: joel tags: trunk
2019-03-24
00:50
Correct scribble doc for select-rows! check-in: 4e28f613 user: joel tags: trunk

Modified snippets-html.rkt from [fd84a05e] to [7d073437].

︙
48
49
50
51
52
53
54
55

56
57
58
59
60
61
62

48
49
50
51
52
53
54

55
56
57
58
59
60
61
62








-
+








 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" type="text/css" href="/web-extra/martin.css">
 </head>})

(define (html$-page-body-open)
  ◊string-append{<body><main>
 <a href="/"><header>
 <img src="/web-extra/logo.png" height="103" width="129" class="logo">
 <img src="/web-extra/mark.svg" height="103" class="logo">
 <h1>The Local Yarn</h1>
 </header></a>})

(define (html$-article-open title? title-tx published)
  (cond
    [title?
     ◊string-append{<article class="with-title hentry">
︙

Added web-extra/mark.svg version [adb51b3e].

cannot compute difference between binary files

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

︙
119
120
121
122
123
124
125
126

127
128
129
130
131



132
133
134
135
136
137
138

139
140
141

142

143
144
145
146
147
148


149
150
151
152
153
154
155
156
157
158
159
160

119
120
121
122
123
124
125

126
127
128
129


130
131
132
133
134
135
136
137
138

139
140
141
142
143

144
145
146
147
148


149
150





151
152
153
154
155
156
157








-
+



-
-
+
+
+






-
+



+
-
+




-
-
+
+
-
-
-
-
-









    main {
        background: white;
        margin: 0;
        padding: ◊x-lineheight[0.5] ◊x-lineheight[1];
    }

    main header {
    main > a > header {
        text-align: center;
    }

    main header h1 {
        font-size: ◊x-lineheight[1.5];
    main > a > header h1 {
        display: none;
        /* font-size: ◊x-lineheight[1.5];
        line-height: ◊x-lineheight[2];
        margin: 0 0 ◊x-lineheight[0.5] 0;
        font-weight: normal;
        font-style: italic;
        text-transform: lowercase;
        color: ◊color-pagehead;
        transition: color 0.25s ease;
        transition: color 0.25s ease; */
    }

    img.logo {
        height: ◊x-lineheight[3];
        filter: grayscale(60%);
        filter: none;
        transition: filter 0.5s ease;
    }

    header:hover img.logo {
        filter: none;
        transition: filter 0.1s ease;
        filter: invert(12%) sepia(87%) saturate(2559%) hue-rotate(348deg) brightness(125%) contrast(88%);
        transition: filter 0.5s ease;
    }

    main header:hover h1 {
        color: ◊color-linkhover;
        transition: color 0.1s 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. */
︙
187
188
189
190
191
192
193



194
195
196
197
198
199

200
201
202
203
204
205
206

184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207








+
+
+






+








    }

    /* On mobile, an <ARTICLE> is just a box. Later we'll do fancy stuff if grid support is detected. */
    article {
        margin: ◊x-lineheight[2] 0 ◊x-lineheight[1] 0;
        padding-top: ◊x-lineheight[1];
    }
    article:first-of-type {
        margin-top: ◊x-lineheight[1];
    }

    /* Here's my thing these days about article titles: they shouldn't be required. When you write in a
       paper journal, do you think of a title for every entry? No! You just write the date. The date is
       the heading. Makes sense. But, this means I've had to think long and hard about how to present two
       different types of articles (those with titles AND dates, and those with just a date for the title). 

        filter: invert(12%) sepia(87%) saturate(359%) hue-rotate(348deg) brightness(105%) contrast(88%);
       For now: By default, the title-less article is assumed to be the norm. On these, we use <H1> to 
       show the date in italics. */
    article>h1 {
        font-size: ◊x-lineheight[1];
        line-height: ◊x-lineheight[1];
        margin: 0 0 ◊x-lineheight[1] 0;
        font-style: italic;
︙
576
577
578
579
580
581
582
583

584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614

615
616
617
618
619
620
621

577
578
579
580
581
582
583

584
585
586
587
588
589
590
591
592
593
594
595
596










597

598
599
600


601
602
603
604
605
606
607
608
609
610








-
+












-
-
-
-
-
-
-
-
-
-

-



-
-


+










/* Here’s where we start getting funky for any viewport wider than mobile portrait.
   An iPhone 6 is 667px wide in landscape mode, so that’s our breakpoint. */

@media only screen and (min-width: 667px) {
    main {
        margin: 2em auto;
        margin: 0 auto;
        padding-left: 1rem;
        padding-right: 1rem;
        width: 30rem;
        max-width: 90%;
    }

    @supports (grid-area: auto) {
        main { 
            width: 42rem;
            background: none;
        }

        main header {
            display: grid;
            grid-template-columns: 9rem 12fr 1fr;
            grid-column-gap: 0;
            grid-template-areas: "logo masthead .";
            align-items: center;
            text-align: left;
            margin-bottom: ◊x-lineheight[2];
        }

        header img.logo {
            grid-area: logo;
            height: ◊x-lineheight[3];
            max-height: 103px;
            width: auto;
            justify-self: end;
            margin-right: 1rem;
        }

        /* This header is display:none above, so the following is vestigial */
        main header h1 {
            grid-area: masthead;
            margin: 0;
            line-height: 1em;
        }
        
        article {
︙

This page was generated in about 0.017s by Fossil 2.19 [318ab802db] 2022-05-27 02:05:21