webapps.planet: more responsive css.
parent
77fd680475
commit
70fba55732
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue