Generate inline CSS for page header
The idea here is to provide as little CSS as is sensible for the initial page load to be styled in a layout similar to the final layout. This initial styling may be briefly visible on a slow conection. Slow connections can happen for a variety of reasons. For example, I'm a Tor user, and connection speeds vary. Mobile connection speeds can also vary wildly. This adds a few hundred bytes, but I was able to cut it down quite a bit, and I don't find this to be unreasonable relative to the other data on each page.master
parent
20a9d36077
commit
89328fe206
GPG Key ID:
8C917B7F5DC51BA2
|
|
@ -6,6 +6,7 @@
|
|||
/post/list
|
||||
!/docs/about/resume.html
|
||||
rss.xml
|
||||
/inline.css
|
||||
/www-root
|
||||
/cgit-root
|
||||
/papers/*.pdf
|
||||
|
|
|
|||
15
Makefile
15
Makefile
|
|
@ -59,6 +59,8 @@ www-pages = $(patsubst src/%, $(www-root)/%, $(srcpages))
|
|||
www-files = $(www-pages) $(www-root)/style.css $(www-root)/rss.xml $(www-paper) \
|
||||
$(www-images) $(www-fonts) $(www-root)/redirect-map.php
|
||||
|
||||
pgdeps := src/mkheader inline.css src/h12title src/header.tpl.htm src/footer.tpl.htm
|
||||
|
||||
RSS_N=10
|
||||
export WWW_URL
|
||||
|
||||
|
|
@ -71,11 +73,11 @@ default: www-root
|
|||
src/post2meta $< > $@
|
||||
src/talks.html: src/talks.rec
|
||||
src/papers.html: src/papers.rec
|
||||
%.html %.xml: %.sh post/list src/mkheader src/header.tpl.htm src/footer.tpl.htm $(phtml)
|
||||
%.html %.xml: %.sh post/list $(pgdeps) $(phtml)
|
||||
$< > $@
|
||||
%.html: %.md src/post2html src/mkheader src/h12title src/header.tpl.htm src/footer.tpl.htm src/pandoc.tpl
|
||||
%.html: %.md src/post2html $(pgdeps) src/pandoc.tpl
|
||||
src/post2html $< > $@
|
||||
%.html: %.htm src/mkheader src/h12title src/header.tpl.htm src/footer.tpl.htm
|
||||
%.html: %.htm src/mkheader inline.css src/h12title src/header.tpl.htm src/footer.tpl.htm
|
||||
src/mkheader about @__PAGE_TITLE__@ \
|
||||
| cat - $< src/footer.tpl.htm \
|
||||
| src/h12title @__PAGE_TITLE__@ \
|
||||
|
|
@ -95,6 +97,13 @@ post/list: $(pmeta)
|
|||
post/%.mk: post/%.meta build-aux/mkmk
|
||||
build-aux/mkmk $(www-root) $< > $@
|
||||
|
||||
# Inline CSS for header (for initial page load). Blocks marked with
|
||||
# `/*inline*/' are included.
|
||||
inline.css: style.css
|
||||
awk '/\/\*inline\*\/$$/,/^\}/{sub(/ *\/\*inline\*\//, ""); print}' $< \
|
||||
| sed 's/^ \+//g; s/ *\([{}>()]\) */\1/g; s/^ *\([^:]\+:\) */\1/g' \
|
||||
| tr -d '\n' > $@
|
||||
|
||||
# Note the conditional include only for webroot. This is needed for two
|
||||
# reasons:
|
||||
# 1. To avoid including them on `clean' (see GNU Make manual, which is
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@
|
|||
<link rel="stylesheet" type="text/css" href="/style.css" />
|
||||
<title>@PAGE_TITLE@Mike Gerwitz</title>
|
||||
<meta name="viewport" content="initial-scale=1.0" />
|
||||
<style>
|
||||
</style>
|
||||
</head>
|
||||
<body class="@PAGE_TYPE@">
|
||||
<header>
|
||||
|
|
|
|||
|
|
@ -46,7 +46,8 @@ main()
|
|||
}
|
||||
|
||||
sed "s#@PAGE_TITLE@#$title${title:+ \\— }#g
|
||||
s#@PAGE_TYPE@#$type#g" \
|
||||
s#@PAGE_TYPE@#$type#g
|
||||
/<style>/rinline.css" \
|
||||
src/header.tpl.htm
|
||||
}
|
||||
|
||||
|
|
|
|||
49
style.css
49
style.css
|
|
@ -30,15 +30,16 @@ html {
|
|||
background-color: #2e3436;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
|
||||
/* TODO: slightly non-black color */
|
||||
|
||||
body { /*inline*/
|
||||
margin: 0;
|
||||
padding: 2em 4em 0em 4em;
|
||||
|
||||
}
|
||||
body {
|
||||
background-color: white;
|
||||
text-align: justify;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Open Sans', sans-serif;
|
||||
}
|
||||
|
||||
|
|
@ -87,7 +88,7 @@ footer, #footer {
|
|||
a { color: #0066cc; }
|
||||
a:visited { color: #6666cc; }
|
||||
|
||||
.title > a {
|
||||
.title > a { /*inline*/
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -284,19 +285,20 @@ h3 { font-size: 1.1em; }
|
|||
h4 { font-size: 1.0em; }
|
||||
|
||||
|
||||
h1 a, h1 a:visited {
|
||||
h1 a,
|
||||
h1 a:visited {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
header {
|
||||
header { /*inline*/
|
||||
position: relative;
|
||||
margin: 0 auto 2em auto;
|
||||
max-width: 120ch;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
header h1 { /*inline*/
|
||||
font-size: 2em;
|
||||
margin: 0px 0px 0.1em 0px;
|
||||
}
|
||||
|
|
@ -305,12 +307,15 @@ header h1 {
|
|||
text-align: left;
|
||||
}
|
||||
|
||||
h2.desc {
|
||||
h2.desc { /*inline*/
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
h2.desc {
|
||||
color: #666f63;
|
||||
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
font-weight: normal;
|
||||
color: #666f63;
|
||||
|
||||
margin: 0px 0px 2em 0px;
|
||||
}
|
||||
|
|
@ -319,7 +324,7 @@ header nav {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
@media ( min-width: 90ch ) {
|
||||
@media ( min-width: 90ch ) { /*inline*/
|
||||
header nav {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
|
@ -327,20 +332,26 @@ header nav {
|
|||
}
|
||||
}
|
||||
|
||||
.menu ul {
|
||||
.menu ul { /*inline*/
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
}
|
||||
.menu ul {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
/* height of h1 to the left */
|
||||
line-height: 2em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.menu li { /*inline*/
|
||||
display: inline-block;
|
||||
}
|
||||
.menu li {
|
||||
display: inline-block;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.menu li a {
|
||||
color: #2e3436;
|
||||
text-decoration: none;
|
||||
|
|
@ -357,9 +368,11 @@ header nav {
|
|||
it easier for the eyes to not loose their way. So the wider the text,
|
||||
the larger the line spacing. */
|
||||
|
||||
article { /*inline*/
|
||||
max-width: 70ch;
|
||||
}
|
||||
article {
|
||||
line-height: 1.8em;
|
||||
max-width: 70ch;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue