diff --git a/paste/home.py b/paste/home.py
index 939b64b..e812ce5 100755
--- a/paste/home.py
+++ b/paste/home.py
@@ -87,3 +87,7 @@ def get_content(path: str) -> str:
return render_template("content.html.j2")
return abort(404)
+
+@home.route("/about")
+def about() -> str:
+ return render_template("about.html.j2")
\ No newline at end of file
diff --git a/paste/static/css/main.css b/paste/static/css/main.css
new file mode 100644
index 0000000..c5f19d5
--- /dev/null
+++ b/paste/static/css/main.css
@@ -0,0 +1,62 @@
+:root {
+ --main-width: 85vw;
+ --bg-color: white;
+ --text-color: #212121;
+ --a-color: #7e22ce;
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --bg-color: #212121;
+ --text-color: white;
+ }
+}
+
+/* large screen */
+@media only screen and (min-width: 868px) {
+ :root {
+ --main-width: 50vw;
+ }
+}
+
+html {
+ font-family: sans-serif;
+ scroll-behavior: smooth;
+ color: var(--text-color);
+}
+
+
+body {
+ max-width: var(--main-width);
+ margin-left: auto;
+ margin-right: auto;
+ background-color: var(--bg-color);
+ line-height: 1.65
+}
+
+nav {
+ border-bottom: 1px solid black;
+}
+
+.menu ul {
+ list-style-type: none;
+ padding-left: 0;
+}
+
+.menu {
+ display: inline-block;
+}
+
+.menu li {
+ font-weight: bold;
+}
+
+a {
+ color: var(--a-color);
+ text-decoration: none;
+}
+
+a:hover {
+ color: black;
+ border-bottom: .2rem solid dimgrey;
+}
diff --git a/paste/templates/about.html.j2 b/paste/templates/about.html.j2
new file mode 100644
index 0000000..799a06c
--- /dev/null
+++ b/paste/templates/about.html.j2
@@ -0,0 +1,4 @@
+{% extends "base.html.j2" %}
+{% block content %}
+<p>Gnous/Paste</p>
+{% endblock %}
diff --git a/paste/templates/base.html.j2 b/paste/templates/base.html.j2
new file mode 100644
index 0000000..babbb6d
--- /dev/null
+++ b/paste/templates/base.html.j2
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="fr">
+<head>
+ <meta charset="UTF-8">
+ <title>Gnous/Paste</title>
+ <meta name="viewport" content="width=device-width, initial-scale=1"/>
+ <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}"/>
+</head>
+<body>
+<nav class="menu">
+ <ul class="menu">
+ <li class="menu" {% if request.path == "/" %}><a href="{{ url_for("home.about") }}">About</a>{% elif request.path == "/about" %}<a href="{{ url_for("home.homepage") }}">Home</a>{% endif %}</li>
+ |
+ <li class="menu"><a href="https://git.gnous.eu/gnouseu/paste">Source</a></li>
+ </ul>
+</nav>
+<main>
+ {% block content %}
+ {% endblock %}
+</main>
+</body>
+</html>
diff --git a/paste/templates/home.html.j2 b/paste/templates/home.html.j2
index cc8ccee..c164647 100755
--- a/paste/templates/home.html.j2
+++ b/paste/templates/home.html.j2
@@ -1,5 +1,7 @@
-<form id="paste-content" method="POST" accept-charset="UTF-8" action="{{ url_for('home.create') }}">
- <textarea name="content" form="paste-content">Enter text here...</textarea>
+{% extends "base.html.j2" %}
+{% block content %}
+<form class="container" id="paste-content" method="POST" accept-charset="UTF-8" action="{{ url_for('home.create') }}">
+ <textarea name="content" form="paste-content" placeholder="Enter your text here"></textarea>
<label for="time">Time in second</label>
<input id="time" name="time">
<input type="submit">
@@ -18,4 +20,4 @@
<p>Paste {{ messages[0] }} deleted </p>
{% endif %}
{% endwith %}
-
+{% endblock %}