diff --git a/public/res/extensions/notifications.js b/public/res/extensions/notifications.js
index e6dea770..7c9ccb93 100644
--- a/public/res/extensions/notifications.js
+++ b/public/res/extensions/notifications.js
@@ -52,6 +52,13 @@ define([
         jGrowl("<i class='icon-white " + iconClass + "'></i> " + _.escape(message).replace(/\n/g, '<br/>'), options);
     }
 
+    var $offlineStatusElt;
+    var $extensionButtonsElt;
+    notifications.onReady = function() {
+        $offlineStatusElt = $('.navbar .offline-status');
+        $extensionButtonsElt = $('.navbar .extension-buttons');
+    };
+
     notifications.onMessage = function(message) {
         showMessage(message);
     };
@@ -67,16 +74,13 @@ define([
     };
 
     notifications.onOfflineChanged = function(isOffline) {
+        $offlineStatusElt.toggleClass('hide', !isOffline);
+        $extensionButtonsElt.toggleClass('hide', isOffline);
         if(isOffline === true) {
-            showMessage("You are offline.", "icon-attention-circled msg-offline", {
-                sticky: true,
-                close: function() {
-                    showMessage("You are back online!", "icon-signal");
-                }
-            });
+            showMessage("You are offline.", "icon-attention-circled msg-offline");
         }
         else {
-            $(".msg-offline").parents(".jGrowl-notification").trigger('jGrowl.beforeClose');
+            showMessage("You are back online!", "icon-signal");
         }
     };
 
diff --git a/public/res/html/bodyIndex.html b/public/res/html/bodyIndex.html
index 8a7dc5cc..6787a927 100644
--- a/public/res/html/bodyIndex.html
+++ b/public/res/html/bodyIndex.html
@@ -45,6 +45,11 @@
 				</button></li>
 		</ul>
 		<ul class="nav pull-right right-buttons">
+			<li class="offline-status hide">
+			    <div class="text-danger">
+			        <i class="icon-attention-circled"></i>offline
+			    </div>
+			</li>
 			<li class="extension-buttons"></li>
 		</ul>
 		<ul class="nav pull-right">
@@ -835,7 +840,7 @@
                     <p><b>Tip:</b> You can use a
                     <a href="http://jekyllrb.com/docs/frontmatter/"
                     target="_blank">YAML front matter</a> to specify the title and the tags/labels of your publication.</p>
-                    <p><b>Interpreted variables:</b> <i>title, tags</i></p>
+                    <p><b>Interpreted variables:</b> <code>title</code>, <code>tags</code>, <code>published</code>, <code>date</code>.</p>
 				</blockquote>
 			</div>
 			<div class="modal-footer">
diff --git a/public/res/styles/main.less b/public/res/styles/main.less
index 0132348a..6b588290 100644
--- a/public/res/styles/main.less
+++ b/public/res/styles/main.less
@@ -7,9 +7,9 @@
 
 /* Colors */
 @logo-yellow: #FFD900;
-@logo-blue: #3399FF;
-@logo-orange: #FF610D;
-@logo-green: #8DC213;
+@logo-blue: #53a9ff;
+@logo-orange: #ff7606;
+@logo-green: #a5cc0a;
 @primary: #0080FF;
 @secondary: @primary;
 @tertiary: @primary;
@@ -43,7 +43,7 @@
 
 // Panel buttons
 @panel-button-bg-color: #FFF;
-@panel-button-border-fade: 75%;
+@panel-button-border-fade: 80%;
 @panel-border-color: fade(@primary-desaturated, 10%);
 
 @error-border: #FF6161;
@@ -469,6 +469,13 @@ a {
 		}
 	}
 	
+	.offline-status > div {
+		display: inline-block;
+		vertical-align: middle;
+		height: @input-height-base;
+		padding: 9px 10px;
+	}
+	
 	.left-buttons-dropdown, .right-buttons-dropdown {
 	    > .nav {
     	    margin-left: 0;