changeset
Improved CSS for different display sizes
Wed, 17 Jan 2018 18:14:57 +0000
- author
- Tuomo Valkonen <tuomov@iki.fi>
- date
- Wed, 17 Jan 2018 18:14:57 +0000
- changeset 14
- bbf5bbd72f48
- parent 13
- 5886bf51708b
- child 15
- 82d254b8f01e
Improved CSS for different display sizes
| example/src/style/default.css | file | annotate | diff | comparison | revisions |
--- a/example/src/style/default.css Tue Jan 16 17:25:50 2018 +0000 +++ b/example/src/style/default.css Wed Jan 17 18:14:57 2018 +0000 @@ -1,140 +1,133 @@ body { font-family: Optima, Linux Biolinum, Candara, sans-serif; - #font-weight: 300; - background: #ffffff; - color: #000000; - margin: 10px 40px 40px 40px; - max-width: 80ex; - text-align: left; - } + #font-weight: 300; + background: #ffffff; + color: #000000; + margin: 10px 40px 40px 40px; + max-width: 80ex; + text-align: left; +} -a { color: #3399ee; text-decoration: none; } +a { color: #3399ee; text-decoration: none; } a:link { color: #3399ee; } a:visited { color: #2288dd; } a:active { color: #2288dd; } a:hover { color: #2288dd; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a, .header a - { text-decoration: none; } +{ text-decoration: none; } h1 { - margin: 1em 0em; - /*color: #45a9b0;*/ - border-bottom: 1px solid #000000; - font-weight: bolder; - color: #000000; - font-size: xx-large; - /*font-variant: small-caps;*/ - text-align: left; - } + margin: 1em 0em; + /*color: #45a9b0;*/ + border-bottom: 1px solid #000000; + font-weight: bolder; + color: #000000; + font-size: xx-large; + /*font-variant: small-caps;*/ + text-align: left; +} h2, .inlinepage h1 { - /*color: #84c7c0;*/ - color: #3399ee; - margin-bottom: 1em; - margin-top: 1.5em; - padding: 0; - /*text-transform: uppercase;*/ - font-size: large; - font-variant: normal; - font-weight: bolder; - } + /*color: #84c7c0;*/ + color: #3399ee; + margin-bottom: 1em; + margin-top: 1.5em; + padding: 0; + /*text-transform: uppercase;*/ + font-size: large; + font-variant: normal; + font-weight: bolder; +} h3, h4, h5, h6 { margin-top: 1em; margin-bottom: 0.05em; font-size: medium; color: #ffffff; - } +} blockquote { - /*font-style: italic;*/ - padding: 0 1ex; - border-left: 1px solid #3399ee; - } + /*font-style: italic;*/ + padding: 0 1ex; + border-left: 1px solid #3399ee; +} blockquote p { - margin: 0.9ex 0; - } + margin: 0.9ex 0; +} blockquote em { - font-style: normal; - } + font-style: normal; +} pre { - /*background-color: #a0a0a0;*/ - padding: 0 1ex; - border-left: 2px dashed #3399ee; - } - -/*p.note { - font-size: small; - }*/ + /*background-color: #a0a0a0;*/ + padding: 0 1ex; + border-left: 2px dashed #3399ee; +} hr { - border: none 0; - border-top: 2px dashed #84c7c0; - height: 1px; - width: 10ex; - margin: 1ex auto 1ex 0; + border: none 0; + border-top: 2px dashed #84c7c0; + height: 1px; + width: 10ex; + margin: 1ex auto 1ex 0; } table { - /*border: none 0;*/ - border-collapse: collapse; - padding: 0.5ex; + /*border: none 0;*/ + border-collapse: collapse; + padding: 0.5ex; } thead { - border-bottom: 2px dashed #84c7c0; + border-bottom: 2px dashed #84c7c0; } tr, td { - border: 0px solid #aaaac0; - padding: 0ex 1ex; + border: 0px solid #aaaac0; + padding: 0ex 1ex; } table[border="1"] tr, table[border="1"] tr td { - border: 1px solid #aaaac0; + border: 1px solid #aaaac0; } -/*.note { - font-size: small; -}*/ key { - font-family: monospace; + font-family: monospace; } code { - font-family: monospace; - font-size: medium; + font-family: monospace; + font-size: medium; } li { - margin-top: 1em; + margin-top: 1em; } .illustr-left { - float: left; - padding-right: 1ex; - padding-bottom: 1ex; - padding-top: 1ex; + float: left; + padding-right: 1ex; + padding-bottom: 1ex; + padding-top: 1ex; } .illustr-right { - float: right; - padding-left: 1ex; - padding-bottom: 1ex; - padding-top: 1ex; + float: right; + padding-left: 1ex; + padding-bottom: 1ex; + padding-top: 1ex; } b{ - font-weight: bolder; + font-weight: bolder; } .bibtex2html td { @@ -163,22 +156,22 @@ body { margin: 0; padding: 0; - max-width: none; - background-image: url('banner2x.jpg'); - background-repeat: no-repeat; - background-size: 100%; - } + max-width: none; + background-image: url('banner2x.jpg'); + background-repeat: no-repeat; + background-size: 100%; +} body> .header { margin: 0px; - margin-left: 60px; - padding: 120px 0px 20px 0px; - font-size: large; - font-weight: bolder; - line-height: 1em; - display: block; - /*height: 130px;*/ - } + margin-left: 60px; + padding: 120px 0px 20px 0px; + font-size: large; + font-weight: bolder; + line-height: 1em; + display: block; + /*height: 130px;*/ +} body> .header a, body> .header a:link, @@ -186,115 +179,127 @@ body> .header a:active, body> .header a:hover { /*color: #3377ee;*/ - color: #000000; - text-decoration: none; - } + color: #000000; + text-decoration: none; +} #content { - margin: 0; /*1em 40px 10px 40px;*/ - padding: 0; - margin-left: 36ex; - max-width: 80ex; - text-align: left; - display: block; + margin: 0; + padding: 0; + margin-left: auto;/*30ex;*/ + margin-right: auto;/*10ex;*/ + max-width: 80ex; + text-align: left; + display: block; } #sidebar { - line-height: 3ex; - float: left; - margin: 0; - padding: 4ex 0px; - margin-left: 11ex; - padding-top: 2ex; - line-height: 150%; + line-height: 3ex; + float: left; + margin: 0; + max-width: 50ex; + padding: 4ex 0px; + margin-left: 8ex; + padding-top: 2ex; + line-height: 150%; } .sidetitle { - color: #000000; - margin-top: 3ex; - font-weight: bolder; - /*margin-left: -1.5ex;*/ - } - -.extra { - color: #ffffff !important; - display: inline; -} - -.extra a { - color: #ffffff !important; -} - -#sidebar a { - text-decoration: none; - font-weight: bolder; - color: #3388ee; -} - -#sidebar ul { - list-style-type: none; -} - -#sidebar LI { - display: block; + color: #000000; + margin-top: 3ex; + font-weight: bolder; } .side { - padding-left: 1.5ex; - text-align: left; - font-size: medium; /* feed to compliant browsers */ - } + padding-left: 1.5ex; + text-align: left; + font-size: medium; /* feed to compliant browsers */ +} - -@media only screen and (max-device-width: 480px) { +@media screen and (max-width: 140ex) { body> .header { padding: 0px; } - - .sidetitle { - font-size: x-large; - } - + .side { - padding-left: 1.5ex; - padding-top: 2ex; - text-align: left; - font-size: x-large; /* feed to compliant browsers */ - line-height: 300%; - } - + padding-top: 2ex; + text-align: left; + /*font-size: x-large; + line-height: 300%;*/ + } + #sidebar { - margin: 1ex 2ex; - padding: 0ex 2ex; - float: none; + margin-left: 8ex; + padding: 0ex 2ex; + float: none; } #content { - margin: 1ex 2ex; - padding: 0ex 2ex; - max-width: none; - display: block; + margin-left: 8ex; + margin-right: 8ex; + padding: 0ex 2ex; + /*max-width: none;*/ + display: block; } } +@media screen and (max-device-width: 480px) { + .side { + font-size: large; + line-height: 200%; + } + + #sidebar { + margin-left: 1ex; + font-size: large; + } + + #content { + margin-left: 1ex; + margin-right: 1ex; + } +} + +.extra { + color: #ffffff !important; + display: inline; +} + +.extra a { + color: #ffffff !important; +} + +#sidebar a { + text-decoration: none; + font-weight: bolder; + color: #3388ee; +} + +#sidebar ul { + list-style-type: none; +} + +#sidebar LI { + display: block; +} .inlinepage { padding: 0px 0px; border: none; /*border-top: 1px solid #aaaac0;*/ - padding-top: 2ex; - margin-top: 2ex; - margin-bottom: 4ex; + padding-top: 2ex; + margin-top: 2ex; + margin-bottom: 4ex; } .inlinepage .header { - color: red; - font-size: large; - font-weight: bolder; - text-transform: uppercase; - } + color: red; + font-size: large; + font-weight: bolder; + text-transform: uppercase; +} .posted-header { color: #000; @@ -304,27 +309,27 @@ font-weight: bolder; /*font-size: small;*/ /* for compliant browsers */ border-bottom: 1px solid #000000; - } +} .posted { } body> #footer .tags { - margin: 1em 0ex; + margin: 1em 0ex; } body> #footer #backlinks { - margin: 1em 0ex; + margin: 1em 0ex; } body> #footer .pageinfo { - margin: 1em 0ex; + margin: 1em 0ex; } body> #footer { padding: 4ex 0ex; - margin: 1em 0ex; - clear: both; + margin: 1em 0ex; + clear: both; } .pageinfo {
