add upgrade info

Author: christopheschwyzer

_layouts/default.html

@@ -300,6 +300,10 @@
 		</svg>
 		<!-- SVG SOURCE ends-->
 
+		<div class="upgrade-info">
+			<p>Some of the used technologies are not supported. You might want to upgrade your browser!</p>
+			<p>More info: <a href="http://whatbrowser.org/">whatbrowser.org</a></p>
+		</div>
 		<header id="header">
 			<div class="logo-wrapper">
 				<span class="logo" title="Made in Basel"></span>

css/main.css

@@ -170,6 +170,24 @@ strong {
 .divider-horizontal:after {
   content: ' >';
 }
+.upgrade-info {
+  display: none;
+  padding: 12px;
+  text-align: center;
+  background: #ff3922;
+  color: #ffffff;
+}
+.upgrade-info p {
+  margin: 0;
+}
+.upgrade-info a {
+  color: #ffffff;
+  font-weight: bold;
+}
+html.no-svg .upgrade-info,
+html.no-flexbox .upgrade-info {
+  display: block;
+}
 #header {
   height: 100%;
   position: relative;

css/main.less

@@ -1,12 +1,12 @@
 @import (less) "lesshat.less";
 
 @blue: #008FA9;
+@error: #ff3922;
 
 @colorFg: #404041;
 @colorBgBody: #eeeeee;
 @colorBg: whitesmoke;
 @colorFgAlternative: #fff;
-@colorBgAlternative: #0099CC;
 @colorBgAlternative: #008FA9;
 @colorFgShy: lighten(@colorFg, 20);
 @colorFgBorder: #c3c3c3;
@@ -210,6 +210,27 @@ strong {
 	}
 }
 
+.upgrade-info {
+	display: none;
+	padding: 12px;
+	text-align: center;
+	background: @error;
+	color: @colorFgAlternative;
+
+	p {
+		margin: 0;
+	}
+
+	a {
+		color: @colorFgAlternative;
+		font-weight: bold;
+	}
+
+	html.no-svg &, html.no-flexbox & {
+		display: block;
+	}
+}
+
 #header {
 	height: 100%;