Updated the style of warning and infos boxes

_site/css/style.css

@@ -34,6 +34,7 @@ html,body {
     width: 100%;
     top: 210px;
     font-family: arial,helvetica,sans;
+    z-index: 1;
 }
 
 #menu ul {
@@ -182,11 +183,12 @@ html,body {
 	padding: 1em;
 	line-height: 1.5em;
 	font-size: 14px;
+	color: #333;
 }
 
 .box .content code {
 	font-size: 14px;
-	color: #666;
+	color: #333;
 	margin: 0;
 	padding: 0 3px;
 	border: 1px solid #bbb;
@@ -196,6 +198,20 @@ html,body {
 .box .content pre code {
     background: transparent;
     border: 0 none;
+    color: #333;
+}
+
+.box .content pre .prompt {
+    color: #aaa;
+}
+
+.box .content pre .kbd {
+    font-weight: bold;
+}
+
+.box .content pre .kbd.var {
+    font-weight: normal;
+    font-style: italic;
 }
 
 .box .content .tip {
@@ -219,26 +235,60 @@ html,body {
     margin-bottom: -32px
 }
 
-.box.doc {margin-top: 70px}
+.box.doc {
+    margin-top: 70px;
+    position: relative;
+    width: 630px;
+}
 
+.box .content .warning,
 .box .content .information {
-	background-color: #e4e8ff;
-	color: #444;
-	padding: 7px 6px 7px 12px;
-	margin-top: 20px;
-	border-radius: 10px;
-	-moz-border-radius: 10px;
-	-webkit-border-radius: 10px;
+    position: absolute;
+    right: -250px;
+    margin-top: 20px;
+    width: 200px;
+    font-size: 14px;
+    color: #222;
+    font-family: arial,helevetica,sans;
+    padding: 10px;
+    opacity: 0.7;
+    -moz-transition: opacity 0.3s;
+    -webkit-transition: opacity 0.3s;
+    -o-transition: opacity 0.3s;
 }
 
+.box .content .warning:hover,
+.box .content .information:hover {
+    opacity: 1;
+}
+
+.box .content .information:before,
+.box .content .warning:before {
+    font-family: Georgia, sans-serif;
+    font-size: 28px;
+    font-style: italic;
+    position: absolute;
+    right: 0;
+    top: -21px;
+    opacity: 0.5;
+}
+
+.box .content .information:before {
+    content: "Info";
+    color: #a6b1f3;
+}
+
+.box .content .warning:before {
+    content: "Warning";
+    color: #e869e7;
+}
+
+.box .content .information {
+    background-color: #e4e8ff;
+}    
+
 .box .content .warning {
-	background-color: #f8ccf8;
-	color: #444;
-	padding: 7px 6px 7px 12px;
-	margin: 20px 0 20px 0;
-	border-radius: 10px;
-	-moz-border-radius: 10px;
-	-webkit-border-radius: 10px;
+    background-color: #f8ccf8;
 }
 
 .box .content .code {

_site/documentation.html

@@ -70,8 +70,10 @@ t: 0; border: 0;" src="https://assets.github.com/img/bec6c51521dcc8148146135149f
 
     <p class="warning">This documentation is a work in progress.</p>
 
-    <p class="information">Jtalk is a young piece of code and evolves quickly. Some features are still incomplete and you may very well encounter bugs, in which case you can <a href="https://github.com/NicolasPetton/jtalk/issues">file an issue</a> or a pull request on the <a href="https://github.com/NicolasPetton/jtalk">repository</a>.</p>
     <p>Jtalk is an implementation of the Smalltalk-80 language. It allows developers to write client-side heavy web applications in Smalltalk. Jtalk includes an integrated development environment with a class browser, workspace and transcript.</p>
+
+    <p class="information">Jtalk is a young piece of code and evolves quickly. Some features are still incomplete and you may very well encounter bugs, in which case you can <a href="https://github.com/NicolasPetton/jtalk/issues">file an issue</a> or a pull request on the <a href="https://github.com/NicolasPetton/jtalk">repository</a>.</p>
+
     <p>Jtalk includes the following features:</p>
     <ol>
       <li>It is semantically and syntaxically equivalent to <a href="http://www.pharo-project.org">Pharo Smalltalk</a> (the implementation considered as the reference)</li>
@@ -89,12 +91,12 @@ t: 0; border: 0;" src="https://assets.github.com/img/bec6c51521dcc8148146135149f
     <p class="information">The following steps explain how to setup a webdav for Jtalk with Debian, but the setup on OSX and other Linux distros should be similar.</p>
     <h4>Installing Apache and enabling the dav module</h4>
     <p>Evaluate the following as root:</p>
-    <pre>~# apt-get install apache2
-~# a2enmod dav
-~# a2enmod dav_fs</pre>
+    <pre><span class="prompt">~#</span> <span class="kbd">apt-get install</span> <span class="kbd var">apache2</span>
+<span class="prompt">~#</span> <span class="kbd">a2enmod</span> <span class="kbd var">dav</span>
+<span class="prompt">~#</span> <span class="kbd">a2enmod</span> <span class="kbd var">dav_fs</span></pre>
 
     <h4>Creating a password for the webdav</h4>
-    <pre>htpasswd -c /etc/apache2/htpasswd-webdav USERNAME</pre>
+    <pre><span class="prompt">~#</span> <span class="kbd">htpasswd -c /etc/apache2/htpasswd-webdav <span class="kbd var">USERNAME</span></span></pre>
 
     <h4>Setting up the webdav directory</h4>
     <p>Add the following lines to the default vhost (in /etc/apache2/sites-available/default):</p>
@@ -120,7 +122,9 @@ t: 0; border: 0;" src="https://assets.github.com/img/bec6c51521dcc8148146135149f
     
     <h4>Restarting Apache</h4>
 
-    <p>To restart Apache, evaluate the following: <pre>~# /etc/init.d/apache2 restart</pre> and go to <code>http://localhost/jtalk/</code>.</p>
+    <p>To restart Apache, evaluate the following: </p>
+    <pre><span class="prompt">~#</span> <span class="kbd">/etc/init.d/apache2</span> <span class="kbd var">restart</span></pre>
+    <p>and go to <code>http://localhost/jtalk/</code>.</p>
     <p>The class browser should now be able to commit changes to disk.</p>
 
     <h3 id="counter-example">4. The counter example <a href="#counter-example">&para;</a></h3>

css/style.css

@@ -34,6 +34,7 @@ html,body {
     width: 100%;
     top: 210px;
     font-family: arial,helvetica,sans;
+    z-index: 1;
 }
 
 #menu ul {
@@ -182,11 +183,12 @@ html,body {
 	padding: 1em;
 	line-height: 1.5em;
 	font-size: 14px;
+	color: #333;
 }
 
 .box .content code {
 	font-size: 14px;
-	color: #666;
+	color: #333;
 	margin: 0;
 	padding: 0 3px;
 	border: 1px solid #bbb;
@@ -196,6 +198,20 @@ html,body {
 .box .content pre code {
     background: transparent;
     border: 0 none;
+    color: #333;
+}
+
+.box .content pre .prompt {
+    color: #aaa;
+}
+
+.box .content pre .kbd {
+    font-weight: bold;
+}
+
+.box .content pre .kbd.var {
+    font-weight: normal;
+    font-style: italic;
 }
 
 .box .content .tip {
@@ -219,26 +235,60 @@ html,body {
     margin-bottom: -32px
 }
 
-.box.doc {margin-top: 70px}
+.box.doc {
+    margin-top: 70px;
+    position: relative;
+    width: 630px;
+}
 
+.box .content .warning,
 .box .content .information {
-	background-color: #e4e8ff;
-	color: #444;
-	padding: 7px 6px 7px 12px;
-	margin-top: 20px;
-	border-radius: 10px;
-	-moz-border-radius: 10px;
-	-webkit-border-radius: 10px;
+    position: absolute;
+    right: -250px;
+    margin-top: 20px;
+    width: 200px;
+    font-size: 14px;
+    color: #222;
+    font-family: arial,helevetica,sans;
+    padding: 10px;
+    opacity: 0.7;
+    -moz-transition: opacity 0.3s;
+    -webkit-transition: opacity 0.3s;
+    -o-transition: opacity 0.3s;
 }
 
+.box .content .warning:hover,
+.box .content .information:hover {
+    opacity: 1;
+}
+
+.box .content .information:before,
+.box .content .warning:before {
+    font-family: Georgia, sans-serif;
+    font-size: 28px;
+    font-style: italic;
+    position: absolute;
+    right: 0;
+    top: -21px;
+    opacity: 0.5;
+}
+
+.box .content .information:before {
+    content: "Info";
+    color: #a6b1f3;
+}
+
+.box .content .warning:before {
+    content: "Warning";
+    color: #e869e7;
+}
+
+.box .content .information {
+    background-color: #e4e8ff;
+}    
+
 .box .content .warning {
-	background-color: #f8ccf8;
-	color: #444;
-	padding: 7px 6px 7px 12px;
-	margin: 20px 0 20px 0;
-	border-radius: 10px;
-	-moz-border-radius: 10px;
-	-webkit-border-radius: 10px;
+    background-color: #f8ccf8;
 }
 
 .box .content .code {

documentation.html

@@ -11,8 +11,10 @@ title: Jtalk Smalltalk - documentation
 
     <p class="warning">This documentation is a work in progress.</p>
 
-    <p class="information">Jtalk is a young piece of code and evolves quickly. Some features are still incomplete and you may very well encounter bugs, in which case you can <a href="https://github.com/NicolasPetton/jtalk/issues">file an issue</a> or a pull request on the <a href="https://github.com/NicolasPetton/jtalk">repository</a>.</p>
     <p>Jtalk is an implementation of the Smalltalk-80 language. It allows developers to write client-side heavy web applications in Smalltalk. Jtalk includes an integrated development environment with a class browser, workspace and transcript.</p>
+
+    <p class="information">Jtalk is a young piece of code and evolves quickly. Some features are still incomplete and you may very well encounter bugs, in which case you can <a href="https://github.com/NicolasPetton/jtalk/issues">file an issue</a> or a pull request on the <a href="https://github.com/NicolasPetton/jtalk">repository</a>.</p>
+
     <p>Jtalk includes the following features:</p>
     <ol>
       <li>It is semantically and syntaxically equivalent to <a href="http://www.pharo-project.org">Pharo Smalltalk</a> (the implementation considered as the reference)</li>
@@ -30,12 +32,12 @@ title: Jtalk Smalltalk - documentation
     <p class="information">The following steps explain how to setup a webdav for Jtalk with Debian, but the setup on OSX and other Linux distros should be similar.</p>
     <h4>Installing Apache and enabling the dav module</h4>
     <p>Evaluate the following as root:</p>
-    <pre>~# apt-get install apache2
-~# a2enmod dav
-~# a2enmod dav_fs</pre>
+    <pre><span class="prompt">~#</span> <span class="kbd">apt-get install</span> <span class="kbd var">apache2</span>
+<span class="prompt">~#</span> <span class="kbd">a2enmod</span> <span class="kbd var">dav</span>
+<span class="prompt">~#</span> <span class="kbd">a2enmod</span> <span class="kbd var">dav_fs</span></pre>
 
     <h4>Creating a password for the webdav</h4>
-    <pre>htpasswd -c /etc/apache2/htpasswd-webdav USERNAME</pre>
+    <pre><span class="prompt">~#</span> <span class="kbd">htpasswd -c /etc/apache2/htpasswd-webdav <span class="kbd var">USERNAME</span></span></pre>
 
     <h4>Setting up the webdav directory</h4>
     <p>Add the following lines to the default vhost (in /etc/apache2/sites-available/default):</p>
@@ -61,7 +63,9 @@ title: Jtalk Smalltalk - documentation
     
     <h4>Restarting Apache</h4>
 
-    <p>To restart Apache, evaluate the following: <pre>~# /etc/init.d/apache2 restart</pre> and go to <code>http://localhost/jtalk/</code>.</p>
+    <p>To restart Apache, evaluate the following: </p>
+    <pre><span class="prompt">~#</span> <span class="kbd">/etc/init.d/apache2</span> <span class="kbd var">restart</span></pre>
+    <p>and go to <code>http://localhost/jtalk/</code>.</p>
     <p>The class browser should now be able to commit changes to disk.</p>
 
     <h3 id="counter-example">4. The counter example <a href="#counter-example">&para;</a></h3>