mikegerwitz
/
thoughts
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Mike Gerwitz 2019-01-19 00:50:06 -05:00
parent 20a9d36077
commit 89328fe206
Signed by: mikegerwitz
GPG Key ID: 8C917B7F5DC51BA2
5 changed files with 48 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -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
View File

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

2
src/header.tpl.htm
View File

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

3
src/mkheader
View File

@ -46,7 +46,8 @@ main()
} }
sed "s#@PAGE_TITLE@#$title${title:+ \\&mdash; }#g sed "s#@PAGE_TITLE@#$title${title:+ \\&mdash; }#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
View File

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