Initial public commit

etc/1-globals/typo-code/typo-code.html.php

@@ -0,0 +1,21 @@
+<div class="preview-canvas text">
+	<h1>Code highlighting</h1>
+	
+	<p>Lorem ipsum dolor sit amet, <code>$page->text()->kt()</code> elit, sed do eiusmod
+	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+	quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+	
+	<pre><code class="language-js"><?= f::read(kirby()->roots()->index() . DS . 'gulpfile.js') ?></code></pre>
+	
+	<p>Lorem ipsum dolor sit amet, <code>$page->text()->kt()</code> elit, sed do eiusmod
+	tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
+	quis nostrud exercitation ullamco <kbd>&#8984; Cmd</kbd> + <kbd>&#8679; Shift</kbd> + <kbd>3</kbd>
+	consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
+	cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+	proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+	
+	<pre><code class="language-markdown"><?= f::read(kirby()->roots()->index() . DS . 'readme.md') ?></code></pre>
+</div>

etc/1-globals/typo-code/typo-code.js

@@ -0,0 +1,15 @@
+//=require prismjs/prism.js
+//=require prismjs/plugins/autoloader/prism-autoloader.js
+
+(function(app) {
+	'use strict';
+	
+	// Set autoloading path of the language definitions
+	Prism.plugins.autoloader.languages_path = '/assets/js/prism/';
+	
+	// Re-run Prism.js on page change
+	app.on('ajax.after', function(target, data) {
+		console.info('Highlighting code blocks on new page');
+		Prism.highlightAll();
+	});
+})(window.app = window.app || {});

etc/1-globals/typo-code/typo-code.scss

@@ -0,0 +1,120 @@
+// @font-face definitions
+@include -cdd-font-face('Input Mono Narrow', 'input-mono-narrow-light', 300, normal);
+
+pre, code, kbd {
+	font-family: "Input Mono Narrow", Consolas, Monaco, "Andale Mono", monospace;
+	font-weight: 300;
+	font-size: -cdd-rem(16);
+	word-spacing: 0;
+}
+
+pre {
+	tab-size: 4;
+	hyphens: none;
+	line-height: 1.5;
+	
+	padding: 1.5em;
+	border-radius: 0.3em;
+	
+	overflow: auto;
+	max-height: 30em;
+	margin-bottom: 1em;
+}
+
+:not(pre) > code, kbd {
+	padding: 0.2em 0.3em 0.1em;
+	
+	border-radius: 0.3em;
+	white-space: normal;
+}
+kbd {
+	padding: 0.4em 0.5em 0.15em;
+	
+	background: $color--passive;
+	box-shadow: 0 2px 0 $color--passive-dark;
+}
+
+/**
+ * okaidia theme for JavaScript, CSS and HTML
+ * Loosely based on Monokai textmate theme by http://www.monokai.nl/
+ * @author ocodia
+ * 
+ * Stripped from layout styling and other font styles
+ */
+
+code,
+pre {
+	color: #f8f8f2;
+	background: none;
+	text-shadow: 0 1px rgba(0, 0, 0, 0.3);
+}
+
+:not(pre) > code,
+pre {
+	background: #272822;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+	color: slategray;
+}
+
+.token.punctuation {
+	color: #f8f8f2;
+}
+
+.namespace {
+	opacity: .7;
+}
+
+.token.property,
+.token.tag,
+.token.constant,
+.token.symbol,
+.token.deleted {
+	color: #f92672;
+}
+
+.token.boolean,
+.token.number {
+	color: #ae81ff;
+}
+
+.token.selector,
+.token.attr-name,
+.token.string,
+.token.char,
+.token.builtin,
+.token.inserted {
+	color: #a6e22e;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+	color: #f8f8f2;
+}
+
+.token.atrule,
+.token.attr-value,
+.token.function {
+	color: #e6db74;
+}
+
+.token.keyword {
+	color: #66d9ef;
+}
+
+.token.regex,
+.token.important {
+	color: #fd971f;
+}
+
+.token.entity {
+	cursor: help;
+}