diff --git a/source/code/app.js b/source/code/app.js
deleted file mode 100644
index 5ce57d0..0000000
--- a/source/code/app.js
+++ /dev/null
@@ -1,192 +0,0 @@
-//NEW
-
-function Clock(id){
-	this.id = id;
-	
-	var that = this;
-	setInterval(function(){that.updateClock();}, 1000);
-	this.updateClock();
-}
-
-Clock.prototype.updateClock = function(){
-	var date = new Date();
-	var clock = document.getElementById(this.id);
-	//console.log(this);
-	clock.innerHTML = this.formatDigits(date.getHours()) + ":" + this.formatDigits(date.getMinutes()) + ":" + this.formatDigits(date.getSeconds());
-};
-	
-Clock.prototype.formatDigits = function(val){
-	if(val<10) val = "0" + val;
-
-	return val;
-}
-
-//OLD
-
-var floor = Math.floor;
-
-function ongoing() {
-
-	var now = new Date();
-	
-	var w = Math.floor(now.getDay());
-	var D = new Array("Sonntag", "Montag", "Dienstag", "Mittwoch", "Donnerstag", "Freitag", "Samstag");
-	var DNumb = Math.floor(now.getDate());
-	var MNumb = Math.floor(now.getMonth());
-	var M = new Array("Januar", "Februar", "M&auml;rz", "April", "Mai", "Juni", "Juli", "August", "September", "Oktober", "November", "Dezember");
-	var y = Math.floor(now.getYear());
-	if (y < 999) y += 1900;
-	
-	var ms = Math.floor(now.getMilliseconds());
-	var s = Math.floor(now.getSeconds());
-	var m = Math.floor(now.getMinutes() + s / 60);
-	var h = Math.floor(now.getHours() + m / 60);
-
-	var j2000 = new Date(); // Bezugspunkt ist der 1.1.2000 0:00 UT (entspricht JD 2451544,5)
-	j2000.setUTCFullYear(2000,0,1);
-	j2000.setUTCHours(0,0,0,0);
-
-	var utc = new Date();
-	utc.setUTCFullYear(y,MNumb,DNumb); // Monate müssen im Wertebereich 0...11 übergeben werden
-	utc.setUTCHours(h,m,s,ms);
-
-	var utc0 = new Date();
-	utc0.setUTCFullYear(y,MNumb,DNumb);
-	utc0.setUTCHours(0,0,0,0);
-
-	var jd = 2451544.5 + (utc-j2000) / 86400000; // Zählung erfolgt in Millisekunden, 1 Tag = 86.400.000 ms
-	var jdUTC0 = 2451544.5 + (utc0-j2000) / 86400000;
-	
-	var N = jd - 2451545.0;
-	var L = 280.460 + 0.9856474 * N; // mittlere ekliptikale Länge der Sonne
-	var g = 357.528 + 0.9856003 * N; // mittlere Anomalie
-	var el = L + 1.915 * Math.sin(g) + 0.020 * Math.sin(2*g);
-	var e = 23.439 - 0.0000004 * N;
-	var rektaszension = Math.atan((Math.cos(e)*Math.sin(el)) / Math.cos(el));
-	
-	var T = (jdUTC0 - 2451545.0) / 36525;
-	var stGMT = (((6*3600) + (41*60) + 50.54841) + (8640184.812866*T) + (0.093104*Math.pow(T,2)) - (0.0000062*Math.pow(T,3))) / 3600;
-	
-	var stGMT2 = 6.697376 + 2400.05134 * T + 1.002738 * T;
-	var hWGMT = stGMT2 * 15;
-	var hW = hWGMT + 11.9566185772;
-	
-	var st = (stGMT + (now.getUTCHours()*1.00273790935)) + (11.9566185772/15); // Sommerzeit muss noch berücksichtigt werden
-	var st24 = Math.abs(st - (Math.round(st / 24) * 24));
-	var stH = Math.floor(st24);
-	var stM = Math.floor((st24 % 1) * 60);
-	var stS = zeroFill(Math.floor((((st24 % 1) * 60) % 1) * 60), 2);
-	
-	var travelWidth = document.body.clientWidth;
-	var travelHeight = document.body.clientHeight;
-	var sunPosX = 0;
-	var sunPosY = 0;
-	var moonPosX = 0;
-	var moonPosY = 0;
-	
-	var sun = $("#sun").css({
-		"left": (s / 60) * travelWidth,
-		"top": (m / 60) * travelHeight
-	});
-	
-	$("#day").text(D[w]);
-	$("#dayNumb").text(DNumb);
-	$("#month").text(M[MNumb]);
-	$("#year").text(y);
-	$("#time").text('' + zeroFill(h, 2) + ':' + zeroFill(m, 2) + ':' + zeroFill(s, 2));
-	
-	$("#julian").text(jd.toFixed(6));
-	//$("#star").text(stH + ':' + stM + ':' + stS);
-	$("#star").text(stH + ':' + stM);
-	$("#star1").text(stGMT);
-	$("#star2").text(stGMT2);
-	
-}
-
-function zeroFill( number, width ){
-	width -= number.toString().length;
-	if ( width > 0 ){
-		return new Array( width + (/\./.test( number ) ? 2 : 1) ).join( '0' ) + number;
-	}
-	return number + ""; // always return a string
-}
-
-// create emails
-function composeMail(tag, name, prov, suffix, text, topic) {
-	var trigger = tag.indexOf(".");
-	var mailString = name + '@' + prov + '.' + suffix;
-	var textString = mailString.replace(/@/g, "(at)");
-	var descString = "Nachricht an " + mailString;
-	if (trigger == -1) {
-		if (!text) {
-			text = mailString;
-		} else if (text == "at") {
-			text = textString;
-		} else if (text == "to") {
-			text = descString;
-		}
-		if (!topic) {
-			topic = "";
-		} else {
-			topic = "?subject=" + topic;
-		}
-		var old = $('#'+tag).html();
-		$('#'+tag).html(old + text);
-		$('#'+tag).attr("href", "mailto:" + mailString + topic);
-	} else {
-		$(tag).each(function() {
-			if (!text) {
-				text = mailString;
-			} else if (text == "at") {
-				text = textString;
-			} else if (text == "to") {
-				text = descString;
-			}
-			if (!topic) {
-				topic = "";
-			} else {
-				topic = "?subject=" + topic;
-			}
-			var old = $(this).html();
-			$(this).html(old + text);
-			$(this).attr("href", "mailto:" + mailString + topic);
-		});
-	}
-}
-
-//Länge der Balken im Diagram berechnen
-function barwidth(size, G, W) {
-	var s = size;
-	var g = G;
-	var w = W;
-	var p = ( w / g ) * 100;
-	var newW = s * ( p /100 );
-
-	return newW;
-}
-//String Element erweitern
-String.prototype.transform = function() { 
-	return parseFloat(this.replace(',', '.')); 
-}
-//Array Element erweitern
-Array.prototype.arrayAdd = function() {
-	return eval(this.join("+"));
-}
-//Speicherplatz in Prozent berechnen
-function percentage(total, gigs, round) {
-		var totalSpace = total;
-		var singleSpace = gigs;
-		var z = round;
-		var p = singleSpace / ( totalSpace / 100 );
-		
-		return p;
-}
-//Speicherplatz in GB berechnen
-function gigabytes(percent, total, round) {
-		var occupiedPercent = percent;
-		var singleSpace = total;
-		var z = round;
-		var g = (singleSpace / 100 ) * occupiedPercent;
-		
-		return g;
-}
diff --git a/source/data/new.json b/source/data/new.json
deleted file mode 100644
index 9d4a0a8..0000000
--- a/source/data/new.json
+++ /dev/null
@@ -1,14 +0,0 @@
-[
-	{
-		"text": "Index",
-		"href": "/"
-	},
-	{
-		"text": "Basics",
-		"href": "./demo/basics.html"
-	},
-	{
-		"text": "Drag",
-		"href": "./demo/examples/ui/drag.html"
-	}
-]
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/drag.njk b/source/screens/demo/examples/ui/drag.njk
deleted file mode 100755
index 61ab554..0000000
--- a/source/screens/demo/examples/ui/drag.njk
+++ /dev/null
@@ -1,152 +0,0 @@
----
-title: Drag
-tags:
-  - demoExample
----
-{% set pageId = page.fileSlug %}
-{% set pageClass = "h_full_view" %}
-{% set bodyClass = "body_drag" %}
-
-{% extends "demo/_app.njk" %}
-
-{% block title %}{{ title }}{% endblock %}
-
-{% block links %}
-  {{ super() }}
-  <link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
-{% endblock %}
-
-{% block head %}
-  {{ super() }}
-{% endblock %}
-
-{% block body %}
-  <div id="space"></div>
-  <button id="addFrame">Add</button>
-{% endblock %}
-
-{%- block script %}
-  <script>
-    // Define the NewDiv class
-    class NewDiv {
-      constructor(x, y, width, height, backgroundColor) {
-        this.x = x;
-        this.y = y;
-        this.width = width;
-        this.height = height;
-        this.backgroundColor = backgroundColor;
-        this.element = null;
-      }
-
-      // Create the div element
-      createDiv() {
-        this.element = document.createElement('div');
-        this.element.style.position = 'absolute';
-        this.element.style.left = `${this.x}px`;
-        this.element.style.top = `${this.y}px`;
-        this.element.style.width = `${this.width}px`;
-        this.element.style.height = `${this.height}px`;
-        this.element.style.background = this.backgroundColor;
-        this.element.style.cursor = 'move';
-
-        // Add event listeners for dragging
-        let isDown = false;
-        let offset = [0, 0];
-
-        this.element.addEventListener('mousedown', (event) => {
-          if (event.button === 0) { // Left mouse button
-            isDown = true;
-            offset = [
-              this.element.offsetLeft - event.clientX,
-              this.element.offsetTop - event.clientY
-            ];
-          }
-        });
-
-        document.addEventListener('mouseup', () => {
-          isDown = false;
-        });
-
-        document.addEventListener('mousemove', (event) => {
-          if (isDown) {
-            const maxX = window.innerWidth - this.element.offsetWidth;
-            const maxY = window.innerHeight - this.element.offsetHeight;
-            let x = event.clientX + offset[0];
-            let y = event.clientY + offset[1];
-
-            // Boundary checks
-            if (x < 0) x = 0;
-            if (y < 0) y = 0;
-            if (x > maxX) x = maxX;
-            if (y > maxY) y = maxY;
-
-            this.element.style.left = `${x}px`;
-            this.element.style.top = `${y}px`;
-          }
-        });
-
-        // Save position and size
-        const saveData = () => {
-          const data = {
-            x: this.element.offsetLeft,
-            y: this.element.offsetTop,
-            width: this.element.offsetWidth,
-            height: this.element.offsetHeight
-          };
-          // Save data to local storage or a database
-          localStorage.setItem(`divData${this.element.id}`, JSON.stringify(data));
-        };
-
-        // Load saved data
-        const loadData = () => {
-          const data = localStorage.getItem(`divData${this.element.id}`);
-          if (data) {
-            const parsedData = JSON.parse(data);
-            this.element.style.left = `${parsedData.x}px`;
-            this.element.style.top = `${parsedData.y}px`;
-            this.element.style.width = `${parsedData.width}px`;
-            this.element.style.height = `${parsedData.height}px`;
-          }
-        };
-
-        // Call the save function when the user stops dragging
-        document.addEventListener('mouseup', saveData);
-
-        // Load saved data on page load
-        loadData();
-      }
-
-      // Append the div to the space
-      appendToFrame(space) {
-        this.element.id = `newDiv${space.children.length}`;
-        space.appendChild(this.element);
-      }
-    }
-
-    // Function to generate a random color
-    function getRandomColor() {
-      const letters = '0123456789ABCDEF';
-      let color = '#';
-      for (let i = 0; i < 6; i++) {
-        color += letters[Math.floor(Math.random() * 16)];
-      }
-      return color;
-    }
-
-    // Get the space element
-    const space = document.getElementById('space');
-    const addFrameButton = document.getElementById('addFrame');
-
-    // Add event listener to the add space button
-    addFrameButton.addEventListener('click', () => {
-      const newDiv = new NewDiv(100, 100, 100, 100, getRandomColor());
-      newDiv.createDiv();
-      newDiv.appendToFrame(space);
-    });
-
-    // Create a new NewDiv instance
-    const newDiv = new NewDiv(100, 100, 800, 600, '#000');
-    newDiv.createDiv();
-    newDiv.appendToFrame(document.getElementById('space'));
-  </script>
-{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/new.njk b/source/screens/demo/examples/ui/new.njk
deleted file mode 100755
index edc4d47..0000000
--- a/source/screens/demo/examples/ui/new.njk
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: New
-tags:
-  - demoExample
----
-{% set pageId = page.fileSlug %}
-{% set pageClass = "h_full_view" %}
-{% set bodyClass = "body_new" %}
-
-{% extends "demo/_app.njk" %}
-{% import "demo/macros/_states.njk" as state %}
-
-{% block title %}{{ title }}
-{% endblock %}
-
-{% block links %}
-  {{ super() }}
-  <link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
-{% endblock %}
-
-{% block head %}
-  {{ super() }}
-{% endblock %}
-
-{% block body %}
-  <div id="top">
-    <h1 class="brand">
-      <a href="#">{{ hippie.brand | upper }}</a>
-    </h1>
-    <nav>
-      <ul>
-        {% for link in new %}
-          <li>
-            <a href="{{ link.href }}">{{ link.text }}</a>
-          </li>
-        {% endfor %}
-      </ul>
-    </nav>
-    <div class="state">
-      <p>{{ state.coord("log")}}
-        /
-        {{ state.date("date")}}
-        /
-        {{ state.time("time")}}</p>
-    </div>
-  </div>
-  <div class="container">
-    <div class="area menu">
-      <nav class="nav_horizontal">
-        <ul>
-          <li>
-            <a href="" class="a_button">Func 1</a>
-          </li>
-          <li>
-            <a href="" class="a_button">Func 2</a>
-          </li>
-        </ul>
-      </nav>
-    </div>
-    <div class="area grid">
-      <div class="item">1</div>
-      <div class="item">2</div>
-      <div class="item">3</div>
-      <div class="item">4</div>
-    </div>
-  </div>
-{% endblock %}
-
-{%- block script %}
-  {{ super() }}
-  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
-  <script src="{{ pageBase }}js/app.js"></script>
-  <script>
-    let clock = new Clock('time');
-
-    document.addEventListener('mousemove', (event) => {
-      document.getElementById('log')
-      .textContent = "X: " + event.pageX + ", Y: " + event.pageY;
-    });
-  </script>
-{% endblock %}
\ No newline at end of file
diff --git a/source/screens/demo/examples/ui/settings.njk b/source/screens/demo/examples/ui/settings.njk
deleted file mode 100755
index da61f8a..0000000
--- a/source/screens/demo/examples/ui/settings.njk
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: Settings
-tags:
-  - demoExample
-  - ui
----
-{% set pageId = page.fileSlug %}
-{% set pageClass = "h_full_view" %}
-{% set bodyClass = "body_ui" %}
-
-{% extends "demo/_app.njk" %}
-
-{% block title %}{{ title }}
-{% endblock %}
-
-{% block links %}
-  {{ super() }}
-  <link href="{{ pageBase }}css/ui.css" media="all" rel="stylesheet"/>
-{% endblock %}
-
-{% block head %}
-  {{ super() }}
-{% endblock %}
-
-{% block body %}
-<div id="frame" class="frame-flex">
-  <div class="title-bar">
-    <div>title-bar<button class="io_button">menu</button class="io_button"><button class="io_button">search</button class="io_button"></div>
-    <div><button class="io_button">minimize</button class="io_button"><button class="io_button">maximize</button class="io_button"><button class="io_button">close</button class="io_button"></div>
-  </div>
-  <main>
-    <aside class="left">aside
-    <nav>
-      <ul>
-        <li>setting</li>
-        <li>setting</li>
-      </ul>
-    </nav>
-    </aside>
-    <section class="bside">section</section>
-  </main>
-</div>
-{% endblock %}
-
-{%- block script %}
-  {{ super() }}
-  <script src="{{ pageBase }}js/app.js"></script>
-  <script>
-  </script>
-{% endblock %}
\ No newline at end of file
diff --git a/source/style/modules/ui/_new_module.scss b/source/style/modules/ui/_new_module.scss
deleted file mode 100755
index 100284b..0000000
--- a/source/style/modules/ui/_new_module.scss
+++ /dev/null
@@ -1,129 +0,0 @@
-$module_top_height: 32px;
-
-.body_new {
-	height: 100vh;
-	padding: $module_top_height + $space_basic $space_basic $space_basic;
-}
-
-.body_drag {
-	height: 100vh;
-	// padding: $space_basic;
-}
-
-.container {
-	display: grid;
-	height: 100%;
-	// margin: $space_basic;
-	// grid-template-columns: repeat(3, 1fr);
-	grid-template-rows: auto 1fr;
-	gap: $space_basic;
-}
-
-.area {
-	width: 100%;
-	height: 100%;
-	transition: $transition_best;
-
-	&:hover {
-		background-color: #999;
-	}
-}
-
-.menu, #top {
-	nav ul {
-		margin: 0;
-	}
-}
-
-.grid {
-	display: grid;
-	// grid-template-rows: repeat(2, 1fr);
-	// grid-template-columns: repeat(2, 1fr);
-	grid-template-areas: "a a";
-	grid-auto-rows: 1fr;
-	grid-auto-columns: 1fr;
-}
-
-.item {
-	// height: unset;
-	border-color: darken($color_back_basic, $color_diff_tiny);
-	border-style: dotted;
-	border-width: $width_border_8;
-	border-radius: $width_border_8;
-	padding: $space_basic;
-	background-color: rgb($color_back_basic, .5);
-	// background-color: lighten($color_back_basic, $color_diff_tiny);
-	// background-color: gold;
-}
-
-.float {
-	min-height: 50%;
-}
-
-#top {
-	position: fixed;
-	top: 0;
-	left: 0;
-	display: flex;
-	width: 100%;
-	height: $module_top_height;
-	background-color: rgb(0, 0, 0, .8);
-	z-index: $z_top;
-
-	div:last-child {
-		flex: 1;
-	}
-
-	p,
-	li {
-		color: #fff;
-	}
-
-	h1 a {
-		color: #000;
-	}
-
-	p,
-	li {
-		margin-top: 8px;
-		margin-bottom: 7px;
-		padding: 0 4px;
-		font-size: 12px;
-		line-height: 17px;
-	}
-
-	nav ul {
-		display: flex;
-		margin-left: 16px;
-	}
-
-	.brand {
-		height: 36px;
-		background-color: #fff;
-		margin: 0 0 0 128px;
-		padding: 7px 24px;
-		font-size: 16px;
-		line-height: 22px;
-		font-weight: bold;
-		text-align: center;
-	}
-
-	.state {
-		margin-right: 16px;
-		text-align: right;
-	}
-}
-
-#space {
-	position: relative;
-	height: 100%;
-	background-color: $color-dark;
-}
-
-#addFrame {
-	@extend .io_button;
-	position: fixed;
-	top: 8px;
-	right: 8px;
-	margin: 0;
-}
\ No newline at end of file
diff --git a/source/style/modules/ui/_settings_module.scss b/source/style/modules/ui/_settings_module.scss
deleted file mode 100755
index 9b9dc1b..0000000
--- a/source/style/modules/ui/_settings_module.scss
+++ /dev/null
@@ -1,44 +0,0 @@
-$module_top_height: 32px;
-
-.body_ui {
-	height: 100vh;
-}
-
-#frame {
-	position: relative;
-	height: 100%;
-	background-color: $color-dark;
-
-	.title-bar {
-		button {
-			margin: 0 2px;
-		}
-	}
-
-	main {
-		aside {
-			background-color: $color_brighter;
-		}
-	}
-}
-
-.frame-flex {
-	display: flex;
-	flex-direction: column;
-
-	.title-bar {
-		display: flex;
-
-		div:last-child {
-			margin-left: auto;
-		}
-	}
-	
-	main {
-		flex: 1;
-
-		aside, section {
-			height: 100%;
-		}
-	}
-}
\ No newline at end of file
diff --git a/source/style/ui.scss b/source/style/ui.scss
deleted file mode 100644
index 0a36d0d..0000000
--- a/source/style/ui.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import "demo_config";
-@import "hippie-style/hippie";
-
-@import "modules/ui/new_module";
-@import "modules/ui/settings_module";
diff --git a/source/templates/demo/_app.njk b/source/templates/demo/_app.njk
deleted file mode 100755
index 0939550..0000000
--- a/source/templates/demo/_app.njk
+++ /dev/null
@@ -1,29 +0,0 @@
-<!-- demo.app.template -->
-<!DOCTYPE html>
-<html lang="de" class="{{ pageClass }}" id="{{ pageId }}">
-  <head>
-    <meta charset="utf-8">
-
-    {% block head %}
-      <title>{{ hippie.titlePrefix }}
-        {%- block title %}{% endblock %}{{ hippie.titlePostfix }}</title>
-
-      {% block meta %}
-        {% include "demo/partials/_meta.njk" %}
-        <base href="/">
-      {% endblock %}
-
-      {% block links %}
-      {% endblock %}
-
-    {% endblock %}
-  </head>
-
-  <body class="{{ bodyClass }}">
-    {% block body %}{% endblock %}
-
-    {% block script %}
-    {% endblock %}
-
-  </body>
-</html>
\ No newline at end of file
diff --git a/source/templates/demo/macros/_states.njk b/source/templates/demo/macros/_states.njk
deleted file mode 100644
index 3b3a333..0000000
--- a/source/templates/demo/macros/_states.njk
+++ /dev/null
@@ -1,15 +0,0 @@
-<!-- states.macro -->
-{% macro coord(id, text='X: #, Y: ##') %}
-  <span id="{{ id }}">{{ text }}</span>
-{% endmacro %}
-{% macro time(id, text='00:00:00', postfix=' Uhr') %}
-  <span id="{{ id }}">{{ text }}</span><span>{{ postfix }}</span>
-{% endmacro %}
-{% macro date() %}
-  <span id="{{ id }}">
-    <span id="day">Wochentag</span>,
-    <span id="dayNumb">##</span>.
-    <span id="month">Monat</span>
-    <span id="year">####</span>
-  </span>
-{% endmacro %}
\ No newline at end of file