new layout
authorjoerg <joerg@c2f067bf-98e0-425f-9c98-e76020cfa380>
Sat, 5 Feb 2011 20:14:07 +0000 (20:14 +0000)
committerjoerg <joerg@c2f067bf-98e0-425f-9c98-e76020cfa380>
Sat, 5 Feb 2011 20:14:07 +0000 (20:14 +0000)
git-svn-id: svn+ssh://svn.debian.org/svn/planet-debian/trunk@1380 c2f067bf-98e0-425f-9c98-e76020cfa380

13 files changed:
templates/index.html.dj
www/common/Pics/admon-important.png [new file with mode: 0644]
www/common/Pics/admon-note.png [new file with mode: 0644]
www/common/Pics/admon-tip.png [new file with mode: 0644]
www/common/Pics/admon-warning.png [new file with mode: 0644]
www/common/Pics/emblem-downloads.png [new file with mode: 0644]
www/common/Pics/gradient.png [new file with mode: 0644]
www/common/Pics/greydot.png [new file with mode: 0644]
www/common/Pics/openlogo-50.png [new file with mode: 0644]
www/common/Pics/reddot.png [new file with mode: 0644]
www/common/boxless.css [deleted file]
www/common/debian.css [new file with mode: 0644]
www/common/planet.css [new file with mode: 0644]

index 7cdb85a..c88f816 100644 (file)
-<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
-<html>
-  <head>
-       <title>{{ name }}</title>
-       <meta http-equiv="content-type" content="text/html; charset=utf-8" >
-       <meta name="generator" content="{{ generator }}" >
-       <link rel="stylesheet" media="screen" type="text/css" href="common/boxless.css" >
-       <link rel="icon" type="image/x-icon" href="common/favicon.ico" >
-       <link href="rss10.xml" rel="alternate" type="application/rss+xml"  title="RSS 1.0 Feed" >
-       <link href="rss20.xml" rel="alternate" type="application/rss+xml"  title="RSS 2.0 Feed" >
-       <link href="atom.xml"  rel="alternate" type="application/atom+xml" title="Atom Feed" >
+<?xml version="1.0" encoding="utf-8"?>
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml">
+ <head>
+  <title>{{ name }}</title>
+  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+  <meta name="generator" content="{{ generator }}" />
+  <link rel="stylesheet" href="common/planet.css" type="text/css" />
+  <link rel="icon" type="image/x-icon" href="common/favicon.ico" />
+  <link href="rss10.xml" rel="alternate" type="application/rss+xml"  title="RSS 1.0 Feed" />
+  <link href="rss20.xml" rel="alternate" type="application/rss+xml"  title="RSS 2.0 Feed" />
+  <link href="atom.xml"  rel="alternate" type="application/atom+xml" title="Atom Feed" />
 
-       <script type="text/javascript" src="common/hide.js"></script>
-       <script type="text/javascript">
-         <!--
-                window.onload=hideHosts;
-               -->
-       </script>
 </head>
+  <script type="text/javascript" src="common/hide.js"></script>
+  <script type="text/javascript">
+  <!--
+        window.onload=hideHosts;
+       -->
+  </script>
+ </head>
 
-<body>
+ <body>
+  <div id="header">
+   <div id="upperheader">
+    <div id="logo">
+               <a href="./" title="Debian Home"><img src="common/Pics/openlogo-50.png" alt="Debian" width="50" height="61" /></a> 
+    </div><!-- end logo -->
+    <p class="section">planet</p>
+   </div><!-- end upperheader -->
+   <div id="navbar">
+    <p class="hidecss"><a href="#inner">Skip Quicknav</a></p>
+    <ul>
+       <li><a href="http://www.debian.org/intro/about">About Debian</a></li>
+     <li><a href="http://www.debian.org/distrib/">Getting Debian</a></li>
+     <li><a href="http://www.debian.org/doc/">Documentation</a></li>
+     <li><a href="http://www.debian.org/support">Support</a></li>
+     <li><a href="http://www.debian.org/devel/">Development</a></li>
+    </ul>
+   </div><!-- end navbar -->
+  </div><!-- end header -->
+  <p id="breadcrumbs"><a href="http://planet.debian.org/">Planet Debian</a></p>
+   <div id="content">
 
-{% for item in Items %}
-{% ifchanged item.new_date %}
- <h1>{{ item.new_date }}</h1>
-{% endifchanged %}
+    {% for item in Items %}
+     {% ifchanged item.new_date %}
   <h1>{{ item.new_date }}</h1>
+     {% endifchanged %}
 
- <div class="channel">
- {% ifchanged item.channel_name %}
-   {% if item.channel_face %}
   <div class="channel">
    {% ifchanged item.channel_name %}
+      {% if item.channel_face %}
      <a href="{{ item.channel_link }}">
-       <img class="face" src="heads/{{ item.channel_face }}"
+      <img class="face" src="heads/{{ item.channel_face }}"
             width="{{ item.channel_facewidth }}" height="{{ item.channel_faceheight }}"
-            alt="hackergotchi for {{ item.channel_author|safe }}" >
+            alt="hackergotchi for {{ item.channel_author|safe }}" />
      </a>
-   {% endif %}
-   <h2>
-       <a href="{{ item.channel_link }}" title="{{ item.channel_title }}">{{ item.channel_name|safe }}</a>
-       <script type="text/javascript">
+      {% endif %}
+     <h2 class="planet-title">
+      <a href="{{ item.channel_link }}" title="{{ item.channel_title }}">{{ item.channel_name|safe }}</a>
+       <script type="text/javascript">
          <!--
                 document.write( "<a href=\"#\" id=\"{{ item.link }}_hide\" onClick=\"exclude( '{{ item.link }}' ); hideHosts(); return false;\"><img src=\"common/minus-8.png\" style=\"border: none;\" title=\"Hide Author\" alt=\"Hide Author\" height=\"8\" width=\"8\"><\/a> <a href=\"#\" id=\"{{ item.link }}_show\"  style=\"display:none;\" onClick=\"show( '{{ item.link }}' );  return false;\"><img src=\"common/plus-8.png\" style=\"border: none;\" title=\"Show Author\" alt=\"Show Author\" height=\"8\" width=\"8\"><\/a>" );
          -->
-       </script>
-   </h2>
- {% endifchanged %}
-   <div id="{{ item.link }}" class="{{ item.link }}">
-        <div class="entry">
-          <h3>
-                <a href="{{ item.link}}">{{ item.title }}</a>
-          </h3>
-          <div class="content">
-                {{ item.content|safe }}
-          </div>
-
-          <p class="date">
-                <a href="{{ item.link }}">{{ item.date }}</a>
-                {% if item.author %}
-                  by {{ item.author|safe }}
-                {% endif %}
-          </p>
+       </script>
+      </h2>
    {% endifchanged %}
+     <div id="{{ item.link }}" class="{{ item.link }}">
+      <div class="entry">
+       <h3 class="entry-title">
+        <a href="{{ item.link}}">{{ item.title }}</a>
+       </h3>
+       <div class="content">
+        {{ item.content|safe }}
+       </div>
+       <p class="date">
+        <a href="{{ item.link }}">{{ item.date }}</a>
+        {% if item.author %}
+         by {{ item.author|safe }}
+        {% endif %}
+       </p>
+      </div>
      </div>
+    </div>
+    {% endfor %}
    </div>
- </div>
-{% endfor %}
-
-    <div id="sidebar">
-         <h1>{{ name }}</h1>
-         <div id="logo"><img src="common/debian.png" width="101" height="124" alt=""></div>
-
-               {% if Config.search %}
-         <h1>{{ Config.searchtext }}</h1>
-         <form method="GET" action="/cgi-bin/search.cgi">
-               <input type="text" name="terms" value="">
-         </form>
-               {% endif %}
-
-         <p>
-               {{ Config.syndicationtext }}
-         </p>
-
-         <p>
-               <a href="rss10.xml"><img class="button" src="common/rss10.png" width="80" height="15" alt="[RSS 1.0 Feed]"></a>
-               <a href="rss20.xml"><img class="button" src="common/rss20.png" width="80" height="15" alt="[RSS 2.0 Feed]"></a>
-               <a href="atom.xml"><img class="button" src="common/atom.png" width="80" height="15" alt="[Atom Feed]"></a>
-               <a href="foafroll.xml"><img class="button" src="common/foaf.png" width="80" height="15" alt="[FOAF Subscriptions]"></a>
-               <a href="opml.xml"><img class="button" src="common/opml.png" width="80" height="15" alt="[OPML Subscriptions]"></a>
-               <a href="http://www.catb.org/hacker-emblem/"><img class="button" src="common/hacker.png" width="80" height="15" alt="[Hacker]"></a>
-               <a href="http://www.intertwingly.net/code/venus/"><img class="button" src="common/planet.png" width="80" height="15" alt="[Planet]"></a>
-         </p>
-
-         <p>
-               {{ Config.lastupdatetext }} {{ date|date:"d M Y H:i" }}<br>{{ Config.utctext }}<br>
-               {{ Config.contacttext }} <a href="mailto:{{ owner_email }}">{{ owner_name }}</a><br>
-               {{ Config.wikitext }} <a href="{{ Config.wiki_url }}">{{ Config.wikiname }}</a>
-         </p>
-
-         <h2>{{ Config.otherplanettext }}</h2>
-         <ul>
-               {% include "planets.html" %}
-         </ul>
-
-         <div id="unhide-all" style="display:none;">
-               <h2>{{ Config.hiddenfeedstext }}</h2>
-               <p>{{ Config.hiddenfeedstext2 }} <a href="#" onClick="excludeNone(); return false">{{ Config.showalltext }}</a></p>
-         </div>
-
-         <h2>{{ Config.subscriptionstext }}</h2>
-         <ul>
-               {% for channel in Channels %}
-                 <li><a href="{{ channel.link }}" title="{{ channel.title }}">{{ channel.name|safe }}</a> <a href="{{ channel.url }}">({{ Config.feedtext }})</a></li>
-               {% endfor %}
-         </ul>
-       </div>
-</body>
+   <div id="sidebar">
+    {% if Config.search %}
+     <h1>{{ Config.searchtext }}</h1>
+     <form method="GET" action="/cgi-bin/search.cgi">
+      <input type="text" name="terms" value="">
+     </form>
+    <hr />
+    {% endif %}
+    <p>
+     {{ Config.syndicationtext }}
+    </p>
+    <p>
+     <a href="rss10.xml"><img class="button" src="common/rss10.png" width="80" height="15" alt="[RSS 1.0 Feed]"></a>
+     <a href="rss20.xml"><img class="button" src="common/rss20.png" width="80" height="15" alt="[RSS 2.0 Feed]"></a>
+     <a href="atom.xml"><img class="button" src="common/atom.png" width="80" height="15" alt="[Atom Feed]"></a>
+     <a href="foafroll.xml"><img class="button" src="common/foaf.png" width="80" height="15" alt="[FOAF Subscriptions]"></a>
+     <a href="opml.xml"><img class="button" src="common/opml.png" width="80" height="15" alt="[OPML Subscriptions]"></a>
+     <a href="http://www.catb.org/hacker-emblem/"><img class="button" src="common/hacker.png" width="80" height="15" alt="[Hacker]"></a>
+     <a href="http://www.intertwingly.net/code/venus/"><img class="button" src="common/planet.png" width="80" height="15" alt="[Planet]"></a>
+    </p>
+   <p>
+    {{ Config.lastupdatetext }} {{ date|date:"d M Y H:i" }}<br>{{ Config.utctext }}<br>
+    {{ Config.contacttext }} <a href="mailto:{{ owner_email }}">{{ owner_name }}</a>
+   </p>
+   <h2>{{ Config.otherplanettext }}</h2>
+   <ul>
+    {% include "planets.html" %}
+   </ul>
+   <div id="unhide-all" style="display:none;">
+    <h2>{{ Config.hiddenfeedstext }}</h2>
+    <p>{{ Config.hiddenfeedstext2 }} <a href="#" onClick="excludeNone(); return false">{{ Config.showalltext }}</a></p>
+   </div>
+   <h2>{{ Config.subscriptionstext }}</h2>
+   <ul>
+    {% for channel in Channels %}
+    <li><a href="{{ channel.link }}" title="{{ channel.title }}">{{ channel.name|safe }}</a> <a href="{{ channel.url }}">({{ Config.feedtext }})</a></li>
+    {% endfor %}
+   </ul>
+  </div>
+ </body>
 </html>
 
diff --git a/www/common/Pics/admon-important.png b/www/common/Pics/admon-important.png
new file mode 100644 (file)
index 0000000..151d38c
Binary files /dev/null and b/www/common/Pics/admon-important.png differ
diff --git a/www/common/Pics/admon-note.png b/www/common/Pics/admon-note.png
new file mode 100644 (file)
index 0000000..d01b8c6
Binary files /dev/null and b/www/common/Pics/admon-note.png differ
diff --git a/www/common/Pics/admon-tip.png b/www/common/Pics/admon-tip.png
new file mode 100644 (file)
index 0000000..2ac5747
Binary files /dev/null and b/www/common/Pics/admon-tip.png differ
diff --git a/www/common/Pics/admon-warning.png b/www/common/Pics/admon-warning.png
new file mode 100644 (file)
index 0000000..dbf3d19
Binary files /dev/null and b/www/common/Pics/admon-warning.png differ
diff --git a/www/common/Pics/emblem-downloads.png b/www/common/Pics/emblem-downloads.png
new file mode 100644 (file)
index 0000000..f0356e2
Binary files /dev/null and b/www/common/Pics/emblem-downloads.png differ
diff --git a/www/common/Pics/gradient.png b/www/common/Pics/gradient.png
new file mode 100644 (file)
index 0000000..dc4a8b8
Binary files /dev/null and b/www/common/Pics/gradient.png differ
diff --git a/www/common/Pics/greydot.png b/www/common/Pics/greydot.png
new file mode 100644 (file)
index 0000000..ec23c01
Binary files /dev/null and b/www/common/Pics/greydot.png differ
diff --git a/www/common/Pics/openlogo-50.png b/www/common/Pics/openlogo-50.png
new file mode 100644 (file)
index 0000000..20d490f
Binary files /dev/null and b/www/common/Pics/openlogo-50.png differ
diff --git a/www/common/Pics/reddot.png b/www/common/Pics/reddot.png
new file mode 100644 (file)
index 0000000..76cc993
Binary files /dev/null and b/www/common/Pics/reddot.png differ
diff --git a/www/common/boxless.css b/www/common/boxless.css
deleted file mode 100644 (file)
index da3e4f7..0000000
+++ /dev/null
@@ -1,235 +0,0 @@
-/* CSS for Planet Debian
- * 
- * Yes, Planet *DEBIAN* ... please stop stealing our CSS for use on
- * your own Planet!  I'd like this to have a fairly distinctive look
- * and there's a perfectly good CSS example included with the Planet
- * source now.
- *
- * THIEVES! ADMINS! WE HATES THEM FOREVER!
- *
- * I'll set Andrew Suffield on you...
- */
-
-body {
-       /*font-size: 90%;*/
-
-       padding: 0 10px;
-       padding-top: 1px;
-       padding-bottom: 1em;
-
-       border-right: 1px solid rgb(128, 128, 128);
-
-       background-color: white;
-       color: black;
-
-       margin: 0;
-       margin-right: 185px;
-}
-
-h1 {
-       font-family: "Lucida Sans Unicode", sans-serif;
-       font-size: 175%;
-
-       letter-spacing: -2px;
-
-       color: rgb(215, 7, 81);
-
-       padding: 0;
-       margin: 0;
-       margin-top: 1em;
-}
-
-
-div.channel {
-       padding: 0;
-       padding-bottom: 0.1em;
-
-       margin: 0;
-       margin-top: 20px;
-}
-
-div.channel img.face {
-       float: right;
-       border: none;
-}
-
-div.channel h2 {
-       font-family: "Lucida Sans Unicode", sans-serif;
-       font-size: 150%;
-
-       letter-spacing: -2px;
-
-       padding: 0 0.25em;
-
-       border-bottom: 1px solid black;
-
-       margin: 0;
-}
-
-div.channel h2 a {
-       text-decoration: none;
-       color: inherit;
-}
-
-
-div.entry {
-       padding: 0 5px;
-
-       margin: 0;
-       margin-bottom: 20px;
-}
-
-div.entry h3 {
-       font-family: "Bitstream Vera Sans", sans-serif;
-       font-size: 110%;
-
-       color: rgb(32, 32, 32);
-
-       padding: 0;
-
-       border-bottom: 1px dashed black;
-
-       margin: 0;
-       margin-top: 2px;
-}
-
-div.entry h3 a {
-       text-decoration: none;
-       color: inherit;
-}
-
-div.entry p.date {
-       font-family: sans-serif;
-
-       color: rgb(64, 64, 64);
-
-       padding: 0 10px;
-
-       margin: 10px 0;
-}
-
-div.entry p.date a {
-       text-decoration: none;
-       color: inherit;
-}
-
-
-div.content {
-       text-align: justify;
-
-       padding: 0 20px;
-
-       margin: 0;
-       margin-top: 5px;
-}
-
-div.content h1 { font-size: 100%; }
-div.content h2 { font-size: 100%; }
-div.content h3 { font-size: 100%; }
-div.content h4 { font-size: 100%; }
-div.content h5 { font-size: 100%; }
-div.content h6 { font-size: 100%; }
-
-
-div#sidebar {
-       position: absolute;
-       top: 0px;
-       right: 0px;
-       width: 165px;
-
-       font-family: sans-serif;
-       font-size: 80%;
-
-       text-align: justify;
-
-       padding: 0 10px;
-
-       background-color: white;
-
-       margin: 0;
-}
-
-div#sidebar h1 {
-       font-family: "Bitstream Vera Sans", sans-serif;
-       font-size: 20px !important;
-
-       text-transform: lowercase;
-
-       margin-top: 30px;
-}
-
-div#sidebar div#logo {
-       padding: 2px 0;
-       padding-left: 10px;
-
-       border-top: 1px solid black;
-       border-bottom: 1px solid black;
-
-       margin-left: -10px;
-}
-
-div#sidebar h2 {
-       font-size: 100%;
-
-       text-transform: uppercase;
-
-       border-bottom: 1px dashed rgb(128, 128, 128);
-
-       margin-top: 2em;
-}
-
-div#sidebar img.button {
-       border: none;
-}
-
-div#sidebar ul {
-       list-style-type: square;
-
-       text-align: left;
-
-       padding-left: 1.5em;
-
-       margin-left: 0px;
-}
-
-div#sidebar li a {
-       text-decoration: none;
-       color: inherit;
-}
-
-
-a:hover {
-       text-decoration: underline !important;
-       color: blue !important;
-}
-
-img {
-       border: none;
-}
-
-/* Suggested by martin f. krafft */
-.center, .centre {
-       text-align: center;
-}
-
-.float-left, .floatleft {
-       float: left;
-       margin-right: 1em;
-}
-
-.float-right, .floatright {
-       float: right;
-       margin-left: 1em;
-}
-
-img[align=left] {
-       margin-right: 1em;
-}
-
-img[align=right] {
-       margin-left: 1em;
-}
-
-.bordered {
-       border: 1px solid #000;
-}
diff --git a/www/common/debian.css b/www/common/debian.css
new file mode 100644 (file)
index 0000000..1abbf70
--- /dev/null
@@ -0,0 +1,871 @@
+/*
+       http://www.debian.org Stylesheet
+
+       Copyright 2011 Kalle Söderman
+
+       This stylesheet is free software; you can redistribute it and/or modify it
+       under the terms of the GNU General Public License, version 2, as published by
+       the Free Software Foundation.
+
+       This program is distributed in the hope that it will be useful, but WITHOUT ANY
+       WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
+       PARTICULAR PURPOSE. See the GNU General Public License for more details.
+
+       You should have received a copy of the GNU General Public License along with
+       this program; if not, write to the Free Software Foundation, Inc., 51 Franklin
+       Street, Fifth Floor, Boston, MA 02110-1301 USA.
+
+       The license text can also be found at http://www.gnu.org/copyleft/gpl.html and
+       /usr/share/common-licenses/GPL-2 on Debian GNU/Linux.  
+*/
+       
+/*     
+       Font size table (Browser default 16px)
+
+       pixels      relative
+       --------------------
+       36px        2.25em
+       31px        0.5161em
+       24px        1.5em
+       21px        1.3125em
+       18px        1.125em
+       16px        1em
+       14px        0.875em
+       12px        0.75em
+       11px        0.6875em
+       10px        0.625em
+       9px         0.5625em
+       --------------------
+*/
+
+/* Reset */
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p,
+blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
+font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl,
+dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
+tfoot, thead, tr, th, td { 
+       margin: 0;
+       padding: 0;
+       border: 0;
+       outline: 0;
+       font-weight: inherit;
+       font-style: inherit;
+       font-size: 100%;
+       font-family: inherit;
+       vertical-align: baseline;
+}
+
+body            { line-height: 1; color: black; background: white; }
+ol, ul          { list-style: none; }
+table           { border-collapse: separate; border-spacing: 0; }
+blockquote, q   { quotes: "" ""; }
+html            { background-color: transparent; }
+:focus          { outline: 1px dotted grey; }
+caption, th, td { text-align: left; font-weight: normal; }
+blockquote:before, blockquote:after, q:before, q:after { content: ""; }
+
+/* Main */
+
+body {
+       margin: 0;
+       font: normal 100% sans-serif;
+       line-height: 1.5;
+       color: #222;
+       background-color: white;
+       background-image:url('Pics/gradient.png');
+       background-position: 0 0;
+       background-repeat: repeat-x;
+       /* Uncomment to show baseline grid 
+       background-image: url('24grid.png');
+       background-position: 30px 9px; 
+       */
+}
+#content {
+       margin: 0 10px 0 52px;
+}
+#inner {
+       position: relative;
+}
+#maincol {
+       margin: 0 15em 1.5em 0;
+}
+
+/* Header */
+
+#header {
+       margin:0;
+       padding:0 10px 0 52px; 
+}
+#header a:link
+, #header a:visited
+, #second-nav a:link
+, #second-nav a:visited {
+       text-decoration: none;
+}
+#header a:hover
+, #second-nav a:hover {
+       text-decoration: underline;
+}
+#breadcrumbs {
+       margin:0;
+       font-size: 0.75em;
+       text-transform: lowercase;
+       line-height: 2;
+       background-color: transparent;
+       background-color: #f5f6f7;
+       border-bottom: 1px solid #d2d3d7 ;
+       min-height: 20px;
+}
+#breadcrumbs:before {
+       content: "/";
+       margin-left: 0.5em;
+       margin-right: 0.5em;
+}
+p.section {
+       margin: 0;
+       padding: 0 5px 0 5px;
+       font-family:monospace;
+       line-height: 16px;
+       color:white;
+       text-transform: uppercase;
+       letter-spacing: 0.08em;
+       position:absolute;
+       top: 0px;
+       left:52px;
+       background-color: #c70036;
+}
+p.section a {
+       color: white;
+       text-decoration: none;
+}
+p.section a:hover {
+       color:white;
+       text-decoration: underline;
+}
+#navbar {
+       background-color: transparent;
+       list-style:none;
+       display:block;
+       border-bottom:1px solid #c70036;
+       text-indent:0;
+       padding: 0;
+       margin-top:0;
+       margin-bottom:0;
+}
+#navbar ul {
+       margin: 0;
+       padding: 0;
+       clear: both;
+       overflow: hidden;
+       min-height: 45px;
+}
+#navbar li {
+       list-style: none;
+       float: left;
+       padding: 0;
+       margin: 0;
+}
+#navbar a:link
+, #navbar a:visited {
+       padding: 1.75em 0.5em 0.25em 0.5em;
+       border-left: 1px solid transparent;
+       border-right: 1px solid transparent;
+       display: block;
+       text-decoration: none;
+}
+#navbar a:visited {
+       color: #54638c;
+}
+#navbar a:hover
+, #navbar a:visited:hover {
+       background-color: #f5f6f7;
+       border-left: 1px solid  #d2d3d7;
+       border-right: 1px solid #d2d3d7;
+       text-decoration: underline;
+}
+ul.subnav {
+       list-style: none;
+       margin-left: 0;
+       padding-left: 0;
+       margin-top: 0;
+}
+ul.subnav li {
+       display: inline;
+       margin-right: 1em;
+}
+#searchbox {
+       text-align:left;
+       line-height: 1;
+       margin: 0 10px 0 0.5em;
+       padding: 1px 0 1px 0;
+       position: absolute;
+       top:0;
+       right:0;
+       font-size: 0.75em;
+}
+#searchbox p {
+       margin: 0;
+       padding: 0;
+}
+#upperheader {
+       margin:0;
+       padding:0;
+}
+#logo {
+       position:absolute;
+       top:0;
+       left:0;
+       padding: 0;
+       background-color: transparent;
+       border: 1px solid transparent;
+       border-top: 0;
+       width: 50px;
+       height: 5.07em;
+       min-height: 65px;
+}
+#logo a {
+       display: block;
+       position: relative;
+       padding: 0;
+       height: 100%;
+       min-height: 65px;
+}
+#logo img {
+       margin-top: 5px;
+       position: absolute;
+       bottom: 0.3em;
+       overflow: auto;
+}
+#logo:hover {
+       border: 1px solid #d2d3d7 ;
+       border-top: 0;
+       background-color: #f5f6f7;
+}
+
+/* Links */
+
+a:link {
+       color: #0035c7;
+       text-decoration: underline;
+}
+a:visited {
+       color: #54638c;
+}
+a:link:hover {
+       text-decoration: none;
+       color: #00207a;
+}
+a:visited:hover {
+       text-decoration: none;
+}
+a:active {
+       color:#c2c3c7;
+}
+a img {
+       border:0;
+}
+a.rss_logo {
+       font-size: 0.75em;
+       float: right;
+       width: 35px;
+       line-height: 10px;
+       color: #ffffff;
+       background-color: #ff6600;
+       font-weight: bold;
+       font-family: sans-serif;
+       text-align: center;
+       text-decoration: none;
+       padding: 0.25em;
+       margin-left: 0.25em;
+       border: 1px solid #ff6600;
+}
+
+a.rss_logo:hover {
+       background-color: white;
+       border: 1px solid #ff6600;
+       color: #ff6600;
+}
+
+a.rss_logo.generic {
+       background-color: #ff8800;
+}
+
+a.rss_logo.generic:hover {
+       background-color: #ee7700;
+}
+
+
+/* Secondnav */
+
+#second-nav {
+       width: 16em;
+       font-size: 0.75em;
+       line-height: 1.5;
+       float: right;
+       top: 0;
+       right: 0;
+       margin: 3em 0 0 0;
+       padding: 0 0 0 1em;
+       border-left: 1px solid #d2d3d7 ;
+}
+#second-nav ul {
+       padding:0;
+       margin:0;
+       list-style:none;
+}
+#second-nav ul ul {
+       margin-left: 1em;
+}
+#second-nav li {
+       font-weight: normal;
+       margin:0;
+       padding:0;
+}
+#second-nav p {
+       line-height: 2;
+       font-weight: bold;
+       margin: 0;
+}
+#second-nav h2 {
+       margin:0;
+}
+
+/* Typography */
+
+p {
+       margin: 1.5em 0 1.5em 0;
+}
+strong {
+       font-weight: bold;
+}
+em {
+       font-style: italic;
+       color: #444;
+}
+small {
+       font-size: 0.75em;
+}
+sup {
+       font-size: 0.75em;
+       vertical-align:top;
+}
+h1
+, h2
+, h3
+, h4
+, h5
+, h6 {
+       font-weight: 600;
+       color: black;
+}
+h1 {
+       font-weight: normal;
+       font-size: 1.8em;
+       line-height: 0.83333;
+       margin: 0.83333em 0 0.83333em 0;
+}
+h2 {
+       font-size: 1.4em;
+       font-weight: normal;
+       line-height: 1.0714286;
+       margin: 1.0714286em 0 1.0714286em 0;
+}
+h3 {
+       font-size: 1.125em;
+       line-height: 1.333em;
+       margin: 1.333em 0 0 0;
+}
+h4 {
+       font-weight: normal;
+       font-style: italic;
+       margin: 1.5em 0 1.5em 0;
+       color: #444;
+}
+h5 {
+       font-style: italic;
+       font-size: 0.75em;
+       margin: 2em 0 2em 0;
+}
+ol,ul {
+       padding-left: 1.5em;
+       margin-left:0;
+       margin: 1.5em 0 1.5em 0;
+}
+ol>ol, ul>ul, li>ol, li>ul {
+       margin: 0;
+}
+
+ol {
+       list-style-type: decimal;
+}
+ul {
+       list-style-type: disc;
+}
+th {
+       font-weight: bold;
+       margin: 1.5em 0 1.5em 0;
+}
+hr {
+       border: none;
+       background-color: #bbb;
+       height: 1px;
+       margin: 1.4375em 0 1.5em 0;
+}
+pre {
+       margin: 1.5em 0 1.5em 0;
+       overflow: auto;
+       font-family: monospace;
+       white-space: pre;
+       color: black;
+}
+tt, code {
+       font-family: monospace;
+       white-space: pre;
+       color: black;
+}
+dt {
+       margin: 1.5em 0 0 0;
+       font-weight: bold;
+}
+dd {
+       margin:  0 0 0 1.5em;
+}
+blockquote {
+       font-size: 0.75em;
+       margin: 2em;
+       line-height: 2;
+}
+cite {
+       font-style: italic;
+       color: #444;
+}
+acronym, abbr {
+       text-transform: uppercase;
+       font-size: 0.9em;
+}
+.toc {
+       font-size: 0.75em;
+       list-style:none;
+       background-image: url('Pics/greydot.png');
+       background-position: bottom left;
+       background-repeat: repeat-x;
+       line-height:1.833;
+       padding: 0;
+       max-width: 62%;
+       margin: 2em 0 2em 0;
+}
+.toc li {
+       background-image: url('Pics/greydot.png');
+       background-position: top left;
+       background-repeat: repeat-x;
+       padding: 0.0833em 0 0.0833em 0;
+ }
+.toc a {
+       display:block;
+       text-decoration: none;
+}
+.toc a:hover {
+       display:block;
+       background-color: #f0f0f4;
+       text-decoration: underline;
+}
+.toc dt {
+       margin: 0;
+       background-image: url('Pics/greydot.png');
+       background-position: top left;
+       background-repeat: repeat-x;
+       padding: 0.0833em 0 0.0833em 0;
+}
+
+/* Sitemap */
+
+.card {
+       clear:both;
+       margin:1.5em 0 1.5em 0;
+       background-position: 0 -50px;
+       background-repeat: repeat-x;
+       padding:0;
+}
+.card ul {
+}
+.card ul li {
+       list-style:none;
+}
+.card h2 {
+}
+.lefthalf {
+       float:left;
+}
+.righthalf {
+       margin-left:50%;
+}
+.lefthalf ul {
+       margin-top:0;
+}
+
+/* Footer */
+
+#footer {
+       font-size: 0.75em;
+       border: 1px solid #dfdfe0;
+       padding:1em;
+       background-color: #f5f6f7;
+       margin: 0 10px 0 52px;
+       line-height: 1.5em;
+       border-left: 0;
+       border-right: 0;
+       clear: both;
+}
+#content #footer {
+       margin-left: 0;
+}
+#footer p {
+       margin: 1em 0 1em 0;
+}
+#footer hr {
+       border-top: 1px solid #d2d3d7;
+       border-bottom: 1px solid white;
+       height: 0;
+}
+#footer .editbar li {
+       display: inline;
+       margin-right: 2em;
+}
+#footer .info {
+}
+#fineprint {
+       margin-bottom: 1em;
+}
+#footermap {
+       list-style:none;
+       margin: 0 0 0 0;
+       padding: 0;
+       width:100%;
+       overflow: hidden;
+       border: 0;
+}
+ul#footermap-cola a
+, ul#footermap-colb a
+, ul#footermap-colc a
+, ul#footermap-cold a
+, ul#footermap-cole a {
+       padding-left: 0;
+}
+ul#footermap-cola
+, ul#footermap-colb
+, ul#footermap-colc
+, ul#footermap-cold
+, ul#footermap-cole {
+       float:left;
+       width: 19%;
+       min-width: 11em;
+       height: 12em;           /* Update when adding items */
+       margin:0 1% 0 0;
+       padding: 2em 0 0 0;
+       list-style: none;
+}
+ul#footermap-cole {
+       width: 18.9%;
+       margin-right:0;
+}
+#footermap-wrap {
+       padding:2em;
+       border-top: 1px solid white;
+}
+#footermap a {
+       margin: 0;
+}
+#footermap ul{
+       list-style: none;
+       padding:0;
+}
+#footermap li {
+       text-indent:0;
+       background-color: transparent;
+       font-weight:bold;
+}
+#footermap li ul {
+       margin: 0;
+       padding: 0;
+}
+#footermap li li {
+       margin:0;
+       text-indent:0;
+       padding:0;
+       font-weight:normal;
+       border:0;
+       background-image:none;
+       background-color:transparent;
+}
+#serverselect {
+}
+#serverselect input
+, #serverselect option 
+, #serverselect select {
+}
+#serverselect ul {
+       display: inline;
+       margin-left: 2em;
+}
+#serverselect li {
+       list-style: none;
+       display: inline;
+       padding:0 1em 0 1em;
+       margin:0;
+}
+#serverselect form p {
+       margin:0;
+       padding:0;
+       line-height: 1;
+}
+.lcol50 {
+       float: left;
+       width: 49%;
+       font-size:0.75em;
+       margin:0 0 0 0;
+       padding:0 0.5em 0 0;
+}
+.lcol50 h2 {
+       margin-top:0;
+}
+.rcol50 {
+       margin:0 0 0 51%;
+       padding:0;
+       font-size:0.75em;
+}
+#pageLang {
+       position: relative;     /*  establish a containing box. needed for
+                                   langContainer */
+}
+form#pageLang {
+       display: inline;
+}
+
+/* Extras */
+
+input:focus {
+       background-color:#FFFFCB;
+       
+}
+.hidecss {
+       display: none;
+}
+.clear {
+       clear:both
+}
+#clear {
+       clear:both;
+       border:0;
+       height:1px;
+       display:block;
+}
+.quicklist {
+       list-style: none;
+       font-size: 0.75em;
+       margin: 2em 0 2em 0;
+       padding:0;
+       text-indent:0;
+       line-height: 2em;
+}
+.quicklist li  {
+       display:inline;
+}
+.item p{
+       margin: 0;
+}
+.item h2
+, .item p
+, .item ul{
+       margin-right: 10px 
+}
+.item h2
+, .item h3
+, .item h4
+, .item h5 {
+       margin-top: 0;
+}
+.line {
+       padding: 0;
+       width: auto;
+       overflow: hidden;
+       }
+div.downloads {
+       border-top: 0.17em solid #339900;
+       margin: 1.33em 0 0 0; 
+}
+.downloads ul.downlist {
+       margin:0;
+}
+div.downloads .col50 { 
+       border-top: 0.15em solid #339900;
+}
+ul.downlist {
+       padding-left: 30px;
+       text-indent:0;
+       background: url('Pics/emblem-downloads.png') no-repeat 0 0.15em;
+       min-height: 23px;
+       /* 
+        * border-top: 0.17em solid #339900;
+        */
+}
+ul.quicklist.downlist {
+       border-top: 0.17em solid #339900;
+       padding-top: 0.25em;
+       margin-top: 1.6em;
+}
+ul.downlist li {
+       display: inline;
+}
+ul.downlist li:after {
+       content: ', ';
+}
+ul.downlist li:last-child:after {
+       content: '';
+}
+div.tip
+, div.important
+, div.warning
+, div.note 
+, div.trans-note {
+       padding:0 2em 0 4em;
+       margin: 1.85em 0 1.85em 0;
+       background-repeat: no-repeat;
+       background-position: 0.5em 0.5em;
+       font-size: 0.75em;
+       line-height: 2em;
+       background-color:#FFFFCB;
+       border:0.15em solid #CCCCA3;
+}
+div.tip p
+, div.important p
+, div.warning p
+, div.note p 
+, div.trans-note p {
+       margin: 1em 0 1em 0;
+}
+div.tip {
+       background-image: url('Pics/admon-tip.png');
+}
+div.important{
+       background-image: url('Pics/admon-important.png');
+}
+div.warning {
+       background-image: url('Pics/admon-warning.png');
+}
+div.note
+, div.trans-note  {
+       background-image: url('Pics/admon-note.png');
+}
+
+/* Layout Elements */
+
+.col50
+, .cardleft
+, .cardright {
+       width:47.5%;
+       float: left;
+       padding-bottom: 1.5em;
+}
+.lastcol
+, .cardright {
+       margin: auto;
+       width: 47.5%;
+       float:left;
+       padding-right: 0;
+       margin-left: 5%;
+}
+.lastcol h2
+, .lastcol p
+, .lastcol ul {
+       margin-right:0;
+}
+.cardleft h2 {
+       margin-right: 1em;
+}
+.cardright div {
+       margin-left: 1.5em;
+}
+.cardright h2 {
+       margin-left: 1em;
+}
+.votemenu a {
+       display:block;
+}
+table.vote td, table.vote th {
+       padding-right: 1.5em;
+}
+#maincol.with-toolbox {
+       margin-right: 14em;
+}
+div.tabular table, table.tabular, table.vendors {
+/*     border-bottom: 1px solid #a9abb3;
+       border-top: 1px solid #a9abb3; */
+       border-bottom: 0.15em solid #666;
+       border-top: 0.15em solid #666;
+       width: auto;
+       font-size: 0.75em;
+       line-height: 2em;
+       margin-bottom: 4em;
+       margin-top: -0.169em;
+}
+table td {
+       padding-right: 1.5em;
+}
+div.tabular table tr, table.tabular tr, table.vendors tr {
+       width: 100%;
+}
+table th {
+       padding-right: 1.5em;
+}
+div.tabular table td, table.tabular td, table.vendors td {
+       background-image: url(Pics/greydot.png);
+       background-position: top left;
+       background-repeat: repeat-x;
+}
+div.tabular table > td:fist-child, table.tabular  > td:fist-child, table.vendors  > td:fist-child {
+       background-image: none;
+}
+#pageLang p, #pageLang form {
+       display: inline;
+}
+.inline  a {
+       float: left;
+       margin-right: 1em;
+}
+#langSelector {
+       color: #0035c7;
+       text-decoration: underline;
+}
+#langSelector:hover {
+       cursor: pointer;
+       text-decoration: none;
+}
+#langContainer {
+       #background-color: #f5f6f7;
+       background-color: white;
+       background-image:url('Pics/gradient-flipped.png');
+       background-position: bottom;
+       background-repeat: repeat-x;
+       display: none;
+       position: absolute;
+       left: -1em;
+       border-bottom: 1px solid #dfdfe0;
+       margin-right: -1em;
+       min-width: 100%;        /* make it reach the right edge if only a few
+                                  languages are available */
+       padding: 0.5em 1em 1em 1em;
+}
+#langContainer a {
+       margin-right: 1em;
+}
+#pageLang:hover #langContainer {
+    display: block;
+}
+
+/* for l10n-arabic */
+.bidi {
+       direction: rtl;
+       text-align: right;
+}
+
diff --git a/www/common/planet.css b/www/common/planet.css
new file mode 100644 (file)
index 0000000..fefb6ed
--- /dev/null
@@ -0,0 +1,115 @@
+
+@import url("debian.css");
+
+#sidebar {
+       border-left:1px solid #d3d6df;
+       margin:0;
+       margin-left:1em;
+       padding:0 0 0 1em;
+       /* TODO - actually we want 11em of 100% font size, this is a dirty workaround */
+       width:15em;
+       font-size: 0.75em;
+       line-height: 1.5em;
+       position: absolute;
+       top: 10em;
+       right: 10px;
+}
+#sidebar h1 {
+       font-size: 1em;
+       line-height: 1.5em;
+}
+#content {
+       margin-right: 14em;
+       margin-top: 1em;
+}
+
+img.face {
+       float: right;
+       margin-top: -20px;
+}
+.channel {
+       background-color: #f2f3f7;
+       border:1px solid #e2e3e7;
+       overflow: visible;
+       margin-bottom: 1.5em;
+}
+h2.planet-title {
+       font-family:monospace;
+       text-transform: uppercase;
+       letter-spacing: 0.2em;
+       background-color: #c70036;
+       color: white;
+       margin:0;
+       padding: 0.5em;
+       font-size: 1em;
+       font-weight: bold;
+       line-height: 1.5em;
+       border-bottom: 1px solid #bbb;
+}
+div.entry div.content {
+       margin: 0 0.5em;
+       border-bottom: 1px solid #bbb;
+}
+h2.planet-title a {
+       color: white;
+       text-decoration: none;
+}
+h2.planet-title a:hover {
+       color: white;
+       text-decoration: underline;
+}
+h3.entry-title {
+       padding: 0 0 0 0.25em;
+       font-size: 1.4em;
+       color: #c70036;
+       line-height: 1.0714286;
+       font-size: 1.4em;
+       font-weight: normal;
+       line-height: 1.0714286;
+       margin: 1.0714286em 0 1.0714286em 0;
+}
+h3.entry-title a {
+       color: #c70036;
+       text-decoration: none;
+}
+h3.entry-title a:hover {
+       text-decoration: underline;
+}
+p.date {
+       border-top: 1px solid  white;
+       font-size: 0.75em;
+       line-height: 2em;
+       border-top: 1px solid  white;
+       margin-top:0;
+       padding: 0.5em 0.5em 0 0.5em;
+}
+
+table {
+/*     border-bottom: 1px solid #a9abb3;
+       border-top: 1px solid #a9abb3; */
+       border-bottom: 0.15em solid #666;
+       border-top: 0.15em solid #666;
+       width: auto;
+       font-size: 0.75em;
+       line-height: 2em;
+       margin-bottom: 4em;
+       margin-top: -0.169em;
+}
+table tr {
+       width: 100%;
+}
+table th {
+       padding-right: 1.5em;
+}
+table td {
+       background-image: url(Pics/greydot.png);
+       background-position: top left;
+       background-repeat: repeat-x;
+}
+table > td:fist-child {
+       background-image: none;
+}
+
+#outer {
+       margin-left: 10px;
+}