6 files changed, 59 insertions, 18 deletions
diff --git a/src/short.nim b/src/short.nim
index df26552..fa5486a 100644
--- a/src/short.nim
+++ b/src/short.nim
@@ -24,6 +24,9 @@ func renderIndex(): string {.raises: [].} =
   var req: ShortUrl
   compileTemplateFile(getScriptDir() / "templates/index.html")
 
+func renderAbout(): string {.raises: [].} =
+  compileTemplateFile(getScriptDir() / "templates/about.html")
+
 func renderShort(req: ShortUrl): string {.raises: [].} =
   compileTemplateFile(getScriptDir() / "templates/short.html")
 
@@ -96,6 +99,8 @@ proc handleIndexPost(params: Table[string, string]): (HttpCode, string) {.raises
 routes:
   get "/":
     resp renderIndex()
+  get "/about":
+    resp renderAbout()
   post "/":
     initDB()
     var (code, content) = handleIndexPost(request.params)
diff --git a/src/templates/about.html b/src/templates/about.html
new file mode 100644
index 0000000..772ee35
--- /dev/null
+++ b/src/templates/about.html
@@ -0,0 +1,10 @@
+{% extends "templates/partials/master.html" %}
+{% block content %}
+<h1>URL shortener</h1>
+<p>
+The simple, self-hosted, open source and privacy friendly URL shortener : anonymous usage, no tracking.<br>
+This is a personal sharing service: Data may be deleted anytime. Don't share illegal, unethical or morally reprehensible content.
+</p>
+<p>
+This service is written in <a href="https://nim-lang.org/">nim</a>, its source code can be found <a href="https://git.adyxax.org/adyxax/short">here</a> and is mirrored to github <a href="https://github.com/adyxax/short">here</a>.
+{% endblock %}
diff --git a/src/templates/index.html b/src/templates/index.html
index b89e381..acce5c4 100644
--- a/src/templates/index.html
+++ b/src/templates/index.html
@@ -1,13 +1,9 @@
 {% extends "templates/partials/master.html" %}
 {% block content %}
-<h1>URL shortener</h1>
-<p>
-The simple, open source and privacy friendly URL shortener : anonymous usage, no tracking.<br>
-This is a personal sharing service: Data may be deleted anytime. Don't share illegal, unethical or morally reprehensible content.
-</p>
+<h1>Shorten a URL</h1>
 <form action="/" method="post">
-	<label for="title">Title:</label><input class="fullwidth" type="text" placeholder="Enter a title here" name="title" value="{{ $req.Title }}" minlength="3" maxlength="64" required autofocus><br>
-	<label for="url">URL:</label><input class="fullwidth" type="url" placeholder="Enter the URL to shorten here" name="url" value="{{ $req.Url }}" minlength="3" maxlength="512" required><br>
+	<input class="fullwidth" type="text" placeholder="Enter a title here" name="title" value="{{ $req.Title }}" minlength="3" maxlength="64" required autofocus><br>
+	<input class="fullwidth" type="url" placeholder="Enter the URL to shorten here" name="url" value="{{ $req.Url }}" minlength="3" maxlength="512" required><br>
 	<label for="expires">Expires in:</label>
 	<select id="expires" name="expires">
 		<option value="5">5 minutes</option>
diff --git a/src/templates/partials/master.html b/src/templates/partials/master.html
index 82cedac..78e3211 100644
--- a/src/templates/partials/master.html
+++ b/src/templates/partials/master.html
@@ -9,6 +9,7 @@
 		<title>short.adyxax.org</title>
 	</head>
 	<body>
+		{% importnwt "templates/partials/nav.html" %}
 		<main id="main">
 			{% block content %}{% endblock %}
 		</main>
diff --git a/src/templates/partials/nav.html b/src/templates/partials/nav.html
new file mode 100644
index 0000000..8882ff0
--- /dev/null
+++ b/src/templates/partials/nav.html
@@ -0,0 +1,10 @@
+<header>
+	<nav>
+		<ul>
+			<li class="nav-menu-title"><a href="/">short.adyxax.org</a></li>
+			<li class="nav-menu-margin-left">
+				<a href="/about">About</a>
+			</li>
+		</ul>
+	</nav>
+</header>
diff --git a/static/all.css b/static/all.css
index 3e31e06..728d3b6 100644
--- a/static/all.css
+++ b/static/all.css
@@ -66,17 +66,36 @@ a:hover {
 h1 {
 	color: #cb4b16;
 }
-h2,
-h3,
-h4,
-h5,
-h6 {
-	color: #859900;
-}
-pre {
+
+header {
 	background-color: #002b36;
-	color: #839496;
 }
-pre, code {
-	background-color: #002b36;
+header nav ul {
+	list-style-type: none;
+	margin: 0;
+	padding: 0;
+	overflow: hidden;
+	font-size: 1.25rem;
+}
+header nav ul li {
+	display: inline;
+	float: right;
+}
+header nav ul li a {
+	display: block;
+	text-align: center;
+	padding: 14px 16px;
+	text-decoration: none;
+}
+header nav ul li a:hover {
+	background-color: #073642;
+}
+.nav-menu-title {
+	float: left;
+	text-transform: uppercase;
+	font-weight: 700;
+	margin-right: 4px;
+}
+.nav-menu-margin-left {
+	margin-left: 4px;
 }