Converted test home page to a valid nanoc layout.
h3rald h3rald@h3rald.com
Wed, 05 Aug 2009 14:08:17 +0200
9 files changed,
90 insertions(+),
83 deletions(-)
D
content/home.html
@@ -1,14 +0,0 @@
------ -# Built-in - -# Custom -title: Home ------ -<h1>Home</h1> -<p>You’ve just created a new nanoc site. The page you are looking at right now is the home page for your site (and it’s probably the only page).</p> -<p>To get started, consider replacing this default homepage with your own customized homepage. Some pointers on how to do so:</p> -<ul> - <li><strong>Change this page’s content</strong> by editing “content.txt” file in the “content” directory. This is the actual page content, and therefore doesn’t include the header, sidebar or style information (those are part of the layout).</li> - <li><strong>Change the layout</strong>, which is the “default.txt” file in the “layouts/default” directory, and create something unique (and hopefully less bland).</li> -</ul> -<p>If you need any help with customizing your nanoc web site, be sure to check out the documentation (see sidebar), and be sure to subscribe to the discussion group (also see sidebar). Enjoy!</p>
A
content/home.textile
@@ -0,0 +1,35 @@
+----- +layout: home +title: Home + +----- +<div class="panel" id="latest"> + +h3. Latest Articles + +</div> + +<div class="panel" id="popular"> + +h3. Popular Articles + +</div> + +<div class="panel" id="tags"> + +h3. Tags + +</div> + +<div class="panel" id="projects"> + +h3. Projects + +</div> + +<div class="panel" id="about"> + +h3. About + +</div> +
M
files/css/elements.css
→
files/css/elements.css
@@ -273,9 +273,16 @@ border: none;
text-align: right; } -.gsc-clear-button +div.gsc-clear-button +{ + background: transparent url('../images/icons/close.png') no-repeat center 50%; + width: 16px; + height: 16px; +} + +div.gsc-clear-button:hover { - background: url('../images/icons/close.png') + cursor: pointer; } .gsc-cursor-page
M
files/js/feeds.js
→
files/js/feeds.js
@@ -48,7 +48,7 @@ };
function backtype_comments() { - $.getJSON("js/comments.json", + $.getJSON("/js/comments.json", function(data){ var comment_list = $("<ul></ul>"); $.each(data.comments, function(i, comment){
M
files/js/init.js
→
files/js/init.js
@@ -3,13 +3,16 @@ $(document).ready(function() {
$.slider(); $('#up-arrow').click(function(){ $.scrollTo('#header', 1000)}); $('#down-arrow').click(function(){ $.scrollTo('#footer', 1000)}); - $('.half-hidden').each(function() { - $(this).hover(function() { - $(this).stop().animate({ opacity: 1.0 }, 300); - }, - function() { - $(this).stop().animate({ opacity: 0.3 }, 300); - }); - }); + var change_opacity = function() { + $(this).hover(function() { + $(this).stop().animate({ opacity: 1.0 }, 300); + }, + function() { + $(this).stop().animate({ opacity: 0.3 }, 300); + } + ); + }; + $('.half-hidden').each(change_opacity) + $('.gsc-clear-button').each(change_opacity) });
M
files/js/slider.js
→
files/js/slider.js
@@ -25,8 +25,8 @@ var $scroll = $('#slider .scroll').css('overflow', 'hidden');
// apply our left + right buttons $scroll - .before('<img class="scrollButtons left half-hidden" src="images/icons/left.png" />') - .after('<img class="scrollButtons right half-hidden" src="images/icons/right.png" />'); + .before('<img class="scrollButtons left half-hidden" src="/images/icons/left.png" />') + .after('<img class="scrollButtons right half-hidden" src="/images/icons/right.png" />'); // handle nav selection function selectNav() {
M
page_defaults.yaml
→
page_defaults.yaml
@@ -1,7 +1,7 @@
# Built-in layout: default extension: html -filters_pre: [] +filters_pre: ['redcloth'] skip_output: false filters_post: [] custom_path:
M
ui-dev/home.htm
→
layouts/home.htm
@@ -1,3 +1,9 @@
+----- +# Built-in + +# Custom +filter: erb +----- <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>@@ -18,28 +24,28 @@ <meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta content="44.388041;9.073248" name="ICBM"> <script src="http://www.google.com/jsapi?key=ABQIAAAA6h3j8Jri5D_da53UPbEbThRlq2n1sm52B5HDRR5tm6o8XM18FhTKn3v155RpPeD0kWnWG81QEhhifQ" type="text/javascript"></script> - <script src="js/search.js" type="text/javascript"></script> - <link href="css/layout.css" media="all" rel="stylesheet" type="text/css"> - <link href="css/text.css" media="all" rel="stylesheet" type="text/css"> - <link href="css/elements.css" media="all" rel="stylesheet" type="text/css"> - <link href="css/jquery.tooltip.css" media="all" rel="stylesheet" type="text/css"> + <script src="/js/search.js" type="text/javascript"></script> + <link href="/css/layout.css" media="all" rel="stylesheet" type="text/css"> + <link href="/css/text.css" media="all" rel="stylesheet" type="text/css"> + <link href="/css/elements.css" media="all" rel="stylesheet" type="text/css"> + <link href="/css/jquery.tooltip.css" media="all" rel="stylesheet" type="text/css"> <script type="text/javascript"> function tweets_received(){ $('.twitter-item[title]').qtip(dark_tooltip); } </script> - <script type="text/javascript" src="js/jquery-1.3.2.js"></script> + <script src="/js/jquery-1.3.2.js" type="text/javascript"></script> <!-- JQuery Plugins --> - <script src="js/tooltips.js" type="text/javascript"></script> - <script src="js/jquery.scrollTo-min.js" type="text/javascript"></script> - <script src="js/jquery.localscroll-min.js" type="text/javascript"></script> - <script src="js/jquery.serialScroll-min.js" type="text/javascript"></script> - <script src="js/slider.js" type="text/javascript"></script> - <script src="js/jquery.timeago.js" type="text/javascript"></script> - <script src="js/jquery.jgfeed-min.js" type="text/javascript"></script> - <script src="js/init.js" type="text/javascript"></script> + <script src="/js/tooltips.js" type="text/javascript"></script> + <script src="/js/jquery.scrollTo-min.js" type="text/javascript"></script> + <script src="/js/jquery.localscroll-min.js" type="text/javascript"></script> + <script src="/js/jquery.serialScroll-min.js" type="text/javascript"></script> + <script src="/js/slider.js" type="text/javascript"></script> + <script src="/js/jquery.timeago.js" type="text/javascript"></script> + <script src="/js/jquery.jgfeed-min.js" type="text/javascript"></script> + <script src="/js/init.js" type="text/javascript"></script> </head> <body>@@ -53,7 +59,7 @@ <![endif]-->
<!-- HEADER START --> <div id="header-container"> <div id="header-left"> - <h1><img alt="H3RALD" src="images/logo.png"></h1> + <h1><img alt="H3RALD" src="/images/logo.png"></h1> </div> <div id="header-right"> <ul id="navigation">@@ -74,50 +80,20 @@
<!-- CONTAINER START --> <div id="container"> <ul id="palette"> - <li><a href="#" id="up-arrow" class="half-hidden"><img alt="^" src="images/icons/up.png"></a></li> - <li><a href="#" id="down-arrow" class="half-hidden"><img alt="v" src="images/icons/down.png"></a></li> + <li><a href="#" id="up-arrow" class="half-hidden"><img alt="^" src="/images/icons/up.png"></a></li> + <li><a href="#" id="down-arrow" class="half-hidden"><img alt="v" src="/images/icons/down.png"></a></li> </ul> <!-- CONTENT START --> <div id="content" class="clearfix"> - <h2>Home</h2> + <h2><%= @page.title %></h2> <div id="search_results"></div> <div id="slider"> <div class="scroll"> <div class="scrollContainer"> - <div class="panel" id="latest"> - <h3>Latest Articles</h3> - TODO - </div> - <div class="panel" id="popular"> - <h3>Popular Articles</h3> - TODO - - </div> - <div class="panel" id="tags"> - <h3>Tags</h3> - <ul> - <li><a href="#">Ruby</a></li> - <li><a href="#">Programming</a></li> - <li><a href="#">RedBook</a></li> - <li><a href="#">Productivity</a></li> - <li><a href="#">Test #1</a></li> - <li><a href="#">Test #2</a></li> - <li><a href="#">Test #3</a></li> - <li><a href="#">Test #4</a></li> - </ul> - - - - </div> - <div class="panel" id="projects"> - <h3>Projects</h3> - </div> - <div class="panel" id="about"> - <h3>About</h3> - </div> - + <%= @page.content %> + </div><!-- .scrollContainer --> </div><!-- .scroll --> </div><!-- #slider -->@@ -136,17 +112,17 @@ <div id="footer-container">
<div id="services"> <div class ="footer-left"> <div id="backtype"> - <h3><img src="images/icons/backtype.png" /> <a href="http://www.backtype.com/h3rald">comments</a></h3> + <h3><img src="/images/icons/backtype.png" /> <a href="http://www.backtype.com/h3rald">comments</a></h3> </div> </div> <div class ="footer-center"> <div id="twitter"> - <h3><img src="images/icons/twitter.png" /> <a href="http://www.twitter.com/h3rald">tweets</a></h3> + <h3><img src="/images/icons/twitter.png" /> <a href="http://www.twitter.com/h3rald">tweets</a></h3> </div> </div> <div class ="footer-right"> <div id="delicious"> - <h3><img src="images/icons/delicious.png" /> <a href="http://www.delicious.com/h3rald">bookmarks</a></h3> + <h3><img src="/images/icons/delicious.png" /> <a href="http://www.delicious.com/h3rald">bookmarks</a></h3> </div> </div> </div>@@ -167,8 +143,8 @@ </div>
<div class="footer-div">H3RALD Web Site v7.1.2 <em>"PlainText"</em> – © 2004-2009 <strong>Fabio Cevasco</strong> – <a class="link" href="http://creativecommons.org/licenses/by-nc-nd/3.0/">Some rights reserved</a> | <img alt="Valid" src="images/tick.gif"> <a href="http://validator.w3.org/check?uri=referer" class="link">XHTML 1.0 Strict</a> <img alt="Valid" src="images/tick.gif"> <a href="http://jigsaw.w3.org/css-validator/" class="link">CSS 2.1</a></div> </div> </div> - <script src="js/feeds.js" type="text/javascript"></script> - <script src="js/jquery.qtip.js" type="text/javascript"></script> + <script src="/js/feeds.js" type="text/javascript"></script> + <script src="/js/jquery.qtip.js" type="text/javascript"></script> <script type="text/javascript"> // tooltip $('.feed-item[title]').qtip(dark_tip);