webapps.planet: more responsive css.

extra/webapps/planet/planet.css

@@ -2,10 +2,20 @@
     padding-left: 15px;
     padding-right: 15px;
     padding-bottom: 15px;
+    position: relative;
 }
 
-h1.planet-title {
-	font-size: 300%;
+.posts {
+    max-width: 755px;
+    margin-right: 215px;
+}
+
+.infobox {
+    position: absolute;
+    top: 0;
+    left: calc(100% - 215px);
+    width: 200px;
+    padding: 10px;
 }
 
 .posting-title {
@@ -26,6 +36,12 @@ pre, code {
     color: #000000;
 }
 
-.infobox {
-    padding-left: 10px;
+@media screen and (max-width: 600px) {
+    .infobox {
+        display: none;
+    }
+
+    .posts {
+        margin-right: 0;
+    }
 }

extra/webapps/planet/planet.xml

@@ -4,11 +4,9 @@
 
 	<t:atom t:href="$planet/feed.xml">[ planet-factor ]</t:atom>
 
-	<t:title>[ planet-factor ]</t:title>
+    <div class="posts">
 
-    <table width="100%">
-		<tr>
-			<td>
+	    <t:title>[ planet-factor ]</t:title>
 
         <t:bind-each t:name="postings">
 
@@ -26,9 +24,9 @@
 
         </t:bind-each>
 
-			</td>
+    </div>
 
-			<td valign="top" width="25%" class="infobox">
+    <div class="infobox">
 
         <h2>Blogroll</h2>
 
@@ -51,8 +49,7 @@
             <img src="http://planet.factorcode.org/icons/feed-icon-14x14.png" />
             <t:a t:href="$planet/feed.xml">Syndicate</t:a>
         </p>
-			</td>
-		</tr>
-	</table>
+
+	</div>
 
 </t:chloe>