From 616e7a3c0f4c4909dd7782d0480b7012b3ca4dfa Mon Sep 17 00:00:00 2001 From: ruanyf Date: Sun, 20 Apr 2014 21:48:08 +0800 Subject: [PATCH] edit css --- css/app.css | 230 +++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 229 insertions(+), 1 deletion(-) diff --git a/css/app.css b/css/app.css index 25097d5..8fe4d76 100644 --- a/css/app.css +++ b/css/app.css @@ -23,7 +23,7 @@ html { font-size: 100%; } .container { margin: 0 auto; - max-width: 48rem; + max-width: 60rem; width: 90%; } @@ -68,4 +68,232 @@ body { font-size: 0.8em; } +#sidebar { + position: fixed; + height: 100%; + overflow-y: scroll; + overflow: -moz-scrollbars-vertical; + + margin-right: 20px; + margin-top: 0; + padding-left: 25px; + padding-top: 0; + + box-shadow: 0 0 40px #CCC; + -webkit-box-shadow: 0 0 40px #CCC; + -moz-box-shadow: 0 0 40px #CCC; + border-right: 1px solid #BBB; +} + +#sidebar h1 { + font-size: 25px; + margin-bottom: 0px; + padding-bottom: 0px; +} + +#sidebar h1 a:link, #sidebar h1 a:visited { + color: #333; +} + +#sidebar h2 { + font-size: 15px; +} + +#sidebar h5 { + margin-top: 20px; + margin-bottom: 0; +} + +#sidebar a:visited, #sidebar a:link { + color: #4682BE; + text-decoration: none; +} + +#sidebar ul { + list-style-type: none; + margin: 0; + padding-left: 10px; + padding-top: 0; +} + +#sidebar ul li:before { /* a hack to have dashes as a list style */ + content: "-"; + position: relative; + left: -5px; +} + +#sidebar ul li { + margin-top: 0; + margin-bottom: 2px; + margin-left: 10px; + padding: 0; + + text-indent: -5px; /* to compensate for the padding for the dash */ + font-size: 12px; +} + +#content { + padding-top: 10px; + padding-bottom: 150px; + + text-align: justify; + font-size: 16px; + + /* border: 1px solid black; */ +} + +#content pre { + margin-left: auto; + margin-right: auto; + padding-top: 10px; + padding-bottom: 10px; + padding-left: 13px; + + color: #FFF; + + background: #444; + border-radius: 5px; +} + +#content code { + padding-left: 5px; + padding-right: 5px; + + color: #FFF; + font-size: 10px; + font-weight: normal; + font-family: Consolas, monospace; + + background: #444; + border-radius: 2px; +} + +#content h2 { + margin-top: 50px; + margin-bottom: 0px; + + padding-top: 20px; + padding-bottom: 0px; + + font-size: 18px; + text-align: left; + + border-top: 2px solid #666; +} + +#content h3 { + margin-top: 50px; + margin-bottom: 0px; + + padding-top: 20px; + padding-bottom: 0px; + + text-align: left; + border-top: 1px dotted #777; +} + +#content img { + max-width: 90%; + display: block; + + margin-left: auto; + margin-right: auto; + margin-top: 40px; + margin-bottom: 40px; + + border-radius: 5px; +} + +#content ul { + display: block; + list-style-type: none; +} + +#content ul li:before { /* a hack to have dashes as a list style */ + content: "-"; + position: relative; + left: -5px; +} + +#content ul li { + text-indent: -5px; /* to compensate for the padding for the dash */ + font-size: 13px; +} + +#content ul li.link { + color: #4682BE; + text-decoration: none; + font-size: 13px; + font-weight: bold; + cursor: pointer; +} + +#content a:link, #content a:visited { + color: #4682BE; + text-decoration: none; +} + +#back_to_top { + display: none; + position: fixed; + + height: 20px; + width: 70px; + top: 20px; + + margin-left: 890px; + margin-top: 0px; + + color: #FFF; + line-height: 20px; + text-align: center; + font-size: 10px; + + + border-radius: 5px; + background-color: #AAA; +} + +#back_to_top:hover { + background-color: #444; + cursor: pointer; +} + +#edit { + display: none; + position: fixed; + + height: 17px; + width: 70px; + top: 45px; + + margin-left: 890px; + margin-top: 0px; + + color: #FFF; + line-height: 17px; + text-align: center; + font-size: 10px; + + + border-radius: 5px; + background-color: #AAA; +} + +#edit:hover { + background-color: #444; + cursor: pointer; +} + +#loading, #error { + display: none; + position: fixed; + + height: 17px; + top: 45%; + + margin-left: 560px; + + font-size: 14px; +}