webapps.planet: more responsive css.

master
John Benediktsson 2020-03-01 14:35:04 -08:00
parent 77fd680475
commit 70fba55732
2 changed files with 59 additions and 46 deletions

View File

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

View File

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