diff --git a/css/OpenSans-Bold.ttf b/css/OpenSans-Bold.ttf
new file mode 100644
index 0000000..fd79d43
Binary files /dev/null and b/css/OpenSans-Bold.ttf differ
diff --git a/css/OpenSans-Light.ttf b/css/OpenSans-Light.ttf
new file mode 100644
index 0000000..0d38189
Binary files /dev/null and b/css/OpenSans-Light.ttf differ
diff --git a/css/OpenSans-Regular.ttf b/css/OpenSans-Regular.ttf
new file mode 100644
index 0000000..db43334
Binary files /dev/null and b/css/OpenSans-Regular.ttf differ
diff --git a/css/style.css b/css/style.css
new file mode 100644
index 0000000..c7a6eb3
--- /dev/null
+++ b/css/style.css
@@ -0,0 +1,295 @@
+/* CSS I understand */
+a, a:visited {
+    color: #000;
+    text-decoration: none;
+    -webkit-transition: all 0.2s linear;
+    -moz-transition: all 0.2s linear;
+    -ms-transition: all 0.2s linear;
+    -o-transition: all 0.2s linear;
+    transition: all 0.2s linear;
+}
+
+a:hover, a:active {
+    color: #6a6a6a;
+    text-decoration: none;
+}
+
+h1, h2, h3, h4, h5, h6 {
+    color: #000;
+    line-height: 1.2em;
+    margin-bottom: 0.6em;
+}
+
+h1 {
+    font-size: 2em;
+}
+
+h2 {
+    font-size: 1.7em;
+}
+
+h3 {
+    font-size: 1.5em;
+    margin-top: 2em;
+}
+
+p, table {
+    margin-bottom: 1em;
+}
+
+ol, ul {
+    padding-left: 30px;
+    margin-bottom: 1em;
+}
+
+b, strong {
+    font-weight: bold;
+}
+
+i, em {
+    font-style: italic;
+}
+
+u {
+    text-decoration: underline;
+}
+
+abbr, acronym {
+    cursor: help;
+    border-bottom: 0.1em dotted;
+}
+
+td, td img {
+    vertical-align: top;
+}
+
+td, th {
+    border: solid 1px #999;
+    padding: 0.25em 0.5em;
+}
+
+th {
+    font-weight: bold;
+    text-align: center;
+    background: #eee;
+}
+
+sub {
+    vertical-align: sub;
+    font-size: smaller;
+}
+
+sup {
+    vertical-align: super;
+    font-size: smaller;
+}
+
+code {
+    font-family: Courier, "Courier New", Monaco, Tahoma;
+    background: #eee;
+    color: #333;
+    padding: 0px 2px;
+}
+
+pre {
+    background: #eee;
+    padding: 20px;
+    margin-bottom: 1em;
+    overflow: auto;
+}
+
+blockquote {
+    font-style: italic;
+    margin: 0 0 1em 15px;
+    padding-left: 10px;
+    border-left: 5px solid #dddddd;
+}
+
+
+@font-face {
+	font-family: 'OpenSansBold';
+	src: url('../css/OpenSans-Bold.ttf');
+}
+@font-face {
+	font-family: 'OpenSansLight';
+	src: url('../css/OpenSans-Light.ttf');
+}
+
+/* CSS I dont understand */
+
+body {
+	display: flex;
+	flex-flow: row wrap;
+	margin: 0;
+	font-family: "OpenSansLight";
+
+}
+
+header, aside, nav, footer {
+	flex: 1 100%;
+}
+
+header {
+	display: flex;
+	font-size: 3em;
+	font-family: "OpenSansBold";
+
+}
+header * {
+    -webkit-flex: 1 1 0%;
+        flex: 1 1 0%;
+}
+header img {
+        -webkit-flex: 0 0 150px;
+        flex: 0 0 150px;
+        margin-right: 20px;
+}
+header nav {
+        -webkit-flex: 1 1 100%;
+        flex: 1 1 100%;
+}
+nav, nav ul, nav li{
+        margin: 0;
+        padding:0;
+        border:none;
+}
+nav ul {
+        display: -webkit-flex;
+        -webkit-flex-direction: column;
+        display: flex;
+        flex-direction: row;
+		flex-wrap: wrap;
+        justify-content: flex-start;
+
+}
+nav li {
+        list-style-type:none;
+        margin: 0;
+        -webkit-flex: 1 1 100%;
+        flex: 1 1 100%;
+		line-height: 1.5em;
+}
+nav a {
+		  text-decoration: none;
+		  color: #000;
+}
+article {
+}
+
+article a {
+		color: #808080;
+		text-decoration: underline;
+		-webkit-transition: all 0.2s linear;
+		-moz-transition: all 0.2s linear;
+		-ms-transition: all 0.2s linear;
+		-o-transition: all 0.2s linear;
+		transition: all 0.2s linear;
+}
+article a:visited {
+		color: #808080;
+		text-decoration: underline;
+		-webkit-transition: all 0.2s linear;
+		-moz-transition: all 0.2s linear;
+		-ms-transition: all 0.2s linear;
+		-o-transition: all 0.2s linear;
+		transition: all 0.2s linear;
+}
+
+article a:hover, a:active {
+		color: #000;
+		text-decoration: underline;
+	}
+
+    aside {
+		text-align: center;
+		border-bottom: 2px solid #d8d8d8;
+}
+footer {
+
+		font-size: smaller;
+
+}
+footer * {
+        -webkit-flex: 1 1 0%;
+        -webkit-justify-content: space-between;
+        flex: 1 1 0%;
+}
+
+@media all and (min-width: 35em) {
+	article {
+		flex: 3 1 0%;
+		margin-top: 170px;
+		margin-left: 22%;
+		padding: 2% 15% 2% 2%;
+	}
+
+	aside {
+		flex: 1 1 0%;
+		margin-top: 170px;
+		text-align: right;
+		position: fixed;
+		width: 18%;
+		padding: 2%;
+		border-right: 2px solid #d8d8d8;
+		border-bottom: 0px;
+
+	}
+
+	header {
+		display: flex;
+		flex-flow: row wrap;
+		font-size: 6em;
+		padding: 2% 2% 2% 2%;
+		background-color: #fff;
+		position: fixed;
+		margin-left: 20%;
+		width: 100%;
+		transition: all 0.5s;
+	}
+
+	header.smaller {
+		font-size: 3em;
+		
+	}
+
+	.header-wrapper {
+		display: flex;
+		flex-flow: row wrap;
+		position: relative;
+
+	}
+
+	header * {
+		flex: 1 1 0%;
+	}
+
+	header img {
+		flex: 0 0 400px;
+		margin-right: 50px;
+	}
+
+	aside nav {
+		flex: 1 1 100%;
+	}
+
+	nav, nav ul, nav li {
+		margin: 0;
+		padding: 0;
+		border: none;
+	}
+
+	nav ul {
+		display: flex;
+		justify-content: space-around;
+		flex-direction: column;
+	}
+
+	nav li {
+		list-style-type: none;
+		margin: 0 0px;
+	}
+	
+	nav li.active {
+		font-weight: bold;
+	}
+}
\ No newline at end of file
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..226a3ad
--- /dev/null
+++ b/index.html
@@ -0,0 +1,48 @@
+<html>
+<head>
+    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0"/>
+
+    <title>test</title>
+	
+	<link rel="stylesheet" href="{{ theme_url }}/css/style.css" type="text/css">
+	<script src="{{ theme_url }}/js/classie.js"></script>
+	<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
+<script>
+	$(function() {
+		$(window).scroll(function() {
+			var scroll = $(window).scrollTop();
+			if (scroll >= 50) {
+					$("header").addClass("smaller");
+				} else {
+					$("header").removeClass("smaller");
+				}
+			});
+		});
+
+</script>
+</head>
+<body>
+	<header>
+		{{ site_title }}
+	</header>
+	<aside>
+		<nav>
+			<ul>
+			{% for page in pages %}
+				<li{% if page.id == current_page.id %} class="active"{% endif %}>
+					<a href="{{ page.url }}">{{ page.title }} {% if page.id == current_page.id %} &laquo; {% endif %}</a>
+				</li>
+			{% endfor %}
+			</ul>
+		</nav>
+	</aside>
+		
+	<article>
+            {{ content }}
+	</article>
+	
+
+	<footer>
+This website was made with <a href="http://picocms.org/">PicoCMS</a>.
+	<br />This theme was made by sonst-was.	</footer>
+</body>
\ No newline at end of file
diff --git a/js/classie.js b/js/classie.js
new file mode 100644
index 0000000..4180658
--- /dev/null
+++ b/js/classie.js
@@ -0,0 +1,82 @@
+/*!
+ * classie v1.0.0
+ * class helper functions
+ * from bonzo https://github.com/ded/bonzo
+ * MIT license
+ * 
+ * classie.has( elem, 'my-class' ) -> true/false
+ * classie.add( elem, 'my-new-class' )
+ * classie.remove( elem, 'my-unwanted-class' )
+ * classie.toggle( elem, 'my-class' )
+ */
+
+/*jshint browser: true, strict: true, undef: true, unused: true */
+/*global define: false */
+
+( function( window ) {
+
+'use strict';
+
+// class helper functions from bonzo https://github.com/ded/bonzo
+
+function classReg( className ) {
+  return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
+}
+
+// classList support for class management
+// altho to be fair, the api sucks because it won't accept multiple classes at once
+var hasClass, addClass, removeClass;
+
+if ( 'classList' in document.documentElement ) {
+  hasClass = function( elem, c ) {
+    return elem.classList.contains( c );
+  };
+  addClass = function( elem, c ) {
+    elem.classList.add( c );
+  };
+  removeClass = function( elem, c ) {
+    elem.classList.remove( c );
+  };
+}
+else {
+  hasClass = function( elem, c ) {
+    return classReg( c ).test( elem.className );
+  };
+  addClass = function( elem, c ) {
+    if ( !hasClass( elem, c ) ) {
+      elem.className = elem.className + ' ' + c;
+    }
+  };
+  removeClass = function( elem, c ) {
+    elem.className = elem.className.replace( classReg( c ), ' ' );
+  };
+}
+
+function toggleClass( elem, c ) {
+  var fn = hasClass( elem, c ) ? removeClass : addClass;
+  fn( elem, c );
+}
+
+var classie = {
+  // full names
+  hasClass: hasClass,
+  addClass: addClass,
+  removeClass: removeClass,
+  toggleClass: toggleClass,
+  // short names
+  has: hasClass,
+  add: addClass,
+  remove: removeClass,
+  toggle: toggleClass
+};
+
+// transport
+if ( typeof define === 'function' && define.amd ) {
+  // AMD
+  define( classie );
+} else {
+  // browser global
+  window.classie = classie;
+}
+
+})( window );