xmls css, start to consider mobile usability

1 files changed, 138 insertions, 110 deletions

diff --git a/org/out_xmls_css.org b/org/out_xmls_css.org
index 15978a5..c5934ce 100644
--- a/org/out_xmls_css.org
+++ b/org/out_xmls_css.org
@@ -35,90 +35,95 @@ template spineCss() {
 <<css_insert_shared_insert_variable_indent_values>>
 <<css_insert_shared_insert_variable_ocn_color_values>>
     string _css_light_html_seg = format(q"┃
-<<css_light_shared_0>>
-<<css_light_shared_1>>
-<<css_light_shared_2>>
-<<css_light_shared_3>>
-<<css_light_shared_4>>
-<<css_light_shared_5>>
-<<css_light_shared_6>>
-<<css_light_shared_7>>
-<<css_light_shared_8>>
-<<css_light_shared_9>>
-<<css_light_html_seg_0>>
-<<css_light_html_seg_1>>
-<<css_light_html_seg_2>>
+<<css_light_shared_html_general>>
+<<css_light_shared_link>>
+<<css_light_shared_div>>
+<<css_light_shared_paragraphs_headings_blocks_misc>>
+<<css_light_shared_img>>
+<<css_light_shared_code_block>>
+<<css_light_shared_paragraph_general>>
+<<css_light_shared_paragraph_indent>>
+<<css_light_shared_misc_tables_lists>>
+<<css_light_shared_headings>>
+<<css_shared_search_form>>
+<<css_light_html_seg_previous_next>>
+<<css_light_html_seg_flex>>
+<<css_light_html_seg_grid>>
 ┃",
     _color_ocn_light,
     _css_indent,
     _color_ocn_light,
 );
     string _css_dark_html_seg = format(q"┃
-<<css_dark_shared_0>>
-<<css_dark_shared_1>>
-<<css_dark_shared_2>>
-<<css_dark_shared_3>>
-<<css_dark_shared_4>>
-<<css_dark_shared_5>>
-<<css_dark_shared_6>>
-<<css_dark_shared_7>>
-<<css_dark_shared_8>>
-<<css_dark_shared_9>>
-<<css_dark_html_seg_0>>
-<<css_dark_html_seg_1>>
-<<css_dark_html_seg_2>>
+<<css_dark_shared_html_general>>
+<<css_dark_shared_link>>
+<<css_dark_shared_div>>
+<<css_dark_shared_paragraphs_headings_blocks_misc>>
+<<css_dark_shared_img>>
+<<css_dark_shared_block_code>>
+<<css_dark_shared_paragraph_general>>
+<<css_dark_shared_paragraph_indent>>
+<<css_dark_shared_misc_tables_lists>>
+<<css_dark_shared_headings>>
+<<css_shared_search_form>>
+<<css_dark_html_seg_previous_next>>
+<<css_dark_html_seg_flex>>
+<<css_dark_html_seg_grid>>
 ┃",
     _color_ocn_dark,
     _css_indent,
     _color_ocn_dark,
 );
     string _css_light_html_scroll = format(q"┃
-<<css_light_shared_0>>
-<<css_light_shared_1>>
-<<css_light_shared_2>>
-<<css_light_shared_3>>
-<<css_light_shared_4>>
-<<css_light_shared_5>>
-<<css_light_shared_6>>
-<<css_light_shared_7>>
-<<css_light_shared_8>>
-<<css_light_shared_9>>
-<<css_light_html_scroll_0>>
-<<css_light_html_scroll_1>>
+<<css_light_shared_html_general>>
+<<css_light_shared_link>>
+<<css_light_shared_div>>
+<<css_light_shared_paragraphs_headings_blocks_misc>>
+<<css_light_shared_img>>
+<<css_light_shared_code_block>>
+<<css_light_shared_paragraph_general>>
+<<css_light_shared_paragraph_indent>>
+<<css_light_shared_misc_tables_lists>>
+<<css_light_shared_headings>>
+<<css_shared_search_form>>
+<<css_light_html_scroll_flex>>
+<<css_light_html_scroll_grid>>
 ┃",
     _color_ocn_light,
     _css_indent,
     _color_ocn_light,
 );
     string _css_dark_html_scroll = format(q"┃
-<<css_dark_shared_0>>
-<<css_dark_shared_1>>
-<<css_dark_shared_2>>
-<<css_dark_shared_3>>
-<<css_dark_shared_4>>
-<<css_dark_shared_5>>
-<<css_dark_shared_6>>
-<<css_dark_shared_7>>
-<<css_dark_shared_8>>
-<<css_dark_shared_9>>
-<<css_dark_html_scroll_0>>
-<<css_dark_html_scroll_1>>
+<<css_dark_shared_html_general>>
+<<css_dark_shared_link>>
+<<css_dark_shared_div>>
+<<css_dark_shared_paragraphs_headings_blocks_misc>>
+<<css_dark_shared_img>>
+<<css_dark_shared_block_code>>
+<<css_dark_shared_paragraph_general>>
+<<css_dark_shared_paragraph_indent>>
+<<css_dark_shared_misc_tables_lists>>
+<<css_dark_shared_headings>>
+<<css_shared_search_form>>
+<<css_dark_html_scroll_flex>>
+<<css_dark_html_scroll_grid>>
 ┃",
     _color_ocn_dark,
     _css_indent,
     _color_ocn_dark,
 );
     string _css_light_epub = format(q"┃
-<<css_light_shared_0>>
-<<css_light_shared_1>>
-<<css_light_shared_2>>
-<<css_light_shared_3>>
-<<css_light_shared_4>>
-<<css_light_shared_5>>
-<<css_light_shared_6>>
-<<css_light_shared_7>>
-<<css_light_shared_8>>
-<<css_light_shared_9>>
+<<css_light_shared_html_general>>
+<<css_light_shared_link>>
+<<css_light_shared_div>>
+<<css_light_shared_paragraphs_headings_blocks_misc>>
+<<css_light_shared_img>>
+<<css_light_shared_code_block>>
+<<css_light_shared_paragraph_general>>
+<<css_light_shared_paragraph_indent>>
+<<css_light_shared_misc_tables_lists>>
+<<css_light_shared_headings>>
+<<css_shared_search_form>>
 <<css_light_epub>>
 ┃",
     _color_ocn_light,
@@ -126,16 +131,17 @@ template spineCss() {
     _color_ocn_light,
 );
     string _css_dark_epub = format(q"┃
-<<css_dark_shared_0>>
-<<css_dark_shared_1>>
-<<css_dark_shared_2>>
-<<css_dark_shared_3>>
-<<css_dark_shared_4>>
-<<css_dark_shared_5>>
-<<css_dark_shared_6>>
-<<css_dark_shared_7>>
-<<css_dark_shared_8>>
-<<css_dark_shared_9>>
+<<css_dark_shared_html_general>>
+<<css_dark_shared_link>>
+<<css_dark_shared_div>>
+<<css_dark_shared_paragraphs_headings_blocks_misc>>
+<<css_dark_shared_img>>
+<<css_dark_shared_block_code>>
+<<css_dark_shared_paragraph_general>>
+<<css_dark_shared_paragraph_indent>>
+<<css_dark_shared_misc_tables_lists>>
+<<css_dark_shared_headings>>
+<<css_shared_search_form>>
 <<css_dark_epub>>
 ┃",
     _color_ocn_dark,
@@ -169,7 +175,7 @@ template spineCss() {
 *** html shared
 **** general
 
-#+NAME: css_light_shared_0
+#+NAME: css_light_shared_html_general
 #+BEGIN_SRC css
   *{
     padding                  : 0px;
@@ -188,7 +194,7 @@ template spineCss() {
 
 **** link
 
-#+NAME: css_light_shared_1
+#+NAME: css_light_shared_link
 #+BEGIN_SRC css
   a:link {
     color                    : #003399;
@@ -212,7 +218,7 @@ template spineCss() {
   }
   a.lnkocn:hover {
     color                    : #777777;
-    font-size                : 15px;
+    font-size                : 120%%;
   }
   a:hover img {
     background-color         : #FFFFFF;
@@ -229,7 +235,7 @@ template spineCss() {
 
 **** div
 
-#+NAME: css_light_shared_2
+#+NAME: css_light_shared_div
 #+BEGIN_SRC css
   div {
     margin-left              : 0;
@@ -347,7 +353,7 @@ template spineCss() {
 **** paragraphs headings blocks
 ***** misc
 
-#+NAME: css_light_shared_3
+#+NAME: css_light_shared_paragraphs_headings_blocks_misc
 #+BEGIN_SRC css
   .norm, .bold, .verse, .group, .block, .alt {
     line-height              : 133%%;
@@ -373,7 +379,9 @@ template spineCss() {
   }
 #+END_SRC
 
-#+NAME: css_light_shared_4
+***** img
+
+#+NAME: css_light_shared_img
 #+BEGIN_SRC css
   img {
     max-width                : 100%%;
@@ -383,7 +391,7 @@ template spineCss() {
 
 ***** code block
 
-#+NAME: css_light_shared_5
+#+NAME: css_light_shared_code_block
 #+BEGIN_SRC css
   pre {
     width                    : auto;
@@ -450,7 +458,7 @@ template spineCss() {
 
 ***** paragraph general
 
-#+NAME: css_light_shared_6
+#+NAME: css_light_shared_paragraph_general
 #+BEGIN_SRC css
   p.spaced { white-space     : pre; }
   p.block {
@@ -502,7 +510,7 @@ template spineCss() {
     text-align               : left;
   }
   .tiny, .tiny_left, .tiny_right, .tiny_center {
-    font-size                : 10px;
+    font-size                : 12px;
     margin-top               : 0px;
     margin-bottom            : 0px;
     color                    : #777777;
@@ -566,24 +574,24 @@ template spineCss() {
 
 ***** paragraph indent
 
-#+NAME: css_light_shared_7
+#+NAME: css_light_shared_paragraph_indent
 #+BEGIN_SRC css
 %s
 #+END_SRC
 
 ***** misc including tables & lists
 
-#+NAME: css_light_shared_8
+#+NAME: css_light_shared_misc_tables_lists
 #+BEGIN_SRC css
   note { white-space         : pre; }
   label.ocn {
     width                    : 2%%;
     float                    : right;
     top                      : 0;
-    font-size                : 10px;
+    font-size                : 12px;
     margin-top               : 0px;
-    margin-bottom            : 5px;
-    margin-right             : 5px;
+    margin-bottom            : 6px;
+    margin-right             : 6px;
     text-align               : right;
     color                    : %s;
     -khtml-user-select       : none;
@@ -642,7 +650,7 @@ template spineCss() {
 
 ***** headings
 
-#+NAME: css_light_shared_9
+#+NAME: css_light_shared_headings
 #+BEGIN_SRC css
   h0, h1, h2, h3, h4, h5, h6, h7 {
     font-weight              : bold;
@@ -747,7 +755,7 @@ template spineCss() {
 *** html seg
 **** previous next
 
-#+NAME: css_light_html_seg_0
+#+NAME: css_light_html_seg_previous_next
 #+BEGIN_SRC css
   .icon-bar {
     width                    : 100%%;
@@ -827,7 +835,7 @@ template spineCss() {
 
 **** flex
 
-#+NAME: css_light_html_seg_1
+#+NAME: css_light_html_seg_flex
 #+BEGIN_SRC css
   /* flex */
   .flex-menu-bar {
@@ -864,7 +872,7 @@ template spineCss() {
 
 Consider what if anything should be used here
 
-#+NAME: css_light_html_seg_2
+#+NAME: css_light_html_seg_grid
 #+BEGIN_SRC css
   /* grid */
   .wrapper {
@@ -953,7 +961,7 @@ Consider what if anything should be used here
 *** html scroll
 **** flex
 
-#+NAME: css_light_html_scroll_0
+#+NAME: css_light_html_scroll_flex
 #+BEGIN_SRC css
   /* flex */
   .flex-menu-bar {
@@ -988,7 +996,7 @@ Consider what if anything should be used here
 
 **** grid
 
-#+NAME: css_light_html_scroll_1
+#+NAME: css_light_html_scroll_grid
 #+BEGIN_SRC css
   /* grid */
   .wrapper {
@@ -1084,7 +1092,7 @@ Consider what if anything should be used here
 *** html shared
 **** general
 
-#+NAME: css_dark_shared_0
+#+NAME: css_dark_shared_html_general
 #+BEGIN_SRC css
   *{
     padding                  : 0px;
@@ -1103,7 +1111,7 @@ Consider what if anything should be used here
 
 **** link
 
-#+NAME: css_dark_shared_1
+#+NAME: css_dark_shared_link
 #+BEGIN_SRC css
   a:link {
     color                    : #FFFFFF;
@@ -1127,7 +1135,7 @@ Consider what if anything should be used here
   }
   a.lnkocn:hover {
     color                    : #BBBBBB;
-    font-size                : 15px;
+    font-size                : 120%%;
   }
   a:hover img {
     background-color         : #000000;
@@ -1144,7 +1152,7 @@ Consider what if anything should be used here
 
 **** div
 
-#+NAME: css_dark_shared_2
+#+NAME: css_dark_shared_div
 #+BEGIN_SRC css
   div {
     margin-left              : 0;
@@ -1262,7 +1270,7 @@ Consider what if anything should be used here
 **** paragraphs headings blocks
 ***** misc
 
-#+NAME: css_dark_shared_3
+#+NAME: css_dark_shared_paragraphs_headings_blocks_misc
 #+BEGIN_SRC css
   .norm, .bold, .verse, .group, .block, .alt {
     line-height              : 133%%;
@@ -1288,7 +1296,9 @@ Consider what if anything should be used here
   }
 #+END_SRC
 
-#+NAME: css_dark_shared_4
+***** img
+
+#+NAME: css_dark_shared_img
 #+BEGIN_SRC css
   img {
     max-width                : 100%%;
@@ -1298,7 +1308,7 @@ Consider what if anything should be used here
 
 ***** code block
 
-#+NAME: css_dark_shared_5
+#+NAME: css_dark_shared_block_code
 #+BEGIN_SRC css
   pre {
     width                    : auto;
@@ -1364,7 +1374,7 @@ Consider what if anything should be used here
 
 ***** paragraph general
 
-#+NAME: css_dark_shared_6
+#+NAME: css_dark_shared_paragraph_general
 #+BEGIN_SRC css
   p.spaced { white-space     : pre; }
   p.block {
@@ -1416,7 +1426,7 @@ Consider what if anything should be used here
     text-align               : left;
   }
   .tiny, .tiny_left, .tiny_right, .tiny_center {
-    font-size                : 10px;
+    font-size                : 12px;
     margin-top               : 0px;
     margin-bottom            : 0px;
     color                    : #EEEEEE;
@@ -1480,24 +1490,24 @@ Consider what if anything should be used here
 
 ***** paragraph indent
 
-#+NAME: css_dark_shared_7
+#+NAME: css_dark_shared_paragraph_indent
 #+BEGIN_SRC css
 %s
 #+END_SRC
 
 ***** misc including tables & lists
 
-#+NAME: css_dark_shared_8
+#+NAME: css_dark_shared_misc_tables_lists
 #+BEGIN_SRC css
   note { white-space         : pre; }
   label.ocn {
     width                    : 2%%;
     float                    : right;
     top                      : 0;
-    font-size                : 10px;
+    font-size                : 12px;
     margin-top               : 0px;
-    margin-bottom            : 5px;
-    margin-right             : 5px;
+    margin-bottom            : 6px;
+    margin-right             : 6px;
     text-align               : right;
     color                    : %s;
     -khtml-user-select       : none;
@@ -1556,7 +1566,7 @@ Consider what if anything should be used here
 
 ***** headings
 
-#+NAME: css_dark_shared_9
+#+NAME: css_dark_shared_headings
 #+BEGIN_SRC css
   h0, h1, h2, h3, h4, h5, h6, h7 {
     font-weight              : bold;
@@ -1661,7 +1671,7 @@ Consider what if anything should be used here
 *** html seg
 **** previous next
 
-#+NAME: css_dark_html_seg_0
+#+NAME: css_dark_html_seg_previous_next
 #+BEGIN_SRC css
   .icon-bar {
     width                    : 100%%;
@@ -1741,7 +1751,7 @@ Consider what if anything should be used here
 
 **** flex
 
-#+NAME: css_dark_html_seg_1
+#+NAME: css_dark_html_seg_flex
 #+BEGIN_SRC css
   /* flex */
   .flex-menu-bar {
@@ -1778,7 +1788,7 @@ Consider what if anything should be used here
 
 Consider what if anything should be used here
 
-#+NAME: css_dark_html_seg_2
+#+NAME: css_dark_html_seg_grid
 #+BEGIN_SRC css
   /* grid */
   .wrapper {
@@ -1867,7 +1877,7 @@ Consider what if anything should be used here
 *** html scroll
 **** flex
 
-#+NAME: css_dark_html_scroll_0
+#+NAME: css_dark_html_scroll_flex
 #+BEGIN_SRC css
   /* flex */
   .flex-menu-bar {
@@ -1902,7 +1912,7 @@ Consider what if anything should be used here
 
 **** grid
 
-#+NAME: css_dark_html_scroll_1
+#+NAME: css_dark_html_scroll_grid
 #+BEGIN_SRC css
   /* grid */
   .wrapper {
@@ -1988,6 +1998,24 @@ Consider what if anything should be used here
   }
 #+END_SRC
 
+*** form search
+
+#+NAME: css_shared_search_form
+#+BEGIN_SRC css
+input[type="text"] {
+  font-size:120%%;
+  line-height              : 120%%;
+}
+button[type="submit"] {
+  font-size                : 120%%;
+  line-height              : 120%%;
+}
+p.form {
+  font-size                : 150%%;
+  line-height              : 150%%;
+}
+#+END_SRC
+
 *** epub xhtml
 
 #+NAME: css_dark_epub