From 8333ab4e92003b392039be7d655c4968eebe5033 Mon Sep 17 00:00:00 2001 From: Ralph Amissah Date: Sat, 29 Jan 2022 20:17:41 -0500 Subject: xmls css, start to consider mobile usability --- org/cgi_spine_search.org | 12 ++- org/out_curate_metadata.org | 14 +-- org/out_xmls_css.org | 248 ++++++++++++++++++++++++-------------------- 3 files changed, 155 insertions(+), 119 deletions(-) (limited to 'org') diff --git a/org/cgi_spine_search.org b/org/cgi_spine_search.org index 311b497..674b2ef 100644 --- a/org/cgi_spine_search.org +++ b/org/cgi_spine_search.org @@ -1356,7 +1356,7 @@ a.lnkocn:visited { } a.lnkocn:hover { color : #777777; - font-size : 15px; + font-size : 100%%; } a:hover img { background-color : #FFFFFF; @@ -1390,6 +1390,14 @@ span.match { color : #000000; background-color : #FFFF48; } +input[type="text"] { + font-size : 120%%; + line-height : 120%%; +} +button[type="submit"] { + font-size : 120%%; + line-height : 120%%; +} p.norm { } p.center { text-align : center; } p.i1 { padding-left : 1em; } @@ -1872,7 +1880,7 @@ p.small { text-align : left; } .tiny, .tiny_left, .tiny_right, .tiny_center { - font-size : 10px; + font-size : 12px; margin-top : 0px; margin-bottom : 0px; color : #EEEEEE; diff --git a/org/out_curate_metadata.org b/org/out_curate_metadata.org index a12682f..cda8dfc 100644 --- a/org/out_curate_metadata.org +++ b/org/out_curate_metadata.org @@ -885,7 +885,7 @@ string theme_light_1 = format(q"┃ text-align : left; } p.publication { - font-size : 80%%; + font-size : 90%%; margin-left : 4em; margin-top : 0px; margin-bottom : 0px; @@ -894,7 +894,7 @@ string theme_light_1 = format(q"┃ } p.letter { font-weight : bold; - font-size : 60%%; + font-size : 80%%; margin-left : 1em; margin-top : 0px; margin-bottom : 0px; @@ -906,23 +906,23 @@ string theme_light_1 = format(q"┃ margin-left : 1em; } p.lev1 { - font-size : 110%%; + font-size : 115%%; margin-left : 2em; } p.lev2 { - font-size : 100%%; + font-size : 110%%; margin-left : 3em; } p.lev3 { - font-size : 90%%; + font-size : 105%%; margin-left : 4em; } p.lev4 { - font-size : 80%%; + font-size : 100%%; margin-left : 5em; } p.lev5 { - font-size : 80%%; + font-size : 95%%; margin-left : 6em; }%s /* flex */ 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() { <> <> string _css_light_html_seg = format(q"┃ -<> -<> -<> -<> -<> -<> -<> -<> -<> -<> -<> -<> -<> +<> +<> +<> +<> +<> +<> +<> +<> +<> +<> +<> +<> +<> +<> ┃", _color_ocn_light, _css_indent, _color_ocn_light, ); string _css_dark_html_seg = format(q"┃ -<> -<> -<> -<> -<> -<> -<> -<> -<> -<> -<> -<> -<> +<> +<> +<> +<> +<> +<> +<> +<> +<> +<> +<> +<> +<> +<> ┃", _color_ocn_dark, _css_indent, _color_ocn_dark, ); string _css_light_html_scroll = format(q"┃ -<> -<> -<> -<> -<> -<> -<> -<> -<> -<> -<> -<> +<> +<> +<> +<> +<> +<> +<> +<> +<> +<> +<> +<> +<> ┃", _color_ocn_light, _css_indent, _color_ocn_light, ); string _css_dark_html_scroll = format(q"┃ -<> -<> -<> -<> -<> -<> -<> -<> -<> -<> -<> -<> +<> +<> +<> +<> +<> +<> +<> +<> +<> +<> +<> +<> +<> ┃", _color_ocn_dark, _css_indent, _color_ocn_dark, ); string _css_light_epub = format(q"┃ -<> -<> -<> -<> -<> -<> -<> -<> -<> -<> +<> +<> +<> +<> +<> +<> +<> +<> +<> +<> +<> <> ┃", _color_ocn_light, @@ -126,16 +131,17 @@ template spineCss() { _color_ocn_light, ); string _css_dark_epub = format(q"┃ -<> -<> -<> -<> -<> -<> -<> -<> -<> -<> +<> +<> +<> +<> +<> +<> +<> +<> +<> +<> +<> <> ┃", _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 -- cgit v1.2.3