CSS rework + responsive design
This commit is contained in:
Yorhel
parent
4c3d15b348
commit
6ad5c96007
2 changed files with 59 additions and 75 deletions
130
pub/style.css
130
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 */
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
|
||||
<link rel="stylesheet" href="/style.css" type="text/css" media="all" />
|
||||
<link rel="alternate" type="application/atom+xml" href="/feed.atom" title="Site updates" />
|
||||
<style type="text/css">
|
||||
|
|
@ -10,6 +12,8 @@
|
|||
</head>
|
||||
<body>
|
||||
<div id="body">
|
||||
<label for="menu"><b>≡</b> menu</label>
|
||||
<input type="checkbox" id="menu">
|
||||
<header>
|
||||
<nav>
|
||||
$if(menu-main)$
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue