web: polished node and comment layout

web/drupal/themes/flukso/comment.tpl.php

@@ -20,7 +20,7 @@ $comment_class = 'comment' . (($comment->new) ? ' comment-new' : '') .
     <div class="clear"></div>
   </div>
   <div class="comment-meta">
-    <span><strong><?php print $author; ?></strong> | <?php print $date; ?></span>
+    <span><strong><?php print $author; ?></strong> | <?php print format_date($comment->timestamp, 'custom', t('d M Y')); ?></span>
       <?php if ($links) { print $links; } ?>
   </div>
 </div>

web/drupal/themes/flukso/node.tpl.php

@@ -1,22 +1,51 @@
-<div class="node<?php print ($sticky) ? " sticky" : ""; ?>">
+<?php
-
+/**
-	<?php if ($page == 0): ?>
+ * @file node.tpl.php
-		<h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
+ * The node rendering logic for Flukso.
-	<?php else: ?>
+ *
-		<?php print $picture ?>
+ * In addition to the standard variables Drupal makes available to node.tpl.php,
-	<?php endif; ?>
+ * these variables are made available by the theme:
-
+ *
-	<?php if ($submitted): ?>
+ * - $flukso_node_author - The node's "posted by" text and author link.
-		<span class="submitted"><?php print t('!date — !username', array('!username' => theme('username', $node), '!date' => format_date($node->created))); ?></span>
+ *
-	<?php endif; ?>
+ * - $flukso_node_class - The CSS classes to apply to the node.
-
+ *
-	<div class="content"><?php print $content ?></div>
+ * - $flukso_node_links - The node links with a separator placed between each.
-
+ *
-	<?php if ($links): ?>
+ * - $flukso_perma_title - The localized permalink text for the node.
-		<em class="clear links">>> <?php print $links ?></em>
+ *
-	<?php endif; ?>
+ * - $flukso_term_links - The taxonomy links with a separator placed between
-	<?php if ($page == 1): ?>
+ *   each.
-		<em class="clear terms"><?php print $terms ?></em>
+ *
-	<?php endif; ?>
+ * - $flukso_node_timestamp - The timestamp for this type, if one should be
-
+ *   rendered for this type.
-</div>
+ *
+ * $Id$
+ */
+?>
+<div id="node-<?php print $node->nid; ?>" class="<?php echo $flukso_node_class; ?>">
+<?php //if ($page == 0): ?>
+  <div class="node-headline clear-block">
+    <h2><a href="<?php print $node_url; ?>" rel="bookmark" title="<?php print $flukso_perma_title; ?>"><?php print $title; ?></a></h2>
+    <?php if (isset($flukso_node_timestamp)): ?>
+        <span class="timestamp"><?php print $flukso_node_timestamp; ?></span>
+    <?php endif; ?>
+  </div>
+<?php //endif; ?>
+  <div class="content clear-block">
+    <?php if (isset($flukso_node_author)): ?>
+    	<div class="node-author"><?php print $flukso_node_author; ?></div>
+    <?php endif; ?>
+    <?php print $picture; ?>
+    <?php print $content; ?>
+  </div>
+  <?php if (!empty($taxonomy) || !empty($links)): ?>
+    <div class="meta">
+      <?php
+      if ($taxonomy) { print $flukso_term_links; }
+      if (!empty($links)): ?>
+          <div class="links"><?php print $flukso_node_links; ?></div>
+      <?php endif; ?>
+    </div>
+  <?php endif; ?>
+</div> <!-- node -->

web/drupal/themes/flukso/style.css

@@ -24,10 +24,14 @@ a:hover {
 }
 
 body {
-	background: #fff;
+  background: #fff;
-	color: #444;
+  color: #222;
-	font-family: Arial, system, Tahoma, sans-serif;
+  font: 100%/1.4 "Helvetica Neue", Arial, Helvetica, sans-serif;
-	font-size: 100%;
+}
+
+p {
+	margin: 1em 0;
+	padding: 0em 2.6em;
 }
 
 h1, h2, h3, h4, h5, h6 {
@@ -114,6 +118,8 @@ table {
 }
 
 #content {
+	float: left;
+	clear: none;
 	background: #f3f3f3;
 	border: 1px solid #ddd;
 	font-size: .8em;
@@ -143,12 +149,6 @@ table {
 	font-weight: normal;
 }
 
-.node {
-	/* border: 1px solid #ddd; */
-	font-size: 1em;
-	margin-bottom: 3em;
-}
-
 .breadcrumb {
 	font-size: 1em;
 	padding: 0 0 .2em 0;
@@ -178,46 +178,125 @@ input[type="text"], textarea, input.form-password {
 	padding: 1px;
 }
 
-.node h2 {
-	/* background: #f3f3f3; */
-	color: #f7f7f7;
-	font-size: 1.6em;
-	padding: 0 0 1em 0;
-}
 
-.node .content, .node .info {
+/* ------------------------------------------------------------------------
-	background: #f3f3f3; 
+ * Node
+ * --------------------------------------------------------------------- */
+.teaser .content p { margin-bottom: 0; }
+
+.readmore { text-transform: lowercase; }
+
+.teaser .content p+p { margin-top: 20px; }
+
+.node {
 	font-size: 1em;
+	margin-bottom: 4.5em;
 }
 
-.node .picture {
+.node .node-headline {
-	border: 1px solid #ddd;
+	padding: 1em 0 0 0;
-	float: right; 
+	width: 100%;
-	margin: 0.5em;
 }
 
-.node.item-listing {
+.node .node-headline h2 {
-	padding: 1em;
+	font-size: 1.75em;
-	border-top: 1px solid #ff0000;
+	display: inline-block;
-}
+	float: left;
-
+	line-height: 1em;
-.node.item-listing.sticky {
-	background-image: none;
-}
-
-.node table ul {
 	margin: 0;
-	padding: 1em;
+	padding: 0;
+	text-transform: lowercase;
+	width: 66%;
 }
 
-.node.sticky .title {
+.node .node-headline {
-	background-image: none;
+	border-bottom: 4px solid #c8c8c8;
+	margin-bottom: 0.5em;
 }
 
-.node .title {
+.node .node-headline h2 a:link, .node .node-headline h2 a:visited,
-	border-bottom: 1px solid #ff0000;
+h3.searchresult a:link, h3.searchresult a:visited {
+	color: #666;
+	font-weight: normal;
+	text-decoration: none;
 }
 
+.node .node-headline h2 a:hover,
+h3.searchresult a:hover {
+	color: #fff;
+	font-weight: normal;
+	text-decoration: none;
+}
+
+.node .node-headline .timestamp {
+	color: #c8c8c8;
+	float: right;
+	font-size: 2em;
+	font-weight: normal;
+	letter-spacing: -1px;
+	line-height: 1em;
+	margin: 0;
+	padding: 0;
+	text-align: right;
+	text-transform: lowercase;
+	vertical-align: bottom;
+	width: 33%;
+}
+
+.node-author {
+	color: #aaa;
+	font-style: normal;
+	margin: -0.4em 0 0.4em 0;
+	padding: 0;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.node .content .user-picture {
+	display: inline-block;
+	float: right;
+	margin: 0 0 0 0.75em;
+	padding: 0;
+}
+
+.node .content {
+	background-color: #ececec;
+	clear: both;
+	padding: 0;
+}
+
+.node .content p {
+        margin: 2em 0;
+}
+
+.meta { 
+	background-color: #ccc;
+	color: #fff;
+	font-style: normal;
+	padding: 2px 5px;
+	text-align: right;
+	text-transform: lowercase;
+}
+
+.meta ul.inline,
+.meta ul.inline li {
+	display: inline;
+	list-style-image: none;
+	margin: 0;
+	padding: 0;
+}
+
+.meta a:link {
+	color: #fff;
+}
+
+.post-comment-help {
+	color: #888;
+	text-align: right;
+}
+
+
+
 .messages {
 	background: #eee;
 	margin: 0em;
@@ -275,13 +354,14 @@ br.clear {
 }
 
 #footer {
+	float: left;
 	background: #f3f3f3;
 	border: 1px solid #ddd;
 	color: #aaa;
-	font-size: 0.64em;
+	font-size: 0.8em;
 	padding: .2em 0 .2em 0;
 	width: 684px;
-	margin: 12px 0 0 0;
+	margin: 12px 0;
 	text-align: center;
 }
 
@@ -414,6 +494,7 @@ html.js fieldset legend a:hover {
 	clear: none;
 }
 
+
 /* ------------------------------------------------------------------------
  * Comments
  * --------------------------------------------------------------------- */
@@ -461,7 +542,14 @@ div.comment img.user-picture {
     padding: 0 10px 5px 0;
 }
 
-div.comment div.content p+p { margin-top: 1.5em; }
+div.comment div.content p {
+        padding: 0 3em;
+}
+
+div.comment div.content p+p {
+	margin-top: 1.5em;
+	padding: 0 3em;
+}
 
 div.even div.content { background-color: #fff; }
 
@@ -483,11 +571,11 @@ div.even div.comment-meta {
 }
 
 div.odd {
-	background-color: #eee;
+	background-color: #fff;
 }
 
 div.odd div.comment-meta {
-	background: #f3f3f3 url(images/comment-dark.gif) no-repeat top left;
+	background: #f3f3f3 url(images/comment-light.gif) no-repeat top left;
 }
 
 em.moderation {