Generate UX friendly index.html with iframe to tips index.
--- a/Makefile Sat Feb 20 02:00:25 2016 +0200
+++ b/Makefile Sat Feb 20 02:01:35 2016 +0200
@@ -46,7 +46,7 @@
HTML_DIR := tips-html
RST_HTML_FILES := $(patsubst %.rst,$(HTML_DIR)/%.html,$(RST_FILES))
HTML_FILES := $(RST_HTML_FILES) \
- $(HTML_DIR)/index.html $(HTML_DIR)/frame.html $(HTML_DIR)/frame-index.html
+ $(HTML_DIR)/index.html $(HTML_DIR)/iframe.html $(HTML_DIR)/frame.html $(HTML_DIR)/frame-index.html
TXT__FILES := $(addprefix $(HTML_DIR)/,$(TXT_FILES))
CHM_FILES := $(addprefix $(HTML_DIR)/,chm.hhp chm.hhc chm.stp)
@@ -98,8 +98,24 @@
$(HTML_DIR)/%.html: %.rst HEADER.rst rst.css $(MAKEFILE_LIST) | $(HTML_DIR)
$(RST2HTML) $(RST_FLAGS) --stylesheet=rst.css $*.rst $@
-HEADER.rst: Makefile
+$(HTML_DIR)/iframe.html: $(RST_FILES) $(MAKEFILE_LIST) | $(HTML_DIR)
{ \
+echo '<html><head></head><body>'; \
+echo '<ul style="padding-left: 1em;">'; \
+for f in $(RST_FILES); do \
+ n=$${f%.rst}; \
+ printf '<li><a target="_parent" href="%s.html">%s</a></li>' $$n $$n; \
+done; \
+echo '</ul>'; \
+echo '</body></html>'; \
+} >$@
+
+HEADER.rst: $(MAKEFILE_LIST)
+ { \
+echo '.. raw:: html'; \
+echo; \
+echo ' <div id="sidebar"><iframe src="iframe.html"></iframe></div>'; \
+echo; \
echo '.. _`Home`: index.html'; \
echo '.. _About: README.html'; \
echo '.. _`About author`: http://resume.defun.work/'; \
@@ -116,8 +132,8 @@
$(HTML_DIR)/frame-index.html: index.sh $(RST_HTML_FILES) $(MAKEFILE_LIST) | $(HTML_DIR)
./index.sh frame >$@
-$(HTML_DIR)/index.html: index.sh $(RST_HTML_FILES) $(MAKEFILE_LIST) | $(HTML_DIR)
- ./index.sh html >$@
+$(HTML_DIR)/index.html: $(HTML_DIR)/README.html $(MAKEFILE_LIST) | $(HTML_DIR)
+ cp $< $@
$(HTML_DIR)/%.html: %.html $(MAKEFILE_LIST) | $(HTML_DIR)
cp $< $@
--- a/index.sh Sat Feb 20 02:00:25 2016 +0200
+++ b/index.sh Sat Feb 20 02:01:35 2016 +0200
@@ -6,9 +6,8 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Tips</title>
<style type="text/css">
- body { background-color: LightYellow; }
ul { padding-left: 1em; }
- a { text-decoration:none; }
+ a { text-decoration: none; }
a:link { color: brown; }
a:visited { color: IndianRed; }
a:hover { background: bisque; border-radius: 10px; padding: 1px; }
--- a/rst.css Sat Feb 20 02:00:25 2016 +0200
+++ b/rst.css Sat Feb 20 02:01:35 2016 +0200
@@ -1,10 +1,35 @@
-body, frameset { background-color: ivory; }
-body {
+html, body, iframe {
+ margin: 0px;
+ padding: 0px;
+}
+iframe {
+ overflow: hidden;
+}
+.document {
max-width: 800px;
margin: 0 auto;
+ padding-left: 210px;
+ padding-right: 10px;
+ overflow: hidden;
}
-@media (max-width: 820px) {
- body { margin: 0 10px 0 10px; }
+#sidebar { position: fixed; }
+iframe { border: none; }
+#sidebar, iframe {
+ top: 0;
+ left: 0;
+ width: 200px;
+ height: 100%;
+}
+@media (max-width: 780px) {
+ .document {
+ margin: 4em 10px 1em 10px;
+ padding: 0;
+ }
+ #sidebar { position: inherit; }
+ #sidebar, iframe {
+ width: 100%;
+ height: 4em;
+ }
}
p.topic-title.first { display: none; }