diff options
| author | Christopher Gateley <christopher.gateley@gmail.com> | 2010-12-10 22:45:04 -0600 |
|---|---|---|
| committer | Nick Fitzgerald <fitzgen@gmail.com> | 2010-12-11 20:58:05 -0800 |
| commit | e2032e19b05c052b8fad276a1fb6aac1a5b552a8 (patch) | |
| tree | f405e1a05ea74f447b7bee0bc0299659eea9f629 /pycco_resources | |
| parent | 2046caaf4ef64d419fe37878d7db40627c2a6e60 (diff) | |
| download | pycco-e2032e19b05c052b8fad276a1fb6aac1a5b552a8.tar.gz | |
moved from table to pure css layout design
Diffstat (limited to 'pycco_resources')
| -rw-r--r-- | pycco_resources/__init__.py | 164 |
1 files changed, 53 insertions, 111 deletions
diff --git a/pycco_resources/__init__.py b/pycco_resources/__init__.py index 69700d7..f9535f5 100644 --- a/pycco_resources/__init__.py +++ b/pycco_resources/__init__.py @@ -22,7 +22,7 @@ h1, h2, h3, h4, h5, h6 { h2, h3, h4, h5, h6 { margin-top: 0; } -#container { +#container, div.section { position: relative; } #background { @@ -32,95 +32,57 @@ h2, h3, h4, h5, h6 { border-left: 1px solid #e5e5ee; z-index: -1; } -#jump_to, #jump_page { - background: white; - -webkit-box-shadow: 0 0 25px #777; -moz-box-shadow: 0 0 25px #777; - -webkit-border-bottom-left-radius: 5px; -moz-border-radius-bottomleft: 5px; - font: 10px Arial; - text-transform: uppercase; - cursor: pointer; - text-align: right; +div.docs { + float: left; + max-width: 500px; + min-width: 500px; + min-height: 5px; + padding: 10px 25px 1px 50px; + vertical-align: top; + text-align: left; } -#jump_to, #jump_wrapper { - position: fixed; - right: 0; top: 0; - padding: 5px 10px; -} - #jump_wrapper { - padding: 0; - display: none; + .docs pre { + margin: 15px 0 15px; + padding-left: 15px; } - #jump_to:hover #jump_wrapper { - display: block; - } - #jump_page { - padding: 5px 0 3px; - margin: 0 0 25px 25px; - } - #jump_page .source { - display: block; - padding: 5px 10px; - text-decoration: none; - border-top: 1px solid #eee; - } - #jump_page .source:hover { - background: #f5f5ff; - } - #jump_page .source:first-child { - } -table td { - border: 0; - outline: 0; -} - td.docs, th.docs { - max-width: 500px; - min-width: 500px; - min-height: 5px; - padding: 10px 25px 1px 50px; - vertical-align: top; - text-align: left; + .docs p tt, .docs p code { + background: #f8f8ff; + border: 1px solid #dedede; + font-size: 12px; + padding: 0 0.2em; } - .docs pre { - margin: 15px 0 15px; - padding-left: 15px; - } - .docs p tt, .docs p code { - background: #f8f8ff; - border: 1px solid #dedede; - font-size: 12px; - padding: 0 0.2em; - } - .octowrap { - position: relative; + .octowrap { + position: relative; + } + .octothorpe { + font: 12px Arial; + text-decoration: none; + color: #454545; + position: absolute; + top: 3px; left: -20px; + padding: 1px 2px; + opacity: 0; + -webkit-transition: opacity 0.2s linear; } - .octothorpe { - font: 12px Arial; - text-decoration: none; - color: #454545; - position: absolute; - top: 3px; left: -20px; - padding: 1px 2px; - opacity: 0; - -webkit-transition: opacity 0.2s linear; + div.docs:hover .octothorpe { + opacity: 1; } - td.docs:hover .octothorpe { - opacity: 1; - } - td.code, th.code { - padding: 14px 15px 16px 50px; - width: 100%; - vertical-align: top; - background: #f5f5ff; - border-left: 1px solid #e5e5ee; - } -.code pre, .docs p code { - font-size: 12px; +div.code { + margin-left: 580px; + padding: 14px 15px 16px 50px; + vertical-align: top; } + .code pre, .docs p code { + font-size: 12px; + } pre, tt, code { line-height: 18px; font-family: Monaco, Consolas, "Lucida Console", monospace; margin: 0; padding: 0; } +div.clearall { + clear: both; +} /*---------------------- Syntax Highlighting -----------------------------*/ @@ -198,42 +160,22 @@ html = """\ <link rel="stylesheet" href="{{ stylesheet }}"> </head> <body> +<div id="background"></div> <div id='container'> - <div id="background"></div> - {{#sources?}} - <div id="jump_to"> - Jump To … - <div id="jump_wrapper"> - <div id="jump_page"> - {{#sources}} - <a class="source" href="{{ url }}">{{ basename }}</a> - {{/sources}} + {{#sections}} + <div id='section-{{ num }}' class='section'> + <div class='docs'> + <div class='octowrap'> + <a class='octothorpe' href='#section-{{ num }}'>#</a> </div> + {{{ docs_html }}} + </div> + <div class='code'> + {{{ code_html }}} </div> </div> - {{/sources?}} - <table cellspacing=0 cellpadding=0> - <thead> - <tr> - <th class=docs><h1>{{ title }}</h1></th> - <th class=code></th> - </tr> - </thead> - <tbody> - {{#sections}} - <tr id='section-{{ num }}'> - <td class=docs> - <div class="octowrap"> - <a class="octothorpe" href="#section-{{ num }}">#</a> - </div> - {{{ docs_html }}} - </td> - <td class=code> - <div class='highlight'><pre>{{{ code_html }}}</pre></div> - </td> - </tr> - {{/sections}} - </table> + <div class='clearall'></div> + {{/sections}} </div> </body> """ |