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 |
<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>
| | | 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 |
main {
background: white;
margin: 0;
padding: ◊x-lineheight[0.5] ◊x-lineheight[1];
}
| | | > | | > | | | < < < < < | 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 |
/* 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 {
| | < < < < < < < < < < < < < > | 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 {
|
| ︙ | ︙ |