Caching + Edit Mode UI

client/scss/app.scss

@@ -1,13 +1,20 @@
 //@import './layout/_fonts';
 @import './layout/_base';
 
-$warning: #f68b39;
+$red: #E53935;
+$orange: #FB8C00;
+$blue: #039BE5;
+$turquoise: #00ACC1;
+$green: #7CB342;
+
+$warning: $orange;
 
 @import 'bulma';
 @import './libs/twemoji-awesome';
 @import './libs/animate.min.css';
 
 @import './components/_alerts';
+@import './components/_editor';
 
 @import './layout/_header';
 @import './layout/_footer';

client/scss/components/_editor.scss

@@ -0,0 +1,8 @@
+
+.editor-toolbar i.separator {
+	margin-top: 5px;
+}
+
+.editor-toolbar .fa {
+	font-size: 14px;
+}

client/scss/layout/_content.scss

@@ -6,6 +6,10 @@
 
 }
 
+.section.is-small {
+	padding: 20px 20px;
+}
+
 .mkcontent {
 
 	h1 {
@@ -26,12 +30,31 @@
 
 	}
 
-	.hljs {
+	a.external-link {
+		position: relative;
+		padding-left: 20px;
+
+		&:before {
+			content: "\f08e";
+			font-family: FontAwesome;
+			font-style: normal;
+			font-weight: normal;
+			text-decoration: inherit;
+			color: $grey;
+			font-size: 14px;
+			position: absolute;
+			top: 0;
+			left: 0;
+		}
+
+	}
+
+	pre {
 		padding: 0;
-		border-radius: 3px;
 
 		> code {
 			box-shadow: inset 0 0 5px 0 $grey-light;
+			border-radius: 5px;
 		}
 
 	}
@@ -54,6 +77,10 @@
 		color: $grey-dark;
 	}
 
+	.twa {
+		font-size: 120%;
+	}
+
 }
 
 .content a:not(.button):visited {

client/scss/layout/_header.scss

@@ -0,0 +1,5 @@
+
+h2.nav-item {
+	font-size: 150%;
+	color: $orange;
+}