Permalink
Browse files

Conditional comment for flexie.js

  • Loading branch information...
1 parent 26995c9 commit 6c17184964e005ee80d71098d2f83cba74135a49 @richardshepherd committed Sep 6, 2011
Showing with 43 additions and 18 deletions.
  1. +10 −3 css/style.css
  2. +33 −15 index.html
View
@@ -5,7 +5,13 @@ body { background: url(../img/background.png) repeat #333; display: -webkit-box;
/* Typography */
h1 { font-size: 48px; font-family: 'Brawler', serif; }
h2 { font-size: 24px; font-family: 'Brawler', serif; }
-h3 { font-size: 18px; font-weight: bold; font-family: 'Brawler', serif; }
+h3 { font-size: 18px; font-weight: bold; font-family: 'Brawler', serif; margin-bottom: 10px; }
+
+/* Links */
+
+#links { text-align: center; margin: 5px 0;}
+a:link, a:visited { color: #fff; }
+a:active, a:hover { text-decoration: none;}
/* Header */
@@ -38,14 +44,15 @@ aside figure img { width: 100%; height: 125px }
/* Archive */
#main-content { -webkit-box-align: stretch; padding-bottom: 25px; }
-#archive { -webkit-box-flex: 1; max-width: 66%; padding: 10px 20px; /* background-color: #efe; */ }
+#archive { -webkit-box-flex: 1; width: 820px; padding: 10px 20px; /* background-color: #efe; */ }
#archive article { margin-bottom: 25px; -webkit-box-ordinal-group: 2; }
#archive #second-article { -webkit-box-ordinal-group: 1; }
/* Sidebar*/
#sidebar { -webkit-box-flex: 3; padding: 10px 20px; /* background-color: #fee; */ }
-
+#sidebar aside { width: auto; padding: 0; }
+#sidebar aside p { margin-bottom: 10px; }
/* Footer */
footer { background: #000; color: #fff; padding: 20px; display: -webkit-box; }
View
@@ -4,15 +4,21 @@
<title>CSS3 Flexible Box Model Tutorial</title>
<meta name="description" content="">
<meta name="author" content="Richard Shepherd for Smashing Magazine">
+ <!--[if lte IE 8]><script src="js/flexie.js"></script><![endif]-->
+
<link rel="stylesheet" href="css/reset.min.css">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/flickrbomb.css">
<link href='http://fonts.googleapis.com/css?family=Brawler' rel='stylesheet' type='text/css'>
-
+
</head>
<body>
-
+
+ <div id="links">
+ &laquo; <a href="http://www.smashing-magazine.com/" target="_blank">Back to Smashing Magazine</a> : <span id="follow"></span> : <a href="http://www.richardshepherd.com" target="_blank">RichardShepherd.com</a> &raquo;
+ </div>
+
<header class="box bHorizontal">
<hgroup>
<h1>The Fruit Blog</h1>
@@ -58,23 +64,23 @@
<img src="flickr://Bananas" />
<figcaption>Bananas</figcaption>
</figure>
- <p>Morbi sit amet metus lacus, sit amet suscipit felis. Nulla ut accumsan orci. Donec eu purus purus. Etiam elementum felis quis nisl blandit commodo. Proin quis sapien a risus aliquet ultrices.</p>
+ <p>In broad terms, a fruit is a structure of a plant that contains its seeds. The term has different meanings dependent on context. In non-technical usage, such as food preparation, fruit normally means the fleshy seed-associated structures of certain plants that are sweet and edible in the raw state, such as apples, oranges, grapes, strawberries, juniper berries and bananas.</p>
</aside>
<aside class="bFlex1">
<figure>
<img src="flickr://Apples" />
<figcaption>Apples</figcaption>
</figure>
- <p>In sodales libero nec ante ultricies sodales. Quisque blandit ultricies leo nec fermentum. </p>
+ <p>Seed-associated structures that do not fit these informal criteria are usually called by other names, such as vegetables, pods, nut, ears and cones. In biology (botany), a "fruit" is a part of a flowering plant that derives from specific tissues of the flower, mainly one or more ovaries.</p>
</aside>
<aside class="bFlex1">
<figure>
<img src="flickr://Oranges" />
<figcaption>Oranges</figcaption>
</figure>
- <p>Aliquam dignissim ligula vel urna lobortis pulvinar. Nunc quis risus dapibus neque suscipit imperdiet. </p>
+ <p>Taken strictly, this definition excludes many structures that are "fruits" in the common sense of the term, such as those produced by non-flowering plants. </p>
</aside>
</div>
@@ -87,22 +93,25 @@
<div id="archive" class="box bVertical">
<article>
<h3>This is the first article heading</h3>
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lorem arcu, euismod a tincidunt nec, ultrices et nisi. Suspendisse ac semper sapien. Vestibulum a lacus purus. Sed commodo dapibus ipsum, vel pellentesque lorem ultricies vel. Morbi sit amet metus lacus, sit amet suscipit felis. Nulla ut accumsan orci. Donec eu purus purus. Nam id quam sit amet nulla semper molestie.</p>
+ <p>Often the botanical fruit is only part of the common fruit, or is merely adjacent to it. On the other hand, the botanical sense includes many structures that are not commonly called "fruits", such as bean pods, corn kernels, wheat grains, tomatoes, the section of a fungus that produces spores, and many more. However, there are several variants of the biological definition of fruit that emphasize different aspects of the enormous variety that is found among plant fruits.</p>
</article>
<article id="second-article">
<h3>This is the second article heading</h3>
- <p>Duis et vehicula quam. Nullam congue aliquam risus, laoreet blandit urna ultricies id. Nam arcu lorem, condimentum nec sodales ac, placerat at quam. Sed laoreet tellus sit amet tortor consectetur consequat. Pellentesque sed justo velit, sit amet adipiscing lorem. Aliquam dignissim ligula vel urna lobortis pulvinar. Nunc quis risus dapibus neque suscipit imperdiet. Proin quis sapien a risus aliquet ultrices. Aliquam scelerisque lectus neque, a eleifend urna. Duis quam nisl, placerat quis porttitor a, sollicitudin a ligula.</p>
+ <p>Fruits (in either sense of the word) are the means by which many plants disseminate seeds. Most plants bearing edible fruits, in particular, coevolved with animals in a symbiotic relationship as a means for seed dispersal and nutrition, respectively; in fact, many animals (including humans to some extent) have become dependent on fruits as a source of food. Fruits account for a substantial fraction of world's agricultural output, and some (such as the apple and the pomegranate) have acquired extensive cultural and symbolic meanings.</p>
</article>
<article>
<h3>This is the third article heading</h3>
- <p>Quisque dictum, leo at sollicitudin pharetra, justo justo egestas lorem, ut convallis lorem tellus id risus. Maecenas a lobortis metus. Etiam nec pharetra justo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In sodales libero nec ante ultricies sodales. Quisque blandit ultricies leo nec fermentum. Etiam elementum felis quis nisl blandit commodo. Ut ipsum eros, aliquam nec dignissim quis, bibendum at neque. Vivamus aliquet diam sit amet justo mollis vehicula.</p>
+ <p>Many fruits that, in a botanical sense, are true fruits are actually treated as vegetables in cooking and food preparation, because they are not particularly sweet. These culinary vegetables include cucurbits (e.g., squash, pumpkin, and cucumber), tomatoes, peas, beans, corn, eggplant, and sweet pepper. In addition, some spices, such as allspice and chilies, are fruits, botanically speaking. In contrast, occasionally a culinary "fruit" is not a true fruit in the botanical sense.</p>
</article>
</div>
-
- <div id="sidebar" class="box">
- <p>Lorem ipsum the sidebar will go here!</p>
+
+ <div id="sidebar" class="box">
+ <aside>
+ <h3>The Sidebar</h3>
+ <p>Technically, a cereal grain is also a kind of fruit, a kind which is termed a caryopsis.</p><p>However, the fruit wall is very thin, and is fused to the seed coat, so almost all of the edible grain is actually a seed. </p><p>Therefore, cereal grains, such as corn, wheat and rice are better considered as edible seeds, although some references do list them as fruits. <p>Edible gymnosperm seeds are often misleadingly given fruit names, e.g., pine nuts, ginkgo nuts, and juniper berries.</p>
+ </aside>
</div>
</div>
@@ -115,8 +124,8 @@
</section>
<section id="social" class="bFlex1">
- <h3>Social Tang</h3>
- <p>Quisque blandit ultricies leo nec fermentum. In sodales libero nec ante ultricies sodales. Quisque blandit ultricies leo nec fermentum. </p>
+ <h3>Wikipedia</h3>
+ <p>All the text content on this page has been taken from the 'Fruit' entry on Wikipedia. <a href="http://en.wikipedia.org/wiki/Fruit" target="_blank">Check it out!</a> Content released under CC-BY-SA <a href="http://creativecommons.org/licenses/by-sa/3.0/" target="_blank">http://creativecommons.org/licenses/by-sa/3.0/</a></p>
</section>
<section id="contact" class="bFlex1">
@@ -132,8 +141,17 @@
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="js/jquery-flickrbomb-min.js"></script>
- <script src="js/flexie.js"></script>
-
+ <script src="http://platform.twitter.com/anywhere.js?id=mDTT9Vl9XgxHglv1lIeRpg&v=1" type="text/javascript"></script>
+
+ <script type="text/javascript">
+
+ twttr.anywhere(function (T) {
+ T('#follow').followButton("richardshepherd");
+ });
+
+</script>
+
+
<script>
var _gaq=[["_setAccount","UA-XXXXX-X"],["_trackPageview"]]; // Change UA-XXXXX-X to be your site's ID
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.async=1;

0 comments on commit 6c17184

Please sign in to comment.