diff options
| author | Mike Gerwitz <mtg@gnu.org> | 2019-01-19 00:50:06 -0500 |
|---|---|---|
| committer | Mike Gerwitz <mtg@gnu.org> | 2019-01-19 00:50:06 -0500 |
| commit | 89328fe20611da1f34ac633de315a900254267c1 (patch) | |
| tree | b0e159b2479d046012e781abff5deb517c6b9dc7 | |
| parent | 20a9d360777dc51341f93da9d9b8ba928c1402b5 (diff) | |
| download | thoughts-89328fe20611da1f34ac633de315a900254267c1.tar.gz thoughts-89328fe20611da1f34ac633de315a900254267c1.tar.bz2 thoughts-89328fe20611da1f34ac633de315a900254267c1.zip | |
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.
| -rw-r--r-- | .gitignore | 1 | ||||
| -rw-r--r-- | Makefile | 15 | ||||
| -rw-r--r-- | src/header.tpl.htm | 2 | ||||
| -rwxr-xr-x | src/mkheader | 3 | ||||
| -rw-r--r-- | style.css | 49 |
5 files changed, 48 insertions, 22 deletions
@@ -6,6 +6,7 @@ /post/list !/docs/about/resume.html rss.xml +/inline.css /www-root /cgit-root /papers/*.pdf @@ -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 diff --git a/src/header.tpl.htm b/src/header.tpl.htm index f2aa0e7..a8047b3 100644 --- a/src/header.tpl.htm +++ b/src/header.tpl.htm @@ -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> diff --git a/src/mkheader b/src/mkheader index 292fe4f..05920c5 100755 --- a/src/mkheader +++ b/src/mkheader @@ -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 } @@ -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 { + +.menu li { /*inline*/ display: inline-block; +} +.menu li { 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; } |