Swagify ~

4 files changed, 87 insertions, 17 deletions

diff --git a/views/about.html b/views/about.html
index b71a580..08486e4 100644
--- a/views/about.html
+++ b/views/about.html
@@ -4,7 +4,8 @@
 
 {% block css %}
 .main {
-	margin-top: 1.5rem;
+	margin-top: 4rem;
+	margin-bottom: 4rem;
 	font-size: 1.25rem;
 }
 .float-right-mb {
@@ -50,13 +51,9 @@ I study computer science in Berlin and work at my university’s data center. Th
 </p>
 
 <p>
-	Last but not least I'm interested in molecular gastronomy (reading books like <a href="https://en.wikipedia.org/wiki/On_Food_and_Cooking" title="On Food and Cooking">this famous one</a> by Harold McGee), chinese or japanese tea (everything <a href="https://en.wikipedia.org/wiki/Camellia_sinensis" title="Also known as tea plant">Camellia sinensis</a>) and of course fresh grinded coffee to start my day, currently using a Baratza Encore and the AeroPress.
+	Last but not least I'm interested in molecular/modernist cuisine (my understanding is based on books like <a href="https://en.wikipedia.org/wiki/On_Food_and_Cooking" title="On Food and Cooking">this famous one</a> by Harold McGee), chinese or japanese tea (everything <a href="https://en.wikipedia.org/wiki/Camellia_sinensis" title="Also known as tea plant">Camellia sinensis</a>) and of course fresh grinded coffee to start my day, currently using a Baratza Encore and the AeroPress.
 </p>
 
-<!-- p>
-If you like, you can follow me on Twitter or Pinterest. Some of my projects are listed here as well.
-</p-->
-
 </div>
 
 {% endblock %}
diff --git a/views/index.html b/views/index.html
index 48e7520..449b69c 100644
--- a/views/index.html
+++ b/views/index.html
@@ -2,16 +2,38 @@
 
 {% block css %}
 	.main {
-		margin-top: 8rem;
+		margin-top: 4rem;
+		margin-bottom: 4rem;
 	}
 	@media (max-width: 992px) {
 		.main {
 			margin-top: 4rem;
+			margin-bottom: 4rem;
 		}
 	}
 	.index-list > li {
 		margin-bottom: 1rem;
 	}
+
+	body {
+		background-color: #1c1c1c;
+	}
+
+	#footer {
+		background-color: #e1e1e1;
+	}
+	.string {
+		color: #ddd277;
+	}
+	.keyword {
+		color: #cd015f;
+	}
+	.tab-over-space {
+		margin-left: 2rem;
+	}
+	.text-muted {
+		color: #808080 !important;
+	}
 {% endblock %}
 
 {% block main %}
@@ -19,26 +41,50 @@
 <div class="container">
 
 	<div class="quote">
-		<em>I'm just a simple man, trying to find my way in the universe.</em>
+		<code>[ <span class="keyword">quote</span> => <em class="string">I'm just a simple man, trying to find my way in the universe.</em> ]</code>
 	</div>
 	<ul class="list-unstyled text-left index-list">
 		<li>
-			I did some stuff online:
+			<span class="text-muted"># Stuff I spent my free time on:</span>
 			<br>
-			<a href="/projects" title="projects">Side Projects</a>
+			<code>
+				<span class="keyword">while</span> lazy; <span class="keyword">do</span>
+				<br>
+				<a class="tab-over-space" href="/projects" title="uncaught exception">Side.Projects()</a>
+				<br>
+				<span class="keyword">endwhile</span>
+			</code>
+
 		</li>
 		<li>
-			<strike>Stupi</strike>.. serious things I needed to exist: 
+			<span class="text-muted"># <strike>Stupi</strike>.. serious things I needed to exist:</span>
 			<br>
-			<a href="/tools" title="tools">Some funny, simple tools</a>
+			<code>
+				<span class="keyword">while</span> crazy; <span class="keyword">do</span>
+				<br>
+				<span class="tab-over-space">eval(<span class="string">"</span><a href="/tools" title="eval is bad">Some funny, simple tools</a><span class="string">"</span>)</span>
+				<br>
+				<span class="keyword">endwhile</span>
+			</code>
 		</li>
 		<li>
-			<a href="/about" title="about me">About Me</a> / <a href="https://www.fuselkoenig.de/kontakt/" title="contact me">Contact</a>
+			<span class="text-muted"># I have more hobbys besides sleep(10)</span>
+			<br>
+			<code>
+				<span class="keyword">if</span> interested; <span class="keyword">do</span>
+				<br>
+				<span class="tab-over-space">
+					<a href="/about" title="me.about() makes more sense">About.Me()</a>
+					<span class="keyword">or</span>
+					<a href="https://www.fuselkoenig.de/kontakt/" title="don't tell me I forgot the semicolons">Contact.Me()</a></span>
+				<br>
+				<span class="keyword">endif</span>
+			</code>
 		</li>
 		<li>
-			
 		</li>
 	</ul>
+	<code class="string">" syntax error: unexpected end of file</code>
 
 </div>
 
diff --git a/views/snippets/layout.html b/views/snippets/layout.html
index 416f119..0776b3c 100644
--- a/views/snippets/layout.html
+++ b/views/snippets/layout.html
@@ -19,6 +19,10 @@
 		html {
 			width: 100%;
 		}
+		body {
+			background-color: #262626;
+			color: #e1e1e1;
+		}
 		.main {
 			margin-top: 1rem;
 			font-size: 1.5rem;
@@ -44,6 +48,9 @@
 		.navbar {
 			background-color: #f5f5f5;
 		}
+		.navbar-brand {
+			color: #f07206 !important;
+		}
 
 		/**
 		 * ## Bottom Border Color in Navbar
@@ -62,10 +69,30 @@
 		}
 		.flavor-text {
 			margin-bottom: 2rem;
+			font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+			font-size: 1.5rem;
 		}
 		.flavor-text > h1 {
 			margin-bottom: 0;
 		}
+		h1::before {
+			content: "# ";
+		}
+		h1 {
+			color: #f07206;
+			font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
+		}
+		.main a {
+			color: #47ccfb;
+			text-decoration: underline;
+		}
+		.bg-dark {
+			background-color: #171717 !important;
+		}
+		.string {
+			color: #ddd277;
+		}
+
 	</style>
 	<style>
 		{% block css %}
@@ -80,7 +107,7 @@
 	{% endblock %}
 </main>
 
-<footer id="footer" class="mt-auto">
+<footer id="footer" class="mt-auto bg-dark">
 	<div class="container text-right">
 		{% block footer %}
 		{% endblock %}
diff --git a/views/snippets/navbar.html b/views/snippets/navbar.html
index d8819dc..1b28707 100644
--- a/views/snippets/navbar.html
+++ b/views/snippets/navbar.html
@@ -1,6 +1,6 @@
-<nav class="navbar navbar-expand-md navbar-light shadow-sm">
+<nav class="navbar navbar-expand-md navbar-dark bg-dark shadow-sm">
 	<div class="container">
-		<a class="navbar-brand" href="/">Maximilian Möhring</a>
+		<code><a class="navbar-brand" href="/">./ Maximilian Möhring</a></code>
 		<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
 			<span class="navbar-toggler-icon"></span>
 		</button>