+2007-12-03 Matt Lilek <webkit@mattlilek.com>
+
+ Reviewed by Adam.
+
+ Make it sexy with awesome icon and tweaks from Tim.
+
+ * templates/index.html.tmpl:
+ * wwwroot/ie.css: Added.
+ * wwwroot/images/ie-nav-blue.png: Added.
+ * wwwroot/planetwebkit.css: Added.
+
2007-12-01 Dan Bernstein <mitz@apple.com>
Reviewed by Mark Rowe.
<title><TMPL_VAR name></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="generator" content="<TMPL_VAR generator ESCAPE="HTML">">
-<link rel="stylesheet" href="planet.css" type="text/css">
+<link rel="stylesheet" href="planetwebkit.css" type="text/css">
<TMPL_IF feedtype>
<link rel="alternate" href="<TMPL_VAR feed ESCAPE="HTML">" title="<TMPL_VAR channel_title_plain ESCAPE="HTML">" type="application/<TMPL_VAR feedtype>+xml">
</TMPL_IF>
</head>
<body>
-<h1><TMPL_VAR name></h1>
+<div id="icon"></div>
+<div id="wrapper">
<TMPL_LOOP Items>
<TMPL_IF new_date>
### doesn't know about the "face", "facewidth" and "faceheight" configuration
### variables, but makes them available to us anyway.
-<h3><a href="<TMPL_VAR channel_link ESCAPE="HTML">" title="<TMPL_VAR channel_title_plain ESCAPE="HTML">"><TMPL_VAR channel_name></a></h3>
<TMPL_IF channel_face>
<img class="face" src="images/<TMPL_VAR channel_face ESCAPE="HTML">" width="<TMPL_VAR channel_facewidth ESCAPE="HTML">" height="<TMPL_VAR channel_faceheight ESCAPE="HTML">" alt="">
</TMPL_IF>
<div class="entrygroup" id="<TMPL_VAR id>"<TMPL_IF channel_language> lang="<TMPL_VAR channel_language>"</TMPL_IF>>
<TMPL_IF title>
-<h4<TMPL_IF title_language> lang="<TMPL_VAR title_language>"</TMPL_IF>><a href="<TMPL_VAR link ESCAPE="HTML">"><TMPL_VAR title></a></h4>
+<h3<TMPL_IF title_language> lang="<TMPL_VAR title_language>"</TMPL_IF>><a href="<TMPL_VAR link ESCAPE="HTML">"><TMPL_VAR title></a></h3>
+<h4><a href="<TMPL_VAR channel_link ESCAPE="HTML">" title="<TMPL_VAR channel_title_plain ESCAPE="HTML">"><TMPL_VAR channel_name></a></h4>
</TMPL_IF>
<div class="entry">
<div class="content"<TMPL_IF content_language> lang="<TMPL_VAR content_language>"</TMPL_IF>>
### demonstrate below.
<p class="date">
-<a href="<TMPL_VAR link ESCAPE="HTML">"><TMPL_IF author>by <TMPL_VAR author> at </TMPL_IF><TMPL_VAR date><TMPL_IF category> under <TMPL_VAR category></TMPL_IF></a>
+<a href="<TMPL_VAR link ESCAPE="HTML">"><TMPL_IF author>By <TMPL_VAR author> at </TMPL_IF><TMPL_VAR date><TMPL_IF category> under <TMPL_VAR category></TMPL_IF></a>
</p>
</div>
</div>
</div>
</TMPL_IF>
</TMPL_LOOP>
+</div>
<div class="sidebar">
-
+<h1><TMPL_VAR name></h1>
<h2>Subscriptions</h2>
<ul>
<TMPL_LOOP Channels>
<p>
<strong>Last updated:</strong><br>
-<TMPL_VAR date><br>
-<em>All times are UTC.</em><br>
+<small><TMPL_VAR date></small><br>
+<small><em>All times are UTC.</em></small><br>
<br>
Powered by:<br>
<a href="http://www.planetplanet.org/"><img src="images/planet.png" width="80" height="15" alt="Planet" border="0"></a>
--- /dev/null
+#icon {
+ background-image: none !important;
+ filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=crop, src='images/planet-icon.png');
+}
+
+.sidebar {
+ background-image: url('images/ie-nav-blue.png') !important;
+}
+
+img {
+ behavior: url('http://webkit.org/pngbehavior.htc');
+}
+
+h2 {
+ font-size: 18px;
+ margin: 0;
+}
--- /dev/null
+body {
+ background: url('http://webkit.org/images/blue-background.png') top left repeat-x;
+ padding: 10px 25px 25px;
+ font-size: 12px;
+ line-height: 1.5em;
+ font-family: 'Lucida Grande', Verdana, Arial;
+}
+
+a {
+ color: #369;
+ text-decoration: none;
+}
+
+a:hover {
+ text-decoration: underline;
+}
+
+img {
+ border: 0;
+}
+
+h1, h2, h3 {
+ text-shadow: #bbb 3px 3px 2px;
+}
+
+h1 {
+ font-size: 18px;
+ margin-top: 5px;
+}
+
+h3 {
+ margin: 0 0 5px 0;
+ font-size: 20px;
+}
+
+h3 a {
+ color: #025;
+}
+
+h4 {
+ margin: 0;
+ font-weight: normal;
+ font-size: 14px;
+}
+
+#icon {
+ position: absolute;
+ top: 10px;
+ right: 0;
+ background: url('images/planet-webkit.png') top left no-repeat;
+ height: 188px;
+ width: 233px;
+ z-index: 3;
+}
+
+.sidebar {
+ position: absolute;
+ background: url('http://webkit.org/images/nav.png') top left no-repeat;
+ height: 350px;
+ width: 145px;
+ top: 173px;
+ right: 30px;
+ padding: 20px 5px 0 15px;
+ font-size: 11px;
+ line-height: 17px;
+}
+
+.sidebar h2 {
+ font-weight: bold;
+ font-size: 11px;
+ line-height: 17px;
+ margin: 0;
+ padding: 0;
+ text-shadow: none;
+}
+
+.sidebar ul {
+ padding: 0;
+ margin: 0;
+}
+
+.sidebar ul li {
+ list-style-type: none;
+ margin: 3px 0;
+}
+
+#wrapper {
+ margin: 0 190px 0 0;
+}
+
+.entry .content {
+ margin: 10px 15px 0;
+}
+
+.entrygroup {
+ margin: 0 0 25px 0;
+}