◊(Local Yarn Code "Check-in [671acdae]")

Login
About History Code Code Docs Road Map Issues
Overview
Comment:Subtler header + new logo concept
Timelines: family | ancestors | descendants | both | alt-logo
Files: files | file ages | folders
SHA3-256: 671acdaefcc2ed1d4e155b3b52a639b2aabb94c22605b545bbc30f6d2cfc8cf1
User & Date: joel on 2019-04-04 15:22:28
Other Links: branch diff | manifest | tags
Context
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
Changes
Hide Diffs Unified Diffs Ignore Whitespace Patch

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

︙︙
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">
 <h1>The Local Yarn</h1>
 </header></a>})

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








|








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


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

    main header {
        text-align: center;
    }

    main header h1 {

        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;
    }

    img.logo {

        filter: grayscale(60%);
        transition: filter 0.5s ease;
    }

    header:hover img.logo {
        filter: none;
        transition: filter 0.1s 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. */








|



|
>
|






|



>
|




|
|
<
<
<
<
<








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 > a > header {
        text-align: center;
    }

    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; */
    }

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

    header:hover img.logo {
        filter: invert(12%) sepia(87%) saturate(2559%) hue-rotate(348deg) brightness(125%) contrast(88%);
        transition: filter 0.5s 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

    }

    /* 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];
    }




    /* 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). 


       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;








>
>
>






>








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



/* 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;
        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;
        }


        main header h1 {
            grid-area: masthead;
            margin: 0;
            line-height: 1em;
        }
        
        article {








|












<
<
<
<
<
<
<
<
<
<

<



<
<


>








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: 0 auto;
        padding-left: 1rem;
        padding-right: 1rem;
        width: 30rem;
        max-width: 90%;
    }

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











        header img.logo {

            height: ◊x-lineheight[3];
            max-height: 103px;
            width: auto;


        }

        /* 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.012s by Fossil 2.19 [318ab802db] 2022-05-27 02:05:21