Fix main viewport

theme/static/css/main.css

@@ -3,8 +3,13 @@ html, body {
 	margin: 0;
 	padding: 0;
 	border: 0;
+}
+html {
 	height: 100%;
 }
+body {
+	min-height: 100%;
+}
 
 body {
 	display: grid;
@@ -19,13 +24,14 @@ body > * {
 	overflow: hidden;
 }
 .main2 {
-	height: calc(100%);
+	height: 100%;
+	min-height: 100%;
 	margin: -1em;
 }
 .main3 {
 	padding: 1em 0;
 	margin: 0 1em;
-	height: calc(100%);
+	min-height: 100%;
 }
 
 /* header */
@@ -44,13 +50,14 @@ header nav li {
 }
 header nav > ul {
 	padding-top: 0.25em;
+	margin-left: -0.5em;
 }
 header nav > ul > li {
 	float: left;
 	margin-left: 0.5em;
 }
-header nav > ul > li:first-child {
-	margin-left: 0;
+header nav > ul > li.page {
+	float: right;
 }
 header nav > ul > li > div {
 	margin-bottom: 0.25em;

theme/templates/base.html

@@ -37,19 +37,21 @@
 			<h1><a href="{{ SITEURL }}/">{{ SITENAME }} <strong>{{ SITESUBTITLE }}</strong></a></h1>
 			<nav>
 				<ul>
-					{% for title, link in MENUITEMS %}
+					{% for title, link in (MENUITEMS if MENUITEMS else [])[::-1] %}
 						<li>
-							<a href="{{ link }}">{{ title }}</a>
+							<div>
+								<a href="{{ link }}">{{ title }}</a>
+							</div>
 						</li>
 					{% endfor %}
 					{% if DISPLAY_PAGES_ON_MENU %}
 						{% for p in pages %}
-							<li{% if p == page %} class="active"{% endif %}>
+							<li class="page {% if p == page %} active{% endif %}">
 								<div>
 									<a href="{{ SITEURL }}/{{ p.url }}">{{ p.title }}</a>
 								</div>
 							</li>{% endfor %}{% endif %}{% if DISPLAY_CATEGORIES_ON_MENU %}{% for cat, null in categories %}
-							<li{% if cat == category %} class="active"{% endif %}>
+							<li class="category {% if cat == category %} active{% endif %}">
 								<div>
 									<a href="{{ SITEURL }}/{{ cat.url }}">{{ cat }}</a>
 								</div>