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
|
@ -6,6 +6,7 @@
|
||||||
/post/list
|
/post/list
|
||||||
!/docs/about/resume.html
|
!/docs/about/resume.html
|
||||||
rss.xml
|
rss.xml
|
||||||
|
/inline.css
|
||||||
/www-root
|
/www-root
|
||||||
/cgit-root
|
/cgit-root
|
||||||
/papers/*.pdf
|
/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-files = $(www-pages) $(www-root)/style.css $(www-root)/rss.xml $(www-paper) \
|
||||||
$(www-images) $(www-fonts) $(www-root)/redirect-map.php
|
$(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
|
RSS_N=10
|
||||||
export WWW_URL
|
export WWW_URL
|
||||||
|
|
||||||
|
@ -71,11 +73,11 @@ default: www-root
|
||||||
src/post2meta $< > $@
|
src/post2meta $< > $@
|
||||||
src/talks.html: src/talks.rec
|
src/talks.html: src/talks.rec
|
||||||
src/papers.html: src/papers.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 $< > $@
|
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__@ \
|
src/mkheader about @__PAGE_TITLE__@ \
|
||||||
| cat - $< src/footer.tpl.htm \
|
| cat - $< src/footer.tpl.htm \
|
||||||
| src/h12title @__PAGE_TITLE__@ \
|
| src/h12title @__PAGE_TITLE__@ \
|
||||||
|
@ -95,6 +97,13 @@ post/list: $(pmeta)
|
||||||
post/%.mk: post/%.meta build-aux/mkmk
|
post/%.mk: post/%.meta build-aux/mkmk
|
||||||
build-aux/mkmk $(www-root) $< > $@
|
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
|
# Note the conditional include only for webroot. This is needed for two
|
||||||
# reasons:
|
# reasons:
|
||||||
# 1. To avoid including them on `clean' (see GNU Make manual, which is
|
# 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" />
|
<link rel="stylesheet" type="text/css" href="/style.css" />
|
||||||
<title>@PAGE_TITLE@Mike Gerwitz</title>
|
<title>@PAGE_TITLE@Mike Gerwitz</title>
|
||||||
<meta name="viewport" content="initial-scale=1.0" />
|
<meta name="viewport" content="initial-scale=1.0" />
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body class="@PAGE_TYPE@">
|
<body class="@PAGE_TYPE@">
|
||||||
<header>
|
<header>
|
||||||
|
|
|
@ -46,7 +46,8 @@ main()
|
||||||
}
|
}
|
||||||
|
|
||||||
sed "s#@PAGE_TITLE@#$title${title:+ \\— }#g
|
sed "s#@PAGE_TITLE@#$title${title:+ \\— }#g
|
||||||
s#@PAGE_TYPE@#$type#g" \
|
s#@PAGE_TYPE@#$type#g
|
||||||
|
/<style>/rinline.css" \
|
||||||
src/header.tpl.htm
|
src/header.tpl.htm
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
49
style.css
49
style.css
|
@ -30,15 +30,16 @@ html {
|
||||||
background-color: #2e3436;
|
background-color: #2e3436;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
body { /*inline*/
|
||||||
background-color: white;
|
|
||||||
|
|
||||||
/* TODO: slightly non-black color */
|
|
||||||
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding: 2em 4em 0em 4em;
|
padding: 2em 4em 0em 4em;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background-color: white;
|
||||||
text-align: justify;
|
text-align: justify;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
font-family: 'Open Sans', sans-serif;
|
font-family: 'Open Sans', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -87,7 +88,7 @@ footer, #footer {
|
||||||
a { color: #0066cc; }
|
a { color: #0066cc; }
|
||||||
a:visited { color: #6666cc; }
|
a:visited { color: #6666cc; }
|
||||||
|
|
||||||
.title > a {
|
.title > a { /*inline*/
|
||||||
color: black;
|
color: black;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
}
|
}
|
||||||
|
@ -284,19 +285,20 @@ h3 { font-size: 1.1em; }
|
||||||
h4 { font-size: 1.0em; }
|
h4 { font-size: 1.0em; }
|
||||||
|
|
||||||
|
|
||||||
h1 a, h1 a:visited {
|
h1 a,
|
||||||
|
h1 a:visited {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
header {
|
header { /*inline*/
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0 auto 2em auto;
|
margin: 0 auto 2em auto;
|
||||||
max-width: 120ch;
|
max-width: 120ch;
|
||||||
}
|
}
|
||||||
|
|
||||||
header h1 {
|
header h1 { /*inline*/
|
||||||
font-size: 2em;
|
font-size: 2em;
|
||||||
margin: 0px 0px 0.1em 0px;
|
margin: 0px 0px 0.1em 0px;
|
||||||
}
|
}
|
||||||
|
@ -305,12 +307,15 @@ header h1 {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
h2.desc {
|
h2.desc { /*inline*/
|
||||||
font-size: 0.8em;
|
font-size: 0.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2.desc {
|
||||||
|
color: #666f63;
|
||||||
|
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
letter-spacing: 0.1em;
|
letter-spacing: 0.1em;
|
||||||
font-weight: normal;
|
|
||||||
color: #666f63;
|
|
||||||
|
|
||||||
margin: 0px 0px 2em 0px;
|
margin: 0px 0px 2em 0px;
|
||||||
}
|
}
|
||||||
|
@ -319,7 +324,7 @@ header nav {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media ( min-width: 90ch ) {
|
@media ( min-width: 90ch ) { /*inline*/
|
||||||
header nav {
|
header nav {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
@ -327,20 +332,26 @@ header nav {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu ul {
|
.menu ul { /*inline*/
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
text-align: center;
|
}
|
||||||
|
.menu ul {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
/* height of h1 to the left */
|
/* height of h1 to the left */
|
||||||
line-height: 2em;
|
line-height: 2em;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu li { /*inline*/
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.menu li {
|
.menu li {
|
||||||
display: inline-block;
|
|
||||||
font-size: 1.1em;
|
font-size: 1.1em;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu li a {
|
.menu li a {
|
||||||
color: #2e3436;
|
color: #2e3436;
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
@ -357,9 +368,11 @@ header nav {
|
||||||
it easier for the eyes to not loose their way. So the wider the text,
|
it easier for the eyes to not loose their way. So the wider the text,
|
||||||
the larger the line spacing. */
|
the larger the line spacing. */
|
||||||
|
|
||||||
|
article { /*inline*/
|
||||||
|
max-width: 70ch;
|
||||||
|
}
|
||||||
article {
|
article {
|
||||||
line-height: 1.8em;
|
line-height: 1.8em;
|
||||||
max-width: 70ch;
|
|
||||||
margin: auto;
|
margin: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue