Version 1.2.19: Modularized Visual Editor

.gitignore

@@ -16,7 +16,7 @@ settings/settings.yaml
 settings/formdata.yaml
 settings/users
 system/vendor
+themes/learn
 tests
-themes/monograf
 zips
 build.php

cache/lastCache.txt

@@ -1 +1 @@
-1573496522
+1574576173

content/00-Welcome/00-Setup.md

@@ -1,6 +1,8 @@
-# Setup the System
+# Setup
 
-Typemil is a flat file cms that runs out of the box without a complicated installation process. You can create a user account with the [simple setup page](/setup) and then login to the author panel. In the author panel, you can configure your website, use plugins, choose a theme and edit your content.
+Congratulations! If you see this page, then the setup of the system has worked successfully!! You can now setup and configure your system, your themes and your plugins in the [settings-area](/tm/settings).
+
+Anyway, if you read this file in the source code and if you did not manage to setup the system successfully, then try the following.
 
 ## If it does not work
 

content/00-Welcome/01-Write-Content.md

@@ -1,30 +1,41 @@
 # Write Content
 
-Typemill is a simple Flat File Content Management System (CMS). We work hard to provide the best author experience with easy and intuitive authoring tools. But Typemill is still in early development and it is likely that not everything will work perfectly out of the box. If you miss something or if you have ideas for improvement, then let me know via [GitHub](https://github.com/typemill/typemill/issues).
+Typemill is a simple Flat File Content Management System (CMS). We (the community) work hard to provide the best author experience with easy and intuitive authoring tools. But Typemill is still in early development and it is likely that not everything will work perfectly out of the box. If you miss something or if you have ideas for improvements, then post a new issue on [GitHub](https://github.com/typemill/typemill/issues).
 
 ## The Navigation
 
 You can create, structure and reorder all pages with the navigation on the left. To structure your content, you can create new folders and files with the "add item" button. To reorder the pages, just drag an item and drop it wherever you want. Play around with it and you will notice, that it works pretty similar to the folder- and file-system of your laptop. And in fact, this is exactly what Typemill does in the background: It stores your content in files and folders on the server.
 
-However, there are some limitations when you try to reorder elements, for example, you cannot move a complete folder to another folder. Click on the question-mark at the top of the navigation for detailed informations.
+However, there are some limitations when you try to reorder elements. For example, you cannot move a complete folder to another folder. Click on the question-mark at the top of the navigation for detailed information.
 
 ## The Editor
 
-You can create and format your content with the Markdown syntax, that is similar to the markup syntax of wikipedia. If you are not familiar with Markdown, then please read the short [Markdown-tutorial](https://typemill.net/) in the documentation of Typemill. You can learn Markdown in less than 10 minutes and there is no easier and faster way to format your webpage. You will love it!
+You can create and format your content with the Markdown syntax, that is similar to the markup syntax of Wikipedia. If you are not familiar with Markdown, then please read the short [Markdown-tutorial](https://typemill.net/) in the documentation of Typemill. You can learn Markdown in less than 10 minutes and there is no easier and faster way to format your webpage. You will love it!
 
-Typemill provides two edit modes: The **raw mode** and the **visual mode**.  You can switch between the modes in the publish-bar at the bottom of each page. The **raw mode** is the most robust way to create your content, because you write raw markdown into a simple textarea. The **visual mode** is experimental right now. It uses blocks and transforms each content block into a html-preview immediately, so that you can directly see the formatted result.
+Typemill provides two edit modes: The **raw mode** and the **visual mode**.  You can switch between the modes in the publish-bar at the bottom of each page. The **raw mode** is the most robust way to create your content, because you write raw markdown into a simple textarea. The **visual mode** uses blocks and transforms each content block into a html-preview immediately. This means that you can directly see and check the formatted result.
 
-By default Typemill will use the raw mode. But you can change this behavior in the system settings and use the visual editor as default mode.
+By default Typemill will use the **visual mode**.
+
+* You can change the default mode in the system settings. 
+* You can also switch each format button on and off in the system settings.
 
 ## The Publish Bar
 
 The publish bar of Typemill is pretty intuitiv and sticks at the bottom of the screen so that you have always full control of the status of each page. Simply play around with it and you will quickly understand how it works. In short:
 
 * The green button "online" indicates, that your page is published and visible for your readers.
-* You can depublish a page by clicking the green button. The button turns grey with the label "offline" then.
-* With the red button "Publish" you can publish either a page that is offline or you can publish still unpublished changes.
+* You can depublish a page by clicking the green "online" button. The button turns grey with the label "offline" then.
+* With the green button "Publish" you can either publish a page that is offline or you can publish some unpublished changes of the page.
 * The publish-button is grey, if the page is online and if there are no unpublished changes.
-* With the red button "Save Draft" you can safe a draft. You can also work on a draft as long as you want while the old version of the page is still online.
 * All buttons will change in real time, so you can always exactly see what is going on.
-* To provide an easy status-overview of the whole website, Typemill marks all unpublished pages or changes red in the navigation on the left side.
+* To provide an easy status-overview of the whole website, Typemill marks all pages in the navigation on the left side as published (green), changed (orange) and unpublished (red).
+
+## Working with Drafts
+
+Ever tried to revise a published article in WordPress? Yes, it works, but if you click on "save", then all your changes are directly live. Typemill is much more flexible here and allows you to keep your original version live while you work on a **drafted Version** in the background. This is how Typemill handles it: 
+
+* In **visual mode**: Typemill stores your changes in a new draft automatically as soon as you save any content-block.
+* In **raw mode**: To store changes in a new draft, simply click on the "save draft"-button in the publish controller.
+* You can work on a draft as long as you want without changing the live version. Your changes go live if you click the button "publish".
+* In visual mode, you can also use the discard-button and go back to the published version.
 

content/00-Welcome/02-Get-Help.md

@@ -4,7 +4,7 @@ If you need any help, then please read the [documentation on typemill.net](https
 
 If you found a bug or if you have a question, then please open a new issue on [GitHub](https://github.com/typemill/typemill/issues).
 
-Typemill is open source and a one man project right now, so please understand that I cannot provide individual support.
+Typemill is open source and mostly a one man project right now, so please understand that I cannot provide individual support.
 
 Contributions, donations and feedbacks are always welcome.
 

content/00-Welcome/index.md

@@ -1,3 +1,4 @@
-# Welcome to Typemill
-
-Great that you give Typemill a try!! Typemill is a small open source cms and a project in work. You will probably miss some important features, but I am working hard to add everything that is needed for a handy and productive writing-system.
+# Welcome
+
+Great that you give Typemill a try!! Typemill is a small open source cms and a project in work. You will probably miss some important features, but I am working hard to add everything that is needed for a handy and productive writing-system.
+

plugins/math/math.php

@@ -33,7 +33,7 @@ class Math extends Plugin
 
 		if($mathSettings['tool'] == 'katex')
 		{
-			$this->addJS('/math/public/katex.min.js');
+			$this->addJS('/math/public/katex.min.js'); 
 			$this->addJS('/math/public/auto-render.min.js');
 			$this->addCSS('/math/public/katex.min.css');
 
@@ -43,5 +43,14 @@ class Math extends Plugin
 				$this->addInlineJs('renderMathInElement(document.body);');
 			}
 		}
+
+		# add math to the blox editor configuration
+
+		$this->addEditorJS('/math/public/math.js');
+		$this->addSvgSymbol('<symbol id="icon-omega" viewBox="0 0 32 32">
+			<title>omega</title>
+			<path d="M22 28h8l2-4v8h-12v-6.694c4.097-1.765 7-6.161 7-11.306 0-6.701-4.925-11.946-11-11.946s-11 5.245-11 11.946c0 5.144 2.903 9.541 7 11.306v6.694h-12v-8l2 4h8v-1.018c-5.863-2.077-10-7.106-10-12.982 0-7.732 7.163-14 16-14s16 6.268 16 14c0 5.875-4.137 10.905-10 12.982v1.018z"></path>
+			</symbol>');
 	}
+
 }

plugins/math/math.yaml

@@ -1,5 +1,5 @@
 name: Math
-version: 1.0.2
+version: 1.1.0
 description: Adds support for katex and mathjax.
 author: Sebastian Schürmanns
 homepage: https://mathjax.org/

plugins/math/public/math.js

@@ -0,0 +1,54 @@
+determiner.math = function(block,lines,firstChar,secondChar,thirdChar){
+	if( (firstChar == '\\' && secondChar == '[') || (firstChar == '$' && secondChar == '$') )
+	{
+		return "math-component";
+	}
+	return false;
+};
+
+bloxFormats.math = { label: '<svg class="icon icon-omega"><use xlink:href="#icon-omega"></use></svg>', title: 'Math', component: 'math-component' };
+
+formatConfig.push('math');
+
+const mathComponent = Vue.component('math-component', {
+	props: ['compmarkdown', 'disabled'],
+	template: '<div>' + 
+				'<input type="hidden" ref="markdown" :value="compmarkdown" :disabled="disabled" @input="updatemarkdown" />' +	
+				'<div class="contenttype"><svg class="icon icon-omega"><use xlink:href="#icon-omega"></use></svg></div>' +
+				'<textarea class="mdcontent" ref="markdown" v-model="mathblock" :disabled="disabled" @input="createmarkdown"></textarea>' + 
+				'</div>',
+	data: function(){
+		return {
+			mathblock: ''
+		}
+	},
+	mounted: function(){
+		this.$refs.markdown.focus();
+		if(this.compmarkdown)
+		{
+			var dollarMath = new RegExp(/^\$\$[\S\s]+\$\$$/m);
+			var bracketMath = new RegExp(/^\\\[[\S\s]+\\\]$/m);
+
+			if(dollarMath.test(this.compmarkdown) || bracketMath.test(this.compmarkdown))
+			{
+				var mathExpression = this.compmarkdown.substring(2,this.compmarkdown.length-2);
+				this.mathblock = mathExpression.trim(); 
+			}
+		}
+		this.$nextTick(function () {
+			autosize(document.querySelectorAll('textarea'));
+		});
+	},
+	methods: {
+		createmarkdown: function(event)
+		{
+			this.codeblock = event.target.value;
+			var codeblock = '$$\n' + event.target.value + '\n$$';
+			this.updatemarkdown(codeblock);
+		},
+		updatemarkdown: function(codeblock)
+		{
+			this.$emit('updatedMarkdown', codeblock);
+		},
+	},
+})

readme.md

@@ -1,4 +1,4 @@
- # About TYPEMILL
+# About TYPEMILL
 
 TYPEMILL is a small flat file cms created for editors and writers. It provides a author-friendly dashboard and a visual-block-editor for markdown based on vue.js. Use TYPEMILL for manuals, documentations, web-books and similar publications. The website http://typemill.net itself is an example for TYPEMILL.
 
@@ -83,7 +83,11 @@ TYPEMILL is published under MIT licence. Please check the licence of the include
 
 ## How to Contribute
 
-Typemill is still in an early stage and contributions are highly welcome. Here are some ideas for non-coder:
+Typemill is still in an early stage and contributions are highly welcome. 
+
+You can check the [roadmap for Typemill](https://github.com/typemill/typemill/issues/35) and scroll through the issues. I will mark issues in future that are easy to start with or where help is highly appreciated.
+
+Here are some contribution-ideas for non-coder:
 
 * Find bugs and errors (open a new issue on github for it).
 * Improve the documentation.
@@ -93,12 +97,11 @@ Typemill is still in an early stage and contributions are highly welcome. Here a
 Some ideas for devs (please fork this repository make your changes and create a pull request):
 
 * Fix a bug.
-* Create a theme.
-* Create a plugin.
-* Auto-update functionality for core system, plugins and themes.
-* Create a plugin and theme download page.
+* Create or port a theme, especially for documentations, knowlegde bases or web-books.
+* Create a fancy plugin.
+* An auto-update functionality for core system, plugins and themes is highly needed.
 * Improve the accessibility of html and css.
-* Implement an ACL for user roles and rights.
+* Implement user roles and rights with RBAC or ACL.
 
 For hints, questions, problems and support, please open up a new issue on GitHub.
 
@@ -107,3 +110,7 @@ For hints, questions, problems and support, please open up a new issue on GitHub
 This is an open source project. I love it and I spend about 20 hours a week on it (starting in 2017). There is no business model right now, but you can support this project with a donation or simply hire me for implementations.
 
 Donate: https://www.paypal.me/typemill
+
+## Follow
+
+Twitter: https://twitter.com/typemill

system/Assets.php

@@ -8,11 +8,14 @@ class Assets
 	
 	public function __construct($baseUrl)
 	{
-		$this->baseUrl		= $baseUrl;
-		$this->JS 			= array();
-		$this->CSS 			= array();
-		$this->inlineJS		= array();
-		$this->inlineCSS	= array();
+		$this->baseUrl			= $baseUrl;
+		$this->JS 				= array();
+		$this->CSS 				= array();
+		$this->inlineJS			= array();
+		$this->inlineCSS		= array();
+		$this->editorJS 		= array();
+		$this->editorInlineJS 	= array();
+		$this->svgSymbols		= array();
 	}
 	
 	public function addCSS($CSS)
@@ -75,6 +78,11 @@ class Assets
 		}
 	}
 
+	public function addSvgSymbol($symbol)
+	{
+		$this->svgSymbols[] = $symbol;
+	}
+
 	public function renderCSS()
 	{
 		return implode('', $this->CSS) . implode('', $this->inlineCSS);
@@ -85,6 +93,32 @@ class Assets
 		return implode('', $this->JS) . implode('', $this->inlineJS);
 	}
 
+	public function renderSvg()
+	{
+		return implode('', $this->svgSymbols);
+	}
+
+	# add JS to enhance the blox-editor in author area
+	public function addEditorJS($JS)
+	{
+		$JSfile = $this->getFileUrl($JS);
+		
+		if($JSfile)
+		{
+			$this->editorJS[] = '<script src="' . $JSfile . '"></script>';
+		}
+	}
+
+	public function addEditorInlineJS($JS)
+	{
+		$this->editorInlineJS[] = '<script>' . $JS . '</script>';
+	}
+
+	public function renderEditorJS()
+	{
+		return implode('', $this->editorJS) . implode('', $this->editorInlineJS);
+	}
+
 	/**
 	 * Checks, if a string is a valid internal or external ressource like js-file or css-file
 	 * @params $path string

system/Controllers/AuthController.php

@@ -11,7 +11,7 @@ use Typemill\Models\WriteYaml;
 
 class AuthController extends Controller
 {
-	
+	# redirect if visit /setup route
 	public function redirect(Request $request, Response $response)
 	{
 		if(isset($_SESSION['login']))
@@ -23,6 +23,7 @@ class AuthController extends Controller
 			return $response->withRedirect($this->c->router->pathFor('auth.show'));			
 		}
 	}
+
 	
 	/**
 	* show login form
@@ -125,7 +126,10 @@ class AuthController extends Controller
 					$yaml->updateYaml('settings/users', '.logins', $logins);					
 				}
 
-				return $response->withRedirect($this->c->router->pathFor('content.raw'));
+				$settings = $this->c->get('settings');
+				$editor = (isset($settings['editor']) && $settings['editor'] == 'visual') ? 'visual' : 'raw';
+				
+				return $response->withRedirect($this->c->router->pathFor('content.' . $editor));
 			}
 		}
 

system/Controllers/ContentApiController.php

@@ -180,7 +180,12 @@ class ContentApiController extends ContentController
 		$delete = $this->deleteContentFiles(['txt']);
 
 		# set redirect url to edit page
-		$url = $this->uri->getBaseUrl() . '/tm/content/' . $this->settings['editor'] . $this->item->urlRelWoF;
+
+		$url = $this->uri->getBaseUrl() . '/tm/content/' . $this->settings['editor'];
+		if(isset($this->item->urlRelWoF))
+		{
+			$url = $url . $this->item->urlRelWoF;
+		}
 
 		# remove the unpublished changes
 		$delete = $this->deleteContentFiles(['txt']);

system/Controllers/PageController.php

@@ -174,9 +174,22 @@ class PageController extends Controller
 			}
 		}
 		
-		$route = empty($args) && $settings['startpage'] ? '/cover.twig' : '/index.twig';
 
-		return $this->render($response, $route, array('navigation' => $structure, 'content' => $contentHTML, 'item' => $item, 'breadcrumb' => $breadcrumb, 'settings' => $settings, 'title' => $title, 'description' => $description, 'base_url' => $base_url, 'image' => $firstImage ));
+		$home = empty($args) ? true : false;
+		$theme = $settings['theme'];
+		$route = empty($args) && isset($settings['themes'][$theme]['cover']) ? '/cover.twig' : '/index.twig';
+
+		return $this->render($response, $route, [
+			'home'			=> $home,
+			'navigation' 	=> $structure, 
+			'content' 		=> $contentHTML, 
+			'item' 			=> $item, 
+			'breadcrumb' 	=> $breadcrumb, 
+			'settings' 		=> $settings, 
+			'title' 		=> $title, 
+			'description' 	=> $description, 
+			'base_url' 		=> $base_url, 
+			'image' 		=> $firstImage ]);
 	}
 
 	protected function getCachedStructure($cache)

system/Controllers/SettingsController.php

@@ -15,15 +15,16 @@ class SettingsController extends Controller
 	
 	public function showSettings($request, $response, $args)
 	{
-		$user		= new User();
-		$settings 	= $this->c->get('settings');
-		$copyright	= $this->getCopyright();
-		$languages	= $this->getLanguages();
-		$locale		= isset($_SERVER['HTTP_ACCEPT_LANGUAGE']) ? substr($_SERVER["HTTP_ACCEPT_LANGUAGE"],0,2) : 'en';
-		$users		= $user->getUsers();
-		$route 		= $request->getAttribute('route');
+		$user				= new User();
+		$settings 			= $this->c->get('settings');
+		$defaultSettings	= \Typemill\Settings::getDefaultSettings();
+		$copyright			= $this->getCopyright();
+		$languages			= $this->getLanguages();
+		$locale				= isset($_SERVER['HTTP_ACCEPT_LANGUAGE']) ? substr($_SERVER["HTTP_ACCEPT_LANGUAGE"],0,2) : 'en';
+		$users				= $user->getUsers();
+		$route 				= $request->getAttribute('route');
 		
-		return $this->render($response, 'settings/system.twig', array('settings' => $settings, 'copyright' => $copyright, 'languages' => $languages, 'locale' => $locale, 'users' => $users, 'route' => $route->getName() ));
+		return $this->render($response, 'settings/system.twig', array('settings' => $settings, 'copyright' => $copyright, 'languages' => $languages, 'locale' => $locale, 'formats' => $defaultSettings['formats'] ,'users' => $users, 'route' => $route->getName() ));
 	}
 	
 	public function saveSettings($request, $response, $args)
@@ -41,10 +42,11 @@ class SettingsController extends Controller
 				return $response->withRedirect($this->c->router->pathFor('settings.show'));				
 			}
 			
-			$settings 		= \Typemill\Settings::getUserSettings();
-			$params 		= $request->getParams();
-			$newSettings	= isset($params['settings']) ? $params['settings'] : false;
-			$validate		= new Validation();
+			$settings 			= \Typemill\Settings::getUserSettings();
+			$defaultSettings	= \Typemill\Settings::getDefaultSettings();
+			$params 			= $request->getParams();
+			$newSettings		= isset($params['settings']) ? $params['settings'] : false;
+			$validate			= new Validation();
 
 			if($newSettings)
 			{
@@ -55,13 +57,13 @@ class SettingsController extends Controller
 					'copyright' 	=> $newSettings['copyright'],
 					'year'			=> $newSettings['year'],
 					'language'		=> $newSettings['language'],
-					'startpage' 	=> isset($newSettings['startpage']) ? true : false,
 					'editor' 		=> $newSettings['editor'], 
+					'formats'		=> $newSettings['formats'],
 				);
 				
 				$copyright 			= $this->getCopyright();
 
-				$validate->settings($newSettings, $copyright, 'settings');
+				$validate->settings($newSettings, $copyright, $defaultSettings['formats'], 'settings');
 			}
 			else
 			{

system/Middleware/RedirectIfAuthenticated.php

@@ -10,16 +10,19 @@ class RedirectIfAuthenticated
 {		
 	protected $router;
 	
-	public function __construct(RouterInterface $router)
+	public function __construct(RouterInterface $router, $settings)
 	{
 		$this->router = $router;
+		$this->settings = $settings;
 	}
 
 	public function __invoke(Request $request, Response $response, $next)
 	{
+		$editor = (isset($this->settings['editor']) && $this->settings['editor'] == 'visual') ? 'visual' : 'raw';
+
 		if(isset($_SESSION['login']))
 		{
-			$response = $response->withRedirect($this->router->pathFor('content.raw'));
+			$response = $response->withRedirect($this->router->pathFor('content.' . $editor));
 		}
 		
 		return $next($request, $response);

system/Models/Validation.php

@@ -20,6 +20,13 @@ class Validation
 		Validator::langDir(__DIR__.'/../vendor/vlucas/valitron/lang'); // always set langDir before lang.
 		Validator::lang('en');
 
+		Validator::addRule('values_allowed', function($field, $value, array $params, array $fields) use ($user)
+		{
+			$badvalues = array_diff($value, $params[0]);
+			if(empty($badvalues)){ return true; }
+			return false;
+		}, 'invalid values');
+
 		Validator::addRule('userAvailable', function($field, $value, array $params, array $fields) use ($user)
 		{
 			$userdata = $user->getUser($value);
@@ -41,20 +48,6 @@ class Validation
 			return false;
 		}, 'wrong password');
 		
-		Validator::addRule('emailAvailable', function($field, $value, array $params, array $fields)
-		{
-			$email = 'testmail@gmail.com';
-			if($email){ return false; }
-			return true;
-		}, 'taken');
-
-		Validator::addRule('emailKnown', function($field, $value, array $params, array $fields)
-		{
-			$email = 'testmail@gmail.com';
-			if(!$email){ return false; }
-			return true;
-		}, 'unknown');
-
 		Validator::addRule('noSpecialChars', function($field, $value, array $params, array $fields)
 		{
 			$format = '/[!@#$%^&*()_+=\[\]{};\':"\\|,.<>\/?]/';
@@ -183,7 +176,7 @@ class Validation
 	* @return obj $v the validation object passed to a result method.
 	*/
 
-	public function settings(array $params, array $copyright, $name = false)
+	public function settings(array $params, array $copyright, array $formats, $name = false)
 	{
 		$v = new Validator($params);
 		
@@ -195,8 +188,9 @@ class Validation
 		$v->rule('integer', 'year');
 		$v->rule('length', 'year', 4);
 		$v->rule('in', 'editor', ['raw', 'visual']);
+		$v->rule('values_allowed', 'formats', $formats);
 		$v->rule('in', 'copyright', $copyright);
-		
+
 		return $this->validationResult($v, $name);
 	}
 

system/Plugin.php

@@ -15,7 +15,7 @@ abstract class Plugin implements EventSubscriberInterface
      * Constructor
      *
      */
-	 
+	
     public function __construct($container)
     {
 		$this->container 	= $container;
@@ -97,16 +97,31 @@ abstract class Plugin implements EventSubscriberInterface
 		$function = new \Twig_SimpleFunction($name, $function);
 		$this->container->view->getEnvironment()->addFunction($function);
 	}
-		
+
 	protected function addJS($JS)
 	{
 		$this->container->assets->addJS($JS);
 	}
 
+	protected function addEditorJS($JS)
+	{
+		$this->container->assets->addEditorJS($JS);
+	}
+
 	protected function addInlineJS($JS)
 	{
 		$this->container->assets->addInlineJS($JS);
 	}
+
+	protected function addSvgSymbol($symbol)
+	{
+		$this->container->assets->addSvgSymbol($symbol);
+	}
+
+	protected function addEditorInlineJS($JS)
+	{
+		$this->container->assets->addEditorInlineJS($JS);
+	}
 	
 	protected function addCSS($CSS)
 	{

system/Routes/Web.php

@@ -31,8 +31,8 @@ else
 $app->post('/tm/formpost', FormController::class . ':savePublicForm')->setName('form.save');
 
 $app->get('/tm', AuthController::class . ':redirect');
-$app->get('/tm/login', AuthController::class . ':show')->setName('auth.show')->add(new RedirectIfAuthenticated($container['router']));
-$app->post('/tm/login', AuthController::class . ':login')->setName('auth.login')->add(new RedirectIfAuthenticated($container['router']));
+$app->get('/tm/login', AuthController::class . ':show')->setName('auth.show')->add(new RedirectIfAuthenticated($container['router'], $container['settings']));
+$app->post('/tm/login', AuthController::class . ':login')->setName('auth.login')->add(new RedirectIfAuthenticated($container['router'], $container['settings']));
 $app->get('/tm/logout', AuthController::class . ':logout')->setName('auth.logout')->add(new RedirectIfUnauthenticated($container['router'], $container['flash']));
 
 $app->get('/tm/settings', SettingsController::class . ':showSettings')->setName('settings.show')->add(new RedirectIfNoAdmin($container['router'], $container['flash']));

system/Settings.php

@@ -15,7 +15,17 @@ class Settings
 		{
 			$settings 			= array_merge($defaultSettings, $userSettings);
 		}
-				
+
+		# We know the used theme now so create the theme path 
+		$settings['themePath'] = $settings['rootPath'] . $settings['themeFolder'] . DIRECTORY_SEPARATOR . $settings['theme'];
+
+		# if there are no theme settings yet (e.g. no setup yet) use default theme settings
+		if(!isset($settings['themes']))
+		{
+			$themeSettings = self::getObjectSettings('themes', $settings['theme']);
+			$settings['themes'][$settings['theme']] = isset($themeSettings['settings']) ? $themeSettings['settings'] : false;
+		}		
+
 		return array('settings' => $settings);
 	}
 	
@@ -32,14 +42,15 @@ class Settings
 			'language'								=> 'en',
 			'startpage'								=> true,
 			'rootPath'								=> $rootPath,
-			'theme'									=> ($theme = 'typemill'),
-			'themeFolder'							=> ($themeFolder = 'themes'),
+			'theme'									=> 'typemill',
+			'themeFolder'							=> 'themes',
 			'themeBasePath'							=> $rootPath,
-			'themePath'								=> $rootPath . $themeFolder . DIRECTORY_SEPARATOR . $theme,
+			'themePath'								=> '',
 			'settingsPath'							=> $rootPath . 'settings',
 			'userPath'								=> $rootPath . 'settings' . DIRECTORY_SEPARATOR . 'users',
 			'authorPath'							=> __DIR__ . DIRECTORY_SEPARATOR . 'author' . DIRECTORY_SEPARATOR,
-			'editor'								=> 'raw',
+			'editor'								=> 'visual',
+			'formats'								=> ['markdown', 'headline', 'ulist', 'olist', 'table', 'quote', 'image', 'video', 'toc', 'hr', 'definition', 'code'],
 			'contentFolder'							=> 'content',
 			'cache'									=> true,
 			'cachePath'								=> $rootPath . 'cache',
@@ -99,6 +110,7 @@ class Settings
 									'year' => false,
 									'theme' => false,
 									'editor' => false,
+									'formats' => false,
 									'setup' => false,
 									'welcome' => false,
 									'images' => false,

system/author/auth/login.twig

@@ -6,7 +6,7 @@
 	<div class="setupWrapper">
 		
 		<div class="setupContent">
-			<p><i class="icon-bookmark-empty"></i>Remember to bookmark this page</p>
+			<p><svg class="icon baseline icon-bookmark-o"><use xlink:href="#icon-bookmark-o"></use></svg>Remember to bookmark this page</p>
 		</div>
 		<div class="authformWrapper">
 			<form method="POST" action="{{ path_for("auth.login") }}" autocomplete="off">

system/author/auth/welcome.twig

@@ -11,7 +11,7 @@
 				<h1>Hurra!</h1>
 				<p>Your account has been created and you are logged in now.</p>
 				<p><strong>Next step:</strong> Visit the author panel and setup your new website. You can configure the system, choose themes and add plugins.</p>
-				<p><strong>New:</strong> With the first big community-contribution you can now discard your changes and set a page back to the published version.</p>
+				<p><strong>New:</strong> You never use code-examples on your pages? Then disable the code-button and adjust the whole format-bar of the editor exactly to your needs.</p>
 				<p><strong>Get help:</strong> If you have any questions, please consult the <a target="_blank" href="https://typemill.net/typemill"><i class="icon-link-ext"></i> docs</a> or open a new issue on <a target="_blank" href="https://github.com/typemill/typemill"><i class="icon-link-ext"></i> github</a>.</p>
 			</div>
 			<a class="button" href="{{ path_for('settings.show') }}">Configure your website</a>

system/author/css/fontello/LICENSE.txt

@@ -1,48 +0,0 @@
-Font license info
-
-
-## Font Awesome
-
-   Copyright (C) 2016 by Dave Gandy
-
-   Author:    Dave Gandy
-   License:   SIL ()
-   Homepage:  http://fortawesome.github.com/Font-Awesome/
-
-
-## Entypo
-
-   Copyright (C) 2012 by Daniel Bruce
-
-   Author:    Daniel Bruce
-   License:   SIL (http://scripts.sil.org/OFL)
-   Homepage:  http://www.entypo.com
-
-
-## Modern Pictograms
-
-   Copyright (c) 2012 by John Caserta. All rights reserved.
-
-   Author:    John Caserta
-   License:   SIL (http://scripts.sil.org/OFL)
-   Homepage:  http://thedesignoffice.org/project/modern-pictograms/
-
-
-## Typicons
-
-   (c) Stephen Hutchings 2012
-
-   Author:    Stephen Hutchings
-   License:   SIL (http://scripts.sil.org/OFL)
-   Homepage:  http://typicons.com/
-
-
-## MFG Labs
-
-   Copyright (C) 2012 by Daniel Bruce
-
-   Author:    MFG Labs
-   License:   SIL (http://scripts.sil.org/OFL)
-   Homepage:  http://www.mfglabs.com/
-
-

system/author/css/fontello/README.txt

@@ -1,75 +0,0 @@
-This webfont is generated by http://fontello.com open source project.
-
-
-================================================================================
-Please, note, that you should obey original font licenses, used to make this
-webfont pack. Details available in LICENSE.txt file.
-
-- Usually, it's enough to publish content of LICENSE.txt file somewhere on your
-  site in "About" section.
-
-- If your project is open-source, usually, it will be ok to make LICENSE.txt
-  file publicly available in your repository.
-
-- Fonts, used in Fontello, don't require a clickable link on your site.
-  But any kind of additional authors crediting is welcome.
-================================================================================
-
-
-Comments on archive content
----------------------------
-
-- /font/* - fonts in different formats
-
-- /css/*  - different kinds of css, for all situations. Should be ok with 
-  twitter bootstrap. Also, you can skip <i> style and assign icon classes
-  directly to text elements, if you don't mind about IE7.
-
-- demo.html - demo file, to show your webfont content
-
-- LICENSE.txt - license info about source fonts, used to build your one.
-
-- config.json - keeps your settings. You can import it back into fontello
-  anytime, to continue your work
-
-
-Why so many CSS files ?
------------------------
-
-Because we like to fit all your needs :)
-
-- basic file, <your_font_name>.css - is usually enough, it contains @font-face
-  and character code definitions
-
-- *-ie7.css - if you need IE7 support, but still don't wish to put char codes
-  directly into html
-
-- *-codes.css and *-ie7-codes.css - if you like to use your own @font-face
-  rules, but still wish to benefit from css generation. That can be very
-  convenient for automated asset build systems. When you need to update font -
-  no need to manually edit files, just override old version with archive
-  content. See fontello source code for examples.
-
-- *-embedded.css - basic css file, but with embedded WOFF font, to avoid
-  CORS issues in Firefox and IE9+, when fonts are hosted on the separate domain.
-  We strongly recommend to resolve this issue by `Access-Control-Allow-Origin`
-  server headers. But if you ok with dirty hack - this file is for you. Note,
-  that data url moved to separate @font-face to avoid problems with <IE9, when
-  string is too long.
-
-- animate.css - use it to get ideas about spinner rotation animation.
-
-
-Attention for server setup
---------------------------
-
-You MUST setup server to reply with proper `mime-types` for font files -
-otherwise some browsers will fail to show fonts.
-
-Usually, `apache` already has necessary settings, but `nginx` and other
-webservers should be tuned. Here is list of mime types for our file extensions:
-
-- `application/vnd.ms-fontobject` - eot
-- `application/x-font-woff` - woff
-- `application/x-font-ttf` - ttf
-- `image/svg+xml` - svg

system/author/css/fontello/config.json

@@ -1,208 +0,0 @@
-{
-  "name": "",
-  "css_prefix_text": "icon-",
-  "css_use_suffix": false,
-  "hinting": true,
-  "units_per_em": 1000,
-  "ascent": 850,
-  "glyphs": [
-    {
-      "uid": "02cca871bb69da75e8ee286b7055832c",
-      "css": "bold",
-      "code": 59392,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "a8cb1c217f02b073db3670c061cc54d2",
-      "css": "italic",
-      "code": 59393,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "14017aae737730faeda4a6fd8fb3a5f0",
-      "css": "check",
-      "code": 59394,
-      "src": "entypo"
-    },
-    {
-      "uid": "c709da589c923ba3c2ad48d9fc563e93",
-      "css": "cancel",
-      "code": 59395,
-      "src": "entypo"
-    },
-    {
-      "uid": "381da2c2f7fd51f8de877c044d7f439d",
-      "css": "picture",
-      "code": 59396,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "5211af474d3a9848f67f945e2ccaf143",
-      "css": "cancel-1",
-      "code": 59397,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "44e04715aecbca7f266a17d5a7863c68",
-      "css": "plus",
-      "code": 59398,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "d7271d490b71df4311e32cdacae8b331",
-      "css": "home",
-      "code": 59399,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "0ddd3e8201ccc7d41f7b7c9d27eca6c1",
-      "css": "link",
-      "code": 59400,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "e99461abfef3923546da8d745372c995",
-      "css": "cog",
-      "code": 59401,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "8b9e6a8dd8f67f7c003ed8e7e5ee0857",
-      "css": "off",
-      "code": 59402,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "872d9516df93eb6b776cc4d94bd97dac",
-      "css": "video",
-      "code": 59403,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "eeec3208c90b7b48e804919d0d2d4a41",
-      "css": "upload",
-      "code": 59404,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "861ab06e455e2de3232ebef67d60d708",
-      "css": "minus",
-      "code": 59405,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "2qh229aneb95ds2afi7dbdsxz9jrbhcl",
-      "css": "colon",
-      "code": 59406,
-      "src": "modernpics"
-    },
-    {
-      "uid": "d2d6ab0dd4fb9365b1d5756380484bbb",
-      "css": "pi",
-      "code": 59407,
-      "src": "typicons"
-    },
-    {
-      "uid": "c5fd68d8253e605e7a78a0c75255b692",
-      "css": "math",
-      "code": 61466,
-      "src": "mfglabs"
-    },
-    {
-      "uid": "c819c6225685bae2eed1b8da13e629fa",
-      "css": "list-alt",
-      "code": 59408,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "d3b3f17bc3eb7cd809a07bbd4d178bee",
-      "css": "resize-vertical",
-      "code": 59409,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "6605ee6441bf499ffa3c63d3c7409471",
-      "css": "move",
-      "code": 61511,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "e15f0d620a7897e2035c18c80142f6d9",
-      "css": "link-ext",
-      "code": 61582,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "2f5ef6f6b7aaebc56458ab4e865beff5",
-      "css": "bookmark-empty",
-      "code": 61591,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "a2a74f5e7b7d9ba054897d8c795a326a",
-      "css": "list-bullet",
-      "code": 61642,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "f6766a8b042c2453a4e153af03294383",
-      "css": "list-numbered",
-      "code": 61643,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "8fb55fd696d9a0f58f3b27c1d8633750",
-      "css": "table",
-      "code": 61646,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "5408be43f7c42bccee419c6be53fdef5",
-      "css": "doc-text",
-      "code": 61686,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "ab95e1351ebaec5850101097cbf7097f",
-      "css": "quote-left",
-      "code": 61709,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "b091a8bd0fdade174951f17d936f51e4",
-      "css": "folder-empty",
-      "code": 61716,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "7034e4d22866af82bef811f52fb1ba46",
-      "css": "code",
-      "code": 61729,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "4e88371fb8857dacc1f66afe6314e426",
-      "css": "superscript",
-      "code": 61739,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "47a1f80457068fbeab69fdb83d7d0817",
-      "css": "youtube-play",
-      "code": 61802,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "0c708edd8fae2376b3370aa56d40cf9e",
-      "css": "header",
-      "code": 61916,
-      "src": "fontawesome"
-    },
-    {
-      "uid": "c5845105a87df2ee1999826d90622f6a",
-      "css": "paragraph",
-      "code": 61917,
-      "src": "fontawesome"
-    }
-  ]
-}

system/author/css/fontello/css/animation.css

@@ -1,85 +0,0 @@
-/*
-   Animation example, for spinners
-*/
-.animate-spin {
-  -moz-animation: spin 2s infinite linear;
-  -o-animation: spin 2s infinite linear;
-  -webkit-animation: spin 2s infinite linear;
-  animation: spin 2s infinite linear;
-  display: inline-block;
-}
-@-moz-keyframes spin {
-  0% {
-    -moz-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: rotate(359deg);
-    -o-transform: rotate(359deg);
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-@-webkit-keyframes spin {
-  0% {
-    -moz-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: rotate(359deg);
-    -o-transform: rotate(359deg);
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-@-o-keyframes spin {
-  0% {
-    -moz-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: rotate(359deg);
-    -o-transform: rotate(359deg);
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-@-ms-keyframes spin {
-  0% {
-    -moz-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: rotate(359deg);
-    -o-transform: rotate(359deg);
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}
-@keyframes spin {
-  0% {
-    -moz-transform: rotate(0deg);
-    -o-transform: rotate(0deg);
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -moz-transform: rotate(359deg);
-    -o-transform: rotate(359deg);
-    -webkit-transform: rotate(359deg);
-    transform: rotate(359deg);
-  }
-}

system/author/css/fontello/css/fontello-codes.css

@@ -1,34 +0,0 @@
-
-.icon-bold:before { content: '\e800'; } /* '' */
-.icon-italic:before { content: '\e801'; } /* '' */
-.icon-check:before { content: '\e802'; } /* '' */
-.icon-cancel:before { content: '\e803'; } /* '' */
-.icon-picture:before { content: '\e804'; } /* '' */
-.icon-cancel-1:before { content: '\e805'; } /* '' */
-.icon-plus:before { content: '\e806'; } /* '' */
-.icon-home:before { content: '\e807'; } /* '' */
-.icon-link:before { content: '\e808'; } /* '' */
-.icon-cog:before { content: '\e809'; } /* '' */
-.icon-off:before { content: '\e80a'; } /* '' */
-.icon-video:before { content: '\e80b'; } /* '' */
-.icon-upload:before { content: '\e80c'; } /* '' */
-.icon-minus:before { content: '\e80d'; } /* '' */
-.icon-colon:before { content: '\e80e'; } /* '' */
-.icon-pi:before { content: '\e80f'; } /* '' */
-.icon-list-alt:before { content: '\e810'; } /* '' */
-.icon-resize-vertical:before { content: '\e811'; } /* '' */
-.icon-math:before { content: '\f01a'; } /* '' */
-.icon-move:before { content: '\f047'; } /* '' */
-.icon-link-ext:before { content: '\f08e'; } /* '' */
-.icon-bookmark-empty:before { content: '\f097'; } /* '' */
-.icon-list-bullet:before { content: '\f0ca'; } /* '' */
-.icon-list-numbered:before { content: '\f0cb'; } /* '' */
-.icon-table:before { content: '\f0ce'; } /* '' */
-.icon-doc-text:before { content: '\f0f6'; } /* '' */
-.icon-quote-left:before { content: '\f10d'; } /* '' */
-.icon-folder-empty:before { content: '\f114'; } /* '' */
-.icon-code:before { content: '\f121'; } /* '' */
-.icon-superscript:before { content: '\f12b'; } /* '' */
-.icon-youtube-play:before { content: '\f16a'; } /* '' */
-.icon-header:before { content: '\f1dc'; } /* '' */
-.icon-paragraph:before { content: '\f1dd'; } /* '' */

system/author/css/fontello/css/fontello-ie7-codes.css

@@ -1,34 +0,0 @@
-
-.icon-bold { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-italic { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-check { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-cancel { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-picture { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-cancel-1 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-home { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-link { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-cog { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-video { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-upload { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-minus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-colon { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-pi { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-list-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-resize-vertical { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-math { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-move { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-link-ext { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-bookmark-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-list-bullet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-list-numbered { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-table { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-doc-text { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-quote-left { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-folder-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-code { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-superscript { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-youtube-play { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-header { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-paragraph { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

system/author/css/fontello/css/fontello-ie7.css

@@ -1,45 +0,0 @@
-[class^="icon-"], [class*=" icon-"] {
-  font-family: 'fontello';
-  font-style: normal;
-  font-weight: normal;
- 
-  /* fix buttons height */
-  line-height: 1em;
- 
-  /* you can be more comfortable with increased icons size */
-  /* font-size: 120%; */
-}
- 
-.icon-bold { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-italic { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-check { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-cancel { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-picture { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-cancel-1 { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-plus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-home { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-link { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-cog { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-off { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-video { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-upload { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-minus { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-colon { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-pi { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-list-alt { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-resize-vertical { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-math { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-move { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-link-ext { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-bookmark-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-list-bullet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-list-numbered { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-table { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-doc-text { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-quote-left { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-folder-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-code { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-superscript { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-youtube-play { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-header { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }
-.icon-paragraph { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); }

system/author/css/fontello/css/fontello.css

@@ -1,90 +0,0 @@
-@font-face {
-  font-family: 'fontello';
-  src: url('../font/fontello.eot?37804068');
-  src: url('../font/fontello.eot?37804068#iefix') format('embedded-opentype'),
-       url('../font/fontello.woff2?37804068') format('woff2'),
-       url('../font/fontello.woff?37804068') format('woff'),
-       url('../font/fontello.ttf?37804068') format('truetype'),
-       url('../font/fontello.svg?37804068#fontello') format('svg');
-  font-weight: normal;
-  font-style: normal;
-}
-/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */
-/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */
-/*
-@media screen and (-webkit-min-device-pixel-ratio:0) {
-  @font-face {
-    font-family: 'fontello';
-    src: url('../font/fontello.svg?37804068#fontello') format('svg');
-  }
-}
-*/
- 
- [class^="icon-"]:before, [class*=" icon-"]:before {
-  font-family: "fontello";
-  font-style: normal;
-  font-weight: normal;
-  speak: none;
- 
-  display: inline-block;
-  text-decoration: inherit;
-  width: 1em;
-  margin-right: .2em;
-  text-align: center;
-  /* opacity: .8; */
- 
-  /* For safety - reset parent styles, that can break glyph codes*/
-  font-variant: normal;
-  text-transform: none;
- 
-  /* fix buttons height, for twitter bootstrap */
-  line-height: 1em;
- 
-  /* Animation center compensation - margins should be symmetric */
-  /* remove if not needed */
-  margin-left: .2em;
- 
-  /* you can be more comfortable with increased icons size */
-  /* font-size: 120%; */
- 
-  /* Font smoothing. That was taken from TWBS */
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
- 
-  /* Uncomment for 3D effect */
-  /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
-}
- 
-.icon-bold:before { content: '\e800'; } /* '' */
-.icon-italic:before { content: '\e801'; } /* '' */
-.icon-check:before { content: '\e802'; } /* '' */
-.icon-cancel:before { content: '\e803'; } /* '' */
-.icon-picture:before { content: '\e804'; } /* '' */
-.icon-cancel-1:before { content: '\e805'; } /* '' */
-.icon-plus:before { content: '\e806'; } /* '' */
-.icon-home:before { content: '\e807'; } /* '' */
-.icon-link:before { content: '\e808'; } /* '' */
-.icon-cog:before { content: '\e809'; } /* '' */
-.icon-off:before { content: '\e80a'; } /* '' */
-.icon-video:before { content: '\e80b'; } /* '' */
-.icon-upload:before { content: '\e80c'; } /* '' */
-.icon-minus:before { content: '\e80d'; } /* '' */
-.icon-colon:before { content: '\e80e'; } /* '' */
-.icon-pi:before { content: '\e80f'; } /* '' */
-.icon-list-alt:before { content: '\e810'; } /* '' */
-.icon-resize-vertical:before { content: '\e811'; } /* '' */
-.icon-math:before { content: '\f01a'; } /* '' */
-.icon-move:before { content: '\f047'; } /* '' */
-.icon-link-ext:before { content: '\f08e'; } /* '' */
-.icon-bookmark-empty:before { content: '\f097'; } /* '' */
-.icon-list-bullet:before { content: '\f0ca'; } /* '' */
-.icon-list-numbered:before { content: '\f0cb'; } /* '' */
-.icon-table:before { content: '\f0ce'; } /* '' */
-.icon-doc-text:before { content: '\f0f6'; } /* '' */
-.icon-quote-left:before { content: '\f10d'; } /* '' */
-.icon-folder-empty:before { content: '\f114'; } /* '' */
-.icon-code:before { content: '\f121'; } /* '' */
-.icon-superscript:before { content: '\f12b'; } /* '' */
-.icon-youtube-play:before { content: '\f16a'; } /* '' */
-.icon-header:before { content: '\f1dc'; } /* '' */
-.icon-paragraph:before { content: '\f1dd'; } /* '' */

system/author/css/fontello/demo.html

@@ -1,354 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head><!--[if lt IE 9]><script language="javascript" type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
-    <meta charset="UTF-8"><style>/*
- * Bootstrap v2.2.1
- *
- * Copyright 2012 Twitter, Inc
- * Licensed under the Apache License v2.0
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Designed and built with all the love in the world @twitter by @mdo and @fat.
- */
-.clearfix {
-  *zoom: 1;
-}
-.clearfix:before,
-.clearfix:after {
-  display: table;
-  content: "";
-  line-height: 0;
-}
-.clearfix:after {
-  clear: both;
-}
-html {
-  font-size: 100%;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-}
-a:focus {
-  outline: thin dotted #333;
-  outline: 5px auto -webkit-focus-ring-color;
-  outline-offset: -2px;
-}
-a:hover,
-a:active {
-  outline: 0;
-}
-button,
-input,
-select,
-textarea {
-  margin: 0;
-  font-size: 100%;
-  vertical-align: middle;
-}
-button,
-input {
-  *overflow: visible;
-  line-height: normal;
-}
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  padding: 0;
-  border: 0;
-}
-body {
-  margin: 0;
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  line-height: 20px;
-  color: #333;
-  background-color: #fff;
-}
-a {
-  color: #08c;
-  text-decoration: none;
-}
-a:hover {
-  color: #005580;
-  text-decoration: underline;
-}
-.row {
-  margin-left: -20px;
-  *zoom: 1;
-}
-.row:before,
-.row:after {
-  display: table;
-  content: "";
-  line-height: 0;
-}
-.row:after {
-  clear: both;
-}
-[class*="span"] {
-  float: left;
-  min-height: 1px;
-  margin-left: 20px;
-}
-.container,
-.navbar-static-top .container,
-.navbar-fixed-top .container,
-.navbar-fixed-bottom .container {
-  width: 940px;
-}
-.span12 {
-  width: 940px;
-}
-.span11 {
-  width: 860px;
-}
-.span10 {
-  width: 780px;
-}
-.span9 {
-  width: 700px;
-}
-.span8 {
-  width: 620px;
-}
-.span7 {
-  width: 540px;
-}
-.span6 {
-  width: 460px;
-}
-.span5 {
-  width: 380px;
-}
-.span4 {
-  width: 300px;
-}
-.span3 {
-  width: 220px;
-}
-.span2 {
-  width: 140px;
-}
-.span1 {
-  width: 60px;
-}
-[class*="span"].pull-right,
-.row-fluid [class*="span"].pull-right {
-  float: right;
-}
-.container {
-  margin-right: auto;
-  margin-left: auto;
-  *zoom: 1;
-}
-.container:before,
-.container:after {
-  display: table;
-  content: "";
-  line-height: 0;
-}
-.container:after {
-  clear: both;
-}
-p {
-  margin: 0 0 10px;
-}
-.lead {
-  margin-bottom: 20px;
-  font-size: 21px;
-  font-weight: 200;
-  line-height: 30px;
-}
-small {
-  font-size: 85%;
-}
-h1 {
-  margin: 10px 0;
-  font-family: inherit;
-  font-weight: bold;
-  line-height: 20px;
-  color: inherit;
-  text-rendering: optimizelegibility;
-}
-h1 small {
-  font-weight: normal;
-  line-height: 1;
-  color: #999;
-}
-h1 {
-  line-height: 40px;
-}
-h1 {
-  font-size: 38.5px;
-}
-h1 small {
-  font-size: 24.5px;
-}
-body {
-  margin-top: 90px;
-}
-.header {
-  position: fixed;
-  top: 0;
-  left: 50%;
-  margin-left: -480px;
-  background-color: #fff;
-  border-bottom: 1px solid #ddd;
-  padding-top: 10px;
-  z-index: 10;
-}
-.footer {
-  color: #ddd;
-  font-size: 12px;
-  text-align: center;
-  margin-top: 20px;
-}
-.footer a {
-  color: #ccc;
-  text-decoration: underline;
-}
-.the-icons {
-  font-size: 14px;
-  line-height: 24px;
-}
-.switch {
-  position: absolute;
-  right: 0;
-  bottom: 10px;
-  color: #666;
-}
-.switch input {
-  margin-right: 0.3em;
-}
-.codesOn .i-name {
-  display: none;
-}
-.codesOn .i-code {
-  display: inline;
-}
-.i-code {
-  display: none;
-}
-@font-face {
-      font-family: 'fontello';
-      src: url('./font/fontello.eot?79192306');
-      src: url('./font/fontello.eot?79192306#iefix') format('embedded-opentype'),
-           url('./font/fontello.woff?79192306') format('woff'),
-           url('./font/fontello.ttf?79192306') format('truetype'),
-           url('./font/fontello.svg?79192306#fontello') format('svg');
-      font-weight: normal;
-      font-style: normal;
-    }
-     
-     
-    .demo-icon
-    {
-      font-family: "fontello";
-      font-style: normal;
-      font-weight: normal;
-      speak: none;
-     
-      display: inline-block;
-      text-decoration: inherit;
-      width: 1em;
-      margin-right: .2em;
-      text-align: center;
-      /* opacity: .8; */
-     
-      /* For safety - reset parent styles, that can break glyph codes*/
-      font-variant: normal;
-      text-transform: none;
-     
-      /* fix buttons height, for twitter bootstrap */
-      line-height: 1em;
-     
-      /* Animation center compensation - margins should be symmetric */
-      /* remove if not needed */
-      margin-left: .2em;
-     
-      /* You can be more comfortable with increased icons size */
-      /* font-size: 120%; */
-     
-      /* Font smoothing. That was taken from TWBS */
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-     
-      /* Uncomment for 3D effect */
-      /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
-    }
-     </style>
-    <link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/" + font.fontname + "-ie7.css"><![endif]-->
-    <script>
-      function toggleCodes(on) {
-        var obj = document.getElementById('icons');
-      
-        if (on) {
-          obj.className += ' codesOn';
-        } else {
-          obj.className = obj.className.replace(' codesOn', '');
-        }
-      }
-      
-    </script>
-  </head>
-  <body>
-    <div class="container header">
-      <h1>fontello <small>font demo</small></h1>
-      <label class="switch">
-        <input type="checkbox" onclick="toggleCodes(this.checked)">show codes
-      </label>
-    </div>
-    <div class="container" id="icons">
-      <div class="row">
-        <div class="the-icons span3" title="Code: 0xe800"><i class="demo-icon icon-bold">&#xe800;</i> <span class="i-name">icon-bold</span><span class="i-code">0xe800</span></div>
-        <div class="the-icons span3" title="Code: 0xe801"><i class="demo-icon icon-italic">&#xe801;</i> <span class="i-name">icon-italic</span><span class="i-code">0xe801</span></div>
-        <div class="the-icons span3" title="Code: 0xe802"><i class="demo-icon icon-check">&#xe802;</i> <span class="i-name">icon-check</span><span class="i-code">0xe802</span></div>
-        <div class="the-icons span3" title="Code: 0xe803"><i class="demo-icon icon-cancel">&#xe803;</i> <span class="i-name">icon-cancel</span><span class="i-code">0xe803</span></div>
-      </div>
-      <div class="row">
-        <div class="the-icons span3" title="Code: 0xe804"><i class="demo-icon icon-picture">&#xe804;</i> <span class="i-name">icon-picture</span><span class="i-code">0xe804</span></div>
-        <div class="the-icons span3" title="Code: 0xe805"><i class="demo-icon icon-cancel-1">&#xe805;</i> <span class="i-name">icon-cancel-1</span><span class="i-code">0xe805</span></div>
-        <div class="the-icons span3" title="Code: 0xe806"><i class="demo-icon icon-plus">&#xe806;</i> <span class="i-name">icon-plus</span><span class="i-code">0xe806</span></div>
-        <div class="the-icons span3" title="Code: 0xe807"><i class="demo-icon icon-home">&#xe807;</i> <span class="i-name">icon-home</span><span class="i-code">0xe807</span></div>
-      </div>
-      <div class="row">
-        <div class="the-icons span3" title="Code: 0xe808"><i class="demo-icon icon-link">&#xe808;</i> <span class="i-name">icon-link</span><span class="i-code">0xe808</span></div>
-        <div class="the-icons span3" title="Code: 0xe809"><i class="demo-icon icon-cog">&#xe809;</i> <span class="i-name">icon-cog</span><span class="i-code">0xe809</span></div>
-        <div class="the-icons span3" title="Code: 0xe80a"><i class="demo-icon icon-off">&#xe80a;</i> <span class="i-name">icon-off</span><span class="i-code">0xe80a</span></div>
-        <div class="the-icons span3" title="Code: 0xe80b"><i class="demo-icon icon-video">&#xe80b;</i> <span class="i-name">icon-video</span><span class="i-code">0xe80b</span></div>
-      </div>
-      <div class="row">
-        <div class="the-icons span3" title="Code: 0xe80c"><i class="demo-icon icon-upload">&#xe80c;</i> <span class="i-name">icon-upload</span><span class="i-code">0xe80c</span></div>
-        <div class="the-icons span3" title="Code: 0xe80d"><i class="demo-icon icon-minus">&#xe80d;</i> <span class="i-name">icon-minus</span><span class="i-code">0xe80d</span></div>
-        <div class="the-icons span3" title="Code: 0xe80e"><i class="demo-icon icon-colon">&#xe80e;</i> <span class="i-name">icon-colon</span><span class="i-code">0xe80e</span></div>
-        <div class="the-icons span3" title="Code: 0xe80f"><i class="demo-icon icon-pi">&#xe80f;</i> <span class="i-name">icon-pi</span><span class="i-code">0xe80f</span></div>
-      </div>
-      <div class="row">
-        <div class="the-icons span3" title="Code: 0xe810"><i class="demo-icon icon-list-alt">&#xe810;</i> <span class="i-name">icon-list-alt</span><span class="i-code">0xe810</span></div>
-        <div class="the-icons span3" title="Code: 0xe811"><i class="demo-icon icon-resize-vertical">&#xe811;</i> <span class="i-name">icon-resize-vertical</span><span class="i-code">0xe811</span></div>
-        <div class="the-icons span3" title="Code: 0xf01a"><i class="demo-icon icon-math">&#xf01a;</i> <span class="i-name">icon-math</span><span class="i-code">0xf01a</span></div>
-        <div class="the-icons span3" title="Code: 0xf047"><i class="demo-icon icon-move">&#xf047;</i> <span class="i-name">icon-move</span><span class="i-code">0xf047</span></div>
-      </div>
-      <div class="row">
-        <div class="the-icons span3" title="Code: 0xf08e"><i class="demo-icon icon-link-ext">&#xf08e;</i> <span class="i-name">icon-link-ext</span><span class="i-code">0xf08e</span></div>
-        <div class="the-icons span3" title="Code: 0xf097"><i class="demo-icon icon-bookmark-empty">&#xf097;</i> <span class="i-name">icon-bookmark-empty</span><span class="i-code">0xf097</span></div>
-        <div class="the-icons span3" title="Code: 0xf0ca"><i class="demo-icon icon-list-bullet">&#xf0ca;</i> <span class="i-name">icon-list-bullet</span><span class="i-code">0xf0ca</span></div>
-        <div class="the-icons span3" title="Code: 0xf0cb"><i class="demo-icon icon-list-numbered">&#xf0cb;</i> <span class="i-name">icon-list-numbered</span><span class="i-code">0xf0cb</span></div>
-      </div>
-      <div class="row">
-        <div class="the-icons span3" title="Code: 0xf0ce"><i class="demo-icon icon-table">&#xf0ce;</i> <span class="i-name">icon-table</span><span class="i-code">0xf0ce</span></div>
-        <div class="the-icons span3" title="Code: 0xf0f6"><i class="demo-icon icon-doc-text">&#xf0f6;</i> <span class="i-name">icon-doc-text</span><span class="i-code">0xf0f6</span></div>
-        <div class="the-icons span3" title="Code: 0xf10d"><i class="demo-icon icon-quote-left">&#xf10d;</i> <span class="i-name">icon-quote-left</span><span class="i-code">0xf10d</span></div>
-        <div class="the-icons span3" title="Code: 0xf114"><i class="demo-icon icon-folder-empty">&#xf114;</i> <span class="i-name">icon-folder-empty</span><span class="i-code">0xf114</span></div>
-      </div>
-      <div class="row">
-        <div class="the-icons span3" title="Code: 0xf121"><i class="demo-icon icon-code">&#xf121;</i> <span class="i-name">icon-code</span><span class="i-code">0xf121</span></div>
-        <div class="the-icons span3" title="Code: 0xf12b"><i class="demo-icon icon-superscript">&#xf12b;</i> <span class="i-name">icon-superscript</span><span class="i-code">0xf12b</span></div>
-        <div class="the-icons span3" title="Code: 0xf16a"><i class="demo-icon icon-youtube-play">&#xf16a;</i> <span class="i-name">icon-youtube-play</span><span class="i-code">0xf16a</span></div>
-        <div class="the-icons span3" title="Code: 0xf1dc"><i class="demo-icon icon-header">&#xf1dc;</i> <span class="i-name">icon-header</span><span class="i-code">0xf1dc</span></div>
-      </div>
-      <div class="row">
-        <div class="the-icons span3" title="Code: 0xf1dd"><i class="demo-icon icon-paragraph">&#xf1dd;</i> <span class="i-name">icon-paragraph</span><span class="i-code">0xf1dd</span></div>
-      </div>
-    </div>
-    <div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div>
-  </body>
-</html>

system/author/css/fontello/font/fontello.svg

@@ -1,76 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg xmlns="http://www.w3.org/2000/svg">
-<metadata>Copyright (C) 2019 by original authors @ fontello.com</metadata>
-<defs>
-<font id="fontello" horiz-adv-x="1000" >
-<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
-<missing-glyph horiz-adv-x="1000" />
-<glyph glyph-name="bold" unicode="&#xe800;" d="M310 1q41-18 78-18 210 0 210 187 0 64-23 101-15 24-34 41t-38 26-45 14-47 6-53 1q-40 0-56-6 0-29 0-88t-1-88q0-5 0-38t0-54 2-47 7-37z m-8 417q23-4 61-4 46 0 80 7t61 25 42 50 14 79q0 39-16 68t-45 46-60 24-69 8q-28 0-73-7 0-28 3-84t2-85q0-15 0-45t-1-44q0-26 1-38z m-302-497l1 53q9 2 48 9t59 15q4 7 7 15t4 19 4 18 1 21 0 19v36q0 548-12 572-2 5-12 8t-25 6-28 4-27 3-17 2l-2 46q55 1 190 6t208 6q13 0 38-1t38 0q39 0 76-7t72-24 60-39 41-59 16-76q0-29-9-54t-22-40-36-32-41-25-47-22q86-20 144-75t57-138q0-56-20-101t-52-72-77-48-91-27-98-8q-25 0-74 2t-74 1q-59 0-171-6t-129-7z" horiz-adv-x="785.7" />
-
-<glyph glyph-name="italic" unicode="&#xe801;" d="M0-78l10 48q12 4 34 9t40 11 33 13q16 19 23 56 1 4 35 162t63 303 29 165v14q-13 8-30 11t-39 4-32 3l10 58q19-1 67-4t84-4 67-1q27 0 55 1t68 4 54 4q-2-22-10-50-17-6-57-16t-60-19q-5-10-8-23t-5-23-4-25-4-24q-15-82-49-234t-43-198q-1-5-7-32t-11-51-9-46-4-32l1-10q9-3 103-18-2-24-9-55-6 0-18-1t-18-1q-16 0-49 6t-48 6q-77 1-115 1-28 0-79-5t-68-7z" horiz-adv-x="571.4" />
-
-<glyph glyph-name="check" unicode="&#xe802;" d="M249 0q-34 0-56 28l-180 236q-16 24-12 52t26 46 51 14 47-28l118-154 296 474q16 24 43 30t53-8q24-16 30-43t-8-53l-350-560q-20-32-56-32z" horiz-adv-x="667" />
-
-<glyph glyph-name="cancel" unicode="&#xe803;" d="M452 194q18-18 18-43t-18-43q-18-16-43-16t-43 16l-132 152-132-152q-18-16-43-16t-43 16q-16 18-16 43t16 43l138 156-138 158q-16 18-16 43t16 43q18 16 43 16t43-16l132-152 132 152q18 16 43 16t43-16q18-18 18-43t-18-43l-138-158z" horiz-adv-x="470" />
-
-<glyph glyph-name="picture" unicode="&#xe804;" d="M357 529q0-45-31-76t-76-32-76 32-31 76 31 76 76 31 76-31 31-76z m572-215v-250h-786v107l178 179 90-89 285 285z m53 393h-893q-7 0-12-5t-6-13v-678q0-7 6-13t12-5h893q7 0 13 5t5 13v678q0 8-5 13t-13 5z m89-18v-678q0-37-26-63t-63-27h-893q-36 0-63 27t-26 63v678q0 37 26 63t63 27h893q37 0 63-27t26-63z" horiz-adv-x="1071.4" />
-
-<glyph glyph-name="cancel-1" unicode="&#xe805;" d="M724 112q0-22-15-38l-76-76q-16-15-38-15t-38 15l-164 165-164-165q-16-15-38-15t-38 15l-76 76q-16 16-16 38t16 38l164 164-164 164q-16 16-16 38t16 38l76 76q16 16 38 16t38-16l164-164 164 164q16 16 38 16t38-16l76-76q15-15 15-38t-15-38l-164-164 164-164q15-15 15-38z" horiz-adv-x="785.7" />
-
-<glyph glyph-name="plus" unicode="&#xe806;" d="M786 439v-107q0-22-16-38t-38-15h-232v-233q0-22-16-37t-38-16h-107q-22 0-38 16t-15 37v233h-232q-23 0-38 15t-16 38v107q0 23 16 38t38 16h232v232q0 22 15 38t38 16h107q23 0 38-16t16-38v-232h232q23 0 38-16t16-38z" horiz-adv-x="785.7" />
-
-<glyph glyph-name="home" unicode="&#xe807;" d="M786 296v-267q0-15-11-25t-25-11h-214v214h-143v-214h-214q-15 0-25 11t-11 25v267q0 1 0 2t0 2l321 264 321-264q1-1 1-4z m124 39l-34-41q-5-5-12-6h-2q-7 0-12 3l-386 322-386-322q-7-4-13-3-7 1-12 6l-35 41q-4 6-3 13t6 12l401 334q18 15 42 15t43-15l136-113v108q0 8 5 13t13 5h107q8 0 13-5t5-13v-227l122-102q6-4 6-12t-4-13z" horiz-adv-x="928.6" />
-
-<glyph glyph-name="link" unicode="&#xe808;" d="M813 171q0 23-16 38l-116 116q-16 16-38 16-24 0-40-18 1-1 10-10t12-12 9-11 7-14 2-15q0-23-16-38t-38-16q-8 0-15 2t-14 7-11 9-12 12-10 10q-19-17-19-40 0-23 16-38l115-116q15-15 38-15 22 0 38 15l82 81q16 16 16 37z m-393 394q0 22-15 38l-115 115q-16 16-38 16-22 0-38-15l-82-82q-16-15-16-37 0-22 16-38l116-116q15-15 38-15 23 0 40 17-2 2-11 11t-12 12-8 10-7 14-2 16q0 22 15 38t38 15q9 0 16-2t14-7 11-8 12-12 10-11q18 17 18 41z m500-394q0-66-48-113l-82-81q-46-47-113-47-68 0-114 48l-115 115q-46 47-46 114 0 68 49 116l-49 49q-48-49-116-49-67 0-114 47l-116 116q-47 47-47 114t47 113l82 82q47 46 114 46 67 0 114-47l115-116q46-46 46-113 0-69-49-117l49-49q48 49 116 49 67 0 114-47l116-116q47-47 47-114z" horiz-adv-x="928.6" />
-
-<glyph glyph-name="cog" unicode="&#xe809;" d="M571 350q0 59-41 101t-101 42-101-42-42-101 42-101 101-42 101 42 41 101z m286 61v-124q0-7-4-13t-11-7l-104-16q-10-30-21-51 19-27 59-77 6-6 6-13t-5-13q-15-21-55-61t-53-39q-7 0-14 5l-77 60q-25-13-51-21-9-76-16-104-4-16-20-16h-124q-8 0-14 5t-6 12l-16 103q-27 9-50 21l-79-60q-6-5-14-5-8 0-14 6-70 64-92 94-4 5-4 13 0 6 5 12 8 12 28 37t30 40q-15 28-23 55l-102 15q-7 1-11 7t-5 13v124q0 7 5 13t10 7l104 16q8 25 22 51-23 32-60 77-6 7-6 14 0 5 5 12 15 20 55 60t53 40q7 0 15-5l77-60q24 13 50 21 9 76 17 104 3 16 20 16h124q7 0 13-5t7-12l15-103q28-9 51-20l79 59q5 5 13 5 7 0 14-5 72-67 92-95 4-5 4-12 0-7-4-13-9-12-29-37t-30-40q15-28 23-54l102-16q7-1 12-7t4-13z" horiz-adv-x="857.1" />
-
-<glyph glyph-name="off" unicode="&#xe80a;" d="M857 350q0-87-34-166t-91-137-137-92-166-34-167 34-136 92-92 137-34 166q0 102 45 191t126 151q24 18 54 14t46-28q18-23 14-53t-28-47q-54-41-84-101t-30-127q0-58 23-111t61-91 91-61 111-23 110 23 92 61 61 91 22 111q0 68-30 127t-84 101q-23 18-28 47t14 53q17 24 47 28t53-14q81-61 126-151t45-191z m-357 429v-358q0-29-21-50t-50-21-51 21-21 50v358q0 29 21 50t51 21 50-21 21-50z" horiz-adv-x="857.1" />
-
-<glyph glyph-name="video" unicode="&#xe80b;" d="M214-43v72q0 14-10 25t-25 10h-72q-14 0-25-10t-11-25v-72q0-14 11-25t25-11h72q14 0 25 11t10 25z m0 214v72q0 14-10 25t-25 11h-72q-14 0-25-11t-11-25v-72q0-14 11-25t25-10h72q14 0 25 10t10 25z m0 215v71q0 15-10 25t-25 11h-72q-14 0-25-11t-11-25v-71q0-15 11-25t25-11h72q14 0 25 11t10 25z m572-429v286q0 14-11 25t-25 11h-429q-14 0-25-11t-10-25v-286q0-14 10-25t25-11h429q15 0 25 11t11 25z m-572 643v71q0 15-10 26t-25 10h-72q-14 0-25-10t-11-26v-71q0-14 11-25t25-11h72q14 0 25 11t10 25z m786-643v72q0 14-11 25t-25 10h-71q-15 0-25-10t-11-25v-72q0-14 11-25t25-11h71q15 0 25 11t11 25z m-214 429v285q0 15-11 26t-25 10h-429q-14 0-25-10t-10-26v-285q0-15 10-25t25-11h429q15 0 25 11t11 25z m214-215v72q0 14-11 25t-25 11h-71q-15 0-25-11t-11-25v-72q0-14 11-25t25-10h71q15 0 25 10t11 25z m0 215v71q0 15-11 25t-25 11h-71q-15 0-25-11t-11-25v-71q0-15 11-25t25-11h71q15 0 25 11t11 25z m0 214v71q0 15-11 26t-25 10h-71q-15 0-25-10t-11-26v-71q0-14 11-25t25-11h71q15 0 25 11t11 25z m71 89v-750q0-37-26-63t-63-26h-893q-36 0-63 26t-26 63v750q0 37 26 63t63 27h893q37 0 63-27t26-63z" horiz-adv-x="1071.4" />
-
-<glyph glyph-name="upload" unicode="&#xe80c;" d="M714 29q0 14-10 25t-25 10-25-10-11-25 11-25 25-11 25 11 10 25z m143 0q0 14-10 25t-26 10-25-10-10-25 10-25 25-11 26 11 10 25z m72 125v-179q0-22-16-38t-38-16h-821q-23 0-38 16t-16 38v179q0 22 16 38t38 15h238q12-31 39-51t62-20h143q34 0 61 20t40 51h238q22 0 38-15t16-38z m-182 361q-9-22-33-22h-143v-250q0-15-10-25t-25-11h-143q-15 0-25 11t-11 25v250h-143q-23 0-33 22-9 22 8 39l250 250q10 10 25 10t25-10l250-250q18-17 8-39z" horiz-adv-x="928.6" />
-
-<glyph glyph-name="minus" unicode="&#xe80d;" d="M786 439v-107q0-22-16-38t-38-15h-678q-23 0-38 15t-16 38v107q0 23 16 38t38 16h678q23 0 38-16t16-38z" horiz-adv-x="785.7" />
-
-<glyph glyph-name="colon" unicode="&#xe80e;" d="M0 526c0 53 43 97 98 97 53 0 97-44 97-97 0-55-44-98-97-98-55 0-98 43-98 98z m0-352c0 54 43 98 98 98 53 0 97-44 97-98 0-55-44-97-97-97-55 0-98 42-98 97z" horiz-adv-x="195" />
-
-<glyph glyph-name="pi" unicode="&#xe80f;" d="M714 557q15-15 15-37t-15-37q-58-58-141-74l0-292q0-22-15-37t-37-16-37 16-15 37l0 292q-84 16-141 74-30 30-68 41l0-407q0-22-15-37t-36-16-37 16-16 37l0 407q-37-11-67-41-15-15-37-15t-37 15-15 37 15 37q80 80 193 80t193-80q50-50 120-50t119 50q15 15 37 15t37-15z" horiz-adv-x="729" />
-
-<glyph glyph-name="list-alt" unicode="&#xe810;" d="M214 189v-35q0-8-5-13t-13-5h-35q-7 0-13 5t-5 13v35q0 8 5 13t13 5h35q8 0 13-5t5-13z m0 143v-36q0-7-5-12t-13-5h-35q-7 0-13 5t-5 12v36q0 7 5 13t13 5h35q8 0 13-5t5-13z m0 143v-36q0-7-5-12t-13-6h-35q-7 0-13 6t-5 12v36q0 7 5 13t13 5h35q8 0 13-5t5-13z m643-286v-35q0-8-5-13t-13-5h-535q-8 0-13 5t-5 13v35q0 8 5 13t13 5h535q8 0 13-5t5-13z m0 143v-36q0-7-5-12t-13-5h-535q-8 0-13 5t-5 12v36q0 7 5 13t13 5h535q8 0 13-5t5-13z m0 143v-36q0-7-5-12t-13-6h-535q-8 0-13 6t-5 12v36q0 7 5 13t13 5h535q8 0 13-5t5-13z m72-393v464q0 8-6 13t-12 5h-822q-7 0-12-5t-6-13v-464q0-7 6-12t12-6h822q7 0 12 6t6 12z m71 607v-607q0-37-26-63t-63-26h-822q-36 0-63 26t-26 63v607q0 37 26 63t63 27h822q37 0 63-27t26-63z" horiz-adv-x="1000" />
-
-<glyph glyph-name="resize-vertical" unicode="&#xe811;" d="M393 671q0-14-11-25t-25-10h-71v-572h71q15 0 25-10t11-25-11-25l-143-143q-10-11-25-11t-25 11l-143 143q-10 10-10 25t10 25 25 10h72v572h-72q-14 0-25 10t-10 25 10 26l143 142q11 11 25 11t25-11l143-142q11-11 11-26z" horiz-adv-x="428.6" />
-
-<glyph glyph-name="math" unicode="&#xf01a;" d="M0 472q0 31 24 54t57 22h215l164-249 89 519h306q34 0 58-22t24-54-24-55-58-22h-170l-136-784-343 516h-125q-33 0-57 22t-24 53z" horiz-adv-x="937.5" />
-
-<glyph glyph-name="move" unicode="&#xf047;" d="M1000 350q0-14-11-25l-142-143q-11-11-26-11t-25 11-10 25v72h-215v-215h72q14 0 25-10t11-25-11-25l-143-143q-10-11-25-11t-25 11l-143 143q-11 10-11 25t11 25 25 10h72v215h-215v-72q0-14-10-25t-25-11-25 11l-143 143q-11 11-11 25t11 25l143 143q10 11 25 11t25-11 10-25v-72h215v215h-72q-14 0-25 10t-11 25 11 26l143 142q11 11 25 11t25-11l143-142q11-11 11-26t-11-25-25-10h-72v-215h215v72q0 14 10 25t25 11 26-11l142-143q11-10 11-25z" horiz-adv-x="1000" />
-
-<glyph glyph-name="link-ext" unicode="&#xf08e;" d="M786 332v-178q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h393q7 0 12-5t5-13v-36q0-8-5-13t-12-5h-393q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v178q0 8 5 13t13 5h36q8 0 13-5t5-13z m214 482v-285q0-15-11-25t-25-11-25 11l-98 98-364-364q-5-6-13-6t-12 6l-64 64q-6 5-6 12t6 13l364 364-98 98q-11 11-11 25t11 25 25 11h285q15 0 25-11t11-25z" horiz-adv-x="1000" />
-
-<glyph glyph-name="bookmark-empty" unicode="&#xf097;" d="M643 707h-572v-693l237 227 49 47 50-47 236-227v693z m7 72q12 0 24-5 19-8 29-23t11-35v-719q0-19-11-35t-29-23q-10-4-24-4-27 0-47 18l-246 236-246-236q-20-19-46-19-13 0-25 5-18 7-29 23t-11 35v719q0 19 11 35t29 23q12 5 25 5h585z" horiz-adv-x="714.3" />
-
-<glyph glyph-name="list-bullet" unicode="&#xf0ca;" d="M214 64q0-44-31-76t-76-31-76 31-31 76 31 76 76 31 76-31 31-76z m0 286q0-45-31-76t-76-31-76 31-31 76 31 76 76 31 76-31 31-76z m786-232v-107q0-7-5-13t-13-5h-678q-8 0-13 5t-5 13v107q0 7 5 12t13 6h678q7 0 13-6t5-12z m-786 518q0-45-31-76t-76-31-76 31-31 76 31 76 76 31 76-31 31-76z m786-232v-108q0-7-5-12t-13-5h-678q-8 0-13 5t-5 12v108q0 7 5 12t13 5h678q7 0 13-5t5-12z m0 285v-107q0-7-5-12t-13-6h-678q-8 0-13 6t-5 12v107q0 8 5 13t13 5h678q7 0 13-5t5-13z" horiz-adv-x="1000" />
-
-<glyph glyph-name="list-numbered" unicode="&#xf0cb;" d="M213-54q0-45-31-70t-75-26q-60 0-96 37l31 49q28-25 60-25 16 0 28 8t12 24q0 35-59 31l-14 31q4 6 18 24t24 31 20 21v1q-9 0-27-1t-27 0v-30h-59v85h186v-49l-53-65q28-6 45-27t17-49z m1 350v-89h-202q-4 20-4 30 0 29 14 52t31 38 37 27 31 24 14 25q0 14-9 22t-22 7q-25 0-45-32l-47 33q13 28 40 44t59 16q40 0 68-23t28-63q0-28-19-51t-42-36-42-28-20-30h71v34h59z m786-178v-107q0-7-5-13t-13-5h-678q-8 0-13 5t-5 13v107q0 8 5 13t13 5h678q7 0 13-6t5-12z m-786 502v-56h-187v56h60q0 22 0 67t1 68v7h-1q-5-10-28-30l-40 42 76 71h59v-225h60z m786-216v-108q0-7-5-12t-13-5h-678q-8 0-13 5t-5 12v108q0 7 5 12t13 5h678q7 0 13-5t5-12z m0 285v-107q0-7-5-12t-13-6h-678q-8 0-13 6t-5 12v107q0 8 5 13t13 5h678q7 0 13-5t5-13z" horiz-adv-x="1000" />
-
-<glyph glyph-name="table" unicode="&#xf0ce;" d="M286 82v107q0 8-5 13t-13 5h-179q-7 0-12-5t-6-13v-107q0-8 6-13t12-5h179q8 0 13 5t5 13z m0 214v108q0 7-5 12t-13 5h-179q-7 0-12-5t-6-12v-108q0-7 6-12t12-5h179q8 0 13 5t5 12z m285-214v107q0 8-5 13t-12 5h-179q-8 0-13-5t-5-13v-107q0-8 5-13t13-5h179q7 0 12 5t5 13z m-285 429v107q0 8-5 13t-13 5h-179q-7 0-12-5t-6-13v-107q0-8 6-13t12-5h179q8 0 13 5t5 13z m285-215v108q0 7-5 12t-12 5h-179q-8 0-13-5t-5-12v-108q0-7 5-12t13-5h179q7 0 12 5t5 12z m286-214v107q0 8-5 13t-13 5h-178q-8 0-13-5t-5-13v-107q0-8 5-13t13-5h178q8 0 13 5t5 13z m-286 429v107q0 8-5 13t-12 5h-179q-8 0-13-5t-5-13v-107q0-8 5-13t13-5h179q7 0 12 5t5 13z m286-215v108q0 7-5 12t-13 5h-178q-8 0-13-5t-5-12v-108q0-7 5-12t13-5h178q8 0 13 5t5 12z m0 215v107q0 8-5 13t-13 5h-178q-8 0-13-5t-5-13v-107q0-8 5-13t13-5h178q8 0 13 5t5 13z m72 178v-607q0-37-27-63t-63-26h-750q-36 0-63 26t-26 63v607q0 37 26 63t63 27h750q37 0 63-27t27-63z" horiz-adv-x="928.6" />
-
-<glyph glyph-name="doc-text" unicode="&#xf0f6;" d="M819 638q16-16 27-42t11-50v-642q0-23-15-38t-38-16h-750q-23 0-38 16t-16 38v892q0 23 16 38t38 16h500q22 0 49-11t42-27z m-248 136v-210h210q-5 17-12 23l-175 175q-6 7-23 12z m215-853v572h-232q-23 0-38 16t-16 37v233h-429v-858h715z m-572 483q0 7 5 12t13 5h393q8 0 13-5t5-12v-36q0-8-5-13t-13-5h-393q-8 0-13 5t-5 13v36z m411-125q8 0 13-5t5-13v-36q0-8-5-13t-13-5h-393q-8 0-13 5t-5 13v36q0 8 5 13t13 5h393z m0-143q8 0 13-5t5-13v-36q0-8-5-13t-13-5h-393q-8 0-13 5t-5 13v36q0 8 5 13t13 5h393z" horiz-adv-x="857.1" />
-
-<glyph glyph-name="quote-left" unicode="&#xf10d;" d="M429 314v-214q0-45-32-76t-76-31h-214q-44 0-76 31t-31 76v393q0 58 23 111t61 91 91 61 111 23h35q15 0 26-11t10-25v-72q0-14-10-25t-26-10h-35q-59 0-101-42t-42-101v-18q0-22 16-38t37-16h125q45 0 76-31t32-76z m500 0v-214q0-45-32-76t-76-31h-214q-44 0-76 31t-31 76v393q0 58 23 111t61 91 91 61 111 23h35q15 0 26-11t10-25v-72q0-14-10-25t-26-10h-35q-59 0-101-42t-42-101v-18q0-22 16-38t37-16h125q45 0 76-31t32-76z" horiz-adv-x="928.6" />
-
-<glyph glyph-name="folder-empty" unicode="&#xf114;" d="M857 118v393q0 22-15 38t-38 15h-393q-23 0-38 16t-16 38v36q0 22-15 38t-38 15h-179q-22 0-38-15t-16-38v-536q0-22 16-38t38-16h679q22 0 38 16t15 38z m72 393v-393q0-51-37-88t-88-37h-679q-51 0-88 37t-37 88v536q0 51 37 88t88 37h179q51 0 88-37t37-88v-18h375q51 0 88-37t37-88z" horiz-adv-x="928.6" />
-
-<glyph glyph-name="code" unicode="&#xf121;" d="M344 69l-28-28q-5-5-12-5t-13 5l-260 261q-6 5-6 12t6 13l260 260q5 6 13 6t12-6l28-28q6-5 6-13t-6-12l-219-220 219-219q6-6 6-13t-6-13z m330 596l-208-721q-2-7-9-11t-13-1l-34 9q-8 3-11 9t-2 14l209 720q2 8 8 11t13 2l35-10q7-2 11-9t1-13z m367-363l-260-261q-6-5-13-5t-13 5l-28 28q-5 6-5 13t5 13l219 219-219 220q-5 5-5 12t5 13l28 28q6 6 13 6t13-6l260-260q5-5 5-13t-5-12z" horiz-adv-x="1071.4" />
-
-<glyph glyph-name="superscript" unicode="&#xf12b;" d="M501 86v-93h-139l-89 141-13 23q-4 5-6 12h-2q0-2-1-4t-2-4-2-4q-5-11-14-25l-86-139h-144v93h71l110 162-103 152h-76v94h154l77-127q1-2 13-24 4-5 6-11h2q1 5 6 11l14 24 78 127h143v-94h-69l-103-149 114-165h61z m355 379v-115h-287l-1 15q-3 16-3 26 0 36 15 65t36 48 47 37 47 30 36 30 15 36q0 21-17 35t-39 13q-29 0-54-21-8-6-20-22l-59 52q15 20 35 37 47 36 105 36 61 0 99-33t38-89q0-31-13-57t-35-43-45-33-46-28-37-28-17-36h130v45h70z" horiz-adv-x="857.1" />
-
-<glyph glyph-name="youtube-play" unicode="&#xf16a;" d="M397 221l270 139-270 141v-280z m103 481q94 0 181-3t128-5l41-2q0 0 9-1t13-2 13-2 16-5 16-7 17-11 16-15q4-3 9-10t16-33 15-56q4-36 7-76t3-64v-98q1-81-10-162-4-30-14-55t-18-35l-8-9q-7-8-16-15t-17-10-16-7-16-5-13-2-13-2-9-1q-140-11-350-11-115 2-201 4t-111 4l-28 3-20 2q-20 3-30 5t-29 12-31 23q-4 3-9 10t-16 33-15 56q-4 36-7 76t-3 64v98q-1 81 10 162 4 31 14 55t18 35l8 9q8 9 16 15t17 11 16 7 16 5 13 2 13 2 9 1q140 10 350 10z" horiz-adv-x="1000" />
-
-<glyph glyph-name="header" unicode="&#xf1dc;" d="M939-79q-25 0-74 2t-75 2q-24 0-73-2t-74-2q-13 0-21 12t-7 25q0 18 9 26t22 9 29 4 25 9q18 11 18 78l0 218q0 12-1 17-7 3-28 3h-376q-22 0-29-3 0-5 0-17l-1-207q0-79 21-91 9-6 26-8t32-2 25-8 11-26q0-14-6-26t-21-13q-26 0-78 2t-77 2q-24 0-71-2t-71-2q-13 0-20 12t-7 25q0 17 9 25t20 10 26 4 24 9q18 13 18 80l-1 31v454q0 2 1 15t0 20-1 21-2 24-4 20-6 18-9 10q-8 5-25 7t-29 1-23 7-10 26q0 14 6 26t20 13q26 0 78-2t77-2q23 0 71 2t70 2q14 0 21-13t7-26q0-17-9-25t-22-8-27-2-24-7q-20-12-20-90l1-178q0-12 0-18 7-2 22-2h390q14 0 21 2 1 6 1 18l0 178q0 78-19 90-10 6-33 7t-37 7-14 28q0 14 7 26t21 13q24 0 74-2t73-2q24 0 72 2t72 2q14 0 21-13t7-26q0-17-10-25t-22-8-29-2-24-7q-20-13-20-90l1-526q0-66 19-78 9-6 25-8t30-2 23-9 10-25q0-14-6-26t-20-13z" horiz-adv-x="1000" />
-
-<glyph glyph-name="paragraph" unicode="&#xf1dd;" d="M713 745v-41q0-16-10-34t-24-18q-28 0-30-1-14-3-18-17-1-6-1-36v-643q0-14-11-24t-24-10h-60q-14 0-24 10t-10 24v680h-80v-680q0-14-9-24t-25-10h-60q-14 0-24 10t-10 24v277q-82 7-137 33-70 33-107 100-36 65-36 145 0 92 50 159 49 66 116 89 62 21 233 21h267q14 0 24-10t10-24z" horiz-adv-x="714.3" />
-</font>
-</defs>
-</svg>

system/author/css/style.css

@@ -19,7 +19,11 @@ a, a:link, a:visited, a:focus, a:hover, a:active, button, .button, input, .contr
 	-ms-transition: border-color 0.2s ease;
 	transition: border-color 0.2s ease;		
 }
-.navi-item a, .navi-item.folder a i, .navi-item.file a i{
+.navi-item a, 
+.navi-item.file a .iconwrapper,
+.navi-item.folder a .iconwrapper,
+.navi-item.file a .movewrapper,
+.navi-item.folder a .movewrapper{
 	-webkit-transition: all 0.1s ease;
 	-moz-transition: all 0.1s ease;
 	-o-transition: all 0.1s ease;
@@ -131,9 +135,10 @@ aside.sidebar{
 .navi-items a:hover, .navi-items a:focus, .navi-items a:active, .navi-items a.active{
 	border-bottom: 3px solid #66b0a3;
 }
-.navi-items i{
-	color: #ddd;
+.navi-items .icon{
+	color: #ccc;
 }
+
 .navi-items span{
 	display: none;
 }
@@ -208,16 +213,16 @@ li.menu-item{
 	padding: 0px;
 	position: relative;
 }
-.navi-item i.icon-doc-text, 
-.navi-item i.icon-folder-empty, 
-.navi-item i.icon-home, 
-.navi-item i.icon-plus{
+.navi-item .iconwrapper{
 	display: inline-block;
 	position: absolute;
 	top: 0px;
 	background: transparent;
 	color: #ccc;
 	padding: 7px 2px 7px;
+	left: -24px;
+	width: 20px;
+	height: 16px;
 }
 .navi-item .status{
 	position: absolute;
@@ -232,17 +237,15 @@ li.menu-item{
 	background:#66b0a3;
 }
 .status.modified{
-/*	background: #FFD700; */
 	background: #FFA500;
 }
 .status.unpublished{
 	background:#cc4146;
 }
-.navi-item i.icon-resize-full-alt,
-.navi-item i.icon-move {
+.navi-item .movewrapper {
 	position: absolute;
-	right: 5px;
-	top: 7px;
+	right: 4px;
+	top: 4px;
 	color: #f9f8f6;
 	color: #444;
 	background: transparent;
@@ -263,9 +266,9 @@ li.menu-item{
 .navi-item.file a{
 	font-weight: 300;
 }
-.navi-item a:focus, .navi-item a:focus i,
-.navi-item a:hover, .navi-item a:hover i,
-.navi-item a.active, .navi-item a.active i{
+.navi-item a:focus,
+.navi-item a:hover, 
+.navi-item a.active{
 	background:#66b0a3;
 	color: #fff;
 }
@@ -800,7 +803,6 @@ fieldset.card{
 }
 .card img{
 	width: 100%;
-	border: 1px solid #f9f8f6; 
 	background: #f9f8f6; 
 }
 .cardInner{
@@ -1442,10 +1444,13 @@ label .help, .label .help{
 	border-radius: 2px;
 	font-size: 0.9em;
 }
-.blox-buttons button.edit:hover{
+.blox-buttons button.edit{
 	background: #70c1b3;
 	color: #eee;
 }
+.blox-buttons button.edit:hover{
+	background: #4D978A;
+}
 .blox-buttons button.cancel:hover{
 	background: #e0474c;
 	color: #eee;
@@ -1471,7 +1476,7 @@ label .help, .label .help{
 	color: #fff;
 	width: 20px;
 	height: 20px;
-	line-height: 20px;
+	line-height: 25px;
 	text-align: center;
 	padding: 0px;
 	margin: 1px;
@@ -1582,6 +1587,30 @@ button.hdown:hover,button.hdown:focus,button.hdown:active{
 
 
 /* .format-bar at the bottom of the page */
+
+/********************
+* 	SVG ICONS 		*
+********************/
+
+.icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  stroke-width: 0;
+  stroke: currentColor;
+  fill: currentColor;
+}
+.icon.baseline{
+  top: 0.125em;
+  position: relative;	
+}
+.icon-file-text-o {
+  width: 0.8571428571428571em;
+}
+.icon-bookmark-o {
+  width: 0.7142857142857142em;
+  margin-right: 10px;
+}
 .format-bar .hidden{
 	display: none;
 }
@@ -1643,8 +1672,8 @@ button.hdown:hover,button.hdown:focus,button.hdown:active{
   opacity: 0.3;
 }
 button.format-item{
-	margin: 2px 0;
-	padding: 5px;
+	margin: 2px;
+	padding: 12px 5px;
 	background: #f9f8f6;
 	border: 1px solid #eee;
 	color: #444;
@@ -1707,8 +1736,10 @@ button.format-item.close:hover{
 	border-top: 6px solid #333;
 }
 .inlineFormatItem {  
-	color: #FFF;  
+	color: #FFF;
 	cursor: pointer;
+	font-size: 0.9em;
+	padding: 3px;
 }
 .inlineFormatItem:hover {  
 	color: #1199ff;
@@ -1862,7 +1893,8 @@ button.format-item.close:hover{
 	padding: 20px 20px 0 20px;
 	box-sizing: border-box;
 }
-.definitionRow .icon-colon{
+.definitionRow .icon-arrows-v,
+.definitionRow .icon-dots-two-vertical{
 	display: inline-block;
 	margin-top: 15px;
 }
@@ -1889,15 +1921,15 @@ button.delDL{
 	border: 0px;
 	background: transparent;
 }
-button.addDL i,
-button.delDL i{
-	width: 20px;
+button.addDL .icon-plus,
+button.delDL .icon-minus{
+	width: 10px;
+	height: 10px;
 	border-radius: 1px;
 	text-align: center;
 	color:#f9f8f6;
-	padding: 2px 0 0;
-	line-height: 20px;
-	height: 20px;
+	padding: 2px 1px 1px;
+	line-height: 10px;
 }
 button.addDL{
 	margin: 20px;
@@ -1914,9 +1946,17 @@ button.delDL i{
 button.delDL i:hover{
 	background: #cc4146;
 }
-i.icon-resize-vertical{
+.definitionList .icon-arrows-v{
 	color: #ddd;
 }
+.definitionList .icon-plus{
+	background: #66b0a3;
+	width: 10px;
+	height: 10px;
+}
+.definitionList .icon-minus{
+	background: #e0474c;
+}
 .blox ul, .blox ol{ 
 	padding-left: 0px;
 	margin-left: 18px;
@@ -2235,9 +2275,6 @@ footer a:focus, footer a:hover, footer a:active
 	span.level-3{ padding-left: 35px; }
 	span.level-4{ padding-left: 50px; }
 	span.level-5{ padding-left: 65px; }
-	.navi-item i.icon-doc-text, .navi-item i.icon-folder-empty, .navi-item i.icon-home, .navi-item i.icon-plus{
-		left: -24px;
-	}	
 	fieldset.plugin{
 		width: 49.5%;
 	}
@@ -2291,16 +2328,25 @@ footer a:focus, footer a:hover, footer a:active
 	.navi-item .status{
 		left: -30px;
 	}	
-	.navi-item a i.icon-move, .navi-item a:link i.icon-move, .navi-item a:visited i.icon-move{
+	.navi-item a .movewrapper, 
+	.navi-item a:link .movewrapper, 
+	.navi-item a:visited .movewrapper{
 		color: #f9f8f6;
 		background: transparent;
 	}
-	.navi-item a:focus, .navi-item a:focus i, .navi-item a:focus i.icon-move,
-	.navi-item a:hover, .navi-item a:hover i, .navi-item a:hover i.icon-move,
-	.navi-item a.active, .navi-item a.active i, .navi-item a.active i.icon-move{
+	.navi-item a:focus, 
+	.navi-item a:focus .iconwrapper, 
+	.navi-item a:focus .movewrapper, 
+	.navi-item a:hover, 
+	.navi-item a:hover .iconwrapper, 
+	.navi-item a:hover .movewrapper, 
+	.navi-item a.active, 
+	.navi-item a.active .iconwrapper,
+	.navi-item a.active .movewrapper
+	{
 		background:#fff;
 		color: #444;
-	}	
+	}
 	.navi-items span{
 		display: inline;
 	}	

system/author/editor/editor-blox.twig

@@ -2,9 +2,9 @@
 {% block title %}Visual Content Editor{% endblock %}
 
 {% block content %}
-	
+
 	<div class="formWrapper">
-		
+
 		<section id="blox">
 			
 			<div class="blox-body">
@@ -32,40 +32,22 @@
 						<content-block :body="true" v-for="(block, index) in html" v-if="index !== 0">
 							<div v-if="block" class="blox" :key="block.id" @click.prevent="setData( $event )" :data-id="index" :id="'blox-' + index" v-html="block.html"></div>
 							<div v-else class="format-bar blox" @click.prevent="clearData( $event )" :data-id="index" :id="'blox-' + index">
-								<button class="format-item" @click.prevent="setData( $event, 'markdown-component' )" :data-id="index" :id="'blox-' + index" title="paragraph"><i class="icon-paragraph"></i></button>
-								<button class="format-item" @click.prevent="setData( $event, 'headline-component' )" :data-id="index" :id="'blox-' + index" title="headline"><i class="icon-header"></i></button>
-								<button class="format-item" @click.prevent="setData( $event, 'ulist-component' )" :data-id="index" :id="'blox-' + index" title="bullet list"><i class="icon-list-bullet"></i></button>
-								<button class="format-item" @click.prevent="setData( $event, 'olist-component' )" :data-id="index" :id="'blox-' + index" title="numbered list"><i class="icon-list-numbered"></i></button>
-								<button class="format-item" @click.prevent="setData( $event, 'image-component' )" :data-id="index" :id="'blox-' + index" title="image"><i class="icon-picture"></i></button>
-								<button class="format-item" @click.prevent="setData( $event, 'video-component' )" :data-id="index" :id="'blox-' + index" title="youtube"><i class="icon-youtube-play"></i></button>
-								<button class="format-item" @click.prevent="setData( $event, 'table-component' )" :data-id="index" :id="'blox-' + index" title="table"><i class="icon-table"></i></button>
-								<button class="format-item" @click.prevent="setData( $event, 'quote-component' )" :data-id="index" :id="'blox-' + index" title="quote"><i class="icon-quote-left"></i></button>
-								<button class="format-item" @click.prevent="setData( $event, 'definition-component' )" :data-id="index" :id="'blox-' + index" title="definition list"><i class="icon-colon"></i></button>
-								<button class="format-item" @click.prevent="setData( $event, 'toc-component' )" :data-id="index" :id="'blox-' + index" title="table of contents"><i class="icon-list-alt"></i></button>
-								<button class="format-item" @click.prevent="setData( $event, 'hr-component' )" :data-id="index" :id="'blox-' + index" title="horizontal line"><i class="icon-minus"></i></button>
-								<button class="format-item" @click.prevent="setData( $event, 'code-component' )" :data-id="index" :id="'blox-' + index" title="code block"><i class="icon-code"></i></button>
-								<button class="format-item" @click.prevent="setData( $event, 'math-component' )" :data-id="index" :id="'blox-' + index" title="math block"><i class="icon-math"></i></button>
+
+								<button v-for="button in formats" class="format-item"  @click.prevent="setData( $event, button.component )" :data-id="index" :id="'blox-' + index" :title="button.title" v-html="button.label"></button>
+
 							</div>
 						</content-block>
 					</draggable>
 				</div>
 	
 				<div class="format-bar">
+
 					<content-block :body="false">
-						<button class="format-item" @click.prevent="setData( $event, 'markdown-component' )" data-id="99999" id="blox-99999" title="paragraph"><i class="icon-paragraph"></i></button>
-						<button class="format-item" @click.prevent="setData( $event, 'headline-component' )" data-id="99999" id="blox-99999" title="headline"><i class="icon-header"></i></button>
-						<button class="format-item" @click.prevent="setData( $event, 'ulist-component' )" data-id="99999" id="blox-99999" title="bullet list"><i class="icon-list-bullet"></i></button>
-						<button class="format-item" @click.prevent="setData( $event, 'olist-component' )" data-id="99999" id="blox-99999" title="numbered list"><i class="icon-list-numbered"></i></button>
-						<button class="format-item" @click.prevent="setData( $event, 'image-component' )" data-id="99999" id="blox-99999" title="image"><i class="icon-picture"></i></button>
-						<button class="format-item" @click.prevent="setData( $event, 'video-component' )" data-id="99999" id="blox-99999" title="youtube"><i class="icon-youtube-play"></i></button>
-						<button class="format-item" @click.prevent="setData( $event, 'table-component' )" data-id="99999" id="blox-99999" title="table"><i class="icon-table"></i></button>
-						<button class="format-item" @click.prevent="setData( $event, 'quote-component' )" data-id="99999" id="blox-99999" title="quote"><i class="icon-quote-left"></i></button>
-						<button class="format-item" @click.prevent="setData( $event, 'definition-component' )" data-id="99999" id="blox-99999" title="definition list"><i class="icon-colon"></i></button>
-						<button class="format-item" @click.prevent="setData( $event, 'toc-component' )" data-id="99999" id="blox-99999" title="table of contents"><i class="icon-list-alt"></i></button>
-						<button class="format-item" @click.prevent="setData( $event, 'hr-component' )" data-id="99999" id="blox-99999" title="horizontal line"><i class="icon-minus"></i></button>
-						<button class="format-item" @click.prevent="setData( $event, 'code-component' )" data-id="99999" id="blox-99999" title="code block"><i class="icon-code"></i></button>
-						<button class="format-item" @click.prevent="setData( $event, 'math-component' )" data-id="99999" id="blox-99999" title="math"><i class="icon-math"></i></button>
+
+						<button v-for="button in formats" class="format-item"  @click.prevent="setData( $event, button.component )" data-id="99999" id="blox-99999" :title="button.title" v-html="button.label"></button>
+					
 					</content-block>
+
 				</div>
 				
 			</div>

system/author/editor/publish-controller.twig

@@ -7,7 +7,7 @@
 		<button @click.prevent="showModal('delete')" class="button--secondary danger"><span class="desktop">delete</span><span class="mobile">X</span></button>
 		<a v-if="visual" href="{{ base_url }}/tm/content/raw{{item.urlRelWoF}}" class="button--secondary"><span class="desktop">raw mode</span><span class="mobile">raw</span></a>
 		<a v-if="raw" href="{{ base_url }}/tm/content/visual{{item.urlRelWoF}}" class="button--secondary"><span class="desktop">visual mode</span><span class="mobile">visual</span></a>
-		<a target="_blank" class="button--secondary" href="{{ item.urlAbs }}"><i class="icon-link-ext"></i></a>
+		<a target="_blank" class="button--secondary" href="{{ item.urlAbs }}"><svg class="icon baseline icon-external-link"><use xlink:href="#icon-external-link"></use></svg></a>
 	</div>
 	<transition name="fade">
 		<div v-if="modalWindow" id="modalWindow" class="modalWindow">
@@ -21,7 +21,7 @@
 				<div v-if="modalType == 'discard'">
 					<h2>Discard Changes</h2>
 					<p>Do you want to discard your changes and set the content back to the live version?</p>
-					<button @click.prevent="discardDraft" class="large fullwidth" :class="discardResult" :disabled="publishDisabled">Discard Changes</button>				
+					<button @click.prevent="discardDraft" class="large fullwidth" :class="discardResult" :disabled="publishDisabled">Discard Changes</button>
 				</div>
 			</div>
 		</div>

system/author/js/vue-blox-config.js

@@ -0,0 +1,74 @@
+let determiner = {
+
+	olist: function(block,lines,firstChar,secondChar,thirdChar){
+		if(block.match(/^\d+\./))
+		{ 
+			return "olist-component";
+		}
+		return false;
+	},
+	definition: function(block,lines,firstChar,secondChar,thirdChar){
+		if(lines.length > 1 && lines[1].substr(0,2) == ': ')
+		{
+			return "definition-component";
+		}
+		return false;
+	},
+	table: function(block,lines,firstChar,secondChar,thirdChar){
+		if(lines.length > 2 && lines[0].indexOf('|') != -1 && /[\-\|: ]{3,}$/.test(lines[1]))
+		{
+			return "table-component";
+		}
+		return false;
+	},
+	quote: function(block,lines,firstChar,secondChar,thirdChar){
+		if(firstChar == '>')
+		{
+			return "quote-component";
+		}
+		return false;
+	},
+	headline: function(block,lines,firstChar,secondChar,thirdChar){
+		if(firstChar == '#')
+		{
+			return "headline-component";
+		}
+		return false;
+	},
+	image: function(block,lines,firstChar,secondChar,thirdChar){
+		if( (firstChar == '!' && secondChar == '[') || (firstChar == '[' && secondChar == '!' && thirdChar == '[') )
+		{
+			return "image-component";
+		}
+		return false;
+	},
+	code: function(block,lines,firstChar,secondChar,thirdChar){
+		if( firstChar == '`' && secondChar == '`' && thirdChar == '`')
+		{
+			return "code-component";
+		}
+		return false;
+	},
+	ulist: function(block,lines,firstChar,secondChar,thirdChar){
+		if( (firstChar == '*' || firstChar == '-' || firstChar == '+') && secondChar == ' ')
+		{
+			return "ulist-component";
+		}
+		return false;
+	}
+}
+
+let bloxFormats = {
+			markdown: { label: '<svg class="icon icon-pilcrow"><use xlink:href="#icon-pilcrow"></use></svg>', title: 'Paragraph', component: 'markdown-component' },
+			headline: { label: '<svg class="icon icon-header"><use xlink:href="#icon-header"></use></svg>', title: 'Headline', component: 'headline-component' },
+			ulist: { label: '<svg class="icon icon-list2"><use xlink:href="#icon-list2"></use></svg>', title: 'Bullet List', component: 'ulist-component' },
+			olist: { label: '<svg class="icon icon-list-numbered"><use xlink:href="#icon-list-numbered"></use></svg>', title: 'Numbered List', component: 'olist-component' },
+			table: { label: '<svg class="icon icon-table2"><use xlink:href="#icon-table2"></use></svg>', title: 'Table', component: 'table-component' },
+			quote: { label: '<svg class="icon icon-quotes-left"><use xlink:href="#icon-quotes-left"></use></svg>', title: 'Quote', component: 'quote-component' },
+			image: { label: '<svg class="icon icon-image"><use xlink:href="#icon-image"></use></svg>', title: 'Image', component: 'image-component' },
+			video: { label: '<svg class="icon icon-play"><use xlink:href="#icon-play"></use></svg>', title: 'Video', component: 'video-component' },
+			toc: { label: '<svg class="icon icon-list-alt"><use xlink:href="#icon-list-alt"></use></svg>', title: 'Table of Contents', component: 'toc-component' },
+			hr: { label: '<svg class="icon icon-pagebreak"><use xlink:href="#icon-pagebreak"></use></svg>', title: 'Horizontal Line', component: 'hr-component' },
+			definition: { label: '<svg class="icon icon-dots-two-vertical"><use xlink:href="#icon-dots-two-vertical"></use></svg>', title: 'Definition List', component: 'definition-component' },
+			code: { label: '<svg class="icon icon-embed"><use xlink:href="#icon-embed"></use></svg>', title: 'Code', component: 'code-component' },
+};

system/author/js/vue-blox.js

@@ -6,8 +6,8 @@ const contentComponent = Vue.component('content-block', {
 				'<div v-if="newblock" class="newblock-info">Choose a content-type <button class="newblock-close" @click.prevent="closeNewBlock($event)">close</button></div>' +	
 				'<div class="blox-wrapper" :class="{ editactive: edit }">' +
 				 '<div class="sideaction" v-if="body">' + 
-				  '<button class="add" :disabled="disabled" title="add content-block" @click.prevent="addNewBlock($event)"><i class="icon-plus"></i></button>' +
-				  '<button class="delete" :disabled="disabled" title="delete content-block" @click.prevent="deleteBlock($event)"><i class="icon-cancel-1"></i></button>' +
+				  '<button class="add" :disabled="disabled" title="add content-block" @click.prevent="addNewBlock($event)"><svg class="icon icon-plus"><use xlink:href="#icon-plus"></use></svg></button>' +
+				  '<button class="delete" :disabled="disabled" title="delete content-block" @click.prevent="deleteBlock($event)"><svg class="icon icon-close"><use xlink:href="#icon-close"></use></svg></button>' +
 				 '</div>' + 
 				 '<div class="background-helper" @keyup.enter="submitBlock" @click="getData">' +
 				  '<div class="component" ref="component">' +
@@ -396,15 +396,15 @@ const inlineFormatsComponent = Vue.component('inline-formats', {
 	template: '<div><div :style="{ left: `${x}px`, top: `${y}px` }" @mousedown.prevent="" v-show="showInlineFormat" id="formatBar" class="inlineFormatBar">' + 
 				  '<div  v-if="link">' + 
 				      '<input v-model="url" @keyup.13="formatLink" ref="urlinput" class="urlinput" type="text" placeholder="insert url">' + 
-					  '<span class="inlineFormatItem inlineFormatLink" @mousedown.prevent="formatLink"><i class="icon-check"></i></span>' + 
-					  '<span class="inlineFormatItem inlineFormatLink" @mousedown.prevent="closeLink"><i class="icon-cancel"></i></span>' + 
+					  '<span class="inlineFormatItem inlineFormatLink" @mousedown.prevent="formatLink"><svg class="icon icon-check"><use xlink:href="#icon-check"></use></svg></span>' + 
+					  '<span class="inlineFormatItem inlineFormatLink" @mousedown.prevent="closeLink"><svg class="icon icon-cross"><use xlink:href="#icon-cross"></use></svg></i></span>' + 
 				  '</div>' +
 				  '<div v-else>' +
-					  '<span class="inlineFormatItem" @mousedown.prevent="formatBold"><i class="icon-bold"></i></span>' + 
-					  '<span class="inlineFormatItem" @mousedown.prevent="formatItalic"><i class="icon-italic"></i></span>' + 
-					  '<span class="inlineFormatItem" @mousedown.prevent="openLink"><i class="icon-link"></i></span>' + 
-					  '<span class="inlineFormatItem" @mousedown.prevent="formatCode"><i class="icon-code"></i></span>' + 
-					  '<span class="inlineFormatItem" @mousedown.prevent="formatMath"><i class="icon-pi"></i></span>' +
+					  '<span class="inlineFormatItem" @mousedown.prevent="formatBold"><svg class="icon icon-bold"><use xlink:href="#icon-bold"></use></svg></span>' + 
+					  '<span class="inlineFormatItem" @mousedown.prevent="formatItalic"><svg class="icon icon-italic"><use xlink:href="#icon-italic"></use></svg></span>' + 
+					  '<span class="inlineFormatItem" @mousedown.prevent="openLink"><svg class="icon icon-link"><use xlink:href="#icon-link"></use></svg></span>' + 
+					  '<span v-if="code" class="inlineFormatItem" @mousedown.prevent="formatCode"><svg class="icon icon-embed"><use xlink:href="#icon-embed"></use></svg></span>' + 
+					  '<span v-if="math" class="inlineFormatItem" @mousedown.prevent="formatMath"><svg class="icon icon-omega"><use xlink:href="#icon-omega"></use></svg></span>' +
 				   '</div>' + 
 				'</div><slot></slot></div>',
 	data: function(){
@@ -420,7 +420,9 @@ const inlineFormatsComponent = Vue.component('inline-formats', {
      		endPos: false,
      		showInlineFormat: false,
      		link: false,
-     		url: ''
+     		url: '',
+     		code: (formatConfig.indexOf("code") > -1) ? true : false,
+     		math: (formatConfig.indexOf("math") > -1) ? true : false,
      	}
 	},
 	mounted: function() {
@@ -433,7 +435,7 @@ const inlineFormatsComponent = Vue.component('inline-formats', {
 		window.removeEventListener('mousedown', this.onMousedown)
 	},
 	computed: {
-		highlightableEl () {    
+		highlightableEl: function () {    
 			return this.$slots.default[0].elm  
 		}
 	},
@@ -568,7 +570,7 @@ const titleComponent = Vue.component('title-component', {
 const markdownComponent = Vue.component('markdown-component', {
 	props: ['compmarkdown', 'disabled'],
 	template: '<div>' + 
-				'<div class="contenttype"><i class="icon-paragraph"></i></div>' +
+				'<div class="contenttype"><svg class="icon icon-pilcrow"><use xlink:href="#icon-pilcrow"></use></svg></div>' +
 				'<inline-formats>' +
 					'<textarea id="activeEdit" class="mdcontent" ref="markdown" :value="compmarkdown" :disabled="disabled" @input="updatemarkdown(event.target.value)"></textarea>' + 
 			  	'</inline-formats>' +
@@ -588,7 +590,7 @@ const markdownComponent = Vue.component('markdown-component', {
 const hrComponent = Vue.component('hr-component', {
 	props: ['compmarkdown', 'disabled'],
 	template: '<div>' + 
-				'<div class="contenttype"><i class="icon-paragraph"></i></div>' +
+				'<div class="contenttype"><svg class="icon icon-pilcrow"><use xlink:href="#icon-pilcrow"></use></svg></div>' +
 				'<textarea class="mdcontent" ref="markdown" :value="compmarkdown" :disabled="disabled" @input="updatemarkdown">---</textarea>' +
 				'</div>',
 	mounted: function(){
@@ -607,7 +609,7 @@ const hrComponent = Vue.component('hr-component', {
 const tocComponent = Vue.component('toc-component', {
 	props: ['compmarkdown', 'disabled'],
 	template: '<div>' + 
-				'<div class="contenttype"><i class="icon-paragraph"></i></div>' +
+				'<div class="contenttype"><svg class="icon icon-list-alt"><use xlink:href="#icon-list-alt"></use></svg></div>' +
 				'<textarea class="mdcontent" ref="markdown" :value="compmarkdown" :disabled="disabled" @input="updatemarkdown">---</textarea>' +
 				'</div>',
 	mounted: function(){
@@ -627,7 +629,7 @@ const codeComponent = Vue.component('code-component', {
 	props: ['compmarkdown', 'disabled'],
 	template: '<div>' + 
 				'<input type="hidden" ref="markdown" :value="compmarkdown" :disabled="disabled" @input="updatemarkdown" />' +	
-				'<div class="contenttype"><i class="icon-code"></i></div>' +
+				'<div class="contenttype"><svg class="icon icon-embed"><use xlink:href="#icon-embed"></use></svg></div>' +
 				'<textarea class="mdcontent" ref="markdown" v-model="codeblock" :disabled="disabled" @input="createmarkdown"></textarea>' + 
 				'</div>',
 	data: function(){
@@ -668,7 +670,7 @@ const quoteComponent = Vue.component('quote-component', {
 	props: ['compmarkdown', 'disabled'],
 	template: '<div>' + 
 				'<input type="hidden" ref="markdown" :value="compmarkdown" :disabled="disabled" @input="updatemarkdown" />' +	
-				'<div class="contenttype"><i class="icon-quote-left"></i></div>' +
+				'<div class="contenttype"><svg class="icon icon-quotes-left"><use xlink:href="#icon-quotes-left"></use></svg></div>' +
 				'<inline-formats>' +
 					'<textarea class="mdcontent" ref="markdown" v-model="quote" :disabled="disabled" @input="updatemarkdown(event.target.value)"></textarea>' + 
 				'</inline-formats>' +
@@ -703,7 +705,7 @@ const quoteComponent = Vue.component('quote-component', {
 const ulistComponent = Vue.component('ulist-component', {
 	props: ['compmarkdown', 'disabled'],
 	template: '<div>' + 
-				'<div class="contenttype"><i class="icon-list-bullet"></i></div>' +
+				'<div class="contenttype"><svg class="icon icon-list2"><use xlink:href="#icon-list2"></use></svg></div>' +
 				'<inline-formats>' +
 					'<textarea class="mdcontent" ref="markdown" v-model="compmarkdown" :disabled="disabled" @input="updatemarkdown(event.target.value)"></textarea>' + 
 				'</inline-formats>' +
@@ -751,7 +753,7 @@ const ulistComponent = Vue.component('ulist-component', {
 const olistComponent = Vue.component('olist-component', {
 	props: ['compmarkdown', 'disabled'],
 	template: '<div>' + 
-				'<div class="contenttype"><i class="icon-list-numbered"></i></div>' +
+				'<div class="contenttype"><svg class="icon icon-list-numbered"><use xlink:href="#icon-list-numbered"></use></svg></div>' +
 				'<inline-formats>' +
 					'<textarea class="mdcontent" ref="markdown" v-model="compmarkdown" :disabled="disabled" @input="updatemarkdown(event.target.value)"></textarea>' + 
 				'</inline-formats>' +
@@ -777,7 +779,7 @@ const olistComponent = Vue.component('olist-component', {
 const headlineComponent = Vue.component('headline-component', { 
 	props: ['compmarkdown', 'disabled'],
 	template: '<div>' + 
-				'<div class="contenttype"><i class="icon-header"></i></div>' +
+				'<div class="contenttype"><svg class="icon icon-header"><use xlink:href="#icon-header"></use></svg></div>' +
 				'<button class="hdown" @click.prevent="headlinedown" v-html="level"></button>' +
 				'<input class="mdcontent" :class="hlevel" type="text" ref="markdown" v-model="compmarkdown" :disabled="disabled" @input="updatemarkdown">' +
 				'</div>',
@@ -869,7 +871,7 @@ const tableComponent = Vue.component('table-component', {
 		}
 	},
 	template: '<div ref="table" :key="tablekey">' + 
-				'<div class="contenttype"><i class="icon-table"></i></div>' +
+				'<div class="contenttype"><svg class="icon icon-table2"><use xlink:href="#icon-table2"></use></svg></div>' +
 				'<table ref="markdown">' +
 					'<colgroup>' +
 						'<col v-for="col in table[0]">' +
@@ -1071,17 +1073,17 @@ const definitionComponent = Vue.component('definition-component', {
 		}
 	},
 	template: '<div class="definitionList">' +
-				'<div class="contenttype"><i class="icon-colon"></i></div>' +
+				'<div class="contenttype"><svg class="icon icon-dots-two-vertical"><use xlink:href="#icon-dots-two-vertical"></use></svg></div>' +
 				'<draggable v-model="definitionList" :animation="150" @end="moveDefinition">' +
   			    '<div class="definitionRow" v-for="(definition, dindex) in definitionList" :key="definition.id">' +
-						'<i class="icon-resize-vertical"></i>' +
+						'<svg class="icon icon-arrows-v"><use xlink:href="#icon-arrows-v"></use></svg>' +
 						'<input type="text" class="definitionTerm" placeholder="term" :value="definition.term" :disabled="disabled" @input="updateterm($event,dindex)" @blur="updateMarkdown">' +
-		  		  '<i class="icon-colon"></i>' + 
+		  		  '<svg class="icon icon-dots-two-vertical"><use xlink:href="#icon-dots-two-vertical"></use></svg>' + 
 	  			  '<textarea class="definitionDescription" placeholder="description" v-html="definition.description" :disabled="disabled" @input="updatedescription($event, dindex)" @blur="updateMarkdown"></textarea>' +
-					  '<button class="delDL" @click.prevent="deleteDefinition(dindex)"><i class="icon-minus"></i></button>' +
+					  '<button class="delDL" @click.prevent="deleteDefinition(dindex)"><svg class="icon icon-minus"><use xlink:href="#icon-minus"></use></svg></button>' +
 				  '</div>' +
 				'</draggable>' +
-				'<button class="addDL" @click.prevent="addDefinition()"><i class="icon-plus"></i> add definition</button>' +
+				'<button class="addDL" @click.prevent="addDefinition()"><svg class="icon icon-plus"><use xlink:href="#icon-plus"></use></svg> add definition</button>' +
 				'<div v-if="load" class="loadwrapper"><span class="load"></span></div>' +
 				'</div>',
 	mounted: function(){
@@ -1147,53 +1149,11 @@ const definitionComponent = Vue.component('definition-component', {
 	},
 })
 
-const mathComponent = Vue.component('math-component', {
-	props: ['compmarkdown', 'disabled'],
-	template: '<div>' + 
-				'<input type="hidden" ref="markdown" :value="compmarkdown" :disabled="disabled" @input="updatemarkdown" />' +	
-				'<div class="contenttype"><i class="icon-math"></i></div>' +
-				'<textarea class="mdcontent" ref="markdown" v-model="mathblock" :disabled="disabled" @input="createmarkdown"></textarea>' + 
-				'</div>',
-	data: function(){
-		return {
-			mathblock: ''
-		}
-	},
-	mounted: function(){
-		this.$refs.markdown.focus();
-		if(this.compmarkdown)
-		{
-			var dollarMath = new RegExp(/^\$\$[\S\s]+\$\$$/m);
-			var bracketMath = new RegExp(/^\\\[[\S\s]+\\\]$/m);
-
-			if(dollarMath.test(this.compmarkdown) || bracketMath.test(this.compmarkdown))
-			{
-				var mathExpression = this.compmarkdown.substring(2,this.compmarkdown.length-2);
-				this.mathblock = mathExpression.trim(); 
-			}
-		}
-		this.$nextTick(function () {
-			autosize(document.querySelectorAll('textarea'));
-		});
-	},
-	methods: {
-		createmarkdown: function(event)
-		{
-			this.codeblock = event.target.value;
-			var codeblock = '$$\n' + event.target.value + '\n$$';
-			this.updatemarkdown(codeblock);
-		},
-		updatemarkdown: function(codeblock)
-		{
-			this.$emit('updatedMarkdown', codeblock);
-		},
-	},
-})
 
 const videoComponent = Vue.component('video-component', {
 	props: ['compmarkdown', 'disabled', 'load'],
 	template: '<div class="video dropbox">' +
-				'<div class="contenttype"><i class="icon-youtube-play"></i></div>' +
+				'<div class="contenttype"><svg class="icon icon-play"><use xlink:href="#icon-play"></use></svg></div>' +
 				'<label for="video">Link to video: </label><input type="url" ref="markdown" placeholder="https://www.youtube.com/watch?v=" :value="compmarkdown" :disabled="disabled" @input="updatemarkdown">' +
 				'<div v-if="load" class="loadwrapper"><span class="load"></span></div>' +
 				'</div>',
@@ -1211,7 +1171,7 @@ const imageComponent = Vue.component('image-component', {
 				'<input type="hidden" ref="markdown" :value="compmarkdown" :disabled="disabled" @input="updatemarkdown" />' +
 				'<input type="file" name="image" accept="image/*" class="input-file" @change="onFileChange( $event )" /> ' +
 				'<p>drag a picture or click to select</p>' +
-				'<div class="contenttype"><i class="icon-picture"></i></div>' +	
+				'<div class="contenttype"><svg class="icon icon-image"><use xlink:href="#icon-image"></use></svg></div>' +	
 				'<img class="uploadPreview" :src="imgpreview" />' +
 				'<div v-if="load" class="loadwrapper"><span class="load"></span></div>' +
 				'<div class="imgmeta" v-if="imgmeta">' +
@@ -1500,78 +1460,20 @@ let componentList = {
 }
 */
 
+let activeFormats = [];
 
-let determiner = {
-
-	olist: function(block,lines,firstChar,secondChar,thirdChar){
-		if(block.match(/^\d+\./))
-		{ 
-			return "olist-component";
-		}
-		return false;
-	},
-	definition: function(block,lines,firstChar,secondChar,thirdChar){
-		if(lines.length > 1 && lines[1].substr(0,2) == ': ')
-		{
-			return "definition-component";
-		}
-		return false;
-	},
-	table: function(block,lines,firstChar,secondChar,thirdChar){
-		if(lines.length > 2 && lines[0].indexOf('|') != -1 && /[\-\|: ]{3,}$/.test(lines[1]))
-		{
-			return "table-component";
-		}
-		return false;
-	},
-	quote: function(block,lines,firstChar,secondChar,thirdChar){
-		if(firstChar == '>')
-		{
-			return "quote-component";
-		}
-		return false;
-	},
-	headline: function(block,lines,firstChar,secondChar,thirdChar){
-		if(firstChar == '#')
-		{
-			return "headline-component";
-		}
-		return false;
-	},
-	image: function(block,lines,firstChar,secondChar,thirdChar){
-		if( (firstChar == '!' && secondChar == '[') || (firstChar == '[' && secondChar == '!' && thirdChar == '[') )
-		{
-			return "image-component";
-		}
-		return false;
-	},
-	math: function(block,lines,firstChar,secondChar,thirdChar){
-		if( (firstChar == '\\' && secondChar == '[') || ( firstChar == '$' && secondChar == '$$' ) )
-		{
-			return "math-component";
-		}
-		return false;
-	},
-	code: function(block,lines,firstChar,secondChar,thirdChar){
-		if( firstChar == '`' && secondChar == '`' && thirdChar == '`')
-		{
-			return "code-component";
-		}
-		return false;
-	},
-	ulist: function(block,lines,firstChar,secondChar,thirdChar){
-		if( (firstChar == '*' || firstChar == '-' || firstChar == '+') && secondChar == ' ')
-		{
-			return "ulist-component";
-		}
-		return false;
+for(var i = 0; i < formatConfig.length; i++)
+{
+	if(bloxFormats[formatConfig[i]] !== undefined)
+	{
+		activeFormats.push(bloxFormats[formatConfig[i]]);
 	}
 }
 
 let editor = new Vue({
     delimiters: ['${', '}'],
 	el: '#blox',
-//	components: componentList,
+/*	components: componentList, */
 	data: {
 		root: document.getElementById("main").dataset.url,
 		html: false,
@@ -1587,6 +1489,7 @@ let editor = new Vue({
 		draftDisabled: true,
 		bloxOverlay: false,
 		sortdisabled: false,
+		formats: activeFormats
 	},
 	mounted: function(){
 
@@ -1649,10 +1552,11 @@ let editor = new Vue({
 					self.markdown = result.data;
 					
 					/* make math plugin working */
+					
 					if (typeof renderMathInElement === "function") { 
 						self.$nextTick(function () {
-							renderMathInElement(document.body);
-						});		
+							renderMathInElement(document.getElementById("blox"));
+						});
 					}
 
 					/* check for youtube videos */

system/author/js/vue-navi.js

@@ -21,7 +21,7 @@ const navcomponent = Vue.component('navigation', {
 			return true;
 		},
 		onStart : function(evt)
-		{
+		{		
 			/* delete error messages if exist */
 			publishController.errors.message = false;
 		},
@@ -38,7 +38,7 @@ const navcomponent = Vue.component('navigation', {
 				'csrf_name': 		document.getElementById("csrf_name").value,
 				'csrf_value':		document.getElementById("csrf_value").value,				
 			};
-						
+
 			if(locator.parent_id_from == locator.parent_id_to && locator.index_old == locator.index_new)
 			{
 				return
@@ -91,13 +91,24 @@ const navcomponent = Vue.component('navigation', {
 		{
 			if(elementtype == 'file')
 			{
-				return 'icon-doc-text ' + filetype
+				return '#icon-file-text-o';
 			}
 			if(elementtype == 'folder')
 			{
-				return 'icon-folder-empty ' + filetype
+				return '#icon-folder-o';
 			}
 		},
+		getIconClass : function(elementtype, filetype)
+		{
+			if(elementtype == 'file')
+			{
+				return 'icon-file-text-o ' + filetype;
+			}
+			if(elementtype == 'folder')
+			{
+				return 'icon-folder-o ' + filetype;
+			}
+		},		
 		checkActive : function(active,parent)
 		{
 			if(active && !parent)

system/author/layouts/layout.twig

@@ -21,7 +21,28 @@
 		<link rel="stylesheet" href="{{ base_url }}/system/author/css/style.css?20191111" />
 		<link rel="stylesheet" href="{{ base_url }}/system/author/css/color-picker.min.css" />
 	</head>
-	<body>	
+	<body>
+		<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+			<defs>
+				<symbol id="icon-external-link" viewBox="0 0 28 28">
+					<title>external-link</title>
+					<path d="M22 14.5v5c0 2.484-2.016 4.5-4.5 4.5h-13c-2.484 0-4.5-2.016-4.5-4.5v-13c0-2.484 2.016-4.5 4.5-4.5h11c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-1.375 0-2.5 1.125-2.5 2.5v13c0 1.375 1.125 2.5 2.5 2.5h13c1.375 0 2.5-1.125 2.5-2.5v-5c0-0.281 0.219-0.5 0.5-0.5h1c0.281 0 0.5 0.219 0.5 0.5zM28 1v8c0 0.547-0.453 1-1 1-0.266 0-0.516-0.109-0.703-0.297l-2.75-2.75-10.187 10.187c-0.094 0.094-0.234 0.156-0.359 0.156s-0.266-0.063-0.359-0.156l-1.781-1.781c-0.094-0.094-0.156-0.234-0.156-0.359s0.063-0.266 0.156-0.359l10.187-10.187-2.75-2.75c-0.187-0.187-0.297-0.438-0.297-0.703 0-0.547 0.453-1 1-1h8c0.547 0 1 0.453 1 1z"></path>
+				</symbol>
+				<symbol id="icon-file-text-o" viewBox="0 0 24 28">
+					<title>text-file</title>
+					<path d="M22.937 5.938c0.578 0.578 1.062 1.734 1.062 2.562v18c0 0.828-0.672 1.5-1.5 1.5h-21c-0.828 0-1.5-0.672-1.5-1.5v-25c0-0.828 0.672-1.5 1.5-1.5h14c0.828 0 1.984 0.484 2.562 1.062zM16 2.125v5.875h5.875c-0.094-0.266-0.234-0.531-0.344-0.641l-4.891-4.891c-0.109-0.109-0.375-0.25-0.641-0.344zM22 26v-16h-6.5c-0.828 0-1.5-0.672-1.5-1.5v-6.5h-12v24h20zM6 12.5c0-0.281 0.219-0.5 0.5-0.5h11c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1zM17.5 16c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h11zM17.5 20c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h11z"></path>
+				</symbol>
+				<symbol id="icon-cog" viewBox="0 0 24 28">
+					<title>cog</title>
+					<path d="M16 14c0-2.203-1.797-4-4-4s-4 1.797-4 4 1.797 4 4 4 4-1.797 4-4zM24 12.297v3.469c0 0.234-0.187 0.516-0.438 0.562l-2.891 0.438c-0.172 0.5-0.359 0.969-0.609 1.422 0.531 0.766 1.094 1.453 1.672 2.156 0.094 0.109 0.156 0.25 0.156 0.391s-0.047 0.25-0.141 0.359c-0.375 0.5-2.484 2.797-3.016 2.797-0.141 0-0.281-0.063-0.406-0.141l-2.156-1.687c-0.453 0.234-0.938 0.438-1.422 0.594-0.109 0.953-0.203 1.969-0.453 2.906-0.063 0.25-0.281 0.438-0.562 0.438h-3.469c-0.281 0-0.531-0.203-0.562-0.469l-0.438-2.875c-0.484-0.156-0.953-0.344-1.406-0.578l-2.203 1.672c-0.109 0.094-0.25 0.141-0.391 0.141s-0.281-0.063-0.391-0.172c-0.828-0.75-1.922-1.719-2.578-2.625-0.078-0.109-0.109-0.234-0.109-0.359 0-0.141 0.047-0.25 0.125-0.359 0.531-0.719 1.109-1.406 1.641-2.141-0.266-0.5-0.484-1.016-0.641-1.547l-2.859-0.422c-0.266-0.047-0.453-0.297-0.453-0.562v-3.469c0-0.234 0.187-0.516 0.422-0.562l2.906-0.438c0.156-0.5 0.359-0.969 0.609-1.437-0.531-0.75-1.094-1.453-1.672-2.156-0.094-0.109-0.156-0.234-0.156-0.375s0.063-0.25 0.141-0.359c0.375-0.516 2.484-2.797 3.016-2.797 0.141 0 0.281 0.063 0.406 0.156l2.156 1.672c0.453-0.234 0.938-0.438 1.422-0.594 0.109-0.953 0.203-1.969 0.453-2.906 0.063-0.25 0.281-0.438 0.562-0.438h3.469c0.281 0 0.531 0.203 0.562 0.469l0.438 2.875c0.484 0.156 0.953 0.344 1.406 0.578l2.219-1.672c0.094-0.094 0.234-0.141 0.375-0.141s0.281 0.063 0.391 0.156c0.828 0.766 1.922 1.734 2.578 2.656 0.078 0.094 0.109 0.219 0.109 0.344 0 0.141-0.047 0.25-0.125 0.359-0.531 0.719-1.109 1.406-1.641 2.141 0.266 0.5 0.484 1.016 0.641 1.531l2.859 0.438c0.266 0.047 0.453 0.297 0.453 0.562z"></path>
+				</symbol>
+				<symbol id="icon-power-off" viewBox="0 0 24 28">
+					<title>power-off</title>
+					<path d="M24 14c0 6.609-5.391 12-12 12s-12-5.391-12-12c0-3.797 1.75-7.297 4.797-9.578 0.891-0.672 2.141-0.5 2.797 0.391 0.672 0.875 0.484 2.141-0.391 2.797-2.031 1.531-3.203 3.859-3.203 6.391 0 4.406 3.594 8 8 8s8-3.594 8-8c0-2.531-1.172-4.859-3.203-6.391-0.875-0.656-1.062-1.922-0.391-2.797 0.656-0.891 1.922-1.062 2.797-0.391 3.047 2.281 4.797 5.781 4.797 9.578zM14 2v10c0 1.094-0.906 2-2 2s-2-0.906-2-2v-10c0-1.094 0.906-2 2-2s2 0.906 2 2z"></path>
+				</symbol>
+			</defs>
+		</svg>
+		
 		<header class="main-header">
 			{% include 'partials/navi.twig' %}
 		</header>

system/author/layouts/layoutAuth.twig

@@ -22,7 +22,33 @@
 		<link rel="stylesheet" href="{{ base_url }}/system/author/css/style.css?20191111" />
 		<link rel="stylesheet" href="{{ base_url }}/system/author/css/color-picker.min.css" />
 	</head>
-	<body>	
+	<body>
+		<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+			<defs>
+				<symbol id="icon-external-link" viewBox="0 0 28 28">
+					<title>external-link</title>
+					<path d="M22 14.5v5c0 2.484-2.016 4.5-4.5 4.5h-13c-2.484 0-4.5-2.016-4.5-4.5v-13c0-2.484 2.016-4.5 4.5-4.5h11c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-1.375 0-2.5 1.125-2.5 2.5v13c0 1.375 1.125 2.5 2.5 2.5h13c1.375 0 2.5-1.125 2.5-2.5v-5c0-0.281 0.219-0.5 0.5-0.5h1c0.281 0 0.5 0.219 0.5 0.5zM28 1v8c0 0.547-0.453 1-1 1-0.266 0-0.516-0.109-0.703-0.297l-2.75-2.75-10.187 10.187c-0.094 0.094-0.234 0.156-0.359 0.156s-0.266-0.063-0.359-0.156l-1.781-1.781c-0.094-0.094-0.156-0.234-0.156-0.359s0.063-0.266 0.156-0.359l10.187-10.187-2.75-2.75c-0.187-0.187-0.297-0.438-0.297-0.703 0-0.547 0.453-1 1-1h8c0.547 0 1 0.453 1 1z"></path>
+				</symbol>
+				<symbol id="icon-file-text-o" viewBox="0 0 24 28">
+					<title>text-file</title>
+					<path d="M22.937 5.938c0.578 0.578 1.062 1.734 1.062 2.562v18c0 0.828-0.672 1.5-1.5 1.5h-21c-0.828 0-1.5-0.672-1.5-1.5v-25c0-0.828 0.672-1.5 1.5-1.5h14c0.828 0 1.984 0.484 2.562 1.062zM16 2.125v5.875h5.875c-0.094-0.266-0.234-0.531-0.344-0.641l-4.891-4.891c-0.109-0.109-0.375-0.25-0.641-0.344zM22 26v-16h-6.5c-0.828 0-1.5-0.672-1.5-1.5v-6.5h-12v24h20zM6 12.5c0-0.281 0.219-0.5 0.5-0.5h11c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1zM17.5 16c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h11zM17.5 20c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h11z"></path>
+				</symbol>
+				<symbol id="icon-cog" viewBox="0 0 24 28">
+					<title>cog</title>
+					<path d="M16 14c0-2.203-1.797-4-4-4s-4 1.797-4 4 1.797 4 4 4 4-1.797 4-4zM24 12.297v3.469c0 0.234-0.187 0.516-0.438 0.562l-2.891 0.438c-0.172 0.5-0.359 0.969-0.609 1.422 0.531 0.766 1.094 1.453 1.672 2.156 0.094 0.109 0.156 0.25 0.156 0.391s-0.047 0.25-0.141 0.359c-0.375 0.5-2.484 2.797-3.016 2.797-0.141 0-0.281-0.063-0.406-0.141l-2.156-1.687c-0.453 0.234-0.938 0.438-1.422 0.594-0.109 0.953-0.203 1.969-0.453 2.906-0.063 0.25-0.281 0.438-0.562 0.438h-3.469c-0.281 0-0.531-0.203-0.562-0.469l-0.438-2.875c-0.484-0.156-0.953-0.344-1.406-0.578l-2.203 1.672c-0.109 0.094-0.25 0.141-0.391 0.141s-0.281-0.063-0.391-0.172c-0.828-0.75-1.922-1.719-2.578-2.625-0.078-0.109-0.109-0.234-0.109-0.359 0-0.141 0.047-0.25 0.125-0.359 0.531-0.719 1.109-1.406 1.641-2.141-0.266-0.5-0.484-1.016-0.641-1.547l-2.859-0.422c-0.266-0.047-0.453-0.297-0.453-0.562v-3.469c0-0.234 0.187-0.516 0.422-0.562l2.906-0.438c0.156-0.5 0.359-0.969 0.609-1.437-0.531-0.75-1.094-1.453-1.672-2.156-0.094-0.109-0.156-0.234-0.156-0.375s0.063-0.25 0.141-0.359c0.375-0.516 2.484-2.797 3.016-2.797 0.141 0 0.281 0.063 0.406 0.156l2.156 1.672c0.453-0.234 0.938-0.438 1.422-0.594 0.109-0.953 0.203-1.969 0.453-2.906 0.063-0.25 0.281-0.438 0.562-0.438h3.469c0.281 0 0.531 0.203 0.562 0.469l0.438 2.875c0.484 0.156 0.953 0.344 1.406 0.578l2.219-1.672c0.094-0.094 0.234-0.141 0.375-0.141s0.281 0.063 0.391 0.156c0.828 0.766 1.922 1.734 2.578 2.656 0.078 0.094 0.109 0.219 0.109 0.344 0 0.141-0.047 0.25-0.125 0.359-0.531 0.719-1.109 1.406-1.641 2.141 0.266 0.5 0.484 1.016 0.641 1.531l2.859 0.438c0.266 0.047 0.453 0.297 0.453 0.562z"></path>
+				</symbol>
+				<symbol id="icon-power-off" viewBox="0 0 24 28">
+					<title>power-off</title>
+					<path d="M24 14c0 6.609-5.391 12-12 12s-12-5.391-12-12c0-3.797 1.75-7.297 4.797-9.578 0.891-0.672 2.141-0.5 2.797 0.391 0.672 0.875 0.484 2.141-0.391 2.797-2.031 1.531-3.203 3.859-3.203 6.391 0 4.406 3.594 8 8 8s8-3.594 8-8c0-2.531-1.172-4.859-3.203-6.391-0.875-0.656-1.062-1.922-0.391-2.797 0.656-0.891 1.922-1.062 2.797-0.391 3.047 2.281 4.797 5.781 4.797 9.578zM14 2v10c0 1.094-0.906 2-2 2s-2-0.906-2-2v-10c0-1.094 0.906-2 2-2s2 0.906 2 2z"></path>
+				</symbol>
+				<symbol id="icon-bookmark-o" viewBox="0 0 20 28">
+					<title>bookmark-o</title>
+					<path d="M18 4h-16v19.406l8-7.672 1.391 1.328 6.609 6.344v-19.406zM18.188 2c0.234 0 0.469 0.047 0.688 0.141 0.688 0.266 1.125 0.906 1.125 1.609v20.141c0 0.703-0.438 1.344-1.125 1.609-0.219 0.094-0.453 0.125-0.688 0.125-0.484 0-0.938-0.172-1.297-0.5l-6.891-6.625-6.891 6.625c-0.359 0.328-0.812 0.516-1.297 0.516-0.234 0-0.469-0.047-0.688-0.141-0.688-0.266-1.125-0.906-1.125-1.609v-20.141c0-0.703 0.438-1.344 1.125-1.609 0.219-0.094 0.453-0.141 0.688-0.141h16.375z"></path>
+				</symbol>				
+			</defs>
+		</svg>
+
+
 		{% include 'partials/flash.twig' %}
 		<div class="main">
 			

system/author/layouts/layoutBlank.twig

@@ -20,7 +20,28 @@
 		<link rel="stylesheet" href="{{ base_url }}/system/author/css/normalize.css" />
 		<link rel="stylesheet" href="{{ base_url }}/system/author/css/style.css?20191111" />
 	</head>
-	<body>	
+	<body>
+		<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+			<defs>
+				<symbol id="icon-external-link" viewBox="0 0 28 28">
+					<title>external-link</title>
+					<path d="M22 14.5v5c0 2.484-2.016 4.5-4.5 4.5h-13c-2.484 0-4.5-2.016-4.5-4.5v-13c0-2.484 2.016-4.5 4.5-4.5h11c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-1.375 0-2.5 1.125-2.5 2.5v13c0 1.375 1.125 2.5 2.5 2.5h13c1.375 0 2.5-1.125 2.5-2.5v-5c0-0.281 0.219-0.5 0.5-0.5h1c0.281 0 0.5 0.219 0.5 0.5zM28 1v8c0 0.547-0.453 1-1 1-0.266 0-0.516-0.109-0.703-0.297l-2.75-2.75-10.187 10.187c-0.094 0.094-0.234 0.156-0.359 0.156s-0.266-0.063-0.359-0.156l-1.781-1.781c-0.094-0.094-0.156-0.234-0.156-0.359s0.063-0.266 0.156-0.359l10.187-10.187-2.75-2.75c-0.187-0.187-0.297-0.438-0.297-0.703 0-0.547 0.453-1 1-1h8c0.547 0 1 0.453 1 1z"></path>
+				</symbol>
+				<symbol id="icon-file-text-o" viewBox="0 0 24 28">
+					<title>text-file</title>
+					<path d="M22.937 5.938c0.578 0.578 1.062 1.734 1.062 2.562v18c0 0.828-0.672 1.5-1.5 1.5h-21c-0.828 0-1.5-0.672-1.5-1.5v-25c0-0.828 0.672-1.5 1.5-1.5h14c0.828 0 1.984 0.484 2.562 1.062zM16 2.125v5.875h5.875c-0.094-0.266-0.234-0.531-0.344-0.641l-4.891-4.891c-0.109-0.109-0.375-0.25-0.641-0.344zM22 26v-16h-6.5c-0.828 0-1.5-0.672-1.5-1.5v-6.5h-12v24h20zM6 12.5c0-0.281 0.219-0.5 0.5-0.5h11c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1zM17.5 16c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h11zM17.5 20c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h11z"></path>
+				</symbol>
+				<symbol id="icon-cog" viewBox="0 0 24 28">
+					<title>cog</title>
+					<path d="M16 14c0-2.203-1.797-4-4-4s-4 1.797-4 4 1.797 4 4 4 4-1.797 4-4zM24 12.297v3.469c0 0.234-0.187 0.516-0.438 0.562l-2.891 0.438c-0.172 0.5-0.359 0.969-0.609 1.422 0.531 0.766 1.094 1.453 1.672 2.156 0.094 0.109 0.156 0.25 0.156 0.391s-0.047 0.25-0.141 0.359c-0.375 0.5-2.484 2.797-3.016 2.797-0.141 0-0.281-0.063-0.406-0.141l-2.156-1.687c-0.453 0.234-0.938 0.438-1.422 0.594-0.109 0.953-0.203 1.969-0.453 2.906-0.063 0.25-0.281 0.438-0.562 0.438h-3.469c-0.281 0-0.531-0.203-0.562-0.469l-0.438-2.875c-0.484-0.156-0.953-0.344-1.406-0.578l-2.203 1.672c-0.109 0.094-0.25 0.141-0.391 0.141s-0.281-0.063-0.391-0.172c-0.828-0.75-1.922-1.719-2.578-2.625-0.078-0.109-0.109-0.234-0.109-0.359 0-0.141 0.047-0.25 0.125-0.359 0.531-0.719 1.109-1.406 1.641-2.141-0.266-0.5-0.484-1.016-0.641-1.547l-2.859-0.422c-0.266-0.047-0.453-0.297-0.453-0.562v-3.469c0-0.234 0.187-0.516 0.422-0.562l2.906-0.438c0.156-0.5 0.359-0.969 0.609-1.437-0.531-0.75-1.094-1.453-1.672-2.156-0.094-0.109-0.156-0.234-0.156-0.375s0.063-0.25 0.141-0.359c0.375-0.516 2.484-2.797 3.016-2.797 0.141 0 0.281 0.063 0.406 0.156l2.156 1.672c0.453-0.234 0.938-0.438 1.422-0.594 0.109-0.953 0.203-1.969 0.453-2.906 0.063-0.25 0.281-0.438 0.562-0.438h3.469c0.281 0 0.531 0.203 0.562 0.469l0.438 2.875c0.484 0.156 0.953 0.344 1.406 0.578l2.219-1.672c0.094-0.094 0.234-0.141 0.375-0.141s0.281 0.063 0.391 0.156c0.828 0.766 1.922 1.734 2.578 2.656 0.078 0.094 0.109 0.219 0.109 0.344 0 0.141-0.047 0.25-0.125 0.359-0.531 0.719-1.109 1.406-1.641 2.141 0.266 0.5 0.484 1.016 0.641 1.531l2.859 0.438c0.266 0.047 0.453 0.297 0.453 0.562z"></path>
+				</symbol>
+				<symbol id="icon-power-off" viewBox="0 0 24 28">
+					<title>power-off</title>
+					<path d="M24 14c0 6.609-5.391 12-12 12s-12-5.391-12-12c0-3.797 1.75-7.297 4.797-9.578 0.891-0.672 2.141-0.5 2.797 0.391 0.672 0.875 0.484 2.141-0.391 2.797-2.031 1.531-3.203 3.859-3.203 6.391 0 4.406 3.594 8 8 8s8-3.594 8-8c0-2.531-1.172-4.859-3.203-6.391-0.875-0.656-1.062-1.922-0.391-2.797 0.656-0.891 1.922-1.062 2.797-0.391 3.047 2.281 4.797 5.781 4.797 9.578zM14 2v10c0 1.094-0.906 2-2 2s-2-0.906-2-2v-10c0-1.094 0.906-2 2-2s2 0.906 2 2z"></path>
+				</symbol>
+			</defs>
+		</svg>
+		
 		<header class="main-header">
 			{% include 'partials/navi.twig' %}
 		</header>

system/author/layouts/layoutBlox.twig

@@ -25,7 +25,129 @@
 		{{ assets.renderCSS() }}
 
 	</head>
-	<body>	
+	<body>
+		<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+			<defs>
+
+				<symbol id="icon-external-link" viewBox="0 0 28 28">
+					<title>external-link</title>
+					<path d="M22 14.5v5c0 2.484-2.016 4.5-4.5 4.5h-13c-2.484 0-4.5-2.016-4.5-4.5v-13c0-2.484 2.016-4.5 4.5-4.5h11c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-1.375 0-2.5 1.125-2.5 2.5v13c0 1.375 1.125 2.5 2.5 2.5h13c1.375 0 2.5-1.125 2.5-2.5v-5c0-0.281 0.219-0.5 0.5-0.5h1c0.281 0 0.5 0.219 0.5 0.5zM28 1v8c0 0.547-0.453 1-1 1-0.266 0-0.516-0.109-0.703-0.297l-2.75-2.75-10.187 10.187c-0.094 0.094-0.234 0.156-0.359 0.156s-0.266-0.063-0.359-0.156l-1.781-1.781c-0.094-0.094-0.156-0.234-0.156-0.359s0.063-0.266 0.156-0.359l10.187-10.187-2.75-2.75c-0.187-0.187-0.297-0.438-0.297-0.703 0-0.547 0.453-1 1-1h8c0.547 0 1 0.453 1 1z"></path>
+				</symbol>
+				<symbol id="icon-file-text-o" viewBox="0 0 24 28">
+					<title>text-file</title>
+					<path d="M22.937 5.938c0.578 0.578 1.062 1.734 1.062 2.562v18c0 0.828-0.672 1.5-1.5 1.5h-21c-0.828 0-1.5-0.672-1.5-1.5v-25c0-0.828 0.672-1.5 1.5-1.5h14c0.828 0 1.984 0.484 2.562 1.062zM16 2.125v5.875h5.875c-0.094-0.266-0.234-0.531-0.344-0.641l-4.891-4.891c-0.109-0.109-0.375-0.25-0.641-0.344zM22 26v-16h-6.5c-0.828 0-1.5-0.672-1.5-1.5v-6.5h-12v24h20zM6 12.5c0-0.281 0.219-0.5 0.5-0.5h11c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1zM17.5 16c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h11zM17.5 20c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h11z"></path>
+				</symbol>
+				<symbol id="icon-cog" viewBox="0 0 24 28">
+					<title>cog</title>
+					<path d="M16 14c0-2.203-1.797-4-4-4s-4 1.797-4 4 1.797 4 4 4 4-1.797 4-4zM24 12.297v3.469c0 0.234-0.187 0.516-0.438 0.562l-2.891 0.438c-0.172 0.5-0.359 0.969-0.609 1.422 0.531 0.766 1.094 1.453 1.672 2.156 0.094 0.109 0.156 0.25 0.156 0.391s-0.047 0.25-0.141 0.359c-0.375 0.5-2.484 2.797-3.016 2.797-0.141 0-0.281-0.063-0.406-0.141l-2.156-1.687c-0.453 0.234-0.938 0.438-1.422 0.594-0.109 0.953-0.203 1.969-0.453 2.906-0.063 0.25-0.281 0.438-0.562 0.438h-3.469c-0.281 0-0.531-0.203-0.562-0.469l-0.438-2.875c-0.484-0.156-0.953-0.344-1.406-0.578l-2.203 1.672c-0.109 0.094-0.25 0.141-0.391 0.141s-0.281-0.063-0.391-0.172c-0.828-0.75-1.922-1.719-2.578-2.625-0.078-0.109-0.109-0.234-0.109-0.359 0-0.141 0.047-0.25 0.125-0.359 0.531-0.719 1.109-1.406 1.641-2.141-0.266-0.5-0.484-1.016-0.641-1.547l-2.859-0.422c-0.266-0.047-0.453-0.297-0.453-0.562v-3.469c0-0.234 0.187-0.516 0.422-0.562l2.906-0.438c0.156-0.5 0.359-0.969 0.609-1.437-0.531-0.75-1.094-1.453-1.672-2.156-0.094-0.109-0.156-0.234-0.156-0.375s0.063-0.25 0.141-0.359c0.375-0.516 2.484-2.797 3.016-2.797 0.141 0 0.281 0.063 0.406 0.156l2.156 1.672c0.453-0.234 0.938-0.438 1.422-0.594 0.109-0.953 0.203-1.969 0.453-2.906 0.063-0.25 0.281-0.438 0.562-0.438h3.469c0.281 0 0.531 0.203 0.562 0.469l0.438 2.875c0.484 0.156 0.953 0.344 1.406 0.578l2.219-1.672c0.094-0.094 0.234-0.141 0.375-0.141s0.281 0.063 0.391 0.156c0.828 0.766 1.922 1.734 2.578 2.656 0.078 0.094 0.109 0.219 0.109 0.344 0 0.141-0.047 0.25-0.125 0.359-0.531 0.719-1.109 1.406-1.641 2.141 0.266 0.5 0.484 1.016 0.641 1.531l2.859 0.438c0.266 0.047 0.453 0.297 0.453 0.562z"></path>
+				</symbol>
+				<symbol id="icon-power-off" viewBox="0 0 24 28">
+					<title>power-off</title>
+					<path d="M24 14c0 6.609-5.391 12-12 12s-12-5.391-12-12c0-3.797 1.75-7.297 4.797-9.578 0.891-0.672 2.141-0.5 2.797 0.391 0.672 0.875 0.484 2.141-0.391 2.797-2.031 1.531-3.203 3.859-3.203 6.391 0 4.406 3.594 8 8 8s8-3.594 8-8c0-2.531-1.172-4.859-3.203-6.391-0.875-0.656-1.062-1.922-0.391-2.797 0.656-0.891 1.922-1.062 2.797-0.391 3.047 2.281 4.797 5.781 4.797 9.578zM14 2v10c0 1.094-0.906 2-2 2s-2-0.906-2-2v-10c0-1.094 0.906-2 2-2s2 0.906 2 2z"></path>
+				</symbol>
+				
+				<symbol id="icon-minus" viewBox="0 0 22 28">
+					<title>delete</title>
+					<path d="M22 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-19c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h19c0.828 0 1.5 0.672 1.5 1.5z"></path>
+				</symbol>
+				<symbol id="icon-plus" viewBox="0 0 22 28">
+					<title>add</title>
+					<path d="M22 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-6.5v6.5c0 0.828-0.672 1.5-1.5 1.5h-3c-0.828 0-1.5-0.672-1.5-1.5v-6.5h-6.5c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h6.5v-6.5c0-0.828 0.672-1.5 1.5-1.5h3c0.828 0 1.5 0.672 1.5 1.5v6.5h6.5c0.828 0 1.5 0.672 1.5 1.5z"></path>
+				</symbol>
+				<symbol id="icon-close" viewBox="0 0 22 28">
+					<title>delete/close</title>
+					<path d="M20.281 20.656c0 0.391-0.156 0.781-0.438 1.062l-2.125 2.125c-0.281 0.281-0.672 0.438-1.062 0.438s-0.781-0.156-1.062-0.438l-4.594-4.594-4.594 4.594c-0.281 0.281-0.672 0.438-1.062 0.438s-0.781-0.156-1.062-0.438l-2.125-2.125c-0.281-0.281-0.438-0.672-0.438-1.062s0.156-0.781 0.438-1.062l4.594-4.594-4.594-4.594c-0.281-0.281-0.438-0.672-0.438-1.062s0.156-0.781 0.438-1.062l2.125-2.125c0.281-0.281 0.672-0.438 1.062-0.438s0.781 0.156 1.062 0.438l4.594 4.594 4.594-4.594c0.281-0.281 0.672-0.438 1.062-0.438s0.781 0.156 1.062 0.438l2.125 2.125c0.281 0.281 0.438 0.672 0.438 1.062s-0.156 0.781-0.438 1.062l-4.594 4.594 4.594 4.594c0.281 0.281 0.438 0.672 0.438 1.062z"></path>
+				</symbol>
+				<symbol id="icon-home" viewBox="0 0 26 28">
+					<title>home</title>
+					<path d="M22 15.5v7.5c0 0.547-0.453 1-1 1h-6v-6h-4v6h-6c-0.547 0-1-0.453-1-1v-7.5c0-0.031 0.016-0.063 0.016-0.094l8.984-7.406 8.984 7.406c0.016 0.031 0.016 0.063 0.016 0.094zM25.484 14.422l-0.969 1.156c-0.078 0.094-0.203 0.156-0.328 0.172h-0.047c-0.125 0-0.234-0.031-0.328-0.109l-10.813-9.016-10.813 9.016c-0.109 0.078-0.234 0.125-0.375 0.109-0.125-0.016-0.25-0.078-0.328-0.172l-0.969-1.156c-0.172-0.203-0.141-0.531 0.063-0.703l11.234-9.359c0.656-0.547 1.719-0.547 2.375 0l3.813 3.187v-3.047c0-0.281 0.219-0.5 0.5-0.5h3c0.281 0 0.5 0.219 0.5 0.5v6.375l3.422 2.844c0.203 0.172 0.234 0.5 0.063 0.703z"></path>
+				</symbol>
+				<symbol id="icon-arrows-v" viewBox="0 0 12 28">
+					<title>move vertical</title>
+					<path d="M11 5c0 0.547-0.453 1-1 1h-2v16h2c0.547 0 1 0.453 1 1 0 0.266-0.109 0.516-0.297 0.703l-4 4c-0.187 0.187-0.438 0.297-0.703 0.297s-0.516-0.109-0.703-0.297l-4-4c-0.187-0.187-0.297-0.438-0.297-0.703 0-0.547 0.453-1 1-1h2v-16h-2c-0.547 0-1-0.453-1-1 0-0.266 0.109-0.516 0.297-0.703l4-4c0.187-0.187 0.438-0.297 0.703-0.297s0.516 0.109 0.703 0.297l4 4c0.187 0.187 0.297 0.438 0.297 0.703z"></path>
+				</symbol>
+				<symbol id="icon-folder-o" viewBox="0 0 26 28">
+					<title>folder</title>
+					<path d="M24 20.5v-11c0-0.828-0.672-1.5-1.5-1.5h-11c-0.828 0-1.5-0.672-1.5-1.5v-1c0-0.828-0.672-1.5-1.5-1.5h-5c-0.828 0-1.5 0.672-1.5 1.5v15c0 0.828 0.672 1.5 1.5 1.5h19c0.828 0 1.5-0.672 1.5-1.5zM26 9.5v11c0 1.922-1.578 3.5-3.5 3.5h-19c-1.922 0-3.5-1.578-3.5-3.5v-15c0-1.922 1.578-3.5 3.5-3.5h5c1.922 0 3.5 1.578 3.5 3.5v0.5h10.5c1.922 0 3.5 1.578 3.5 3.5z"></path>
+				</symbol>
+
+				
+				<symbol id="icon-image" viewBox="0 0 32 32">
+					<title>image</title>
+					<path d="M29.996 4c0.001 0.001 0.003 0.002 0.004 0.004v23.993c-0.001 0.001-0.002 0.003-0.004 0.004h-27.993c-0.001-0.001-0.003-0.002-0.004-0.004v-23.993c0.001-0.001 0.002-0.003 0.004-0.004h27.993zM30 2h-28c-1.1 0-2 0.9-2 2v24c0 1.1 0.9 2 2 2h28c1.1 0 2-0.9 2-2v-24c0-1.1-0.9-2-2-2v0z"></path>
+					<path d="M26 9c0 1.657-1.343 3-3 3s-3-1.343-3-3 1.343-3 3-3 3 1.343 3 3z"></path>
+					<path d="M28 26h-24v-4l7-12 8 10h2l7-6z"></path>
+				</symbol>
+				<symbol id="icon-play" viewBox="0 0 32 32">
+					<title>video</title>
+					<path d="M30.662 5.003c-4.488-0.645-9.448-1.003-14.662-1.003s-10.174 0.358-14.662 1.003c-0.86 3.366-1.338 7.086-1.338 10.997s0.477 7.63 1.338 10.997c4.489 0.645 9.448 1.003 14.662 1.003s10.174-0.358 14.662-1.003c0.86-3.366 1.338-7.086 1.338-10.997s-0.477-7.63-1.338-10.997zM12 22v-12l10 6-10 6z"></path>
+				</symbol>
+				<symbol id="icon-quotes-left" viewBox="0 0 32 32">
+					<title>quotes</title>
+					<path d="M7.031 14c3.866 0 7 3.134 7 7s-3.134 7-7 7-7-3.134-7-7l-0.031-1c0-7.732 6.268-14 14-14v4c-2.671 0-5.182 1.040-7.071 2.929-0.364 0.364-0.695 0.751-0.995 1.157 0.357-0.056 0.724-0.086 1.097-0.086zM25.031 14c3.866 0 7 3.134 7 7s-3.134 7-7 7-7-3.134-7-7l-0.031-1c0-7.732 6.268-14 14-14v4c-2.671 0-5.182 1.040-7.071 2.929-0.364 0.364-0.695 0.751-0.995 1.157 0.358-0.056 0.724-0.086 1.097-0.086z"></path>
+				</symbol>
+				<symbol id="icon-list-numbered" viewBox="0 0 32 32">
+					<title>numbered list</title>
+					<path d="M12 26h20v4h-20zM12 14h20v4h-20zM12 2h20v4h-20zM6 0v8h-2v-6h-2v-2zM4 16.438v1.563h4v2h-6v-4.563l4-1.875v-1.563h-4v-2h6v4.563zM8 22v10h-6v-2h4v-2h-4v-2h4v-2h-4v-2z"></path>
+				</symbol>
+				<symbol id="icon-list2" viewBox="0 0 32 32">
+					<title>bullet list</title>
+					<path d="M12 2h20v4h-20v-4zM12 14h20v4h-20v-4zM12 26h20v4h-20v-4zM0 4c0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.209-1.791 4-4 4s-4-1.791-4-4zM0 16c0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.209-1.791 4-4 4s-4-1.791-4-4zM0 28c0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.209-1.791 4-4 4s-4-1.791-4-4z"></path>
+				</symbol>
+				<symbol id="icon-link" viewBox="0 0 32 32">
+					<title>link</title>
+					<path d="M13.757 19.868c-0.416 0-0.832-0.159-1.149-0.476-2.973-2.973-2.973-7.81 0-10.783l6-6c1.44-1.44 3.355-2.233 5.392-2.233s3.951 0.793 5.392 2.233c2.973 2.973 2.973 7.81 0 10.783l-2.743 2.743c-0.635 0.635-1.663 0.635-2.298 0s-0.635-1.663 0-2.298l2.743-2.743c1.706-1.706 1.706-4.481 0-6.187-0.826-0.826-1.925-1.281-3.094-1.281s-2.267 0.455-3.094 1.281l-6 6c-1.706 1.706-1.706 4.481 0 6.187 0.635 0.635 0.635 1.663 0 2.298-0.317 0.317-0.733 0.476-1.149 0.476z"></path>
+					<path d="M8 31.625c-2.037 0-3.952-0.793-5.392-2.233-2.973-2.973-2.973-7.81 0-10.783l2.743-2.743c0.635-0.635 1.664-0.635 2.298 0s0.635 1.663 0 2.298l-2.743 2.743c-1.706 1.706-1.706 4.481 0 6.187 0.826 0.826 1.925 1.281 3.094 1.281s2.267-0.455 3.094-1.281l6-6c1.706-1.706 1.706-4.481 0-6.187-0.635-0.635-0.635-1.663 0-2.298s1.663-0.635 2.298 0c2.973 2.973 2.973 7.81 0 10.783l-6 6c-1.44 1.44-3.355 2.233-5.392 2.233z"></path>
+				</symbol>
+				<symbol id="icon-bold" viewBox="0 0 32 32">
+					<title>bold</title>
+					<path d="M22.121 15.145c1.172-1.392 1.879-3.188 1.879-5.145 0-4.411-3.589-8-8-8h-10v28h12c4.411 0 8-3.589 8-8 0-2.905-1.556-5.453-3.879-6.855zM12 6h3.172c1.749 0 3.172 1.794 3.172 4s-1.423 4-3.172 4h-3.172v-8zM16.969 26h-4.969v-8h4.969c1.827 0 3.313 1.794 3.313 4s-1.486 4-3.313 4z"></path>
+				</symbol>
+				<symbol id="icon-italic" viewBox="0 0 32 32">
+					<title>italic</title>
+					<path d="M28 2v2h-4l-10 24h4v2h-14v-2h4l10-24h-4v-2z"></path>
+				</symbol>
+				<symbol id="icon-pagebreak" viewBox="0 0 32 32">
+					<title>horizontal line</title>
+					<path d="M8 12v-12h24v12h-2v-10h-20v10zM32 18v14h-24v-14h2v12h20v-12zM16 14h4v2h-4zM10 14h4v2h-4zM22 14h4v2h-4zM28 14h4v2h-4zM0 9l6 6-6 6z"></path>
+				</symbol>
+				<symbol id="icon-table2" viewBox="0 0 32 32">
+					<title>table</title>
+					<path d="M0 2v28h32v-28h-32zM12 20v-6h8v6h-8zM20 22v6h-8v-6h8zM20 6v6h-8v-6h8zM10 6v6h-8v-6h8zM2 14h8v6h-8v-6zM22 14h8v6h-8v-6zM22 12v-6h8v6h-8zM2 22h8v6h-8v-6zM22 28v-6h8v6h-8z"></path>
+				</symbol>
+				<symbol id="icon-pilcrow" viewBox="0 0 32 32">
+					<title>paragraph</title>
+					<path d="M12 0h16v4h-4v28h-4v-28h-4v28h-4v-16c-4.418 0-8-3.582-8-8s3.582-8 8-8z"></path>
+				</symbol>
+				<symbol id="icon-embed" viewBox="0 0 32 32">
+					<title>code</title>
+					<path d="M18 23l3 3 10-10-10-10-3 3 7 7z"></path>
+					<path d="M14 9l-3-3-10 10 10 10 3-3-7-7z"></path>
+				</symbol>
+				<symbol id="icon-header" viewBox="0 0 28 28">
+					<title>headline</title>
+					<path d="M26.281 26c-1.375 0-2.766-0.109-4.156-0.109-1.375 0-2.75 0.109-4.125 0.109-0.531 0-0.781-0.578-0.781-1.031 0-1.391 1.563-0.797 2.375-1.328 0.516-0.328 0.516-1.641 0.516-2.188l-0.016-6.109c0-0.172 0-0.328-0.016-0.484-0.25-0.078-0.531-0.063-0.781-0.063h-10.547c-0.266 0-0.547-0.016-0.797 0.063-0.016 0.156-0.016 0.313-0.016 0.484l-0.016 5.797c0 0.594 0 2.219 0.578 2.562 0.812 0.5 2.656-0.203 2.656 1.203 0 0.469-0.219 1.094-0.766 1.094-1.453 0-2.906-0.109-4.344-0.109-1.328 0-2.656 0.109-3.984 0.109-0.516 0-0.75-0.594-0.75-1.031 0-1.359 1.437-0.797 2.203-1.328 0.5-0.344 0.516-1.687 0.516-2.234l-0.016-0.891v-12.703c0-0.75 0.109-3.156-0.594-3.578-0.781-0.484-2.453 0.266-2.453-1.141 0-0.453 0.203-1.094 0.75-1.094 1.437 0 2.891 0.109 4.328 0.109 1.313 0 2.641-0.109 3.953-0.109 0.562 0 0.781 0.625 0.781 1.094 0 1.344-1.547 0.688-2.312 1.172-0.547 0.328-0.547 1.937-0.547 2.5l0.016 5c0 0.172 0 0.328 0.016 0.5 0.203 0.047 0.406 0.047 0.609 0.047h10.922c0.187 0 0.391 0 0.594-0.047 0.016-0.172 0.016-0.328 0.016-0.5l0.016-5c0-0.578 0-2.172-0.547-2.5-0.781-0.469-2.344 0.156-2.344-1.172 0-0.469 0.219-1.094 0.781-1.094 1.375 0 2.75 0.109 4.125 0.109 1.344 0 2.688-0.109 4.031-0.109 0.562 0 0.781 0.625 0.781 1.094 0 1.359-1.609 0.672-2.391 1.156-0.531 0.344-0.547 1.953-0.547 2.516l0.016 14.734c0 0.516 0.031 1.875 0.531 2.188 0.797 0.5 2.484-0.141 2.484 1.219 0 0.453-0.203 1.094-0.75 1.094z"></path>
+				</symbol>
+				<symbol id="icon-list-alt" viewBox="0 0 28 28">
+					<title>table of contents</title>
+					<path d="M6 18.5v1c0 0.266-0.234 0.5-0.5 0.5h-1c-0.266 0-0.5-0.234-0.5-0.5v-1c0-0.266 0.234-0.5 0.5-0.5h1c0.266 0 0.5 0.234 0.5 0.5zM6 14.5v1c0 0.266-0.234 0.5-0.5 0.5h-1c-0.266 0-0.5-0.234-0.5-0.5v-1c0-0.266 0.234-0.5 0.5-0.5h1c0.266 0 0.5 0.234 0.5 0.5zM6 10.5v1c0 0.266-0.234 0.5-0.5 0.5h-1c-0.266 0-0.5-0.234-0.5-0.5v-1c0-0.266 0.234-0.5 0.5-0.5h1c0.266 0 0.5 0.234 0.5 0.5zM24 18.5v1c0 0.266-0.234 0.5-0.5 0.5h-15c-0.266 0-0.5-0.234-0.5-0.5v-1c0-0.266 0.234-0.5 0.5-0.5h15c0.266 0 0.5 0.234 0.5 0.5zM24 14.5v1c0 0.266-0.234 0.5-0.5 0.5h-15c-0.266 0-0.5-0.234-0.5-0.5v-1c0-0.266 0.234-0.5 0.5-0.5h15c0.266 0 0.5 0.234 0.5 0.5zM24 10.5v1c0 0.266-0.234 0.5-0.5 0.5h-15c-0.266 0-0.5-0.234-0.5-0.5v-1c0-0.266 0.234-0.5 0.5-0.5h15c0.266 0 0.5 0.234 0.5 0.5zM26 21.5v-13c0-0.266-0.234-0.5-0.5-0.5h-23c-0.266 0-0.5 0.234-0.5 0.5v13c0 0.266 0.234 0.5 0.5 0.5h23c0.266 0 0.5-0.234 0.5-0.5zM28 4.5v17c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-17c0-1.375 1.125-2.5 2.5-2.5h23c1.375 0 2.5 1.125 2.5 2.5z"></path>
+				</symbol>
+				<symbol id="icon-dots-two-vertical" viewBox="0 0 20 20">
+					<title>definition</title>
+					<path d="M10.001 8.2c1.215 0 2.199-0.986 2.199-2.2s-0.984-2.2-2.199-2.2c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2zM10.001 11.8c-1.215 0-2.201 0.985-2.201 2.2s0.986 2.2 2.201 2.2c1.215 0 2.199-0.985 2.199-2.2s-0.984-2.2-2.199-2.2z"></path>
+				</symbol>
+				<symbol id="icon-check" viewBox="0 0 20 20">
+					<title>check</title>
+					<path d="M8.294 16.998c-0.435 0-0.847-0.203-1.111-0.553l-3.573-4.721c-0.465-0.613-0.344-1.486 0.27-1.951 0.615-0.467 1.488-0.344 1.953 0.27l2.351 3.104 5.911-9.492c0.407-0.652 1.267-0.852 1.921-0.445s0.854 1.266 0.446 1.92l-6.984 11.21c-0.242 0.391-0.661 0.635-1.12 0.656-0.022 0.002-0.042 0.002-0.064 0.002z"></path>
+				</symbol>
+				<symbol id="icon-cross" viewBox="0 0 20 20">
+					<title>cross</title>
+					<path d="M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"></path>
+				</symbol>
+				{{ assets.renderSvg() }}
+			</defs>
+		</svg>
+
 		<header class="main-header">
 			{% include 'partials/navi.twig' %}
 		</header>
@@ -45,6 +167,13 @@
 		<script src="{{ base_url }}/system/author/js/vuedraggable.umd.min.js?20191111"></script>
 		<script src="{{ base_url }}/system/author/js/author.js?20191111"></script>
 		<script src="{{ base_url }}/system/author/js/vue-publishcontroller.js?20191111"></script>
+		<script src="{{ base_url }}/system/author/js/vue-blox-config.js?20191111"></script>
+		<script>
+			let formatConfig = {{ settings.formats|json_encode() }};
+		</script>
+
+		{{ assets.renderEditorJS() }}
+
 		<script src="{{ base_url }}/system/author/js/vue-blox.js?20191111"></script>
 		<script src="{{ base_url }}/system/author/js/vue-navi.js?20191111"></script>
 		<script src="{{ base_url }}/system/author/js/lazy-video.js?2019111"></script>

system/author/layouts/layoutEditor.twig

@@ -22,7 +22,28 @@
 		<link rel="stylesheet" href="{{ base_url }}/system/author/css/style.css?20191111" />
 		<link rel="stylesheet" href="{{ base_url }}/system/author/css/color-picker.min.css" />
 	</head>
-	<body>	
+	<body>
+		<svg style="position: absolute; width: 0; height: 0; overflow: hidden" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+			<defs>
+				<symbol id="icon-external-link" viewBox="0 0 28 28">
+					<title>external-link</title>
+					<path d="M22 14.5v5c0 2.484-2.016 4.5-4.5 4.5h-13c-2.484 0-4.5-2.016-4.5-4.5v-13c0-2.484 2.016-4.5 4.5-4.5h11c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-1.375 0-2.5 1.125-2.5 2.5v13c0 1.375 1.125 2.5 2.5 2.5h13c1.375 0 2.5-1.125 2.5-2.5v-5c0-0.281 0.219-0.5 0.5-0.5h1c0.281 0 0.5 0.219 0.5 0.5zM28 1v8c0 0.547-0.453 1-1 1-0.266 0-0.516-0.109-0.703-0.297l-2.75-2.75-10.187 10.187c-0.094 0.094-0.234 0.156-0.359 0.156s-0.266-0.063-0.359-0.156l-1.781-1.781c-0.094-0.094-0.156-0.234-0.156-0.359s0.063-0.266 0.156-0.359l10.187-10.187-2.75-2.75c-0.187-0.187-0.297-0.438-0.297-0.703 0-0.547 0.453-1 1-1h8c0.547 0 1 0.453 1 1z"></path>
+				</symbol>
+				<symbol id="icon-file-text-o" viewBox="0 0 24 28">
+					<title>text-file</title>
+					<path d="M22.937 5.938c0.578 0.578 1.062 1.734 1.062 2.562v18c0 0.828-0.672 1.5-1.5 1.5h-21c-0.828 0-1.5-0.672-1.5-1.5v-25c0-0.828 0.672-1.5 1.5-1.5h14c0.828 0 1.984 0.484 2.562 1.062zM16 2.125v5.875h5.875c-0.094-0.266-0.234-0.531-0.344-0.641l-4.891-4.891c-0.109-0.109-0.375-0.25-0.641-0.344zM22 26v-16h-6.5c-0.828 0-1.5-0.672-1.5-1.5v-6.5h-12v24h20zM6 12.5c0-0.281 0.219-0.5 0.5-0.5h11c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1zM17.5 16c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h11zM17.5 20c0.281 0 0.5 0.219 0.5 0.5v1c0 0.281-0.219 0.5-0.5 0.5h-11c-0.281 0-0.5-0.219-0.5-0.5v-1c0-0.281 0.219-0.5 0.5-0.5h11z"></path>
+				</symbol>
+				<symbol id="icon-cog" viewBox="0 0 24 28">
+					<title>cog</title>
+					<path d="M16 14c0-2.203-1.797-4-4-4s-4 1.797-4 4 1.797 4 4 4 4-1.797 4-4zM24 12.297v3.469c0 0.234-0.187 0.516-0.438 0.562l-2.891 0.438c-0.172 0.5-0.359 0.969-0.609 1.422 0.531 0.766 1.094 1.453 1.672 2.156 0.094 0.109 0.156 0.25 0.156 0.391s-0.047 0.25-0.141 0.359c-0.375 0.5-2.484 2.797-3.016 2.797-0.141 0-0.281-0.063-0.406-0.141l-2.156-1.687c-0.453 0.234-0.938 0.438-1.422 0.594-0.109 0.953-0.203 1.969-0.453 2.906-0.063 0.25-0.281 0.438-0.562 0.438h-3.469c-0.281 0-0.531-0.203-0.562-0.469l-0.438-2.875c-0.484-0.156-0.953-0.344-1.406-0.578l-2.203 1.672c-0.109 0.094-0.25 0.141-0.391 0.141s-0.281-0.063-0.391-0.172c-0.828-0.75-1.922-1.719-2.578-2.625-0.078-0.109-0.109-0.234-0.109-0.359 0-0.141 0.047-0.25 0.125-0.359 0.531-0.719 1.109-1.406 1.641-2.141-0.266-0.5-0.484-1.016-0.641-1.547l-2.859-0.422c-0.266-0.047-0.453-0.297-0.453-0.562v-3.469c0-0.234 0.187-0.516 0.422-0.562l2.906-0.438c0.156-0.5 0.359-0.969 0.609-1.437-0.531-0.75-1.094-1.453-1.672-2.156-0.094-0.109-0.156-0.234-0.156-0.375s0.063-0.25 0.141-0.359c0.375-0.516 2.484-2.797 3.016-2.797 0.141 0 0.281 0.063 0.406 0.156l2.156 1.672c0.453-0.234 0.938-0.438 1.422-0.594 0.109-0.953 0.203-1.969 0.453-2.906 0.063-0.25 0.281-0.438 0.562-0.438h3.469c0.281 0 0.531 0.203 0.562 0.469l0.438 2.875c0.484 0.156 0.953 0.344 1.406 0.578l2.219-1.672c0.094-0.094 0.234-0.141 0.375-0.141s0.281 0.063 0.391 0.156c0.828 0.766 1.922 1.734 2.578 2.656 0.078 0.094 0.109 0.219 0.109 0.344 0 0.141-0.047 0.25-0.125 0.359-0.531 0.719-1.109 1.406-1.641 2.141 0.266 0.5 0.484 1.016 0.641 1.531l2.859 0.438c0.266 0.047 0.453 0.297 0.453 0.562z"></path>
+				</symbol>
+				<symbol id="icon-power-off" viewBox="0 0 24 28">
+					<title>power-off</title>
+					<path d="M24 14c0 6.609-5.391 12-12 12s-12-5.391-12-12c0-3.797 1.75-7.297 4.797-9.578 0.891-0.672 2.141-0.5 2.797 0.391 0.672 0.875 0.484 2.141-0.391 2.797-2.031 1.531-3.203 3.859-3.203 6.391 0 4.406 3.594 8 8 8s8-3.594 8-8c0-2.531-1.172-4.859-3.203-6.391-0.875-0.656-1.062-1.922-0.391-2.797 0.656-0.891 1.922-1.062 2.797-0.391 3.047 2.281 4.797 5.781 4.797 9.578zM14 2v10c0 1.094-0.906 2-2 2s-2-0.906-2-2v-10c0-1.094 0.906-2 2-2s2 0.906 2 2z"></path>
+				</symbol>
+			</defs>
+		</svg>
+
 		<header class="main-header">
 			{% include 'partials/navi.twig' %}
 		</header>

system/author/partials/editorNavi.twig

@@ -5,15 +5,38 @@
 		<div class="navi-list">
 			<div class="navi-item folder">
 				<div class="status" :class="homepage.status"></div>
-				<a href="{{ base_url }}/tm/content/{{ settings.editor }}" :class="homepage.active"><i class="icon-home"></i><span class="level-1">Homepage</span></a>
+				<a href="{{ base_url }}/tm/content/{{ settings.editor }}" :class="homepage.active"><span><span class="iconwrapper"><svg class="icon icon-plus"><use xlink:href="#icon-plus"></use></svg></span><span class="level-1">Homepage</span></a>
 			</div>
 		</div>
-		<draggable :element="'ul'" class="navi-list" :list="items" @start="onStart" @end="onEnd" :options="{group:{ name:'folder'}, animation: 150, 'disabled': freeze }">
-			<navigation ref="draggit" v-for="item in items" :freeze="freeze" :name="item.name" :active="item.active" :parent="item.activeParent" :level="item.keyPath" :root="root" :url="item.urlRelWoF" v-bind:id="item.keyPath" :key="item.keyPath" :elementtype="item.elementType" :filetype="item.fileType" :status="item.status" :folder="item.folderContent"></navigation>
+		<draggable class="navi-list"
+			@start="onStart" 
+			@end="onEnd" 
+			tag="ul" 
+			:list="items" 
+			group="folder" 
+			animation="150" 
+			:disabled="freeze">
+			<navigation 
+				v-for="item in items" 
+				ref="draggit" 
+				:freeze="freeze" 
+				:name="item.name" 
+				:active="item.active" 
+				:parent="item.activeParent" 
+				:level="item.keyPath" 
+				:root="root" 
+				:url="item.urlRelWoF" 
+				:id="item.keyPath" 
+				:key="item.keyPath" 
+				:elementtype="item.elementType" 
+				:filetype="item.fileType" 
+				:status="item.status" 
+				:folder="item.folderContent"
+			></navigation>
 		</draggable>
 		<ul class="navi-list addBaseFolder">
 			<li class="navi-item file">
-				<i class="icon-plus"></i>
+				<span class="iconwrapper"><svg class="icon icon-plus"><use xlink:href="#icon-plus"></use></svg></span>
 				<div class="addNaviForm">
 					<input type="text" v-model="folderName" />
 					<button class="fullWidth" @click="addFolder">add folder to base level</button>
@@ -27,11 +50,49 @@
 	<template id="navigation-template">
 		<li class="navi-item" :class="elementtype">
 			<div class="status" :class="status"></div>
-			<a v-bind:href="getUrl(root, url)" :class="checkActive(active,parent)"><i :class="getIcon(elementtype, filetype)"></i><span :class="getLevel(level)">{{ name }}</span><i class="icon-move"></i></a>
-			<draggable v-if="folder" :element="'ul'" class="navi-list" :list="folder" :move="checkMove" @start="onStart" @end="onEnd" :options="{group:{ name:'file'}, animation: 150, 'disabled': freeze }">
-				<navigation ref="draggit" v-for="item in folder" :freeze="freeze" :name="item.name" :active="item.active" :parent="item.activeParent" :level="item.keyPath" :url="item.urlRelWoF" :root="root" v-bind:id="item.keyPath" :key="item.keyPath" :filetype="item.fileType" :status="item.status" :elementtype="item.elementType" :folder="item.folderContent"></navigation>
+			<a v-bind:href="getUrl(root, url)" :class="checkActive(active,parent)"><span class="iconwrapper"><svg class="icon" :class="getIconClass(elementtype, filetype)"><use :xlink:href="getIcon(elementtype, filetype)"></use></svg></span><span :class="getLevel(level)">{{ name }}</span><span class="movewrapper"><span class="movewrapper"><svg class="icon icon-arrows-v"><use xlink:href="#icon-arrows-v"></use></svg></span></a>
+			<draggable v-if="folder" class="navi-list" tag="ul" 
+				@start="onStart" 
+				@end="onEnd" 
+				:list="folder" 
+				:move="checkMove"
+				group="file" 
+				animation="150" 
+				:disabled="freeze">				
+				<navigation 
+					v-for="item in folder"
+					ref="draggit" 
+					:freeze="freeze" 
+					:name="item.name" 
+					:active="item.active" 
+					:parent="item.activeParent" 
+					:level="item.keyPath" 
+					:url="item.urlRelWoF" 
+					:root="root" 
+					:id="item.keyPath" 
+					:key="item.keyPath" 
+					:filetype="item.fileType" 
+					:status="item.status" 
+					:elementtype="item.elementType" 
+					:folder="item.folderContent"
+				></navigation>
 			</draggable>
-			<ul v-if="folder" class="navi-list"><li class="navi-item file"><i class="icon-plus"></i><span :class="getLevel(level + '.0')" class="addNaviItem"><a class="addNaviLink" href="#" @click.prevent="toggleForm">add item</a></span><transition name="fade"><div v-if="showForm" class="addNaviForm"><input v-model="newItem"><button class="b-left" @click="addFile('file')">add file</button><button class="b-right" @click="addFile('folder')">add folder</button></div></transition></li></ul>
+			<ul v-if="folder" class="navi-list">
+				<li class="navi-item file">
+					<span class="iconwrapper">
+						<svg class="icon icon-plus"><use xlink:href="#icon-plus"></use></svg>
+					</span>
+					<span :class="getLevel(level + '.0')" class="addNaviItem">
+						<a class="addNaviLink" href="#" @click.prevent="toggleForm">add item</a>
+					</span>
+					<transition name="fade">
+						<div v-if="showForm" class="addNaviForm">
+							<input v-model="newItem">
+							<button class="b-left" @click="addFile('file')">add file</button><button class="b-right" @click="addFile('folder')">add folder</button>
+						</div>
+					</transition>
+				</li>
+			</ul>
 		</li>
 	</template>
 {% endverbatim %}

system/author/partials/navi.twig

@@ -3,13 +3,13 @@
 		<a href="{{ base_url }}/tm/content/{{ settings.editor }}">Typemill</a>
 	</div>
 	<ul class="navi-items">
-		<li><a href="{{ base_url }}/tm/content/{{ settings.editor }}"{{ navigation ? ' class="active"' : '' }}><i class="icon-doc-text"></i><span class="nav-label"> Content</span></a></li><li>
+		<li><a href="{{ base_url }}/tm/content/{{ settings.editor }}"{{ navigation ? ' class="active"' : '' }}><svg class="icon baseline icon-file-text-o"><use xlink:href="#icon-file-text-o"></use></svg><span class="nav-label"> Content</span></a></li><li>
 			{% if is_role('administrator') %}
-				<a href="{{ path_for('settings.show') }}"{{ users ? ' class="active"' : '' }}><i class="icon-cog"></i><span class="nav-label">  Settings</span></a></li><li>
+				<a href="{{ path_for('settings.show') }}"{{ users ? ' class="active"' : '' }}><svg class="icon baseline icon-cog"><use xlink:href="#icon-cog"></use></svg><span class="nav-label">  Settings</span></a></li><li>
 			{% else %}
-				<a href="{{ path_for('user.show', {'username' : get_username() }) }}"{{ users ? ' class="active"' : '' }}><i class="icon-cog"></i><span class="nav-label">  Account</span></a></li><li>			
+				<a href="{{ path_for('user.show', {'username' : get_username() }) }}"{{ users ? ' class="active"' : '' }}><svg class="icon icon-cog baseline"><use xlink:href="#icon-cog, gear"></use></svg><span class="nav-label">  Account</span></a></li><li>			
 			{% endif %}
-			<a href="{{ base_url }}"><i class="icon-link-ext"></i><span class="nav-label"> View Site</span></a></li><li>
-			<a href="{{ path_for('auth.logout') }}"><i class="icon-off"></i><span class="nav-label">  Logout</span></a></li>
+			<a href="{{ base_url }}"><svg class="icon baseline icon-external-link"><use xlink:href="#icon-external-link"></use></svg><span class="nav-label"> View Site</span></a></li><li>
+			<a href="{{ path_for('auth.logout') }}"><svg class="icon baseline icon-power-off"><use xlink:href="#icon-power-off"></use></svg><span class="nav-label">  Logout</span></a></li>
 	</ul>
 </nav>

system/author/settings/system.twig

@@ -63,12 +63,6 @@
 					</div><div class="medium">
 						<label for="settings[sitemap]">Google Sitemap <small>(Readonly)</small></label>
 						<input type="text" name="settings[sitemap]" id="sitemap" readonly value="{{ base_url }}/cache/sitemap.xml" />
-					</div><div class="medium">
-						<span class="label">Startpage</span>
-						<label class="control-group">Startpage is designed as landing-page.
-							<input name="settings[startpage]" type="checkbox" id="startpage"{{ startpage ? ' checked' : '' }}>
-							<span class="checkmark"></span>
-						</label>
 					</div>
 					<hr>
 					<header class="headline">
@@ -76,18 +70,29 @@
 					</header>
 					<div class="medium{{ errors.settings.editor ? ' error' : '' }}">
 						<label for="settings[editor]">Standard Editor Mode *</label>
-						<label class="control-group">Raw Markdown
-							<input name="settings[editor]" value="raw" type="radio" {% if (old.settings.editor == "raw") or (settings.editor == "raw") %} checked {% endif %}>
+						<label class="control-group">Visual Markdown Editor
+							<input name="settings[editor]" value="visual" type="radio" {% if (old.settings.editor == "visual") or (settings.editor == "visual") %} checked {% endif %}>
 							<span class="radiomark"></span>
 						</label>
-						<label class="control-group">Visual Markdown
-							<input name="settings[editor]" value="visual" type="radio" {% if (old.settings.editor == "visual") or (settings.editor == "visual") %} checked {% endif %}>
+						<label class="control-group">Raw Markdown Editor
+							<input name="settings[editor]" value="raw" type="radio" {% if (old.settings.editor == "raw") or (settings.editor == "raw") %} checked {% endif %}>
 							<span class="radiomark"></span>
 						</label>
 						{% if errors.settings.editor %}
 							<span class="error">{{ errors.settings.editor | first }}</span>
 						{% endif %}
-					</div>							
+					</div>
+					<div class="medium{{ errors.settings.editor ? ' error' : '' }}">
+						<label>Visual Editor: The Format Buttons</label>
+						{% for format in formats %}
+
+							<label class="control-group">{{ format }}
+								<input name="settings[formats][]" value="{{ format }}" type="checkbox" {% if format in settings.formats %} checked {% endif %}>
+								<span class="checkmark"></span>
+							</label>
+
+						{% endfor %}
+					</div>					
 				</fieldset>
 			</section>
 			<input type="submit" value="Save All Settings" />

system/system.php

@@ -50,14 +50,14 @@ $container = $app->getContainer();
 * LOAD & UPDATE PLUGINS *
 ************************/
 
-$plugins 				= new Typemill\Plugins();
-$pluginNames		= $plugins->load();
+$plugins 		= new Typemill\Plugins();
+$pluginNames	= $plugins->load();
 $pluginSettings = $routes = $middleware	= array();
 
 foreach($pluginNames as $pluginName)
 {
 	$className	= $pluginName['className'];
-	$name				= $pluginName['name'];
+	$name		= $pluginName['name'];
 		
 	# check if plugin is in the settings already
 	if(isset($settings['settings']['plugins'][$name]))
@@ -80,7 +80,7 @@ foreach($pluginNames as $pluginName)
 	# if the plugin is activated, add routes/middleware and add plugin as event subscriber
 	if($pluginSettings[$name]['active'])
 	{
-		$routes 			= $plugins->getNewRoutes($className, $routes);
+		$routes 		= $plugins->getNewRoutes($className, $routes);
 		$middleware		= $plugins->getNewMiddleware($className, $middleware);
 		
 		$dispatcher->addSubscriber(new $className($container));

themes/typemill/css/style.css

@@ -479,17 +479,16 @@ footer p{
 *  	CONTENT ELEMENTS	*
 ************************/
 
-pre,code{
-	white-space: pre;
-}
 code{
 	display: inline-block;
 	padding: 0 0.5em;
 	font-size: 0.8em; 
 	line-height: 1.4em;	
 	border-radius: 3px;	
+	word-break: break-all;
 }
 pre{
+	white-space: pre;
 	padding: 10px;
 	display: block;	
 	max-width: 100%;

themes/typemill/typemill.yaml

@@ -1,5 +1,5 @@
 name: Typemill Theme
-version: 1.1.7
+version: 1.1.8
 description: The standard theme for Typemill. Responsive, minimal and without any dependencies. It uses the system fonts Calibri and Helvetica. No JavaScript is used. 
 author: Sebastian Schürmanns
 homepage: https://typemill.net
@@ -8,6 +8,7 @@ licence: MIT
 settings:
   chapter: Chapter
   start: Start
+  cover: true
   modified: true
   modifiedText: 'Last updated'
   modifiedFormat: 'd.m.Y'
@@ -19,20 +20,25 @@ settings:
 forms:
   fields:
 
-    chapter:
-      type: text
-      label: Text For Chapter
-      placeholder: Add Name for Chapter
+    cover:
+      type: checkbox
+      label: Different Design for Startpage
+      checkboxlabel: Activate Special Startpage-Design
 
     start:
       type: text
-      label: Label For Start Button
+      label: Label for Start Button
       placeholder: Add Label for Start-Button
       required: true
 
+    chapter:
+      type: text
+      label: Label for Chapter
+      placeholder: Add Name for Chapter
+
     chapnum:
       type: checkbox
-      label: Chapter Numbers
+      label: Show Chapter Numbers
       checkboxlabel: Count chapters in navigation?
 
     fieldset0: