From 70fba55732dd302d5ca3415158b67641c55e9940 Mon Sep 17 00:00:00 2001
From: John Benediktsson <mrjbq7@gmail.com>
Date: Sun, 1 Mar 2020 14:35:04 -0800
Subject: [PATCH] webapps.planet: more responsive css.

---
 extra/webapps/planet/planet.css | 32 +++++++++++----
 extra/webapps/planet/planet.xml | 73 ++++++++++++++++-----------------
 2 files changed, 59 insertions(+), 46 deletions(-)

diff --git a/extra/webapps/planet/planet.css b/extra/webapps/planet/planet.css
index ac2e67e63c..af1af66f14 100644
--- a/extra/webapps/planet/planet.css
+++ b/extra/webapps/planet/planet.css
@@ -2,15 +2,25 @@
     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 {
     padding: 10px;
-	background-color:#f5f5f5;
+    background-color:#f5f5f5;
 }
 
 .posting-body {
@@ -18,14 +28,20 @@ h1.planet-title {
 }
 
 .posting-date {
-	text-align: right;
-	font-size: 90%;
+    text-align: right;
+    font-size: 90%;
 }
 
 pre, code {
-	color: #000000;
+    color: #000000;
 }
 
-.infobox {
-    padding-left: 10px;
+@media screen and (max-width: 600px) {
+    .infobox {
+        display: none;
+    }
+
+    .posts {
+        margin-right: 0;
+    }
 }
diff --git a/extra/webapps/planet/planet.xml b/extra/webapps/planet/planet.xml
index 987871a586..051a417632 100644
--- a/extra/webapps/planet/planet.xml
+++ b/extra/webapps/planet/planet.xml
@@ -4,55 +4,52 @@
 
 	<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">
+        <t:bind-each t:name="postings">
 
-					<h2 class="posting-title">
-						<t:a t:value="url"><t:label t:name="title" /></t:a>
-					</h2>
+            <h2 class="posting-title">
+                <t:a t:value="url"><t:label t:name="title" /></t:a>
+            </h2>
 
-					<div class="posting-body">
-						<t:html t:name="description" />
-					</div>
+            <div class="posting-body">
+                <t:html t:name="description" />
+            </div>
 
-					<p class="posting-date">
-						<t:a t:value="url"><t:label t:name="date" /></t:a>
-					</p>
+            <p class="posting-date">
+                <t:a t:value="url"><t:label t:name="date" /></t:a>
+            </p>
 
-				</t:bind-each>
+        </t:bind-each>
 
-			</td>
+    </div>
 
-			<td valign="top" width="25%" class="infobox">
+    <div class="infobox">
 
-				<h2>Blogroll</h2>
+        <h2>Blogroll</h2>
 
-				<ul>
-					<t:each t:name="blogroll">
-						<li>
-							<t:link t:name="value"/>
-						</li>
-					</t:each>
-				</ul>
+        <ul>
+            <t:each t:name="blogroll">
+                <li>
+                    <t:link t:name="value"/>
+                </li>
+            </t:each>
+        </ul>
 
-				<hr/>
+        <hr/>
 
-				<p>
-				    <strong>planet-factor</strong> is an Atom/RSS aggregator that collects the
-				    contents of <a href="http://factorcode.org/">Factor</a>-related blogs. It is inspired by
-				    <a href="http://planet.lisp.org">Planet Lisp</a>.
-				</p>
-				<p>
-				    <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>
+        <p>
+            <strong>planet-factor</strong> is an Atom/RSS aggregator that collects the
+            contents of <a href="http://factorcode.org/">Factor</a>-related blogs. It is inspired by
+            <a href="http://planet.lisp.org">Planet Lisp</a>.
+        </p>
+        <p>
+            <img src="http://planet.factorcode.org/icons/feed-icon-14x14.png" />
+            <t:a t:href="$planet/feed.xml">Syndicate</t:a>
+        </p>
+
+	</div>
 
 </t:chloe>