Make some basic style tweaks

… using advanced CSS syntax :-)

test-theme/static/css/theme.css

@@ -2,7 +2,10 @@ body {
 	background-color: #003;
 	color: #5bf;
 	margin:auto;
-	max-width: 500px;
+	/*max-width: 500px;
+	 */
+	padding-left: 20px;
+	padding-right: 20px;
 }
 
 a {
@@ -19,20 +22,32 @@ main {
 	border-top: 1px solid;
 	border-right: 1px solid;
 	order: 1;
-	/* Four times wider than <nav>, at least 300px*/
+	/* Four times wider than <nav>, at base-size 300px*/
 	flex: 4 300px;
 }
 
+main > * {
+	margin: auto;
+	max-width: 700px;
+}
+
 nav {
 	order: 2;
 	float: right;
-	flex: 1;
+	flex: 1 75px;
+}
+
+nav > * {
 	padding: 8px;
 	margin: 6px;
 	background-color: rgb(31, 18, 81);
 	border-radius: 12pt;
 }
 
+nav h2 {
+	font-size: 14pt;
+}
+
 #main {
 	display: flex;
 	flex-wrap: wrap;

test-theme/templates/base.html

@@ -43,9 +43,11 @@
 </nav>
 
 <main>
+	<div>
 {% block content %}
 <p>No content here...</p>
 {% endblock content %}
+	</div>
 </main>
 </div> <!-- #main -->
 

test-theme/templates/sidebar.html

@@ -1,5 +1,25 @@
-<p>Here will be menu, and tag list some day.</p>
-<ul>
-	<li>First
-	<li>Second
-</ul>
+<div>
+	<!-- Main navigation -->
+	<!-- TODO! -->
+</div>
+<div>
+	<h2>Categories</h2>
+	<ul>
+	{% for category, _art in categories %}
+	<li><a href="{{ category.url }}">{{ category }}</a></li>
+	{% endfor %}
+	</ul>
+
+	<h2>Tags</h2>
+	<ul>
+	{% for tag, _art in tags %}
+	<li><a href="{{ tag.url }}">{{ tag }}</a></li>
+	{% endfor %}
+	</ul>
+</div>
+<div>
+	<h2>Stalk me also at</h2>
+	TODO!
+
+	<h2>I stalk</h2>
+	TODO!