Responsive blog layout te doen

dabblet.css

/**
 * Responsive blog layout te doen
 */

article {
	display: inline-block;
	vertical-align: top;
}
nav li {
	display: block;
}


/* vanaf 460px breedte moet elk artikel 49% breed zijn
   Het eerste artikel moet 100% breed blijven
   De font-grootte van het eerste artikel moet 1.1 keer zo groot zijn
 */


/* vanaf 750px breedte moet elk artikel 32% breed zijn
   De eerste twee artikelen moeten 49% breed zijn
   De font-grootte van de eerste twee artikelen moet 1.1 keer zo groot zijn
   De navigatie moet bovenaan de pagina ónder de H1 komen te staan
   De navigatie-items moeten naast elkaar staan
   De font-grootte van de navigatie-items is 1.3 keer zo groot als normaal
   Alle positionering moet met ems gebeuren.
 */


/* vanaf 1000px breedte moet elk artikel 24% breed zijn
   De eerste drie artikelen moeten 32% breed zijn
   De font-grootte van de eerste drie artikelen moet 1.1 keer zo groot zijn
 */





body {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1em;
}

nav ul,
nav li {
	margin: 0;
	padding: 0;
	list-style:none;
}
nav li {
	border: solid #333;
	border-width: 0 0 1px;
}
nav a {
	display: block;
	line-height: 1.8;
	padding: .2em;
}
* {
	box-sizing: border-box;
}
 

dabblet.html

<h1><a href="/">Love Nonsense</a></h1>
<article>
	<h1><a href="http://lovenonsense.com/174">Thirty thousand logos</a></h1>
	<p>There are over ten thousand lakes – bigger than ten acres (that&#8217;s 40,000 m², for people who don&#8217;t understand medieval units) – in Minnesota, a state in the United States of America, and they all have a name, an incredible fact by itself. <b>Nicole Meyer</b> found out that if these ponds have a <em>logo</em> they <q>have a tendency to be, well, <a href="http://www.branding10000lakes.com/ABOUT">fairly ugly</a></q>. She decided to publish <a href="http://www.branding10000lakes.com/">one new logo for one Minnesota lake every day</a>. Until now she made <a href="http://www.branding10000lakes.com/index">one hundred logos</a> which means she <em>just</em> has to make another 9,900 to finish. The project will be done in little over twenty seven years.</p>
</article>
<article>
	<h1><a href="http://lovenonsense.com/165">Moar lasers</a></h1>
	<p>Lasers are the shit. All <a href="http://www.google.nl/images?q=sharks%20lasers&#038;">sharks</a> have <a href="http://www.chromeexperiments.com/detail/webgl-aquarium/?f=webgl">lasers</a>, I&#8217;m sure you didn&#8217;t know that. Some of you might know that <a href="http://www.lazertits.com/">most women incorporate lasers</a> but to most of you men it must come as a surprise. My loyal readers should know that the little creatures on this site are capable of shooting not just two but <a href="http://lovenonsense.com/155"><em>four</em> lasers</a> on command. But unfortunately most humans (well men anyways) don&#8217;t natively support lasers. Until today.</p>
</article>
<article>
	<h1><a href="http://lovenonsense.com/155">The rabbit&#8217;s eggs</a></h1>
	<p>More and more I hear requests for so called easter eggs, hidden, funny <a href="http://www.zurb.com/playground/jquery-raptorize">features</a> on websites. We used to redirect <a href="http://minimalissimo.com/">Minimalissimo</a> to maximalissimo.com whenever you typed the <a href="http://lmgtfy.com/?q=konami+code">Konami code</a>. I changed this feature: it now turns the minimal layout to a maximalissimo one. It uses the incredible code you can find on the website <a href="http://mothereffingtextshadow.com/">MOTHER EFFING TEXT-SHADOW</a> when you click the &#8216;all the way&#8217; button. This site was created by Paul Irish, a true easter egg apostle.</p>
</article>
<article>
	<h1><a href="http://lovenonsense.com/149">Galileo and a bully in a dress</a></h1>
	<p>You would expect that 400 years after somebody rediscovered that the earth is not the center of the universe everybody would just accept that as a fact and move on. No, not everybody. On Saturday November 6th 2010 the <a href="http://www.galileowaswrong.com/galileowaswrong/">First Annual Catholic Conference on Geocentrism: Galileo Was Wrong</a> will be held in a small town somewhere in the USA. These people earn their money with writing scientific books about this matter! That is just amazing, literally. I&#8217;m jealous, I wish I could make a living just by publishing huge piles of nonsense. Unfortunately I don&#8217;t have the money to attend this conference, without a doubt it would be the best and most entertaining waste of time ever. </p>
</article>
<article>
	<h1><a href="http://lovenonsense.com/144">Finding nonsense in Happy Street</a></h1>
	<p>On May the third <a href="http://twitter.com/vasilis/status/13307240726">I tweeted an opinion</a> about the <a href="http://www.holland-expo2010.com/dutch-pavilion">Dutch Pavilion</a> on the Shanghai 2010 Expo. The opinion was that it looks like a cheap tourist village somewhere in the Mediterranean. Kitsch. <em>And</em> embarrassing. It&#8217;s easy to express an uninformed opinion, 140 characters is more than enough. I&#8217;ll try to explain why I was mistaken, why I should never have tweeted that tweet. </p>
</article>
<article>
	<h1><a href="http://lovenonsense.com/137">Plant Pornography</a></h1>
	<p>Jonathan Keats, an American experimental philosopher and artist, is the creator of <a href="http://www.youtube.com/watch?v=tZqzr5ANi7I">Cinema Botanica</a>. This art installation was made to show stimulating images to ordinary American house plants. Your <em>Sansevieria</em>, which would otherwise only see the plaster ceiling of your appartment, can experience the blue Italian sky for once. But Keats took it a step further and also included plant porn; bees pollinating plants. He does not know what exactly happens to the plants, but his work definitely raises questions. &#8220;So if your children are supposedly vegetating in front of the television when they watch it for hours, what happens when you show <a href="http://www.newyorker.com/talk/2010/03/15/100315ta_talk_gopnik">television to vegetables</a>?&#8221;</p>
</article>
<article>
	<h1><a href="http://lovenonsense.com/124">Loose women, germans and fishermen.</a></h1>
	<p>With their street view option Google added an incredible feature to their maps application. When you&#8217;re heading into unknown territory you don&#8217;t have to be prepared for the unexpected, you can explore the terrain from the safety of your hammock, looking for obstacles like traffic lights and speed cameras. It also helps finding a place to park. But not everybody seems to be happy with it. It can be considered  to be a little invasive in ones privacy.</p>
</article>
<article>
	<h1><a href="http://lovenonsense.com/115">Shady URL</a></h1>
	<p>Most URL shortening services merely make your URLs boring. For example, <code>http://www.facebook.com/</code> becomes <code>http://tinyurl.com/4t993</code> and <code>http://twitter.com/lovenonsense</code> turns into <code>http://bit.ly/bg6JpN</code>. But now there is a lovely new URL shortener, called <a href="http://www.shadyurl.com/index.php">ShadyURL</a>. </p>
</article>
<article>
	<h1><a href="http://lovenonsense.com/108">Yes, it all fits</a></h1>
	<p>All kitchen necessities tucked to one wall and everything fits exactly. This is the ultimate efficiency, <a href="http://www.michaeljohansson.com/works/ghost_II.html">the ultimate minimalism in kitchen design</a>. Why use a room when a wall is enough? And look at all the free space where you can, uhm, stand and look at your beautiful pots, pans and cupboards. I guess I&#8217;ll just leave that sink where it is and drink something else than water.</p>
</article>
<article>
	<h1><a href="http://lovenonsense.com/65">What Your Internet Is Made Of</a></h1>
	<p>This post does not quite belong on a site about nonsense, because it adequately explains a phenomenon we use most every day; the Internet. What most people do not seem to realise, is that the Internet is made entirely out of cats. To make this field of Science more accessable to the public, Joel Veitch of rathergood.com has made a <a href="http://www.rathergood.com/cats">song with a video clip</a>.</p>
</article>
<article>
	<h1><a href="http://lovenonsense.com/94">One issue sites</a></h1>
	<p>A clear trend on the interwebs is the rise of one issue sites. You have the simple single page sites that try to answer a question, like is it friday yet? or is it 2010 yet?. A site like this is built and published within ten minutes, you can’t really call that a waste of time. And they aren’t exactly nonsensical either. I wrote about a more complex one issue site, the incredible Defiant Dog a while ago and yesterday I found this very good reason to keep a computer with flash installed at hand: Giant Bat Farts. These two sites are not exactly built within a few minutes, somebody took their time to look at some trivial details (like the source code of the bat farts). But nevertheless, these sites are built and then they’re done. If we visit them next year chances are they haven’t changed.</p>
</article>


<nav>
	<ul>
		<li><a href="http://lovenonsense.com/apology">Apology</a></li>
		<li><a href="http://lovenonsense.com/attention">Attention</a></li>
		<li><a href="http://lovenonsense.com/thanks">Thanks</a></li>
		<li><a href="http://lovenonsense.com/category/art">Art</a></li>
		<li><a href="http://lovenonsense.com/category/internets">Internets</a></li>
	</ul>
</nav>

settings.json

{"view":"split","seethrough":"","prefixfree":"1","page":"css"}