Mercurial > hg > MPIWGWeb

changeset 8:0a7691055ea3

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
layout now with table-cell.
author casties
date Thu, 14 Feb 2013 20:38:30 +0100
parents 9813d9960e98
children 5db416602e85
files css/mpiwg.css css/mpiwg.css.inlinebox zpt/www/main_template.zpt
diffstat 3 files changed, 599 insertions(+), 88 deletions(-) [+]
line wrap: on
line diff
--- a/css/mpiwg.css	Wed Feb 13 17:09:16 2013 +0100
+++ b/css/mpiwg.css	Thu Feb 14 20:38:30 2013 +0100
@@ -75,14 +75,14 @@
     color: #3b4186;
     font-size: 16px;
     font-weight: bold;
-    margin: 10px 0 10px 0;
+    margin: 0.5em 0;
 }
 
 h2 {
     color: #3b4186;
     font-size: 16px;
     font-weight: normal;
-    margin: 0;
+    margin: 0.5em 0;
 }
 
 h3 {
@@ -100,9 +100,11 @@
 }
 
 p {
-	margin: 0;
+	margin: 0.5em 0;
+	line-height: 1.5;
 }
 
+
 /* 
  * header and wrapper 
  */
@@ -116,25 +118,26 @@
 }
 
 #header {
-    position: relative;
-    width: 900px;
-    height: 90px;
+	display: block;
+	position: relative;
+    height: 95px;
     margin: 0 0 10px 0;
 }
 
 #header div.title {
-	display: inline;
 	position: absolute;
 	left: 0;
-	top: 20px;
-	width: 661px;
-    height: 40px;
+	top: 25px;
 }
-
+#header div.title img {
+	width: 661px;
+	height: 40px;
+}
 #header div.logo {
-	display: inline;
 	position: absolute;
 	right: 0;
+}
+#header div.logo img {
 	width: 87px;
 	height: 88px;
 }
@@ -143,13 +146,13 @@
  * Main Navigation
  */
 #mainnav {
+    display: block;
     position: relative;
-    width: 900px;
     font-family: Verdana, Arial, sans-serif; 
 	font-size: 12px;
 	border-top: 8px solid #fab775;
     padding-top: 5px;
-    margin-bottom: 40px;
+    margin-bottom: 15px;
 }
 #mainnav ul {
 	padding: 0;
@@ -163,7 +166,7 @@
 }
 
 #mainnav li.sec:hover {
-    border-top: 8px solid #ea8500;
+    border-top: 8px solid #d45a00;
 }
 	
 #mainnav a {
@@ -177,57 +180,89 @@
 }
 
 #mainnav li.sec.on {
-	border-top: 8px solid #ea8500;
+	border-top: 8px solid #d45a00;
 }
 
 #mainnav li.sec.on a {
-    color: #ea8500;
+    color: #d45a00;
     outline: none;
     font-weight: bold;
 }
 
 #mainnav li.sec.lang {
     position: absolute;
-    right: 0;
+    right: 0; 
     top: -8px;
     margin-right: 0;
 }
 
+/* 
+ * breadcrumbs 
+ */
+#breadcrumbs {
+    font-size: 11px;
+    color: #6a4d3c;
+    margin-bottom: 5px;
+}
+
+#breadcrumbs a {
+    color: #6a4d3c;
+}
+
+#breadcrumbs .selected {
+    font-weight: bold;
+}
+
+/* 
+ * main section wrapper
+ */
+#mainrow {
+	display: table-row;
+}
+
+  
 /*
  * subnavigation
  */
 
 div.leftbox {
-    /* float: left; */
+    display: table-cell;
+    vertical-align: top;
     width: 170px;
+    border-top: 3px solid #dccbae;
 }
 
 div.subnav {
-    /* float: left; */
-    width: 170px;
     font-size: 11px;
 }
 
-div.subnav .sn_off, .subnavbox .sn_off {
-    /* float: left; */
-    width: 164px;
+div.subnav ul {
+	margin: 0;
+	padding: 0;
+}
+
+div.subnav li {
+	list-style-type: none;
     border-bottom: 1px solid #dccbae;
-    padding: 3px 6px 6px 0;
+    padding: 3px 6px 6px 3px;
 }
 
 div.subnav .sn_on {
-    /* float: left; */
-    width: 158px;
-    border-bottom: 1px solid #dccbae;
-    padding: 3px 6px 6px 6px;
-    background: #EA8500;
+	padding-left: 6px;
+    background: #d45a00;
 }
 
 div.subnav .sn_on a {
-    color: #FCF2DF;
+    color: #fcf2df;
     font-weight: bold;
 }
 
+div.subnavbox {
+    /* navigation below e.g. research projects */ 
+    font-size: 11px;
+    margin-top: 30px;
+}
+
 div.subnav .sn_off .dept {
     font-style: italic;
     color: #b69f7b;
@@ -238,24 +273,12 @@
     color: #f9f4e1;
 }
 
-div.subnavbox {
-    /* navigation below e.g. research projects */ 
-    /* float: left; */
-    width: 170px;
-    font-size: 11px;
-    margin-top: 30px;
-}
-
 div.subnavbox h2 {
-    /* float: left; */
-    width: 170px;
-    height: 20px;
     font-size: 11px;
     color: #b69f7b;
-    margin-bottom: 0px;
-    padding-bottom: 3px;
+	padding-bottom: 3px;
+    border-bottom: 1px solid #dccbae;
     margin-top: 20px;
-    background: transparent url(../images/side.gif) repeat-x;
 }
 
 /*
@@ -263,36 +286,38 @@
  */
 
 div.main {
+	display: table-cell;
+    vertical-align: top;
+	background-color: white;
+    border-top: 3px solid #dccbae;
+	padding: 20px;
+}
+
+div.rows {
+	display: table;
 }
 
 div.row {
-	/* set font-size to ignore whitespace */
-	font-size: 0;
+	display: table-row;
 }
 
 div.row div.block {
-	display: inline-block;
+	display: table-cell;
 	vertical-align: top;
-	/* reset font-size */
-	font-size: 12px;
 }
 div.row div.block:first-child {
 	/* first block has no left margin */
-	margin-left: 0 !important;
-}
-
-div.row.triple div.block {
-	width: 31.7%;
-	margin-left: 2.4%;
+	padding-left: 0 !important;
 }
 
 div.row div.block h2 {
     margin-top: 35px;
 	padding-bottom: 3px;
     border-bottom: 3px solid #dccbae;
+    margin-bottom: 0;
 }
 
-div.row div.block div.item {
+div.item {
 	padding-top: 5px;
 	padding-bottom: 5px;
 	border-bottom: 1px solid #dccbae;
@@ -301,7 +326,16 @@
 
 
 /* frontpage version */
+div.main.home {
+	background-color: transparent;
+	border-top: 0;
+	padding: 0;
+}
 
+div.main.home div.row div.block {
+	width: 286px;
+	padding-left: 21px;
+}
 div.main.home div.row div.block b {
 	/* bold is blue */
 	color: #3b4186;
@@ -327,13 +361,14 @@
 	background-color: #f4e0c7;
 }
 
-div.row.feature div.block.teaser_image {
+div.teaser_image {
 	position: relative;
 	width: 593px;
     height: 351px;
 }
 
-div.row.feature div.teaser_image div.caption {
+div.teaser_image div.caption {
+	/* caption inside image */
 	position: absolute;
 	bottom: 0;
 	padding: 3px;
@@ -345,14 +380,12 @@
     /* background-color: rgba(80,80,80,0.6); */
 }
 
-div.row.feature div.block.teaser_text {
+div.teaser_text {
 	position: relative;
-	width: 265px;
-	margin-left: 21px;
 	padding-right: 21px;
 }
-
-div.row.feature div.block.teaser_text div.feature_number {
+/* feature number */
+div.teaser_text div.feature_number {
 	position: absolute;
 	right: 14px;
 	top: 5px;
@@ -360,57 +393,74 @@
 	font-size: 26px;
 	color: #887163;
 }
-/* title */
-div.row.feature div.block.teaser_text h1 {
+/* feature title */
+div.teaser_text h1 {
 	font-size: 16px;
     font-weight: normal;
     margin-top: 0;
 }
 /* "current research topic */
-div.row.feature div.block.teaser_text h2 {
+div.teaser_text h2 {
 	font-size: 14px;
     color: #887163;
     margin-bottom: 0;
     margin-top: 15px;
-    border-bottom: 0;
+    border-bottom: 0 !important;
 }
 /* feature date */
-div.row.feature div.block.teaser_text h3 {
+div.teaser_text h3 {
     margin-top: 20px;
     margin-bottom: 20px;
     font-size: 12px;
 }
-div.row.feature div.block.teaser_text p {
-	line-height: 1.5;
-	margin: 0;
+
+/* 
+ * sidebar 
+ */
+div.sidebar {
+	display: table-cell;
+	width: 220px;
+    border-top: 3px solid #dccbae;
+	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;
+}
+div.sideblock:first-child h2 {
+	margin-top: 0;
 }
 
 /*
  * footer
  */
 
-div.footer {
+#footer {
 	position: relative;
-    width: 900px;
     height: 50px;
     border-top: 1px solid #dccbae;
     padding-top: 8px;
-    margin-top: 45px;
+    margin-top: 29px;
 }
 
-div.footer div.text {
+#footer div.text {
 	display: inline-block;
 	color: #d45a00;
 	font-size: 11px;
 }
 
-div.footer div.logo {
+#footer div.logo {
 	display: inline-block;
 	position: absolute;
 	right: 0;
 }
 
-div.footer div.logo img {
+#footer div.logo img {
 	width: 204px;
 	height: 41px;
 }
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/css/mpiwg.css.inlinebox	Thu Feb 14 20:38:30 2013 +0100
@@ -0,0 +1,447 @@
+/* MPIWG website style sheet 
+ * 
+ * (c) 2013 Robert Casties
+ */
+
+
+
+body {
+    margin: 0;
+    font-family: Verdana, Arial, sans-serif; 
+    background-color: #fdf8ef;
+    font-size: 12px;
+}
+
+/* 
+ * global styles
+ */
+
+img {
+    border: none;
+}
+
+a {
+    color: #d45a00;
+    text-decoration: none;
+}
+
+a:hover {
+    text-decoration: underline;
+}
+
+/*  new link-classes (with icons)  */
+
+a.internal {
+    background: url(../images/arr_more.gif) no-repeat;    
+    padding-left: 12px;
+    padding-top: 1px;
+}
+
+a.download {
+    background: url(../images/download.gif) no-repeat;    
+    padding-left: 17px;
+/* padding-top:1px; */
+}
+
+a.external {
+    background: url(../images/external.gif) no-repeat;    
+    padding-left: 15px;
+/* padding-top:1px; */
+}
+a.pdf {
+    background: url(../images/pdf.gif) no-repeat;    
+    padding-left: 15px;
+/* padding-top:1px; */
+}
+
+a.audio {
+    background: url(../images/audio.gif) no-repeat;    
+    padding-left: 15px;
+/* padding-top:1px; */
+}
+
+a.book {
+    background: url(../images/book.gif) no-repeat;    
+    padding-left: 20px;
+    margin-left: -5px;
+    margin-top: -1px;
+}
+
+a.maillink {
+    color: #3b4186 !important;
+}
+
+h1 {
+    color: #3b4186;
+    font-size: 16px;
+    font-weight: bold;
+    margin: 10px 0 10px 0;
+}
+
+h2 {
+    color: #3b4186;
+    font-size: 16px;
+    font-weight: normal;
+    margin: 0;
+}
+
+h3 {
+    color: #3b4186;
+    font-size: 14px;
+    font-weight: normal;
+    margin: 0;
+}
+
+h1 a {
+    /* a header with a link looks like a header */
+    color: inherit;
+    font-weight: inherit;
+    text-decoration: none;
+}
+
+p {
+	margin: 0;
+}
+
+/* 
+ * header and wrapper 
+ */
+
+#wrapper {
+    width: 900px;
+    margin: 0 auto;
+    padding: 10px 40px 10px 20px;
+    background-color: #fcf2df;
+    box-shadow: 0 0 5px 3px #d0d0d0;
+}
+
+#header {
+    position: relative;
+    width: 900px;
+    height: 90px;
+    margin: 0 0 10px 0;
+}
+
+#header div.title {
+	display: inline;
+	position: absolute;
+	left: 0;
+	top: 20px;
+	width: 661px;
+    height: 40px;
+}
+
+#header div.logo {
+	display: inline;
+	position: absolute;
+	right: 0;
+	width: 87px;
+	height: 88px;
+}
+
+/* 
+ * Main Navigation
+ */
+#mainnav {
+    position: relative;
+    width: 900px;
+    font-family: Verdana, Arial, sans-serif; 
+	font-size: 12px;
+	border-top: 8px solid #fab775;
+    padding-top: 5px;
+    margin-bottom: 40px;
+}
+#mainnav ul {
+	padding: 0;
+	margin: 0;
+}
+#mainnav li.sec {
+	display: inline;
+    border-top: 8px solid #fab775;
+    margin: 0 35px 0 0;
+    padding-top: 5px;
+}
+
+#mainnav li.sec:hover {
+    border-top: 8px solid #ea8500;
+}
+	
+#mainnav a {
+    color: #696968;
+    outline: none;
+}
+
+#mainnav a:hover {
+    color: #000000;
+    text-decoration: none;
+}
+
+#mainnav li.sec.on {
+	border-top: 8px solid #ea8500;
+}
+
+#mainnav li.sec.on a {
+    color: #ea8500;
+    outline: none;
+    font-weight: bold;
+}
+
+#mainnav li.sec.lang {
+    position: absolute;
+    right: 0;
+    top: -8px;
+    margin-right: 0;
+}
+
+/* 
+ * main section wrapper
+ */
+div.maincontent {
+	/* set font-size to ignore whitespace */
+	font-size: 0;
+}
+
+  
+/*
+ * subnavigation
+ */
+
+div.leftbox {
+    display: inline-block;
+    vertical-align: top;
+    width: 170px;
+}
+
+div.subnav {
+    /* float: left; */
+    width: 170px;
+    font-size: 11px;
+}
+
+div.subnav .sn_off, .subnavbox .sn_off {
+    /* float: left; */
+    width: 164px;
+    border-bottom: 1px solid #dccbae;
+    padding: 3px 6px 6px 0;
+}
+
+div.subnav .sn_on {
+    /* float: left; */
+    width: 158px;
+    border-bottom: 1px solid #dccbae;
+    padding: 3px 6px 6px 6px;
+    background: #EA8500;
+}
+
+div.subnav .sn_on a {
+    color: #FCF2DF;
+    font-weight: bold;
+}
+
+div.subnav .sn_off .dept {
+    font-style: italic;
+    color: #b69f7b;
+}
+
+div.subnav .sn_on .dept {
+    font-style: italic;
+    color: #f9f4e1;
+}
+
+div.subnavbox {
+    /* navigation below e.g. research projects */ 
+    /* float: left; */
+    width: 170px;
+    font-size: 11px;
+    margin-top: 30px;
+}
+
+div.subnavbox h2 {
+    /* float: left; */
+    width: 170px;
+    height: 20px;
+    font-size: 11px;
+    color: #b69f7b;
+    margin-bottom: 0px;
+    padding-bottom: 3px;
+    margin-top: 20px;
+    background: transparent url(../images/side.gif) repeat-x;
+}
+
+/*
+ *  main section 
+ */
+
+div.main {
+	display: inline-block;
+    vertical-align: top;
+	background-color: white;
+}
+
+div.main div.center {
+	width: 460px;
+	margin: 20px;
+	/* reset font-size */
+	font-size: 12px;
+}
+
+/* sidebars */
+
+div.main div.sidebar {
+	width: 220px;
+	/* margin-right: 10px; */
+}
+
+
+div.row {
+	/* set font-size to ignore whitespace */
+	font-size: 0;
+}
+
+div.row div.block {
+	display: inline-block;
+	vertical-align: top;
+	/* reset font-size */
+	font-size: 12px;
+}
+div.row div.block:first-child {
+	/* first block has no left margin */
+	margin-left: 0 !important;
+}
+
+div.row.triple div.block {
+	width: 31.7%;
+	margin-left: 2.4%;
+}
+
+div.row div.block h2 {
+    margin-top: 35px;
+	padding-bottom: 3px;
+    border-bottom: 3px solid #dccbae;
+}
+
+div.row div.block div.item {
+	padding-top: 5px;
+	padding-bottom: 5px;
+	border-bottom: 1px solid #dccbae;
+	line-height: 1.5;
+}
+
+
+/* frontpage version */
+div.main.home {
+	background-color: transparent;
+}
+
+div.main.home div.row div.block b {
+	/* bold is blue */
+	color: #3b4186;
+}
+div.main.home div.row div.block h2 {
+	/* more-links in title are right */
+	position: relative;
+}
+div.main.home div.row div.block 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 
+ */
+
+div.row.feature {
+	background-color: #f4e0c7;
+}
+
+div.row.feature div.block.teaser_image {
+	position: relative;
+	width: 593px;
+    height: 351px;
+}
+
+div.row.feature div.teaser_image div.caption {
+	position: absolute;
+	bottom: 0;
+	padding: 3px;
+    text-align: right;
+    color: white;
+    font-size: 10px;
+    opacity: 0.8;
+    background-color: gray;
+    /* background-color: rgba(80,80,80,0.6); */
+}
+
+div.row.feature div.block.teaser_text {
+	position: relative;
+	width: 265px;
+	margin-left: 21px;
+	padding-right: 21px;
+}
+
+div.row.feature div.block.teaser_text div.feature_number {
+	position: absolute;
+	right: 14px;
+	top: 5px;
+	font-family: Georgia, Times, serif;
+	font-size: 26px;
+	color: #887163;
+}
+/* title */
+div.row.feature div.block.teaser_text h1 {
+	font-size: 16px;
+    font-weight: normal;
+    margin-top: 0;
+}
+/* "current research topic */
+div.row.feature div.block.teaser_text h2 {
+	font-size: 14px;
+    color: #887163;
+    margin-bottom: 0;
+    margin-top: 15px;
+    border-bottom: 0;
+}
+/* feature date */
+div.row.feature div.block.teaser_text h3 {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    font-size: 12px;
+}
+div.row.feature div.block.teaser_text p {
+	line-height: 1.5;
+	margin: 0;
+}
+
+/*
+ * footer
+ */
+
+div.footer {
+	position: relative;
+    width: 900px;
+    height: 50px;
+    border-top: 1px solid #dccbae;
+    padding-top: 8px;
+    margin-top: 45px;
+}
+
+div.footer div.text {
+	display: inline-block;
+	color: #d45a00;
+	font-size: 11px;
+}
+
+div.footer div.logo {
+	display: inline-block;
+	position: absolute;
+	right: 0;
+}
+
+div.footer div.logo img {
+	width: 204px;
+	height: 41px;
+}
--- a/zpt/www/main_template.zpt	Wed Feb 13 17:09:16 2013 +0100
+++ b/zpt/www/main_template.zpt	Thu Feb 14 20:38:30 2013 +0100
@@ -49,14 +49,27 @@
       </ul>
     </div>
 
-    <div class="maincontent" metal:define-slot="maincontent">
+    <div id="breadcrumbs" metal:define-slot="breadcrumbs">
+      <a tal:attributes="href root">Home</a> &gt;
+      <tal:block tal:repeat="crumb crumbs | nothing">
+        <tal:block tal:condition="not:repeat/crumb/end">
+          <a tal:attributes="href python:crumb[1]" tal:content="python:crumb[0]">News</a> &gt;
+            </tal:block>
+        <tal:block tal:condition="repeat/crumb/end">
+          <span class="selected"> <a tal:attributes="href python:crumb[1]" tal:content="python:crumb[0]">News</a>
+          </span>
+        </tal:block>
+      </tal:block>
+    </div>
+
+    <div id="mainrow" metal:define-slot="mainrow">
       <div class="leftbox" metal:define-slot="leftbox">
         <div class="subnav" metal:define-slot="subnav">
-          <tal:block tal:condition="crumbs" tal:repeat="subnav python:here.subNav(here)">
-            <div tal:attributes="class python:test(subnav[0]==subsection,'sn_on','sn_off')">
-              <a tal:attributes="href python:subnav[1].absolute_url()" tal:content="python:subnav[1].title">Subnav</a>
-            </div>
-          </tal:block>
+          <ul tal:condition="crumbs">
+            <li tal:repeat="subnav python:here.subNav(here)"
+              tal:attributes="class python:test(subnav[0]==subsection,'sn_on','sn_off')"><a
+              tal:attributes="href python:subnav[1].absolute_url()" tal:content="python:subnav[1].title">Subnav</a></li>
+          </ul>
         </div>
         <div class="subnavbox" metal:define-slot="subnavbox"></div>
       </div>
@@ -66,15 +79,16 @@
         <div class="center" metal:define-slot="center"></div>
         <!-- /center -->
 
-        <div class="sidebar" metal:define-slot="sidebar"></div>
-        <!-- /sidebar -->
-
       </div>
       <!-- /main -->
+
+      <metal:block metal:define-slot="sidebar" />
+      <!-- /sidebar -->
+
     </div>
     <!-- /maincontent -->
 
-    <div class="footer">
+    <div id="footer">
       <div class="text">
         <a tal:attributes="href string:$root/resources/intranet.html">Intranet</a> | <a href="https://webmail.mpiwg-berlin.mpg.de"
           target="_blank">Webmail</a> | <a tal:attributes="href string:$root/institute/address.html">Contact</a> | <a