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