webapps.planet: more responsive css.
parent
3c80b9b9aa
commit
8fd968cf58
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in New Issue