diff --git a/markdown.rb b/markdown.rb
index e84b4a5..1a56c13 100644
--- a/markdown.rb
+++ b/markdown.rb
@@ -16,7 +16,7 @@
 
 # Ruby CGI module to produce human-readable HTML from markdown pages
 # Variables
-ROOT_PATH="/var/www/"
+ROOT_PATH="/home/yessiest/website.rb/"
 TAB_MULTIPLIER=10
 TAB_UNIT="px"
 QUOTE_TAB=4
@@ -53,11 +53,18 @@ def _parse_list(text,mode=["ul",/ *-/])
   return new_text
 end
 
+def _env(text,env)
+  return text
+      .gsub(/(?<!\\)\$PATH/,env["PATH"])
+      .gsub(/(?<!\\)\$FILE/,env["FILE"])
+      .gsub(/(?<!\\)\$CRUMB/,env["CRUMB"])
+end
+
 template_css = ""
 template_pre = ""
 template_post = ""
 if File::exists?( ROOT_PATH+TEMPLATE_CSS ) then
-    template_css = cgi.link( rel = "stylesheet", href = TEMPLATE_CSS)
+   template_css = "<link rel=\"stylesheet\" href=\"#{TEMPLATE_CSS}\">\n"
 end
 if File::exists?( ROOT_PATH+TEMPLATE_PRE) then
    template_pre_f = File.new( ROOT_PATH+TEMPLATE_PRE, "r")
@@ -129,9 +136,14 @@ content = cgi.body {
   # - Inline block
   doc = doc.gsub(/(?<!\\)`{2}(.*?)(?<!\\)`{2}/m,"<code class=\"codeinline\">\\1</code>")
 
-  template_pre+"\n"+
+  env = {
+    "PATH" => cgi["docfile"].match("^(.*?)/?[^/]*$")[1].gsub(ROOT_PATH,""),
+    "FILE" => cgi["docfile"].match("[^/]*$")[0],
+    "CRUMB" => cgi["docfile"].gsub("/"," / ")
+  }
+  _env(template_pre,env)+"\n"+
   doc+"\n"+
-  template_post+"\n"
+  _env(template_post,env)+"\n"
 }
 
 cgi.out {
diff --git a/template.css b/template.css
new file mode 100644
index 0000000..f59a03e
--- /dev/null
+++ b/template.css
@@ -0,0 +1,69 @@
+html {
+    height:100%;
+}
+
+body {
+    font-family: Helvetica, Terminus, sans-serif;
+    margin:0;
+    padding:0;
+    height:100%;
+    background-color: #007F81;
+}
+
+#content {
+    padding: 25px 50px 25px 50px;
+}
+
+#wrapper {
+    overflow: hidden;
+    position: relative;
+    width: 800px;
+    margin: 2em auto 0 auto;
+    height: 100%;
+    background-color: #c0c0c0;
+    box-shadow: 0 0 15px #000000;
+}
+
+#navbar {
+    background-color: #aeaeae;
+    padding: 2px 5px 2px 5px;
+    border-style: outset;
+    border-width: 2px;
+    border-color: #cecece #808080 #808080 #cecece;
+}
+
+.nav {
+    left: 0;
+    display: block;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+.nav-li {
+    list-style: none;
+    display: inline;
+    border-right: 10px solid #00000000;
+}
+
+img {
+    margin: 0 auto 0 auto;
+    border-style: outset;
+    border-width: 2px;
+    border-color: #cecece #808080 #808080 #cecece;
+    box-shadow: 0 0 5px #000000;
+}
+
+@media screen and (max-width: 800px) {
+    #wrapper {
+        width: 600px;
+    }
+}
+@media screen and (max-width: 600px) {
+    #content {
+        padding: 0 1em 0 1em;
+    }
+    #wrapper {
+        width: 95%;
+    }
+}
diff --git a/template.post.html b/template.post.html
new file mode 100644
index 0000000..ebc6381
--- /dev/null
+++ b/template.post.html
@@ -0,0 +1,2 @@
+    </div>
+</div>
diff --git a/template.pre.html b/template.pre.html
new file mode 100644
index 0000000..41ced03
--- /dev/null
+++ b/template.pre.html
@@ -0,0 +1,12 @@
+<div id="wrapper">
+    <div id="navbar">
+        <ul class="nav">
+            <li class="nav-li">
+                <a href="https://yessiest.512mb.org/">Back to top</a>
+            </li>
+            <li class="nav-li">
+                $CRUMB
+            </li>
+        </ul>
+    </div>
+    <div id="content">