Model/BlogPost.php

@@ -2,38 +2,8 @@
 ApplicationSettings::RegisterDefaultSetting("blog", "preview_length", 1000);
 
 class BlogPost extends DBObject {
-	//const PREVIEW_LENGTH=1000;
-	
 	private $_uri;
 
-	public static function GetCount() {
-		//self::SetupPDO();
-		return self::$PDO->query("SELECT COUNT(*) FROM blog_posts WHERE post_content<>'' AND post_deleted=0")->fetchColumn();
-	}
-	
-	public static function GetLatest($count=1,$offset=0){
-		//self::SetupPDO();
-		$prep=self::$PDO->prepare("SELECT post_id FROM blog_posts WHERE post_content<>'' AND post_deleted=0 ORDER BY post_timestamp DESC LIMIT ?,?");
-		$prep->bindValue(1,(int)$offset,PDO::PARAM_INT); // can't just use array in execute this time as execute array is treated like strings
-		$prep->bindValue(2,(int)$count,PDO::PARAM_INT);
-		$prep->execute();
-		$ids=$prep->fetchAll(PDO::FETCH_COLUMN);
-		$posts=array();
-		foreach ($ids as $id)
-			$posts[]=new BlogPost($id);
-		return $posts;
-		//return new BlogPost($url);
-	}
-	
-	public static function GetAll(){
-		$posts=array();
-		self::SetupPDO();
-		$ids=self::$PDO->query("SELECT post_id FROM blog_posts WHERE post_deleted=0")->fetchAll(PDO::FETCH_COLUMN);
-		foreach ($ids as $id)
-			$posts[]=new BlogPost($id);
-		return $posts;
-	}
-
 	public function __construct($id=0) {
 		$field="post_id";
 		if (!is_numeric($id))

css/blog.css

@@ -1,41 +1,36 @@
-.code{
-	border:1px solid #bdbdbd;
-	border-radius:4px;
-	padding:5px;
-	margin:0;
-	overflow:auto;
-}
-
-.code ol{
-	list-style-position: inside;
-	padding:0;
-	margin:0;
-}
-
-.code li{
-	background:#eeeeee;
-}
-
-.code li:nth-child(2n){
-	background:#f5f5f5;
-}
-
-.code li>div{
-	display:inline;
-}
-
-.image{
-	padding:5px;
-	background:#e0e0e0;
-	display:inline-block;
-	text-align: center;
-	max-width: 100%;
-}
-
-.image img{
-	display:block;
-}
-
-.image span{
-	font-size: 0.8em;
-}
+.code {
+  border: 3px solid #eeeeee;
+  background: #e0e0e0;
+  border-radius: 4px;
+  padding: 4px;
+  margin: 0;
+  overflow: auto;
+}
+.code ol {
+  list-style-position: inside;
+  padding: 0;
+  margin: 0;
+}
+.code li {
+  list-style-position: inside;
+  background: #eeeeee;
+}
+.code li > div {
+  display: inline;
+}
+.code li:nth-child(2n) {
+  background: #e0e0e0;
+}
+.image {
+  padding: 5px;
+  background: #e0e0e0;
+  display: inline-block;
+  text-align: center;
+  max-width: 100%;
+}
+.image img {
+  display: block;
+}
+.image span {
+  font-size: 0.8em;
+}

css/style-med.css

@@ -1,32 +1,30 @@
-#menu{
-	display: none;
-	box-shadow: none;
+#menu {
+  display: none;
+  box-shadow: none;
 }
-
-#main, #main-header{
-	padding-left:0;
+#main,
+#main-header {
+  padding-left: 0;
 }
-
-#menu-button{
-	cursor: pointer;
-	display: inline-block;
-	max-height: 100%;
+#menu-button {
+  cursor: pointer;
+  display: inline-block;
+  max-height: 100%;
 }
-
-#buttons{
-	left:0;
+#buttons {
+  left: 0;
 }
-
-#buttons button{
-	width:60px;
-	height:60px;
+#buttons button {
+  width: 60px;
+  height: 60px;
 }
-
-.row>.col {
-	width:100%;
-	float:left;
+.row > .col {
+  width: 100%;
+  float: left;
+}
+.row.col-lg-1 > .col,
+.row.col-lg-2 > .col,
+.row.col-lg-3 > .col,
+.row.col-lg-4 > .col {
+  width: 100%;
 }
-
-.row.col-lg-1>.col, .row.col-lg-2>.col, .row.col-lg-3>.col, .row.col-lg-4>.col{
-	width: 100%;
-}

css/style-small.css

@@ -1,42 +1,36 @@
-dl{
-	margin-top: 12px;
-	margin-bottom: 12px;
-}
-
-#main{
-	padding-top: 48px;
-}
-
-#main-header>.header span:not(:last-child){
-	display:none;
-}
-
-#main-header .header>*{
-	padding-left: 15px !important;
-}
-
-#nav-container{
-	top:48px;
-}
-
-.header{
-	height: 48px;
-}
-
-.header > *{
-	line-height: 48px;
-	font-size:18px;
-}
-
-.header span:not(:first-child):before{
-	content:none;
-}
-
-.row>.col {
-	width:100%;
-	float:left;
-}
-
-.row.col-md-1>.col, .row.col-md-2>.col, .row.col-md-3>.col, .row.col-md-4>.col{
-	width: 100%;
-}
+dl {
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+#main {
+  padding-top: 48px;
+}
+#main-header .header span:not(:last-child) {
+  display: none;
+}
+#main-header .header > * {
+  padding-left: 15px !important;
+}
+#nav-container {
+  top: 48px;
+}
+.header {
+  height: 48px;
+}
+.header > * {
+  line-height: 48px;
+  font-size: 18px;
+}
+.header span:not(:first-child):before {
+  content: none;
+}
+.row > .col {
+  width: 100%;
+  float: left;
+}
+.row.col-md-1 > .col,
+.row.col-md-2 > .col,
+.row.col-md-3 > .col,
+.row.col-md-4 > .col {
+  width: 100%;
+}

css/style.css

@@ -1,369 +1,301 @@
 @import url(http://fonts.googleapis.com/css?family=Roboto);
-
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
+}
+html,
+body,
+h1,
+h2,
+button {
+  padding: 0;
+  margin: 0;
+}
+html,
+button,
+input,
+textarea {
+  font-family: 'Roboto', sans-serif;
+}
+body {
+  width: 100%;
+  background: #fafafa;
 }
-
-html,body,h1,h2, button {
-	padding:0;
-	margin:0;
-}
-
-html, button, input, textarea{
-	font-family: 'Roboto', sans-serif;
-	/*font-size:16px;*/
-}
-
-body{
-	width:100%;
-	background:#fafafa;
-}
-
 a {
-	color:#f44336;
+  color: #00e676;
 }
-
-nav img{
-	vertical-align: middle;
-	margin-right: 5px;
+nav img {
+  vertical-align: middle;
+  margin-right: 5px;
 }
-
-nav dt:hover, nav dd:hover, nav dt.active, nav dd.active{
-	background: #EEE;
-	cursor: pointer;
-	cursor: hand;
+nav dt:hover,
+nav dd:hover,
+nav dt.active,
+nav dd.active {
+  background: #eeeeee;
+  cursor: pointer;
+  cursor: hand;
 }
-
 nav dt {
-    padding: 10px 10px;
+  padding: 10px 10px;
 }
-
 nav dd {
-    margin: 0;
-    padding: 10px 10px 10px 40px;
-}
-
-nav a{
-	color: black;
-	text-decoration: none;
-}
-
-h2{
-	margin-bottom:10px;
-}
-
-h2 a{
-	color:inherit;
-}
-
-h3:first-child{
-	margin-top: 0px;
-}
-
-h3{
-	margin-bottom: 10px;
-}
-
-hr{
-	border: 1px solid #eee;
-}
-
-table input[type=text], table textarea{
-	width: 100%;
-}
-
-form button, form input[type=submit]{
-	border:none;
-	background:none;
-}
-
-form button:hover, form input[type=submit]:hover{
-	background: #EEE;
-}
-
-button:hover{
-	cursor: pointer;
-	cursor: hand;
-}
-
-img{
-	max-width: 100%;
-}
-
-p:first-child{
-	margin-top: 0;
-}
-
-table{
-	border-collapse: collapse;
-}
-
-th{
-	text-align: left;
-}
-
-td, th{
-	padding:0 10px 5px 0;
-	vertical-align: top;
-}
-
-#menu{
-	background:#fafafa;
-	width:280px;
-	left:0;
-	position:fixed;
-	height:100%;
-	/*box-shadow: 7px 0px 4px 0px rgba(0,0,0,0.15);*/
-	box-shadow: -2px 0px 0px 0px #eee inset;
-	/*border-right: 2px solid #eeeeee;*/
-	z-index: 400;
-	overflow-x: hidden;
-}
-
-#menu .header{
-	z-index: 401;
-}
-
-/*#menu>div{
-	position: relative;
-	height:100%
-}*/
-
-/*#menu>div>*{
-	padding-left:10px;
-}*/
-
-#menu-button{
-	display:none;
-}
-
-#nav-container{
-	/*position:fixed;
-	top:64px;
-	bottom:0;
-	width:270px;*/
-	overflow: auto;
-	width:100%;
-}
-
-#main{
-	padding-left:280px;
-	padding-top:64px;
-}
-
-#main>*{
-	padding-left:20px !important;
-}
-
-#main-header{
-	position: fixed;
-	padding-left: 280px;
-	left:0;
-	right:0;
-	z-index: 1;
-	/*box-shadow: 0 5px 10px rgba(249,249,249, 0.9);*/
-}
-
-#main-header .header>*{
-	padding-left: 20px !important;
-}
-
-#content{
-	padding:20px;
-	margin-bottom:60px;
-}
-
-#buttons{
-	position:fixed;
-	bottom: 20px;
-	right: 20px;
-	left:280px;
-	vertical-align: bottom;
-}
-
-#buttons>table{
-	width: 100%;
-}
-
-#buttons>table tr>td{
-	vertical-align: bottom;
-	padding:0;
-}
-
-#buttons>table tr>td:last-child{
-	text-align: right;
-}
-
-#buttons>table td>*:not(:first-child){
-	margin-top:20px;
-}
-
-#buttons button{
-	border-radius: 50%;
-	display: inline-block;
-	text-align: center;
-	box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.25);
-	vertical-align: middle;
-	border:none;
-	background:#F44336;
-	width:40px;
-	height:40px;
-	color: white;
-	font-size: 24px;
-	line-height: 24px;
-}
-
-#cookiePopup{
-	position:absolute;
-	background:black;
-	top:50%;
-	left:50%;
-	padding:20px;
-	border-radius: 30px;
-	width:230px;
-	height:230px;
-	margin-top:-115px;
-	margin-left:-115px;
-	color:white;
-}
-
-#cookiePopup > div{
-	margin-top:40px;
-	text-align: center;
-}
-
+  margin: 0;
+  padding: 10px 10px 10px 40px;
+}
+nav a {
+  color: black;
+  text-decoration: none;
+}
+h2 {
+  margin-bottom: 10px;
+}
+h2 a {
+  color: inherit;
+}
+h3 {
+  margin-bottom: 10px;
+}
+h3 :first-child {
+  margin-top: 0px;
+}
+hr {
+  border: 1px solid #eeeeee;
+}
+table {
+  border-collapse: collapse;
+}
+table input[type=text],
+table textarea {
+  width: 100%;
+}
+th {
+  text-align: left;
+}
+td,
+th {
+  padding: 0 10px 5px 0;
+  vertical-align: top;
+}
+form button,
+form input[type=submit] {
+  border: none;
+  background: none;
+}
+form button:hover,
+form input[type=submit]:hover {
+  background: #eeeeee;
+}
+button:hover {
+  cursor: pointer;
+  cursor: hand;
+}
+img {
+  max-width: 100%;
+}
+p:first-child {
+  margin-top: 0;
+}
+#menu {
+  background: #fafafa;
+  width: 280px;
+  left: 0;
+  position: fixed;
+  height: 100%;
+  box-shadow: -2px 0px 0px 0px #eeeeee inset;
+  z-index: 400;
+  overflow-x: hidden;
+}
+#menu .header {
+  z-index: 401;
+}
+#menu-button {
+  display: none;
+}
+#nav-container {
+  overflow: auto;
+  width: 100%;
+}
+#main {
+  padding-left: 280px;
+  padding-top: 64px;
+}
+#main > * {
+  padding-left: 20px !important;
+}
+#main-header {
+  position: fixed;
+  padding-left: 280px;
+  left: 0;
+  right: 0;
+  z-index: 1;
+}
+#main-header .header > * {
+  padding-left: 20px !important;
+}
+#content {
+  padding: 20px;
+  margin-bottom: 60px;
+}
+#buttons {
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  left: 280px;
+  vertical-align: bottom;
+}
+#buttons > table {
+  width: 100%;
+}
+#buttons > table tr > td {
+  vertical-align: bottom;
+  padding: 0;
+}
+#buttons > table tr > td:last-child {
+  text-align: right;
+}
+#buttons > table tr > td:not(:first-child) {
+  margin-top: 20px;
+}
+#buttons button {
+  border-radius: 50%;
+  display: inline-block;
+  text-align: center;
+  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.25);
+  vertical-align: middle;
+  border: none;
+  background: #00e676;
+  width: 40px;
+  height: 40px;
+  color: white;
+  font-size: 24px;
+  line-height: 24px;
+}
+#cookiePopup {
+  position: absolute;
+  background: black;
+  top: 50%;
+  left: 50%;
+  padding: 20px;
+  border-radius: 30px;
+  width: 230px;
+  height: 230px;
+  margin-top: -115px;
+  margin-left: -115px;
+  color: white;
+}
+#cookiePopup > div {
+  margin-top: 40px;
+  text-align: center;
+}
 .header {
-	height:64px;
-	background:#F44336;
-	color:white;
-	white-space:nowrap;
-	padding:0 !important;
-	overflow: hidden;
-	box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.8);
-}
-
-.header>*{
-	line-height:64px;
-	font-size:24px;
-	font-weight:400;
-	padding-left: 10px;
-	white-space: nowrap;
-	display: inline;
-	vertical-align: middle;
-}
-
-.header>h2>span{
-	display: inline-block;
-}
-
-.header>img{
-	height:50%;
-}
-
-.header span{
-	display: inline-block;
-}
-
-.header span:not(:first-child):before{
-	margin:2px 10px 0 10px;
-	width:6px;
-	float:left;
-	height:62px;
-	background: url("/images/chevron.png") no-repeat scroll right center / contain  rgba(0, 0, 0, 0);
-	content:"";
-}
-
-.circle{
-	border-radius: 50%;
-	display: inline-block;
-	text-align: center;
-	vertical-align: middle;
-}
-
-.go, .expand{
-	display:none;
-	float:right;
-}
-
-.backdrop{
-	background: rgba(0,0,0,0.5);
-	width: 100%;
-	height:100%;
-	position:fixed;
-	top:0;
-	left:0;
-	z-index:100;
-	display:none;
-}
-
-.errors{
-	background: url(/images/error.svg) no-repeat scroll 10px 10px #424242;
-	margin:-20px;
-	margin-bottom: 20px;
-	padding:10px;
-	padding-left:40px;
-	color:#fff;
-}
-
-.errors ul{
-	margin: 0;
-	list-style: square;
-}
-
-.row{
-	width:100%;
-	clear:both;
-}
-
-.row>.col {
-	width:100%;
-	float:left;
-}
-
-.row.col-lg-1>.col{
-	width:100%;
-}
-
-.row.col-lg-2>.col{
-	width:50%;
-}
-
-.row.col-lg-3>.col{
-	width:33.3333%;
-}
-
-.row.col-lg-4>.col{
-	width:25%;
-}
-
-.row.col-md-1>.col{
-	width:100%;
-}
-
-.row.col-md-2>.col{
-	width:50%;
-}
-
-.row.col-md-3>.col{
-	width:33.3333%;
-}
-
-.row.col-md-4>.col{
-	width:25%;
-}
-
-.row.col-sm-1>.col{
-	width:100%;
-}
-
-.row.col-sm-2>.col{
-	width:50%;
-}
-
-.row.col-sm-3>.col{
-	width:33.3333%;
-}
-
-.row.col-sm-4>.col{
-	width:25%;
-}
+  height: 64px;
+  background: #f44336;
+  color: white;
+  white-space: nowrap;
+  padding: 0 !important;
+  overflow: hidden;
+  box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.8);
+}
+.header > * {
+  line-height: 64px;
+  font-size: 24px;
+  font-weight: 400;
+  padding-left: 10px;
+  white-space: nowrap;
+  display: inline;
+  vertical-align: middle;
+}
+.header > h2 > span {
+  display: inline-block;
+}
+.header > img {
+  height: 50%;
+}
+.header span {
+  display: inline-block;
+}
+.header span:not(:first-child):before {
+  margin: 2px 10px 0 10px;
+  width: 6px;
+  float: left;
+  height: 62px;
+  background: url("/images/chevron.png") no-repeat scroll right center / contain rgba(0, 0, 0, 0);
+  content: "";
+}
+.circle {
+  border-radius: 50%;
+  display: inline-block;
+  text-align: center;
+  vertical-align: middle;
+}
+.go,
+.expand {
+  display: none;
+  float: right;
+}
+.backdrop {
+  background: rgba(0, 0, 0, 0.5);
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  display: none;
+}
+.errors {
+  background: url(/images/error.svg) no-repeat scroll 10px 10px #424242;
+  margin: -20px;
+  margin-bottom: 20px;
+  padding: 10px;
+  padding-left: 40px;
+  color: #fff;
+}
+.errors ul {
+  margin: 0;
+  list-style: square;
+}
+.row {
+  width: 100%;
+  clear: both;
+}
+.row > .col {
+  width: 100%;
+  float: left;
+}
+.row .col-lg-1 > .col {
+  width: 100%;
+}
+.row .col-lg-2 > .col {
+  width: 50%;
+}
+.row .col-lg-3 > .col {
+  width: 33.3333%;
+}
+.row .col-lg-4 > .col {
+  width: 25%;
+}
+.row .col-md-1 > .col {
+  width: 100%;
+}
+.row .col-md-2 > .col {
+  width: 50%;
+}
+.row .col-md-3 > .col {
+  width: 33.3333%;
+}
+.row .col-md-4 > .col {
+  width: 25%;
+}
+.row .col-sm-1 > .col {
+  width: 100%;
+}
+.row .col-sm-2 > .col {
+  width: 50%;
+}
+.row .col-sm-3 > .col {
+  width: 33.3333%;
+}
+.row .col-sm-4 > .col {
+  width: 25%;
+}

less/blog.less

@@ -0,0 +1,45 @@
+@import "colours.less";
+
+.code{
+	border:3px solid @control;
+	background: @control2;
+	border-radius:4px;
+	padding:4px;
+	margin:0;
+	overflow:auto;
+
+	ol{
+		list-style-position: inside;
+		padding:0;
+		margin:0;
+	}
+	
+	li{
+		list-style-position: inside;
+		background:@control;
+
+		>div{
+			display:inline;
+		}
+		
+		&:nth-child(2n){
+			background:@control2;
+		}
+	}
+}
+
+.image{
+	padding:5px;
+	background:@control2;
+	display:inline-block;
+	text-align: center;
+	max-width: 100%;
+	
+	img{
+		display:block;
+	}
+	
+	span{
+		font-size: 0.8em;
+	}
+}

less/colours.less

@@ -0,0 +1,278 @@
+@Red-50:#ffebee;
+@Red-100:#ffcdd2;
+@Red-200:#ef9a9a;
+@Red-300:#e57373;
+@Red-400:#ef5350;
+@Red-500:#f44336;
+@Red-600:#e53935;
+@Red-700:#d32f2f;
+@Red-800:#c62828;
+@Red-900:#b71c1c;
+@Red-A100:#ff8a80;
+@Red-A200:#ff5252;
+@Red-A400:#ff1744;
+@Red-A700:#d50000;
+
+@Pink-50:#fce4ec;
+@Pink-100:#f8bbd0;
+@Pink-200:#f48fb1;
+@Pink-300:#f06292;
+@Pink-400:#ec407a;
+@Pink-500:#e91e63;
+@Pink-600:#d81b60;
+@Pink-700:#c2185b;
+@Pink-800:#ad1457;
+@Pink-900:#880e4f;
+@Pink-A100:#ff80ab;
+@Pink-A200:#ff4081;
+@Pink-A400:#f50057;
+@Pink-A700:#c51162;
+
+@Purple-50:#f3e5f5;
+@Purple-100:#e1bee7;
+@Purple-200:#ce93d8;
+@Purple-300:#ba68c8;
+@Purple-400:#ab47bc;
+@Purple-500:#9c27b0;
+@Purple-600:#8e24aa;
+@Purple-700:#7b1fa2;
+@Purple-800:#6a1b9a;
+@Purple-900:#4a148c;
+@Purple-A100:#ea80fc;
+@Purple-A200:#e040fb;
+@Purple-A400:#d500f9;
+@Purple-A700:#aa00ff;
+
+@DeepPurple-50:#ede7f6;
+@DeepPurple-50100:#d1c4e9;
+@DeepPurple-50200:#b39ddb;
+@DeepPurple-50300:#9575cd;
+@DeepPurple-50400:#7e57c2;
+@DeepPurple-50500:#673ab7;
+@DeepPurple-50600:#5e35b1;
+@DeepPurple-50700:#512da8;
+@DeepPurple-50800:#4527a0;
+@DeepPurple-50900:#311b92;
+@DeepPurple-50A100:#b388ff;
+@DeepPurple-50A200:#7c4dff;
+@DeepPurple-50A400:#651fff;
+@DeepPurple-50A700:#6200ea;
+
+@Indigo-50:#e8eaf6;
+@Indigo-100:#c5cae9;
+@Indigo-200:#9fa8da;
+@Indigo-300:#7986cb;
+@Indigo-400:#5c6bc0;
+@Indigo-500:#3f51b5;
+@Indigo-600:#3949ab;
+@Indigo-700:#303f9f;
+@Indigo-800:#283593;
+@Indigo-900:#1a237e;
+@Indigo-A100:#8c9eff;
+@Indigo-A200:#536dfe;
+@Indigo-A400:#3d5afe;
+@Indigo-A700:#304ffe;
+
+@Blue-50:#e3f2fd;
+@Blue-100:#bbdefb;
+@Blue-200:#90caf9;
+@Blue-300:#64b5f6;
+@Blue-400:#42a5f5;
+@Blue-500:#2196f3;
+@Blue-600:#1e88e5;
+@Blue-700:#1976d2;
+@Blue-800:#1565c0;
+@Blue-900:#0d47a1;
+@Blue-A100:#82b1ff;
+@Blue-A200:#448aff;
+@Blue-A400:#2979ff;
+@Blue-A700:#2962ff;
+
+@LightBlue-50:#e1f5fe;
+@LightBlue-100:#b3e5fc;
+@LightBlue-200:#81d4fa;
+@LightBlue-300:#4fc3f7;
+@LightBlue-400:#29b6f6;
+@LightBlue-500:#03a9f4;
+@LightBlue-600:#039be5;
+@LightBlue-700:#0288d1;
+@LightBlue-800:#0277bd;
+@LightBlue-900:#01579b;
+@LightBlue-A100:#80d8ff;
+@LightBlue-A200:#40c4ff;
+@LightBlue-A400:#00b0ff;
+@LightBlue-A700:#0091ea;
+
+@Cyan-50:#e0f7fa;
+@Cyan-100:#b2ebf2;
+@Cyan-200:#80deea;
+@Cyan-300:#4dd0e1;
+@Cyan-400:#26c6da;
+@Cyan-500:#00bcd4;
+@Cyan-600:#00acc1;
+@Cyan-700:#0097a7;
+@Cyan-800:#00838f;
+@Cyan-900:#006064;
+@Cyan-A100:#84ffff;
+@Cyan-A200:#18ffff;
+@Cyan-A400:#00e5ff;
+@Cyan-A700:#00b8d4;
+
+@Teal-50:#e0f2f1;
+@Teal-100:#b2dfdb;
+@Teal-200:#80cbc4;
+@Teal-300:#4db6ac;
+@Teal-400:#26a69a;
+@Teal-500:#009688;
+@Teal-600:#00897b;
+@Teal-700:#00796b;
+@Teal-800:#00695c;
+@Teal-900:#004d40;
+@Teal-A100:#a7ffeb;
+@Teal-A200:#64ffda;
+@Teal-A400:#1de9b6;
+@Teal-A700:#00bfa5;
+
+@Green-50:#e8f5e9;
+@Green-100:#c8e6c9;
+@Green-200:#a5d6a7;
+@Green-300:#81c784;
+@Green-400:#66bb6a;
+@Green-500:#4caf50;
+@Green-600:#43a047;
+@Green-700:#388e3c;
+@Green-800:#2e7d32;
+@Green-900:#1b5e20;
+@Green-A100:#b9f6ca;
+@Green-A200:#69f0ae;
+@Green-A400:#00e676;
+@Green-A700:#00c853;
+
+@LightGreen-50:#f1f8e9;
+@LightGreen-100:#dcedc8;
+@LightGreen-200:#c5e1a5;
+@LightGreen-300:#aed581;
+@LightGreen-400:#9ccc65;
+@LightGreen-500:#8bc34a;
+@LightGreen-600:#7cb342;
+@LightGreen-700:#689f38;
+@LightGreen-800:#558b2f;
+@LightGreen-900:#33691e;
+@LightGreen-A100:#ccff90;
+@LightGreen-A200:#b2ff59;
+@LightGreen-A400:#76ff03;
+@LightGreen-A700:#64dd17;
+
+@Lime-50:#f9fbe7;
+@Lime-100:#f0f4c3;
+@Lime-200:#e6ee9c;
+@Lime-300:#dce775;
+@Lime-400:#d4e157;
+@Lime-500:#cddc39;
+@Lime-600:#c0ca33;
+@Lime-700:#afb42b;
+@Lime-800:#9e9d24;
+@Lime-900:#827717;
+@Lime-A100:#f4ff81;
+@Lime-A200:#eeff41;
+@Lime-A400:#c6ff00;
+@Lime-A700:#aeea00;
+
+@Yellow-50:#fffde7;
+@Yellow-100:#fff9c4;
+@Yellow-200:#fff59d;
+@Yellow-300:#fff176;
+@Yellow-400:#ffee58;
+@Yellow-500:#ffeb3b;
+@Yellow-600:#fdd835;
+@Yellow-700:#fbc02d;
+@Yellow-800:#f9a825;
+@Yellow-900:#f57f17;
+@Yellow-A100:#ffff8d;
+@Yellow-A200:#ffff00;
+@Yellow-A400:#ffea00;
+@Yellow-A700:#ffd600;
+
+@Amber-50:#fff8e1;
+@Amber-100:#ffecb3;
+@Amber-200:#ffe082;
+@Amber-300:#ffd54f;
+@Amber-400:#ffca28;
+@Amber-500:#ffc107;
+@Amber-600:#ffb300;
+@Amber-700:#ffa000;
+@Amber-800:#ff8f00;
+@Amber-900:#ff6f00;
+@Amber-A100:#ffe57f;
+@Amber-A200:#ffd740;
+@Amber-A400:#ffc400;
+@Amber-A700:#ffab00;
+
+@Orange-50:#fff3e0;
+@Orange-100:#ffe0b2;
+@Orange-200:#ffcc80;
+@Orange-300:#ffb74d;
+@Orange-400:#ffa726;
+@Orange-500:#ff9800;
+@Orange-600:#fb8c00;
+@Orange-700:#f57c00;
+@Orange-800:#ef6c00;
+@Orange-900:#e65100;
+@Orange-A100:#ffd180;
+@Orange-A200:#ffab40;
+@Orange-A400:#ff9100;
+@Orange-A700:#ff6d00;
+
+@DeepOrange-50:#fbe9e7;
+@DeepOrange-100:#ffccbc;
+@DeepOrange-200:#ffab91;
+@DeepOrange-300:#ff8a65;
+@DeepOrange-400:#ff7043;
+@DeepOrange-500:#ff5722;
+@DeepOrange-600:#f4511e;
+@DeepOrange-700:#e64a19;
+@DeepOrange-800:#d84315;
+@DeepOrange-900:#bf360c;
+@DeepOrange-A100:#ff9e80;
+@DeepOrange-A200:#ff6e40;
+@DeepOrange-A400:#ff3d00;
+@DeepOrange-A700:#dd2c00;
+
+@Brown-50:#efebe9;
+@Brown-100:#d7ccc8;
+@Brown-200:#bcaaa4;
+@Brown-300:#a1887f;
+@Brown-400:#8d6e63;
+@Brown-500:#795548;
+@Brown-600:#6d4c41;
+@Brown-700:#5d4037;
+@Brown-800:#4e342e;
+@Brown-900:#3e2723;
+
+@Grey-50:#fafafa;
+@Grey-100:#f5f5f5;
+@Grey-200:#eeeeee;
+@Grey-300:#e0e0e0;
+@Grey-400:#bdbdbd;
+@Grey-500:#9e9e9e;
+@Grey-600:#757575;
+@Grey-700:#616161;
+@Grey-800:#424242;
+@Grey-900:#212121;
+
+@BlueGrey-50:#eceff1;
+@BlueGrey-100:#cfd8dc;
+@BlueGrey-200:#b0bec5;
+@BlueGrey-300:#90a4ae;
+@BlueGrey-400:#78909c;
+@BlueGrey-500:#607d8b;
+@BlueGrey-600:#546e7a;
+@BlueGrey-700:#455a64;
+@BlueGrey-800:#37474f;
+@BlueGrey-900:#263238;
+
+@background:@Grey-50;
+@primary:@Red-500;
+@accent:@LimeGreen-A400;
+@control:@Grey-200;
+@control2:@Grey-300;

less/style-med.less

@@ -0,0 +1,35 @@
+#menu{
+	display: none;
+	box-shadow: none;
+}
+
+#main, #main-header{
+	padding-left:0;
+}
+
+#menu-button{
+	cursor: pointer;
+	display: inline-block;
+	max-height: 100%;
+}
+
+#buttons{
+	left:0;
+	
+	button{
+		width:60px;
+		height:60px;
+	}
+}
+
+.row{
+	
+	>.col {
+		width:100%;
+		float:left;
+	}
+
+	&.col-lg-1>.col, &.col-lg-2>.col, &.col-lg-3>.col, &.col-lg-4>.col{
+		width: 100%;
+	}
+}

less/style-small.less

@@ -0,0 +1,48 @@
+dl{
+	margin-top: 12px;
+	margin-bottom: 12px;
+}
+
+#main{
+	padding-top: 48px;
+}
+
+#main-header{
+	.header {
+		
+		span:not(:last-child){
+			display:none;
+		}
+
+		>*{
+			padding-left: 15px !important;
+		}
+	}
+}
+
+#nav-container{
+	top:48px;
+}
+
+.header{
+	height: 48px;
+	
+	> *{
+		line-height: 48px;
+		font-size:18px;
+	}
+	span:not(:first-child):before{
+		content:none;
+	}
+}
+
+.row{
+	>.col {
+		width:100%;
+		float:left;
+	}
+
+	&.col-md-1>.col, &.col-md-2>.col, &.col-md-3>.col, &.col-md-4>.col{
+		width: 100%;
+	}
+}

less/style.less

@@ -0,0 +1,360 @@
+@import "colours.less";
+
+@import url(http://fonts.googleapis.com/css?family=Roboto);
+
+* {
+    box-sizing: border-box;
+}
+
+html,body,h1,h2, button {
+	padding:0;
+	margin:0;
+}
+
+html, button, input, textarea{
+	font-family: 'Roboto', sans-serif;
+}
+
+body{
+	width:100%;
+	background:@background;
+}
+
+a {
+	color:@accent;
+}
+
+nav {
+	img{
+		vertical-align: middle;
+		margin-right: 5px;
+	}
+
+	dt, dd{
+		&:hover, &.active{
+		   background: @control;
+		   cursor: pointer;
+		   cursor: hand;
+		}
+	}
+
+	dt {
+		padding: 10px 10px;
+	}
+
+	dd {
+		margin: 0;
+		padding: 10px 10px 10px 40px;
+	}
+
+	a{
+		color: black;
+		text-decoration: none;
+	}
+}
+
+h2{
+	margin-bottom:10px;
+	a{
+		color:inherit;
+	}
+}
+
+h3{
+	margin-bottom: 10px;
+	
+	:first-child{
+		margin-top: 0px;
+	}
+}
+
+hr{
+	border: 1px solid @control;
+}
+
+table{
+	border-collapse: collapse;
+	
+	input[type=text], textarea{
+		width: 100%;
+	}
+}
+
+th{
+	text-align: left;
+}
+
+td, th{
+	padding:0 10px 5px 0;
+	vertical-align: top;
+}
+
+form{
+	button, input[type=submit]{
+		border:none;
+		background:none;
+		
+		&:hover{
+			background: @control;
+		}
+	}
+}
+
+button:hover{
+	cursor: pointer;
+	cursor: hand;
+}
+
+img{
+	max-width: 100%;
+}
+
+p:first-child{
+	margin-top: 0;
+}
+
+#menu{
+	background:@background;
+	width:280px;
+	left:0;
+	position:fixed;
+	height:100%;
+	box-shadow: -2px 0px 0px 0px @control inset;
+	z-index: 400;
+	overflow-x: hidden;
+	
+	.header{
+		z-index: 401;
+	}
+}
+
+#menu-button{
+	display:none;
+}
+
+#nav-container{
+	overflow: auto;
+	width:100%;
+}
+
+#main{
+	padding-left:280px;
+	padding-top:64px;
+	
+	>*{
+		padding-left:20px !important;
+	}
+}
+
+#main-header{
+	position: fixed;
+	padding-left: 280px;
+	left:0;
+	right:0;
+	z-index: 1;
+
+	.header>*{
+		padding-left: 20px !important;
+	}
+}
+
+#content{
+	padding:20px;
+	margin-bottom:60px;
+}
+
+#buttons{
+	position:fixed;
+	bottom: 20px;
+	right: 20px;
+	left:280px;
+	vertical-align: bottom;
+
+	>table{
+		width: 100%;
+
+		tr>td{
+			vertical-align: bottom;
+			padding:0;
+			
+			&:last-child{
+				text-align: right;
+			}
+			
+			&:not(:first-child){
+				margin-top:20px;
+			}
+		}
+	}
+	
+	button{
+		border-radius: 50%;
+		display: inline-block;
+		text-align: center;
+		box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.25);
+		vertical-align: middle;
+		border:none;
+		background:@accent;
+		width:40px;
+		height:40px;
+		color: white;
+		font-size: 24px;
+		line-height: 24px;
+	}
+}
+
+#cookiePopup{
+	position:absolute;
+	background:black;
+	top:50%;
+	left:50%;
+	padding:20px;
+	border-radius: 30px;
+	width:230px;
+	height:230px;
+	margin-top:-115px;
+	margin-left:-115px;
+	color:white;
+	
+	> div{
+		margin-top:40px;
+		text-align: center;
+	}
+}
+
+.header {
+	height:64px;
+	background:@primary;
+	color:white;
+	white-space:nowrap;
+	padding:0 !important;
+	overflow: hidden;
+	box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.8);
+	
+	>*{
+		line-height:64px;
+		font-size:24px;
+		font-weight:400;
+		padding-left: 10px;
+		white-space: nowrap;
+		display: inline;
+		vertical-align: middle;
+	}
+
+
+	>h2>span{
+		display: inline-block;
+	}
+
+	>img{
+		height:50%;
+	}
+
+	span{
+		display: inline-block;
+		
+		&:not(:first-child):before{
+			margin:2px 10px 0 10px;
+			width:6px;
+			float:left;
+			height:62px;
+			background: url("/images/chevron.png") no-repeat scroll right center / contain  rgba(0, 0, 0, 0);
+			content:"";
+		}
+	}
+}
+
+.circle{
+	border-radius: 50%;
+	display: inline-block;
+	text-align: center;
+	vertical-align: middle;
+}
+
+.go, .expand{
+	display:none;
+	float:right;
+}
+
+.backdrop{
+	background: rgba(0,0,0,0.5);
+	width: 100%;
+	height:100%;
+	position:fixed;
+	top:0;
+	left:0;
+	z-index:100;
+	display:none;
+}
+
+.errors{
+	background: url(/images/error.svg) no-repeat scroll 10px 10px #424242;
+	margin:-20px;
+	margin-bottom: 20px;
+	padding:10px;
+	padding-left:40px;
+	color:#fff;
+	
+	ul{
+		margin: 0;
+		list-style: square;
+	}
+}
+
+.row{
+	width:100%;
+	clear:both;
+
+	>.col {
+		width:100%;
+		float:left;
+	}
+
+	.col-lg-1>.col{
+		width:100%;
+	}
+
+	.col-lg-2>.col{
+		width:50%;
+	}
+
+	.col-lg-3>.col{
+		width:33.3333%;
+	}
+
+	.col-lg-4>.col{
+		width:25%;
+	}
+
+	.col-md-1>.col{
+		width:100%;
+	}
+
+	.col-md-2>.col{
+		width:50%;
+	}
+
+	.col-md-3>.col{
+		width:33.3333%;
+	}
+
+	.col-md-4>.col{
+		width:25%;
+	}
+
+	.col-sm-1>.col{
+		width:100%;
+	}
+
+	.col-sm-2>.col{
+		width:50%;
+	}
+
+	.col-sm-3>.col{
+		width:33.3333%;
+	}
+
+	.col-sm-4>.col{
+		width:25%;
+	}
+}

nbproject/project.properties

@@ -1,23 +1,30 @@
-auxiliary.org-netbeans-modules-php-phpunit.bootstrap_2e_create_2e_tests=false
-auxiliary.org-netbeans-modules-php-phpunit.bootstrap_2e_enabled=true
-auxiliary.org-netbeans-modules-php-phpunit.bootstrap_2e_path=Tests/bootstrap.php
-auxiliary.org-netbeans-modules-php-phpunit.configuration_2e_enabled=false
-auxiliary.org-netbeans-modules-php-phpunit.configuration_2e_path=
-auxiliary.org-netbeans-modules-php-phpunit.customSuite_2e_enabled=false
-auxiliary.org-netbeans-modules-php-phpunit.customSuite_2e_path=
-auxiliary.org-netbeans-modules-php-phpunit.phpUnit_2e_enabled=false
-auxiliary.org-netbeans-modules-php-phpunit.phpUnit_2e_path=
-auxiliary.org-netbeans-modules-php-phpunit.test_2e_groups_2e_ask=false
-auxiliary.org-netbeans-modules-php-phpunit.test_2e_run_2e_all=false
-browser.reload.on.save=true
-include.path=${php.global.include.path}
-php.version=PHP_54
-project.license=default
-project.licensePath=./nbproject/licenseheader.txt
-source.encoding=UTF-8
-src.dir=.
-tags.asp=false
-tags.short=false
-test.src.dir=Tests
-testing.providers=PhpUnit
-web.root=.
+auxiliary.org-netbeans-modules-css-prep.less_2e_compiler_2e_options=
+auxiliary.org-netbeans-modules-css-prep.less_2e_configured=true
+auxiliary.org-netbeans-modules-css-prep.less_2e_enabled=true
+auxiliary.org-netbeans-modules-css-prep.less_2e_mappings=/less:/css
+auxiliary.org-netbeans-modules-css-prep.sass_2e_compiler_2e_options=
+auxiliary.org-netbeans-modules-css-prep.sass_2e_enabled=false
+auxiliary.org-netbeans-modules-css-prep.sass_2e_mappings=/scss:/css
+auxiliary.org-netbeans-modules-php-phpunit.bootstrap_2e_create_2e_tests=false
+auxiliary.org-netbeans-modules-php-phpunit.bootstrap_2e_enabled=true
+auxiliary.org-netbeans-modules-php-phpunit.bootstrap_2e_path=Tests/bootstrap.php
+auxiliary.org-netbeans-modules-php-phpunit.configuration_2e_enabled=false
+auxiliary.org-netbeans-modules-php-phpunit.configuration_2e_path=
+auxiliary.org-netbeans-modules-php-phpunit.customSuite_2e_enabled=false
+auxiliary.org-netbeans-modules-php-phpunit.customSuite_2e_path=
+auxiliary.org-netbeans-modules-php-phpunit.phpUnit_2e_enabled=false
+auxiliary.org-netbeans-modules-php-phpunit.phpUnit_2e_path=
+auxiliary.org-netbeans-modules-php-phpunit.test_2e_groups_2e_ask=false
+auxiliary.org-netbeans-modules-php-phpunit.test_2e_run_2e_all=false
+browser.reload.on.save=true
+include.path=${php.global.include.path}
+php.version=PHP_54
+project.license=default
+project.licensePath=./nbproject/licenseheader.txt
+source.encoding=UTF-8
+src.dir=.
+tags.asp=false
+tags.short=false
+test.src.dir=Tests
+testing.providers=PhpUnit
+web.root=.

template.php

@@ -20,23 +20,21 @@ function FormatURI(URI $uri, $base=""){
 		</title>
 		<meta charset="UTF-8">
 		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
+		<link href="/css/style.css" rel="stylesheet" />
+		<link href="/css/style-med.css" media="(max-width:1023px)" rel="stylesheet" />
+		<link href="/css/style-small.css" media="(max-width:680px)" rel="stylesheet" />
 		<style type="text/css">
-			<?= file_get_contents("css/style.css")?>
 			{@CSS}
 		</style>
 		<style media="(max-width:1023px)">
-			<?= file_get_contents("css/style-med.css")?>
 			{@CSSMed}
 		</style>
 		<style media="(max-width:680px)">
-			<?= file_get_contents("css/style-small.css")?>
 			{@CSSSmall}
 		</style>
 		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 		<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
-		<script>
-			<?= file_get_contents("javascript.js"); ?>
-		</script>
+		<script src="javascript.js"></script>
 		<script type="text/javascript">
 			{@JavaScript}
 		</script>