# HG changeset patch # User casties # Date 1366310341 -7200 # Node ID 8a99ad8713d620651c470063f787404f972e0fa9 # Parent 5a4b22fa726c9c1a54d895092c1a531a230e18e3 new common template for fragments. new styles for servicebox. diff -r 5a4b22fa726c -r 8a99ad8713d6 MPIWGRoot.py --- a/MPIWGRoot.py Wed Apr 10 17:56:29 2013 +0200 +++ b/MPIWGRoot.py Thu Apr 18 20:39:01 2013 +0200 @@ -83,6 +83,7 @@ # templates # main_template = PageTemplateFile('zpt/www/main_template', globals()) + common_template = PageTemplateFile('zpt/www/common_template', globals()) mpiwg_css = ImageFile('css/mpiwg.css', globals()) # make docuviewer_css refreshable for development mpiwg_css.index_html = refreshingImageFileIndexHtml diff -r 5a4b22fa726c -r 8a99ad8713d6 css/mpiwg.css --- a/css/mpiwg.css Wed Apr 10 17:56:29 2013 +0200 +++ b/css/mpiwg.css Thu Apr 18 20:39:01 2013 +0200 @@ -3,12 +3,9 @@ * (c) 2013 MPIWG Berlin * Author: Robert Casties */ - - - body { margin: 0; - font-family: Verdana, Arial, sans-serif; + font-family: Verdana, Arial, sans-serif; background-color: #fdf8ef; font-size: 12px; } @@ -16,7 +13,6 @@ /* * global styles */ - img { border: none; } @@ -31,40 +27,39 @@ } /* link-classes (with icons) */ - a.internal { - background: url(../images/internal.png) center left no-repeat; + background: url(../images/internal.png) center left no-repeat; padding-left: 10px; } a.download { - background: url(../images/download.png) center left no-repeat; + background: url(../images/download.png) center left no-repeat; padding-left: 15px; } a.external { - background: url(../images/external.png) center left no-repeat; + background: url(../images/external.png) center left no-repeat; padding-left: 15px; } a.pdf { - background: url(../images/pdf.gif) no-repeat; + background: url(../images/pdf.gif) no-repeat; padding-left: 15px; -/* padding-top:1px; */ + /* padding-top:1px; */ } a.audio { - background: url(../images/audio.png) center left no-repeat; + background: url(../images/audio.png) center left no-repeat; padding-left: 15px; } a.down { - background: url(../images/down.png) center left no-repeat; + background: url(../images/down.png) center left no-repeat; padding-left: 15px; } a.book { - background: url(../images/book.gif) no-repeat; + background: url(../images/book.gif) no-repeat; padding-left: 20px; margin-left: -5px; margin-top: -1px; @@ -80,9 +75,10 @@ font-weight: normal; margin: 0.5em 0; } + h1:first-child { - /* does this work correctly? */ - margin-top: 0; + /* does this work correctly? */ + margin-top: 0; } h2 { @@ -107,53 +103,40 @@ } p { - margin: 0.5em 0; - line-height: 1.5; + margin: 0.5em 0; + line-height: 1.5; } ul.inline { - padding: 0; - margin: 0; + padding: 0; + margin: 0; } + ul.inline li { - display: inline; + display: inline; } div.rows { - display: table; + display: table; } div.row { - display: table-row; -} - -div.row div.col { - display: table-cell; - vertical-align: top; -} -div.row div.col:first-child { - /* first block has no left margin */ - padding-left: 0 !important; + display: table-row; } -div.box h2 { - margin-top: 35px; - padding-bottom: 5px; - border-bottom: 3px solid #dccbae; - margin-bottom: 0; +div.row>div.col { + display: table-cell; + vertical-align: top; } -div.item { - padding-top: 5px; - padding-bottom: 5px; - border-bottom: 1px solid #dccbae; - line-height: 1.5; +div.row>div.col:first-child { + /* first block has no left margin */ + padding-left: 0 !important; } /* * page wrapper and header */ - #wrapper { width: 900px; margin: 0 auto; @@ -163,28 +146,31 @@ } #header { - display: block; - position: relative; + display: block; + position: relative; height: 95px; margin: 0 0 10px 0; } #header div.title { - position: absolute; - left: 0; - top: 25px; + position: absolute; + left: 0; + top: 25px; } + #header div.title img { - width: 661px; - height: 40px; + width: 661px; + height: 40px; } + #header div.logo { - position: absolute; - right: 0; + position: absolute; + right: 0; } + #header div.logo img { - width: 87px; - height: 88px; + width: 87px; + height: 88px; } /* @@ -193,22 +179,22 @@ #mainnav { display: block; position: relative; - font-family: Verdana, Arial, sans-serif; - font-size: 12px; - border-top: 8px solid #fab775; + font-family: Verdana, Arial, sans-serif; + font-size: 12px; + border-top: 8px solid #fab775; padding-top: 5px; margin-bottom: 15px; - /* make iPhone-Safari not botch text size */ + /* make iPhone-Safari not botch text size */ -webkit-text-size-adjust: 100%; } #mainnav ul { - padding: 0; - margin: 0; + padding: 0; + margin: 0; } #mainnav li.sec { - display: inline; + display: inline; border-top: 8px solid #fab775; margin: 0 35px 0 0; padding-top: 5px; @@ -217,7 +203,7 @@ #mainnav li.sec:hover { border-top: 8px solid #d45a00; } - + #mainnav a { color: #696968; outline: none; @@ -229,7 +215,7 @@ } #mainnav li.sec.on { - border-top: 8px solid #d45a00; + border-top: 8px solid #d45a00; } #mainnav li.sec.on a { @@ -240,7 +226,7 @@ #mainnav li.sec.lang { position: absolute; - right: 0; + right: 0; top: -8px; margin-right: 0; } @@ -266,14 +252,12 @@ * main section wrapper */ #mainrow { - display: table-row; + display: table-row; } - /* * subnavigation */ - div.leftbox { display: table-cell; vertical-align: top; @@ -286,18 +270,18 @@ } div.subnav ul { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } div.subnav li { - list-style-type: none; + list-style-type: none; border-bottom: 1px solid #dccbae; padding: 3px 6px 6px 3px; } div.subnav .sn_on { - padding-left: 6px; + padding-left: 6px; background: #d45a00; } @@ -317,10 +301,10 @@ } div.subnav li.dept { - padding-left: 18px; - list-style-position: inside; - list-style-image: url(../images/internal.png); - text-indent: -14px; + padding-left: 18px; + list-style-position: inside; + list-style-image: url(../images/internal.png); + text-indent: -14px; } div.subnav li.dept .type { @@ -333,7 +317,7 @@ } div.subnavbox { - /* navigation below e.g. research projects */ + /* navigation below e.g. research projects */ font-size: 11px; margin-top: 30px; } @@ -341,7 +325,7 @@ div.subnavbox h2 { font-size: 11px; color: #b69f7b; - padding-bottom: 3px; + padding-bottom: 3px; border-bottom: 1px solid #dccbae; margin-top: 20px; } @@ -349,73 +333,76 @@ /* * main section */ - div.main { - display: table-cell; + display: table-cell; vertical-align: top; - background-color: white; + background-color: white; border-top: 3px solid #dccbae; - padding: 20px; + padding: 20px; } -div.main div.center { - /* display: table; */ -} - -div.main div.row div.col { - padding-left: 20px; +div.main div.row>div.col { + /* col default padding */ + padding-left: 20px; } /* * frontpage */ +div.main.home { + background-color: transparent; + border-top: 0; + padding: 0; +} -div.main.home { - background-color: transparent; - border-top: 0; - padding: 0; +div.main.home b { + /* bold is blue */ + color: #3b4186; } -div.main.home div.row div.col { - width: 286px; - padding-left: 21px; -} -div.main.home div.row div.col b { - /* bold is blue */ - color: #3b4186; +div.main.home div.row.triple>div.col { + /* frontpage col width */ + width: 286px; + padding-left: 21px; } -div.main.home div.row div.col h2 { - /* more-links in title are right */ - position: relative; + +div.main.home div.box h2 { + /* more-links in title are right */ + position: relative; } -div.main.home div.row div.col h2 a:link { - /* more-links in title are right */ - position: absolute; - right: 0; - top: 3px; - /* more-links in title are small */ - font-size: 12px; + +div.main.home div.box h2 a:link { + /* more-links in title are right */ + position: absolute; + right: 0; + top: 3px; + /* more-links in title are small */ + font-size: 12px; } /* - * front page feature + * front page feature teaser */ +div.main.home div.teaser { + background-color: #f4e0c7; +} -div.row.feature { - background-color: #f4e0c7; +div.main.home div.teaser div.box { + /* teaser box needs no margins */ + margin: 0; } div.teaser_image { - position: relative; - width: 593px; + position: relative; + width: 593px; height: 351px; } div.teaser_image div.caption { - /* caption inside image */ - position: absolute; - bottom: 0; - padding: 3px; + /* caption inside image */ + position: absolute; + bottom: 0; + padding: 3px; text-align: right; color: white; font-size: 10px; @@ -425,130 +412,128 @@ } div.teaser_text { - position: relative; - padding-right: 21px; + padding-right: 21px; } /* feature number */ div.teaser_text div.feature_number { - position: absolute; - right: 14px; - top: 5px; - font-family: Georgia, Times, serif; - font-size: 26px; - color: #887163; + position: absolute; + right: 14px; + top: 5px; + font-family: Georgia, Times, serif; + font-size: 26px; + color: #887163; } /* feature title */ div.teaser_text h1 { - font-size: 16px; + font-size: 16px; font-weight: normal; margin-top: 0; } /* current research topic */ -div.teaser_text h2 { - font-size: 14px; +div.teaser_text h3 { color: #887163; - margin-bottom: 0; + margin-bottom: 3px; margin-top: 15px; - border-bottom: 0 !important; } /* feature date */ -div.teaser_text h3 { - margin-top: 20px; +div.teaser_text div.date { + color: #3b4186; + padding-top: 20px; margin-bottom: 20px; - font-size: 12px; } -/* teaser switcher */ -div.feature div.switcher { - position: absolute; - top: 150px; - width: 16px; - height: 24px; - /* TODO: needs icon */ - padding-top: 8px; - background-color: silver; +/* teaser slider */ +div.teaser div.box div.slider { + top: 150px; + width: 18px; + height: 24px; + padding-top: 11px; } -div.feature div.switcher.prev { - left: 0; + +div.teaser div.box div.slider.prev { + background-image: url(../images/slider_prev_bg.png); } -div.feature div.switcher.next { - right: 0; - text-align: right; + +div.teaser div.box div.slider.next { + background-image: url(../images/slider_next_bg.png); } /* * toolboxes */ div.tool.box { - background-color: #efeeec; - color: black; - padding: 20px; + background-color: #efeeec; + color: black; + padding: 20px; box-shadow: 0 0 1px 1px #e0e0e0; } div.tool.box a { - color: #3b4186; + color: #3b4186; } div.tool.box div.searchbox { - /* only to make it shrink-wrap */ - display: table-cell; + /* only to make it shrink-wrap */ + display: table-cell; } + div.tool.box div.searchbox input.text { - height: 20px; - width: 380px; - background-color: #9fa0a7; - color: white; - font-size: 14px; - font-style: italic; - border: 0; - padding: 3px; + height: 20px; + width: 380px; + background-color: #9fa0a7; + color: white; + font-size: 14px; + font-style: italic; + border: 0; + padding: 3px; } + div.tool.box div.searchbox input.submit { - /* submit uses border-box. don't ask */ - height: 26px; - width: 26px; - border: 0; - padding: 2px 3px 4px 3px; - /* TODO: this should be an image */ - background-color: #ee7f2d; - color: white; - font-size: 14px; + /* submit uses border-box. don't ask */ + height: 26px; + width: 26px; + border: 0; + padding: 2px 3px 4px 3px; + /* TODO: this should be an image */ + background-color: #ee7f2d; + color: white; + font-size: 14px; } div.tool.box div.searchbox div.extended { - text-align: right; - padding: 5px 30px 5px 3px; + text-align: right; + padding: 5px 30px 5px 3px; } div.tool.box h3 { - font-family: Georgia, Times, serif; - font-style: italic; - font-size: 16px; + font-family: Georgia, Times, serif; + font-style: italic; + font-size: 16px; color: #887163; margin: 0.5em 0; } + div.tool.box h3:first-child { - /* does this work correctly? */ - margin-top: 0; + /* does this work correctly? */ + margin-top: 0; } div.tool.box ul { - margin: 0; - padding: 0; + margin: 0; + padding: 0; } div.tool.box div.options li { - font-family: Georgia, Times, serif; - font-style: italic; - font-size: 16px; + font-family: Georgia, Times, serif; + font-style: italic; + font-size: 16px; color: #887163; - list-style-type: none; + list-style-type: none; margin: 0.5em 0; } div.tool.box div.options { - margin-top: 20px; + margin-top: 20px; } div.tool.box div.atoz { @@ -558,95 +543,212 @@ div.tool.box input.checkbox, div.tool.box input.radio { - /* checkbox uses border-box. don't ask */ - width: 20px; - height: 20px; - margin: 0; - /* TODO: this should be an image */ - background-color: white; + /* checkbox uses border-box. don't ask */ + width: 20px; + height: 20px; + margin: 0; + /* TODO: this should be an image */ + background-color: white; +} + +/* + * service box on frontpage + */ +div.box h2.service { + /* title has no line */ + border: 0; +} + +div.tool.box.service { + margin-top: 0; + padding: 0; } +div.tool.box.service div.row > div.col { + padding: 0; +} +div.tool.box.service div.search { + width: 200px; + height: 20px; + padding: 26px 0 26px 16px; + border-bottom: 1px solid #9fa0a7; +} +div.tool.box.service div.search.both { + height: 44px; + padding: 14px 0 14px 16px; +} +div.tool.box.service div.searchicon { + width: 38px; + height: 40px; + text-align: center; + padding: 16px; + border-bottom: 1px solid #9fa0a7; +} +div.tool.box.service div.icon { + width: 71px; + height: 70px; + text-align: center; + line-height: 2.5; + padding: 1px 0; + border-left: 1px solid #9fa0a7; +} +div.tool.box.service div.icon.first { + border-left: 0; + width: 70px; +} +div.tool.box.service div.searchbox { + display: block; +} +div.tool.box.service div.searchbox input.text { + width: 170px; + height: 17px; + font-size: 12px; + padding: 1px 3px; +} +div.tool.box.service div.searchbox input.submit { + height: 19px; + width: 19px; + padding: 0; + margin: 0; + vertical-align: bottom; +} +div.tool.box.service select.quickfinder { + width: 200px; + height: 19px; + font-size: 12px; + background-color: white; + margin-bottom: 5px; + border: 0; +} /* - * sources and websites + * sonstige boxen */ -div.box div.source, -div.box div.website { - padding: 10px 0; +div.box { + margin: 20px 0; + position: relative; } -div.box div.source div.thumb, -div.box div.website div.thumb { - background-color: #f8f8f8; - text-align: center; +div.box h2 { + /* h2 is title with line */ + padding-bottom: 5px; + border-bottom: 3px solid #dccbae; + margin-bottom: 5px; +} + +div.box.line { + border-bottom: 1px solid #dccbae; +} + +div.box h3 { + /* h3 is subtitle/type */ + font-size: 12px; + color: #6a4d3c; } -div.box div.source div.caption, -div.box div.website div.caption { - font-size: 11px; - color: #9f917a; +div.box h3+h2 { + /* directly over h2 */ + margin-top: 0; +} + +div.mini { + padding: 10px 0; } -div.box div.source div.author, -div.box div.website div.title { +div.mini div.thumb { + background-color: #f8f8f8; + text-align: center; +} + +div.mini div.type { + font-size: 11px; + color: #9f917a; +} + +div.box div.source div.author,div.box div.website div.title { color: #3b4186; } div.box div.website div.description { - /* initially hidden */ - display: none; + /* initially hidden */ + display: none; } div.box div.website.item { - min-height: 180px; - position: relative; - margin: 10px 0 0 0; + min-height: 180px; + position: relative; + margin: 10px 0 0 0; } div.box div.website.item div.fold { - position: absolute; - bottom: 0; - right: 0; - /* TODO: this should be an image */ - background-color: #ee7f2d; - color: white; - font-size: 14px; + position: absolute; + bottom: 0; + right: 0; + /* TODO: this should be an image */ + background-color: #ee7f2d; + color: white; + font-size: 14px; +} + +/* paragraph with line */ +div.item { + padding-top: 5px; + padding-bottom: 5px; + border-bottom: 1px solid #dccbae; + line-height: 1.5; +} + +/* slider buttons */ +div.box div.slider { + position: absolute; + top: 110px; + width: 16px; + height: 18px; +} + +div.box div.slider.prev { + left: 0; +} + +div.box div.slider.next { + right: 0; + text-align: right; } /* * sidebar */ div.sidebar { - display: table-cell; - width: 220px; + display: table-cell; + width: 220px; border-top: 3px solid #dccbae; - background-color: white; - padding: 20px 8px 20px 0; + background-color: white; + padding: 20px 8px 20px 0; } div.sideblock h2 { font-size: 12px; margin-top: 20px; padding-bottom: 5px; - border-bottom: 3px solid #dccbae; - margin-bottom: 0; + border-bottom: 3px solid #dccbae; + margin-bottom: 0; } + div.sideblock:first-child h2 { - margin-top: 0; + margin-top: 0; } div.sideblock h3 { font-size: 12px; margin-top: 5px; padding-bottom: 5px; - border-bottom: 1px solid #dccbae; + border-bottom: 1px solid #dccbae; } /* * footer */ - #footer { - position: relative; + position: relative; height: 50px; border-top: 1px solid #dccbae; padding-top: 8px; @@ -654,18 +756,18 @@ } #footer div.text { - display: inline-block; - color: #d45a00; - font-size: 11px; + display: inline-block; + color: #d45a00; + font-size: 11px; } #footer div.logo { - display: inline-block; - position: absolute; - right: 0; + display: inline-block; + position: absolute; + right: 0; } #footer div.logo img { - width: 204px; - height: 41px; -} + width: 204px; + height: 41px; +} \ No newline at end of file diff -r 5a4b22fa726c -r 8a99ad8713d6 zpt/www/common_template.zpt --- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/zpt/www/common_template.zpt Thu Apr 18 20:39:01 2013 +0200 @@ -0,0 +1,59 @@ + + + + + + + + + +
+ +
+
+ + + + + + +
+
+
+
+
+
+

+ Current Research Topic +

+ + + +

+ Current Research Topic +

+

+ Research Topic Archive +

+ +
+
+
+ + + +