webapps.planet: more responsive css.

flac
John Benediktsson 2020-03-01 14:35:04 -08:00 committed by Steve Ayerhart
parent 3c80b9b9aa
commit 8fd968cf58
No known key found for this signature in database
GPG Key ID: 5BFD39C5359E967D
2 changed files with 59 additions and 46 deletions

View File

@ -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;
}
}

View File

@ -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>