Benad's Home Page

About This Site

Thu, 25 Oct 2007 23:04:54 GMT

This site was made using TiddlyWiki, a personal Wiki that needs no software installation and remains on a single web page on disk.

While it may not be the best approach to make a home page such as mine, at least it lets me put contents, change the visual look and add many plugins with no coding required. The mini page and the more complete Benad's Home Page Mobile Edition are available for older browsers, those with JavaScript turned off or mobile phones. Note that this site works particularly well with Opera Mini on mobile phones.

I added extensions so that users can't see multiple "tiddlers" at the same time and to hide the sidebar. I still left the "Toggle Sidebar" button on the menu on the left to make it easy for me to edit the contents afterwards. Of course, this is not a public Wiki, so editing is not possible for anyone but me. As weird as it sounds, this makes everything feel more like my experience in the late 1980s with HyperCard, which inspired HTML, JavaScript and Wikis. And thus the loop is closed.

MarkupPreHead

Fri, 17 Aug 2007 16:38:00 GMT

<link rel='alternate' type='application/rss+xml' title='RSS' href='index.xml'/>
<link rel="openid.server" href="http://www.livejournal.com/openid/server.bml"/>
<link rel="openid.delegate" href="http://benad.livejournal.com/"/>
<style type="text/css">#contentWrapper {display:none;}</style><div id="SplashScreen" style="border: 3px solid #ccc; display: block; text-align: center; width: 320px; margin: 100px auto; padding: 50px; color:#000; font-size: 28px; font-family:Tahoma; background-color:#eee;"><b>Benad's Home Page</b> is loading<blink> ...</blink><br><br><span style="font-size: 14px; color:red;">Requires Javascript.</span></div>
<meta name="microid" content="mailto+http:sha1:c8fd19ef61dc1f27f0731cf82d58ace23a1fe1b3" />

Contact Information

Fri, 17 Aug 2007 16:09:00 GMT

I'm using this Flash object from the Internet Address Book site to avoid spam. If you can't see it, don't have Flash, or want to see more contact information, look here.

MainMenu

Tue, 24 Apr 2007 20:59:00 GMT

Welcome
About Me
About This Site
My Blog
My Radio Station
Contact Information
Toggle Sidebar «
Last Twitter Status Sun, 21 Oct 2007 23:54:59 +0000: benad: a little bit less dizzy. Just a tiny bit less.

StyleSheet

Tue, 10 Apr 2007 01:16:00 GMT

/*Mocha TiddlyWiki Theme*/
/*Version 1.0*/
/*Design and CSS originally by Anthonyy, ported to TiddlyWiki by Saq Imtiaz.*/

 #contentWrapper{
margin: 0 3.4em;

			font-family: Lucida Grande, Tahoma, Arial, Helvetica, sans-serif; /* Lucida Grande for the Macs, Tahoma for the PCs */
font-size: 11px;
			line-height: 1.6em;
			color: #666;
}

.header {
 background: #fff; 
			padding-top: 10px;
			clear: both;

border-bottom: 4px solid #948979;
}

.headerShadow {	padding: 2.6em 0em 0.5em 0em; }

.siteTitle {
			font-family: 'Trebuchet MS' sans-serif;
			font-weight: bold;
			font-size: 32px;
			color: #CC6633;
			margin-bottom: 30px;
			background-color: #FFF;
}

.siteTitle a{color:#CC6633; border-bottom:1px dotted #cc6633;}

.siteSubtitle {
	font-size: 1.0em;
        display: block;
        margin: .5em 3em; color: #999999;
}

#mainMenu {
position:relative;
float:left;
margin-bottom:1em;
display:inline;
text-align:left;
padding: 2em 0.5em 0.5em 0em;
width:13em;
font-size:1em;
}

#sidebar{
position:relative;
float:right;
margin-bottom:1em;
padding-top:2em;
display:inline;

}

#displayArea {
	margin: 0em 17em 0em 15em;
}

.tagClear {clear:none;}

#contentFooter {background:#575352; color:#BFB6B3; clear: both; padding: 0.5em 1em;}

		
		#contentFooter a {
			color: #BFB6B3;
			border-bottom: 1px dotted #BFB6B3;
		}
		
		#contentFooter a:hover {
			color: #FFFFFF;
			background-color:#575352;
		}

		a,#sidebarOptions .sliderPanel a{
			color:#CC6714;
			text-decoration: none;
		}

		a:hover,#sidebarOptions .sliderPanel a:hover {
			color:#CC6714;
			background-color: #F5F5F5; 
		}

.viewer .button, .editorFooter .button{
	color: #666;
	border: 1px solid #CC6714;
}

.viewer .button:hover, 
.editorFooter .button:hover{
	color: #fff;
	background: #CC6714;
	border-color: #CC6714;
}

.viewer .button:active, .viewer .highlight,.editorFooter .button:active, .editorFooter .highlight{color:#fff; background:#575352;border-color:#575352;}


		#mainMenu a {
			display: block;
			padding: 5px;
			border-bottom: 1px solid #CCC;
		}

		#mainMenu a:link, #navlist a:visited {
			color:#CC6714;
			text-decoration: none;
		}
		
		#mainMenu a:hover {
			background: #000000 url(arrow.gif) 96% 50% no-repeat;
			background-color: #F5F5F5;
			color:#CC6714;
		}

#mainMenu br {display:none;}

#sidebarOptions a {
			color:#999;
			text-decoration: none;
		}

#sidebarOptions	a:hover {
			color:#4F4B45;
			background-color: #F5F5F5;border:1px solid #fff;
		}

#sidebarOptions {line-height:1.4em;}

		.tiddler {
			padding-bottom: 40px;
			border-bottom: 1px solid #DDDDDD; 
		}
.title {color:#CC6633;}
.subtitle, .subtitle a { color: #999999; font-size: 1.0em;margin:0.2em;}
.shadow .title{color:#948979;}

.selected .toolbar a {color:#999999;}
.selected .toolbar a:hover {color:#4F4B45; background:transparent;border:1px solid #fff;}

.toolbar .button:hover, .toolbar .highlight, .toolbar .marked, .toolbar a.button:active{color:#4F4B45; background:transparent;border:1px solid #fff;}

 .listLink,#sidebarTabs .tabContents {line-height:1.5em;}
 .listTitle {color:#888;}

#sidebarTabs .tabContents {background:#fff;}
#sidebarTabs .tabContents .tiddlyLink, #sidebarTabs .tabContents .button{color:#999;}
#sidebarTabs .tabContents .tiddlyLink:hover,#sidebarTabs .tabContents .button:hover{color:#4F4B45;background:#fff}

#sidebarTabs .tabContents .button:hover, #sidebarTabs .tabContents .highlight, #sidebarTabs .tabContents .marked, #sidebarTabs .tabContents a.button:active{color:#4F4B45;background:#fff}

.tabSelected{color:#fff; background:#948979;}

.tabUnselected {
 background: #ccc;
}

 .tabSelected, .tabSelected:hover {
 color: #fff;
 background: #948979;
 border: solid 1px #948979;
padding-bottom:1px;
}

 .tabUnselected {
 color: #999;
 background: #eee;
 border: solid 1px #ccc;
padding-bottom:1px;
}

#sidebarTabs .tabUnselected { border-bottom: none;padding-bottom:3px;}
#sidebarTabs .tabSelected{padding-bottom:3px;}


#sidebarTabs .tabUnselected:hover { border-bottom: none;padding-bottom:3px;color:#4F4B45}

#sidebarOptions .sliderPanel {
	background: #fff; border:none;
	font-size: 1em;
}
#sidebarOptions .sliderPanel a {font-weight:normal;}
#sidebarOptions .sliderPanel input {border:1px solid #999;}

.viewer blockquote {
	border-left: 3px solid #948979;
}

.viewer table {
	border: 2px solid [[ColorPalette::TertiaryDark]];
}

.viewer th, thead td {
	background: #948979;
	border: 1px solid #948979;
	color: #fff;
}
.viewer pre {
	border: 1px solid #948979;
	background: #f5f5f5;
}

.viewer code {
	color: #2F2A29;
}

.viewer hr {
	border-top: dashed 1px #948979;
}

.editor input {
	border: 1px solid #948979;
}

.editor textarea {
	border: 1px solid #948979;
}

.popup {
	background: #948979;
	border: 1px solid #948979;
}

.popup li.disabled {
	color: #000;
}

.popup li a, .popup li a:visited {
	color: #eee;
	border: none;
}

.popup li a:hover {
	background: #575352;
	color: #fff;
	border: none;
}

.tagging, .tagged {
	border: 1px solid #eee;
	background-color: #F7F7F7;
}

.selected .tagging, .selected .tagged {
	background-color: #eee;
	border: 1px solid #BFBAB3;
}

 .tagging .listTitle, .tagged .listTitle {
	color: #bbb;
}

.selected .tagging .listTitle, .selected .tagged .listTitle {
	color: #666; 
}

.tagging .button, .tagged .button {
		color:#aaa;
}
.selected .tagging .button, .selected .tagged .button {
		color:#4F4B45;
}

.highlight, .marked {background:transparent; color:#111; border:none; text-decoration:underline;}

.tagging .button:hover, .tagged .button:hover, .tagging .button:active, .tagged .button:active {
		border: none; background:transparent; text-decoration:underline; color:#000;
}

h1,h2,h3,h4,h5 { color: #666; background: transparent; padding-bottom:2px; font-family: Arial, Helvetica, sans-serif; }
h1 {font-size:18px;}
h2 {font-size:16px;}
h3 {font-size: 14px;}

#messageArea {
	border: 4px solid #948979;
	background: #f5f5f5;
	color: #999;
        font-size:90%;
}

#messageArea a:hover { background:#f5f5f5;}

#messageArea .button{
	color: #666;
	border: 1px solid #CC6714;
}

#messageArea .button:hover {
	color: #fff;
	background: #948979;
	border-color: #948979;
}


* html .viewer pre {
	margin-left: 0em;
}

* html .editor textarea, * html .editor input {
	width: 98%;
}

.searchBar {float:right;font-size: 1.0em;}
.searchBar .button {color:#999;display:block;}
.searchBar .button:hover {border:1px solid #fff;color:#4F4B45;}
.searchBar input {			
                        background-color: #FFF;
			color: #999999;
			border: 1px solid #CCC;		margin-right:3px;
}

#sidebarOptions .button:active, #sidebarOptions .highlight {background:#F5F5F5;}

*html #contentFooter { padding:0.25em 1em 0.5em 1em;}

#noticeBoard {font-size: 0.9em; color:#999; position:relative;display:block;background:#fff; clear: both; margin-right:0.5em; margin-top:60px; padding:5px; border-bottom: 1px dotted #CCC; border-top: 1px dotted #CCC;}
#mainMenu #noticeBoard a,#mainMenu #noticeBoard .tiddlyLink {display:inline;border:none;padding:5px 2px;color:#DF9153 }
#noticeBoard a:hover {border:none;}	

#noticeBoard br {display:inline;}

#mainMenu #noticeBoard  .button{
	color: #666;
	border: 1px solid #DF9153;padding:2px;
}

#mainMenu #noticeBoard  .button:hover{
	color: #fff;
	background: #DF9153;
	border-color: #DF9153;
}

TwitterMacro

Tue, 10 Apr 2007 01:01:00 GMT

//version.macros.extensions.twitterMacro = { major: 1, minor: 0, revision: 0 };

config.macros.twitterMacro = 
{
  handler: function(place)
  {
    createTiddlyElement(place, 'span', null, null, twitterFeed.value.items[0].pubDate +": " + twitterFeed.value.items[0].title);
  }
}

Welcome

Sun, 08 Apr 2007 20:49:00 GMT

Welcome to my humble Home Page!
Click on any of the links on the left.

Where's the Back button?
Move the mouse over the text here and look for the "History" link on the top-right of the text.

Why is this site using JavaScript so much?
Read About This Site

MarkupPostHead

Sun, 08 Apr 2007 20:39:00 GMT

My Radio Station

Thu, 22 Feb 2007 02:54:00 GMT

This is my finetune radio station. It can give you an idea of my musical tastes in classical music. I'll make other radio stations for other types of music I like in the near future.

Don't close the window or click on another link in this window, otherwise the radio station may stop playing.

About Me

Thu, 22 Feb 2007 02:53:00 GMT

While people often know me only by my nickname Benad, my real name is Benoit Nadeau (actually, Benoit Jean Louis-Olivier Nadeau).

Soon I will put a more complete biography of me here. For now, head over my blog to see the kind of things that interest me.

footerhack

Thu, 22 Feb 2007 02:42:00 GMT

//This ensures that the footer sticks to the bottom of the screen when there are no tiddlers open. If that is not desirable, it can be deleted.
function setFooter() {
         if (document.getElementById && document.getElementById("contentFooter") ) {
            var windowHeight=findWindowHeight();
         if (windowHeight>0) {
            var contentHeight= document.getElementById('mainMenu').offsetHeight + document.getElementById("header").offsetHeight + document.getElementById("contentFooter").offsetHeight;
            var menu= document.getElementById('mainMenu');
            if (windowHeight-(contentHeight)>=0) {
               menu.style.position='relative';
               menu.style.marginBottom=(windowHeight-(contentHeight)-1)+'px';
               }
            else {
                 menu.style.position='';
                 menu.style.marginBottom='';
                 }
            }
         }
}
window.onresize = function() {
  setFooter();
}

Story.prototype.refreshTiddler_footerhack=Story.prototype.refreshTiddler;
Story.prototype.refreshTiddler = function (title,template,force)
{    
var theTiddler = Story.prototype.refreshTiddler_footerhack.apply(this,arguments);
setFooter();
   return theTiddler;}

NoticeBoard

Thu, 22 Feb 2007 02:37:00 GMT

contentFooter

Thu, 22 Feb 2007 02:36:00 GMT

This work is licensed under a Creative Commons Attribution-Share Alike 2.5 Canada License.

PageTemplate

Thu, 22 Feb 2007 02:36:00 GMT

<div id='header' class='header'>
<div class='headerShadow'>
<span class='searchBar' macro='search'></span>
<span class='siteTitle' refresh='content' tiddler='SiteTitle'></span>&nbsp;
<span class='siteSubtitle' refresh='content' tiddler='SiteSubtitle'></span>
</div>

</div>
<div id='mainMenu'>
<span refresh='content' tiddler='MainMenu'></span>
<span id='noticeBoard' refresh='content' tiddler='NoticeBoard'></span>

</div>
<div id='sidebar'>
<div id='sidebarOptions' refresh='content' tiddler='MochaSideBarOptions'></div>
<div id='sidebarTabs' refresh='content' force='true' tiddler='SideBarTabs'></div>
</div>
<div id='displayArea'>
<div id='messageArea'></div>
<div id='tiddlerDisplay'></div>
</div>
<div id='contentFooter' refresh='content' tiddler='contentFooter'></div>

Blog

Thu, 22 Feb 2007 01:59:00 GMT

My main blog is on Livejournal at: http://benad.livejournal.com/

DefaultTiddlers

Thu, 22 Feb 2007 01:57:00 GMT

Welcome

ViewTemplate

Wed, 21 Feb 2007 16:32:00 GMT

<div class='toolbar' macro='toolbar +editTiddler permalink references history'></div>
<div class='title' macro='view title'></div>
<div class='subtitle'><span macro='view modifier link'></span>, <span macro='view modified date [[DD MMM YYYY]]'></span> (<span macro='message views.wikified.createdPrompt'></span> <span macro='view created date [[DD MMM YYYY]]'></span>)</div>
<!--<div class='tagging' macro='tagging'></div>
<div class='tagged' macro='tags'></div>-->
<div class='viewer' macro='view text wikified'></div>
<div class='tagClear'></div>

SiteUrl

Wed, 21 Feb 2007 04:25:00 GMT

http://homepage.mac.com/benad/

MochaSideBarOptions

Wed, 21 Feb 2007 04:00:00 GMT

close all permaview new tiddler new journal save changes options »

SplashScreenPlugin

Wed, 21 Feb 2007 03:37:00 GMT

Inspired by TiddlyPom

Name	SplashScreenPlugin
Created by	SaqImtiaz
Location	http://tw.lewcid.org/#SplashScreenPlugin
Version	0.21
Requires	TW2.08+

Description:

Provides a simple splash screen that is visible while the TW is loading.

Installation

Copy the source text of this tiddler to your TW in a new tiddler, tag it with systemConfig and save and reload. The SplashScreen will now be installed and will be visible the next time you reload your TW.

Customizing

Once the SplashScreen has been installed and you have reloaded your TW, the splash screen html will be present in the MarkupPreHead tiddler. You can edit it and customize to your needs.

History

20-07-06 : version 0.21, modified to hide contentWrapper while SplashScreen is displayed.
26-06-06 : version 0.2, first release

Code

var old_lewcid_splash_restart=restart;

restart = function()
{   if (document.getElementById("SplashScreen"))
        document.getElementById("SplashScreen").style.display = "none";
      if (document.getElementById("contentWrapper"))
        document.getElementById("contentWrapper").style.display = "block";
    
    old_lewcid_splash_restart();
   
    if (splashScreenInstall)
       {if(config.options.chkAutoSave)
			{saveChanges();}
        displayMessage("TW SplashScreen has been installed, please save and refresh your TW.");
        }
}


var oldText = store.getTiddlerText("MarkupPreHead");
if (oldText.indexOf("SplashScreen")==-1)
   {var siteTitle = store.getTiddlerText("SiteTitle");
   var splasher='\n\n<style type="text/css">#contentWrapper {display:none;}</style><div id="SplashScreen" style="border: 3px solid #ccc; display: block; text-align: center; width: 320px; margin: 100px auto; padding: 50px; color:#000; font-size: 28px; font-family:Tahoma; background-color:#eee;"><b>'+siteTitle +'</b> is loading<blink> ...</blink><br><br><span style="font-size: 14px; color:red;">Requires Javascript.</span></div>';
   if (! store.tiddlerExists("MarkupPreHead"))
       {var myTiddler = store.createTiddler("MarkupPreHead");}
   else
      {var myTiddler = store.getTiddler("MarkupPreHead");}
      myTiddler.set(myTiddler.title,oldText+splasher,config.options.txtUserName,null,null);
      store.setDirty(true);
      var splashScreenInstall = true;
}