Mike Gerwitz

Free Software Hacker+Activist

aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorMike Gerwitz <mtg@gnu.org>2019-01-19 00:50:06 -0500
committerMike Gerwitz <mtg@gnu.org>2019-01-19 00:50:06 -0500
commit89328fe20611da1f34ac633de315a900254267c1 (patch)
treeb0e159b2479d046012e781abff5deb517c6b9dc7
parent20a9d360777dc51341f93da9d9b8ba928c1402b5 (diff)
downloadthoughts-89328fe20611da1f34ac633de315a900254267c1.zip
thoughts-89328fe20611da1f34ac633de315a900254267c1.tar.gz
thoughts-89328fe20611da1f34ac633de315a900254267c1.tar.bz2
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--.gitignore1
-rw-r--r--Makefile15
-rw-r--r--src/header.tpl.htm2
-rwxr-xr-xsrc/mkheader3
-rw-r--r--style.css49
5 files changed, 48 insertions, 22 deletions
diff --git a/.gitignore b/.gitignore
index 6aaf4b4..acc28df 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,7 @@
/post/list
!/docs/about/resume.html
rss.xml
+/inline.css
/www-root
/cgit-root
/papers/*.pdf
diff --git a/Makefile b/Makefile
index 698ae8a..5b9a4fc 100644
--- a/Makefile
+++ b/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
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:+ \\&mdash; }#g
- s#@PAGE_TYPE@#$type#g" \
+ s#@PAGE_TYPE@#$type#g
+ /<style>/rinline.css" \
src/header.tpl.htm
}
diff --git a/style.css b/style.css
index f8eff4e..7b3dfaa 100644
--- a/style.css
+++ b/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 {
+
+.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;
}