From 6ad5c9600750959174fe3453b886cb85447a5f44 Mon Sep 17 00:00:00 2001 From: Yorhel Date: Sun, 24 Mar 2019 18:33:53 +0100 Subject: [PATCH] CSS rework + responsive design --- pub/style.css | 130 +++++++++++++++++++++----------------------------- template.html | 4 ++ 2 files changed, 59 insertions(+), 75 deletions(-) diff --git a/pub/style.css b/pub/style.css index 354fcf0..b487f0a 100644 --- a/pub/style.css +++ b/pub/style.css @@ -1,94 +1,74 @@ -html,body { background: #ccc; text-align: center; height: 100% } -* { margin: 0; padding: 0; font: 13px 'Verdana',serif; color: #222 } -header li a, h1, h1 a, h2, h2 a, h3, h3 a, h4, h5 { font-family: sans-serif } -#body { text-align: left; width: 800px; margin: 0 auto; background: #fff; border-left: 1px solid #aaa; border-right: 1px solid #aaa; min-height: 100% } -main, header { float: left; border-top: 0px dashed #aaa; margin-top: 30px } -header { width: 110px; border-right: 1px dashed #aaa; padding: 20px 10px } -main { width: 629px; padding: 12px 20px 30px 20px } -footer { clear: left; width: 250px; margin: 0 0 0 274px; border-top: 1px dashed #aaa; height: 20px; text-align: center } +* { margin: 0; padding: 0; box-sizing: border-box; font: 13px 'Georgia', 'Verdana',serif; color: #222; line-height: 1.5em } +header li a, h1, h2, h3, h4, h5 { font-family: sans-serif } + +html, body { background: #ccc; text-align: center; height: 100% } +#body { text-align: left; width: 802px; margin: 0 auto; background: #fff; border-left: 1px solid #aaa; border-right: 1px solid #aaa; min-height: 100%; display: flex; flex-flow: row wrap; align-items: flex-start } +main, header { margin-top: 30px } +header { flex: initial; width: 131px; border-right: 1px dashed #aaa; padding: 20px 10px; background: #fff } +main { flex: 1; padding: 12px 20px 30px 20px; min-width: 1% } +footer { flex: initial; width: 100%; margin: 0; border-top: 1px dashed #aaa; height: 20px; text-align: center } +#scissors { position: relative; top: 30px; left: 113px; } +#menu, #body > label { display: none } + footer p { position: relative; top: -10px; padding: 0; background: #fff; display: inline; color: #aaa } header li a { font-size: 14px } header h1 { font-weight: bold; text-align: center; font-size: 15px; margin-bottom: 20px } -header li { margin: 0 0 20px 10px; list-style-type: none } -header li a { text-decoration: none; display: block; width: 100px; border-bottom: 1px solid #fff } +header li { margin: 0 0 15px 10px; list-style-type: none } +header li a { text-decoration: none; display: block; width: 100%; border-bottom: 1px solid #fff } header li a:hover { border-bottom: 1px dashed #aaa } -header li li { margin-top: 10px; margin-bottom: 0 } -header li li a { width: 90px } +header li li { margin-top: 6px; margin-bottom: 0 } +header li li a { width: 100% } header li a.tiny { font-size: 11px } header li a.small { font-size: 10px } -header .menusel { color: #03a } +header li a.special:after { content: url(/img/external.gif) } header p { margin: 50px 0 0 0; text-align: center } -header p, header p a, header p b { font-size: 9px; text-decoration: none } +header p, header p * { font-size: 9px; text-decoration: none; line-height: 1.8em } header p a:hover { text-decoration: underline } header p i { font-size: 7px; display: block; margin-top: -2px; margin-bottom: -10px; font-style: normal } header p b { display: block; margin-top: 10px; margin-bottom: 2px } -#scissors { position: relative; top: 30px; left: 113px; } -a.special:after { content: url(/img/external.gif) } -img.right { float: right; margin: 0 0 5px 10px } -/* -.indexgroup { margin: 30px 10px 0px 20px } -.indexgroup li { list-style-type: none; margin-left: 0px } -.indexgroup li li { margin-left: 20px } -.indexgroup + .dummyTopAnchor + p { margin-top: 20px } -*/ +@media (min-width: 1200px) { + * { font-size: 16px } + #body { width: 1000px } + main { padding-right: 40px } +} +@media (max-width: 802px) { + main, header { margin-top: 35px } + main { padding: 0 10px } + #body { width: 100% } + #body > label { display: block; cursor: pointer; position: absolute; top: 0; left: 0; font-size: 13px; padding: 0 5px 2px 5px; background: #ddd } + #body > label b { font-size: 22px } + header { display: none; position: absolute; left: 0; top: 0 } + #menu:checked ~ header { display: block } +} b, strong { font-weight: bold } -h1.title { margin-top: 0; font-size: 25px } -main h1 { margin-top: 50px; } -h2 { margin-top: 25px; } -h3 { margin-top: 0; margin-left: 10px } -h1, h1 a { font-size: 19px; color: #000; margin-bottom: 5px; text-decoration: none } -h2, h2 a { font-size: 16px; color: #000; margin-bottom: 1px; text-decoration: none } -h3, h3 a { font-size: 15px; color: #000; margin-bottom: 1px; text-decoration: none } -p, figure { margin: 3px 15px 13px 15px } -p + ul, p + ol { margin-top: -10px } -li { margin-left: 35px; margin-right: 15px } -dd { margin: 3px 15px 13px 30px } -dd p, li p { margin: 3px 0 13px 0 } -/*pre b { font-weight: bold }*/ -pre, code, code span { font: 11px monospace; line-height: 1.5em } -pre { margin: 0 0 10px 18px; display: block; padding: 0 0 0 12px; border-left: 1px dotted #999 } -figcaption { display: none } -/*pre.interface { border-left: 3px solid #03a; font-size: 12px }*/ -dt a { color: #333 } -dt { margin-left: 15px } em, i, i a, em a { font-style: italic } -.sig { vertical-align: super } -.sig, .sig a { font-size: 9px; color: #333; text-decoration: none } -textarea, input, select { background: #fcfcfc; color: #000; border: 1px solid #999 } -textarea:focus, input:focus { background: #fff } -.page-changelog > ul { list-style-type: none } -.page-changelog > ul > li { margin: 0 0 15px 0 } +main h1.title { margin-top: 0; font-size: 195% } +main h1 { font-size: 150%; color: #000; margin: 2em 0 .3em 0; text-decoration: none } +main h2 { font-size: 125%; color: #000; margin: 1em 0 .3em 0; text-decoration: none } +main h3 { font-size: 120%; color: #000; margin: 1em 0 .3em 0; text-decoration: none } +main code { font-family: monospace } +main pre { font-family: monospace; font-size: 80%; margin: 0 0 10px 18px; display: block; padding: 0 0 0 15px; border-left: 1px dotted #999; overflow-x: auto } +main pre * { font-size: inherit; font-family: inherit } +main p, main figure, main ul, main ol, main dl, main pre, main figure { margin-bottom: 0.7em; margin-left: 1em } +main ul ul { margin-bottom: 0.5em } +main ul, main ol { margin-left: 2.5em } +main li { margin-bottom: .1em } +main dd { margin-left: 1.5em; margin-bottom: .5em } +main ul p, main ol p, main dl p { margin-left: 0 } +main ul ul, main dd ul { margin-left: 1em } +main dt { margin-bottom: .1em; } +main figcaption { display: none } -table { border-collapse: collapse } -table td { padding: 0 2px } -table thead td { font-weight: bold } -.bug_listing tbody tr:nth-child(odd) { background-color: #f4f4f4 } -.bug_listing { width: 95% } -.bug_col_id, .bug_col_type, .bug_col_status, .bug_col_date { white-space: nowrap } -.bug_closed .bug_col_id { text-decoration: line-through } -.bug_closed .bug_col_summary a { color: #777 } -.bug_col_summary a { text-decoration: none } -.bug_col_summary a:hover { text-decoration: underline } -.bug_status { display: block; height: 20px } -.bug_status dt { float: left; font-weight: bold } -.bug_status dd { float: left; } -.bug_item h1 { margin-top: 30px } -.bug_item dt { clear: left; float: left; font-weight: bold; width: 60px } -.bug_item dd { float: left; padding-right: 20px } -.bug_item dd b { color: #a20 } -.bug_item p { clear: left; padding-top: 5px } -.bug_frm fieldset { border: 0; margin-top: 40px } -.bug_frm legend { font-size: 19px; color: #000; } -.bug_frm li { list-style-type: none; margin-left: 10px; clear: left; padding-top: 5px } -.bug_frm label { display: block; width: 80px; float: left } -.bug_frm input, .bug_frm select { float: left } -.bug_frm textarea { width: 100%; height: 200px } -.bug_frm_submit input { float: right; width: 200px } -.bug_filter { display: block; width: 100%; text-align: right; margin: 0; } -.bug_status dt::after, .bug_item dt::after, .bug_frm label::after { content: ":" } +main img.right { float: right; margin: 0 0 5px 10px } +main .sig { vertical-align: super } +main .sig, main .sig a { font-size: 9px; color: #333; text-decoration: none } + +.page-changelog > ul { list-style-type: none; margin-left: 0 } +.page-changelog > ul > li { margin-bottom: 1.3em } +.page-changelog li li { margin-left: 1em } code span.al { color: #ff0000; font-weight: bold; } /* Alert */ code span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */ diff --git a/template.html b/template.html index df9303b..f3f0b7a 100644 --- a/template.html +++ b/template.html @@ -1,6 +1,8 @@ + +