xmls css, step

1 files changed, 61 insertions, 56 deletions

diff --git a/org/cgi_spine_search.org b/org/cgi_spine_search.org
index 6b43058..1666a0f 100644
--- a/org/cgi_spine_search.org
+++ b/org/cgi_spine_search.org
@@ -663,7 +663,7 @@ if (!(_url_new.match(rgx.fn))) {
   _url_new = _url_new ~ _fn;
 }
 _matched_objects_text =
-  "<font size=\"2\" color=\"#666666\">"
+  "<font-size=\"2rem\" color=\"#666666\">"
   ~ "<a href=\""
   ~ _url_new
   ~ "\">"
@@ -704,7 +704,7 @@ if (_url_previous.empty) {
   arrow_previous = "";
 } else {
   arrow_previous =
-    "<font size=\"2\" color=\"#666666\">"
+    "<font-size=\"1.8rem\" color=\"#666666\">"
     ~ "<a href=\""
     ~ _url_previous
     ~ "\">"
@@ -712,7 +712,7 @@ if (_url_previous.empty) {
     ~ "</a> || </font>";
 }
 arrow_next =
-  "<font size=\"2\" color=\"#666666\">"
+  "<font-size=\"1.8rem\" color=\"#666666\">"
   ~ "<a href=\""
   ~ _url_next
   ~ "\">"
@@ -823,7 +823,7 @@ if (show_the_can == "checked") {
   // assert(method_get_url == environment.get("HTTP_REFERER", conf.query_base_url ~ conf.query_string));
   if (conf.request_method == "POST") {
     _the_can =
-      "<font size=\"2\" color=\"#666666\">"
+      "<font-size=\"1rem\" color=\"#666666\">"
       ~ "POST:&nbsp;"
       ~ "<a href=\""
       ~ method_post_url_construct
@@ -833,7 +833,7 @@ if (show_the_can == "checked") {
       ~ "<br>";
   } else if (conf.request_method == "GET") {
     _the_can =
-      "<font size=\"2\" color=\"#666666\">"
+      "<font-size=\"1rem\" color=\"#666666\">"
       ~ "GET:&nbsp;&nbsp;"
       ~ "<a href=\""
       ~ method_get_url
@@ -856,25 +856,25 @@ if (searched_tip == "checked") {
   string search_field = post_value("sf", "field");
   tf = text_fields;
   tip = format(q"┃
-<font size="2" color="#666666">
-<b>database:</b> <font size="2" color="#004000">%s</font>; <b>selected view:</b> <font size="2" color="#004000">index</font>
+<font-size="1rem" color="#666666">
+<b>database:</b> <font-size="1rem" color="#004000">%s</font>; <b>selected view:</b> <font-size="2" color="#004000">index</font>
 <b>search string:</b> %s %s %s %s %s %s<br>
 %s %s %s %s %s %s
 </font>
 ┃",
     cv.db_selected,
-    (tf.text.empty   ? "" : "\"text:   <font size=\"2\" color=\"#004000\">" ~ tf.text   ~ "</font>; "),
-    (tf.title.empty  ? "" : "\"title:  <font size=\"2\" color=\"#004000\">" ~ tf.title  ~ "</font>; "),
-    (tf.author.empty ? "" : "\"author: <font size=\"2\" color=\"#004000\">" ~ tf.author ~ "</font>; "),
-    (tf.date.empty   ? "" : "\"date    <font size=\"2\" color=\"#004000\">" ~ tf.date   ~ "</font>; "),
-    (tf.uid.empty    ? "" : "\"uid:    <font size=\"2\" color=\"#004000\">" ~ tf.uid    ~ "</font>; "),
-    (tf.fn.empty     ? "" : "\"fn:     <font size=\"2\" color=\"#004000\">" ~ tf.fn     ~ "</font>; "),
-    (tf.text.empty   ? "" :  "text:    <font size=\"2\" color=\"#004000\">" ~ tf.text   ~ "</font><br>"),
-    (tf.title.empty  ? "" : "title:    <font size=\"2\" color=\"#004000\">" ~ tf.title  ~ "</font><br>"),
-    (tf.author.empty ? "" :  "author:  <font size=\"2\" color=\"#004000\">" ~ tf.author ~ "</font><br>"),
-    (tf.date.empty   ? "" :  "date:    <font size=\"2\" color=\"#004000\">" ~ tf.date   ~ "</font><br>"),
-    (tf.uid.empty    ? "" : "\"uid:    <font size=\"2\" color=\"#004000\">" ~ tf.uid    ~ "</font>; "),
-    (tf.fn.empty     ? "" : "\"fn:     <font size=\"2\" color=\"#004000\">" ~ tf.fn     ~ "</font>; "),
+    (tf.text.empty   ? "" : "\"text:   <font-size=\"1rem\" color=\"#004000\">" ~ tf.text   ~ "</font>; "),
+    (tf.title.empty  ? "" : "\"title:  <font-size=\"1rem\" color=\"#004000\">" ~ tf.title  ~ "</font>; "),
+    (tf.author.empty ? "" : "\"author: <font-size=\"1rem\" color=\"#004000\">" ~ tf.author ~ "</font>; "),
+    (tf.date.empty   ? "" : "\"date    <font-size=\"1rem\" color=\"#004000\">" ~ tf.date   ~ "</font>; "),
+    (tf.uid.empty    ? "" : "\"uid:    <font-size=\"1rem\" color=\"#004000\">" ~ tf.uid    ~ "</font>; "),
+    (tf.fn.empty     ? "" : "\"fn:     <font-size=\"1rem\" color=\"#004000\">" ~ tf.fn     ~ "</font>; "),
+    (tf.text.empty   ? "" :  "text:    <font-size=\"1rem\" color=\"#004000\">" ~ tf.text   ~ "</font><br>"),
+    (tf.title.empty  ? "" : "title:    <font-size=\"1rem\" color=\"#004000\">" ~ tf.title  ~ "</font><br>"),
+    (tf.author.empty ? "" :  "author:  <font-size=\"1rem\" color=\"#004000\">" ~ tf.author ~ "</font><br>"),
+    (tf.date.empty   ? "" :  "date:    <font-size=\"1rem\" color=\"#004000\">" ~ tf.date   ~ "</font><br>"),
+    (tf.uid.empty    ? "" : "\"uid:    <font-size=\"1rem\" color=\"#004000\">" ~ tf.uid    ~ "</font>; "),
+    (tf.fn.empty     ? "" : "\"fn:     <font-size=\"1rem\" color=\"#004000\">" ~ tf.fn     ~ "</font>; "),
   );
 }
 return tip;
@@ -917,7 +917,7 @@ return tip;
     %s
   </td></tr></table>
   <td valign=\"top\"><tr><td>
-    <font size="2" color="#222222">
+    <font-size="1rem" color="#222222">
     <input type="hidden" name="db" value="%s">
     <input type="submit" value="SiSU search">
     <input type="radio" name="rt" id="results_type_index" value="idx" %s> index
@@ -1121,7 +1121,7 @@ LIMIT %s OFFSET %s
 #+BEGIN_SRC d
 (cv.checked_sql)
 ? cgi.write(previous_next
-    ~ "<hr><font size=\"2\" color=\"#666666\">"
+    ~ "<hr><font-size=\"1rem\" color=\"#666666\">"
     ~ sql_select.the_body.strip.split("\n  ").join(" ").split("\n").join("<br>")
     ~ "</font>\n"
   )
@@ -1319,17 +1319,22 @@ cgi.write("cv.checked_sql: "      ~ (cv.checked_sql ? "checked" : "off") ~ "<br>
 
 **** css
 
+- if base size is 16px, 62.5% is 10px
+  1rem   == 10px
+  1.6rem == 16px
+
 #+NAME: spine_search_css
 #+BEGIN_SRC css
+html {
+  font-size              : 62.5%%;
+}
 ,*{
   padding                  : 0px;
   margin                   : 2px;
 }
 body {
   height                   : 100vh;
-  background-color         : #FFFFFF;
-}
-body {
+  font-size                : 1.6rem;
   color                    : #000000;
   background               : #FFFFFF;
   background-color         : #FFFFFF;
@@ -1357,7 +1362,7 @@ a.matched_ocn:visited {
 a.matched_ocn:hover {
   color                    : #000000;
   background-color         : #F9F9AA;
-  font-size                : 100%%;
+  font-size                : 1.6rem;
 }
 a.lnkocn:link {
   color                    : #777777;
@@ -1369,7 +1374,7 @@ a.lnkocn:visited {
 }
 a.lnkocn:hover {
   color                    : #777777;
-  font-size                : 100%%;
+  font-size                : 1.6rem;
 }
 a:hover img {
   background-color         : #FFFFFF;
@@ -1404,14 +1409,14 @@ span.match {
   background-color         : #FFFF48;
 }
 input, select, textarea {
-  font-size                : 150%%;
+  font-size                : 2rem;
 }
 input[type="text"] {
-  font-size                : 150%%;
+  font-size                : 2rem;
   line-height              : 150%%;
 }
 button[type="submit"] {
-  font-size                : 150%%;
+  font-size                : 2rem;
   line-height              : 150%%;
 }
 p.norm { }
@@ -1431,7 +1436,7 @@ p[indent="h0i0"] {
   text-indent              : 0em;
 }
 p.publication {
-  font-size                : 100%%;
+  font-size                : 1.6rem;
   margin-left              : 0em;
   margin-top               : 0px;
   margin-bottom            : 0px;
@@ -1439,11 +1444,11 @@ p.publication {
   text-align               : left;
 }
 p.ocn_is {
-  font-size                : 100%%;
+  font-size                : 1.6rem;
   display                  : inline-block;
 }
 p.matched_ocn {
-  font-size                : 90%%;
+  font-size                : 1.5rem;
   margin-left              : 2em;
   margin-top               : 0px;
   margin-bottom            : 0px;
@@ -1862,7 +1867,7 @@ p.caption {
   display                  : inline;
 }
 p.endnote {
-  font-size                : 96%%;
+  font-size                : 1.5rem;
   line-height              : 120%%;
   text-align               : left;
   margin-right             : 15mm;
@@ -1889,14 +1894,14 @@ p.em {
   background               : #FFF3B6;
 }
 p.small {
-  font-size                : 80%%;
+  font-size                : 1.4rem;
   margin-top               : 0px;
   margin-bottom            : 0px;
   margin-right             : 6px;
   text-align               : left;
 }
 .tiny, .tiny_left, .tiny_right, .tiny_center {
-  font-size                : 75%%;
+  font-size                : 1.3rem;
   margin-top               : 0px;
   margin-bottom            : 0px;
   color                    : #EEEEEE;
@@ -1963,7 +1968,7 @@ pre.codeline {
   white-space              : -o-pre-wrap;
   background-color         : #555555;
   color                    : #DDDDDD;
-  font-size                : 120%%;
+  font-size                : 1.8rem;
   line-height              : 120%%;
 }
 pre.codeline::before {
@@ -2005,7 +2010,7 @@ p.left,th.left,td.left {
 }
 p.small_left,th.small_left,td.small_left {
   text-align               : left;
-  font-size                : 80%%;
+  font-size                : 1.4rem;
 }
 p.right,th.right,td.right {
   text-align               : right;
@@ -2038,14 +2043,14 @@ h4.norm, h5.norm, h6.norm, h7.norm {
   margin-top               : 10px;
   margin-bottom            : 0px;
 }
-h0 { font-size             : 125%%; }
-h1 { font-size             : 120%%; }
-h2 { font-size             : 115%%; }
-h3 { font-size             : 110%%; }
-h4 { font-size             : 105%%; }
-h5 { font-size             : 100%%; }
-h6 { font-size             : 100%%; }
-h7 { font-size             : 100%%; }
+h0 { font-size             : 2rem; }
+h1 { font-size             : 1.9rem; }
+h2 { font-size             : 1.8rem; }
+h3 { font-size             : 1.7rem; }
+h4 { font-size             : 1.6rem; }
+h5 { font-size             : 1.6rem; }
+h6 { font-size             : 1.6rem; }
+h7 { font-size             : 1.6rem; }
 h0, h1, h2, h3, h4, h5, h6, h7 {
   text-shadow              : .2em .2em .3em #999999;
 }
@@ -2065,42 +2070,42 @@ h9.i { margin-left         : 10em; }
 }
 h0.toc {
   margin-left              : 1em;
-  font-size                : 120%%;
+  font-size                : 2rem;
   line-height              : 150%%;
 }
 h1.toc {
   margin-left              : 1em;
-  font-size                : 115%%;
+  font-size                : 1.9rem;
   line-height              : 150%%;
 }
 h2.toc {
   margin-left              : 2em;
-  font-size                : 110%%;
+  font-size                : 1.8rem;
   line-height              : 140%%;
 }
 h3.toc {
   margin-left              : 3em;
-  font-size                : 105%%;
+  font-size                : 1.7rem;
   line-height              : 120%%;
 }
 h4.toc {
   margin-left              : 4em;
-  font-size                : 100%%;
+  font-size                : 1.6rem;
   line-height              : 120%%;
 }
 h5.toc {
   margin-left              : 5em;
-  font-size                : 95%%;
+  font-size                : 1.5rem;
   line-height              : 110%%;
 }
 h6.toc {
   margin-left              : 6em;
-  font-size                : 90%%;
+  font-size                : 1.4rem;
   line-height              : 110%%;
 }
 h7.toc {
   margin-left              : 7em;
-  font-size                : 85%%;
+  font-size                : 1.3rem;
   line-height              : 100%%;
 }
 .subtoc {
@@ -2109,19 +2114,19 @@ h7.toc {
 }
 h5.subtoc {
   margin-left              : 2em;
-  font-size                : 80%%;
+  font-size                : 1.5rem;
   margin-top               : 2px;
   margin-bottom            : 2px;
 }
 h6.subtoc {
   margin-left              : 3em;
-  font-size                : 75%%;
+  font-size                : 1.4rem;
   margin-top               : 0px;
   margin-bottom            : 0px;
 }
 h7.subtoc {
   margin-left              : 4em;
-  font-size                : 70%%;
+  font-size                : 1.3rem;
   margin-top               : 0px;
   margin-bottom            : 0px;
 }