Commit my CSS changes that I have made so far. I tried not to touch any CSS that touch documentation (just the website.)

1 files changed, 76 insertions, 17 deletions

diff --git a/xml/htdocs/css/main.css b/xml/htdocs/css/main.css
index 6cb58650..aa44b0f9 100644
--- a/xml/htdocs/css/main.css
+++ b/xml/htdocs/css/main.css
@@ -1,10 +1,13 @@
 BODY {
-	color: black; background: white;
+	color: black;
+  background: white;
 	font-family: sans-serif, Verdana, Arial, Helvetica; 
+  font-size: 0.8em;
 /* Waaaay too much complaints... really, people should learn how to
    fix their browser settings. */
-	font-size: 0.8em;
-  padding:0;
+  padding: 0;
+  margin: 0;
+  position: relative;
 }
 
 .dochead {
@@ -22,6 +25,47 @@ dt {
 	font-weight: bold; 
 }
 
+#mainpage-header {
+  width: 80%;
+  display: inline-block;
+  vertical-align: top;
+}
+
+.header-block {
+  width: 100%;
+  background: black;
+}
+
+#gentoo-logo {
+  /* TODO(antarus): empty for now */
+}
+
+.content-block {
+  /* TODO(antarus): empty for now */
+}
+
+.sidebar-menu {
+  /* Matches the saucer image */
+  background-color: #dddaec;
+  /* TODO(antarus): Try to find a way to not require the gentoo logo width. */
+  width: 190px;
+  display: inline-block;
+}
+
+#gentoo-saucer {
+  /* Ensure the saucer renders flush with the right margin of the sidebar. */
+  margin-left: 31%;
+}
+
+.adbar {
+  /* Styles taken from www.gentoo.org website circa 20100901 */
+  background-color: #dddaec;
+  width: 125px;
+  display: inline-block;
+  vertical-align: top;
+  float: right;
+}
+
 .chapnum {
 	font-size: 0.85em;
 }
@@ -60,17 +104,20 @@ a:visited { color: #52188c; }
 
 a img {border:none; text-decoration:none; vertical-align:text-bottom;}
 
-.menu {
-	font-size: 1.0em;
+.header-menu {
 	font-weight: bold;
 	font-family: sans-serif, Verdana, Arial, Helvetica;
-	color: #ffffff;
-	padding-left: 1.0em;
-	padding-right: 1.0em;
-	padding-top: 0.5em;
-	padding-bottom: 0.5em;
-  margin-bottom: 0;
-  line-height:1.6em;
+  color: white;
+  /* Because blocks are rendered vertically along the left-boundary of the
+   * containing block we need this block to render in inline mode such that
+   * it renders horizontally. */
+  display: inline-block;
+  /* Offset our text from the Gentoo Logo */
+  margin-left: 1.0em;
+  /* We set line-height to reproduce old looks in the header bar.
+   * We set virtical-align for the same reason. */
+  line-height: 120%;
+  vertical-align: 60%;
 }
 
 li {margin-bottom: 5px;}
@@ -86,6 +133,7 @@ ol,ul {margin-top: 5px;}
   line-height:1.4em;
   margin-top:0;
   margin-bottom:0;
+  vertical-align: top;
 }
 
 .alttext {
@@ -118,14 +166,12 @@ ol,ul {margin-top: 5px;}
 	font-size: 0.80em;	
 	font-family: sans-serif, Verdana, Arial, Helvetica;
 /*	padding: 0.25em; */
-	padding-top: 0.2em;
-	padding-bottom: 0.2em;
-	padding-left: 1.0em;
-	padding-right: 1.0em;
+	padding: 0.2em 1.0em;
 	margin-left: 1.0em;
 	color: #ffffff;
   background-color: #7a5ada;
 	font-weight: bold;
+  text-align: right;
 }
 
 .infosub {
@@ -227,6 +273,14 @@ pre {
   overflow: auto;
 }
 
+#news-block {
+  max-width: 1266px;
+  vertical-align: top;
+  /* this will force the news block to be 'inline' and render next to the sidebar
+   * but will also generate a new 'block' */
+  display: inline-block;
+}
+
 .news {
 	padding-left: 1.0em;
 	padding-right: 1.0em; 
@@ -236,7 +290,13 @@ pre {
 	font-size: 1em;
   text-align: justify;
   margin:10px;
+  /* NOTE(antarus):
+   * News items are typically in a #news-block div.  This means that we want the
+   * block boxes to be rendered vertically within the parent block.  We do not
+   * want two news items on one 'line' for example. */
+  display: block;
 }
+
 .news ul {display:table;} /* BUG #236374:keep all items vertically aligned */
 .news ol {display:table;} /* BUG #236374:keep all items vertically aligned */
 .newsicon {
@@ -425,7 +485,6 @@ LI {
 #devlinks a {text-decoration:none;}
 #devlinks a:hover {color:#c02020;}
 
-
 td.leftmenu p.altmenu a.altlink:before {content:"\2022\A0"; color:#301060;}
 /*
 Escaped arrow does not work with konqueror