New stuff

Screwed even more things up, implemented more fancy stuff I dont understand... But hey, now I've got a floating header!

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;
+	}
+}

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>