Make hypha tabs look more like tabs

2025-10-31 15:43:00 +00:00 · 2021-01-20 18:53:30 +05:00
parent 0341fa6440
commit b03576bdb7
12 changed files with 195 additions and 135 deletions
--- a/templates/asset.qtpl.go
+++ b/templates/asset.qtpl.go
@@ -25,10 +25,15 @@ func StreamDefaultCSS(qw422016 *qt422016.Writer) {
 //line templates/asset.qtpl:2
 	qw422016.N().S(`/* Layout stuff */
@media screen and (min-width: 800px) {
-	main {padding:1rem 2rem; margin: 0 auto; width: 800px;}
+	main { padding:1rem 2rem; margin: 0 auto; width: 800px; }
+	.hypha-tabs { padding: 1rem 2rem; margin: 0 auto; width: 800px; }
+	.hypha-tabs__tab:nth-of-type(1) { margin-left: 2rem; }
+	.hypha-tabs__tab { margin-right: 1.5rem; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); border-bottom: 2px #ddd solid; padding: 0 .5rem; }
 }
@media screen and (max-width: 800px) {
-	main {padding: 1rem; margin: 0; width: 100%;}
+	main { padding: 1rem; margin: 0; width: 100%; }
+	.hypha-tabs { padding: 1rem; margin: 0; width: 100%; }
+	.hypha-tabs__tab { box-shadow: none; margin-right: .5rem; padding: .25rem .5rem; }
 }
 *, *::before, *::after {box-sizing: border-box;}
 html { height:100%; padding:0; }
@@ -67,7 +72,7 @@ article pre.codeblock { padding:.5rem; white-space: pre-wrap; border-radius: .25
 .binary-container_with-video video,
 .binary-container_with-audio audio {width: 100%}

-.navi-title { padding-bottom: .5rem; margin-bottom: .25rem; }
+.navi-title { padding-bottom: .5rem; margin: .25rem 0; }
 .navi-title a {text-decoration:none; }
 .navi-title__separator { margin: 0 .25rem; }
 .navi-title__colon { margin-right: .5rem; }
@@ -81,12 +86,14 @@ aside { clear: both; }
 figure { margin: 0; }
 figcaption { padding-bottom: .5rem; }

-nav ul {display:flex; padding-left:0; flex-wrap:wrap; margin-top:0;}
-nav ul li {list-style-type:none;margin-right:1rem;}
-
 #new-name {width:100%;}
-.navlinks b {text-decoration: underline; }
-.navlinks__user {font-style:italic;}
+
+.hypha-tabs { padding: 0; }
+.hypha-tabs__flex { margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
+.hypha-tabs__tab { list-style-type: none; }
+.hypha-tabs__tab a { text-decoration: none; }
+.hypha-tabs__tab_active { font-weight: bold; }
+.hypha-tabs__user { font-style:italic; }

 .rc-entry { display: grid; list-style-type: none; padding: .25rem; grid-template-columns: 1fr 1fr; }
 .rc-entry__time { font-style: italic; }
@@ -121,12 +128,21 @@ article .codeblock,
 .prevnext__el,
 table { background-color: #eee; }

+@media screen and (max-width: 800px) {
+	.hypha-tabs { background-color: white; }
+	.hypha-tabs__tab { box-shadow: none; }
+}
+
 /* Other stuff */
 html { background-color: #ddd; 
 background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23bbbbbb' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 } /* heropatterns.com */

-main { background-color: white; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); }
+main, .hypha-tabs__tab { background-color: white; }
+.hypha-tabs__tab { clip-path: inset(-20px -20px 0 -20px); }
+.hypha-tabs__tab a { color: black; }
+.hypha-tabs__tab_active { border-bottom: 2px white solid; }
+
 blockquote { border-left: 4px black solid; }
 .wikilink_new {color:#a55858;}
 .transclusion code, .transclusion .codeblock {background-color:#ddd;}
@@ -139,13 +155,18 @@ td { border: #ddd 1px solid; }
 /* Dark theme! */
@media (prefers-color-scheme: dark) {
 html { background: #222; color: #ddd; }
-main,  article { background-color: #343434; }
-blockquote { border-left: 4px #ddd solid; }
+main,  article, .hypha-tabs__tab { background-color: #343434; }
+
 a, .wikilink_external { color: #f1fa8c; }
 a:visited, .wikilink_external:visited { color: #ffb86c; }
 .wikilink_new, .wikilink_new:visited { color: #dd4444; }
 .prevnext__el, .prevnext__el:visited { color: #ddd; }

+.hypha-tabs__tab a, .hypha-tabs__tab { color: #ddd; background-color: #232323; border: 0; }
+.hypha-tabs__tab_active { background-color: #343434; }
+
+blockquote { border-left: 4px #ddd solid; }
+
 .transclusion .transclusion__link { color: #ddd; }
 article code, 
 article .codeblock, 
@@ -160,6 +181,9 @@ table { border: 0; background-color: #444444; color: #ddd; }
 .transclusion code,
 .transclusion .codeblock { background-color: #454545; }
 mark { background: rgba(130, 80, 30, 5); color: inherit; }
+@media screen and (max-width: 800px) {
+	.hypha-tabs { background-color: #232323; }
+}
 }

 `)
--- a/templates/common.qtpl
+++ b/templates/common.qtpl
@@ -24,15 +24,21 @@ var navEntries = []navEntry{
 	u := user.FromRequest(rq)
 %}

-	<nav class="navlinks">
-		<ul>
+	<nav class="hypha-tabs">
+		<ul class="hypha-tabs__flex">
 		{%- for _, entry := range navEntries -%}
 		{%- if navType == "revision" && entry.path == "revision" -%}
-			<li><b>{%s revisionHash[0] %}</b></li>
+			<li class="hypha-tabs__tab hypha-tabs__tab_active">
+				{%s revisionHash[0] %}
+			</li>
 		{%- elseif navType == entry.path -%}
-			<li><b>{%s entry.title %}</b></li>
+			<li class="hypha-tabs__tab hypha-tabs__tab_active">
+				{%s entry.title %}
+			</li>
 		{%- elseif entry.path != "revision" && u.CanProceed(entry.path) -%}
-			<li><a href="/{%s entry.path %}/{%s hyphaName %}">{%s entry.title %}</a></li>
+			<li class="hypha-tabs__tab">
+				<a href="/{%s entry.path %}/{%s hyphaName %}">{%s entry.title %}</a>
+			</li>
 		{%- endif -%}
 		{%- endfor -%}
 		{%s= userMenuHTML(u) %}
@@ -42,7 +48,7 @@ var navEntries = []navEntry{

 {% func userMenuHTML(u *user.User) %}
 	{% if user.AuthUsed %}
-			<li class="navlinks__user">
+			<li class="hypha-tabs__tab hypha-tabs__user">
 			{% if u.Group == "anon" %}
 				<a href="/login">Login</a>
 			{% else %}
--- a/templates/common.qtpl.go
+++ b/templates/common.qtpl.go
@@ -55,159 +55,165 @@ func streamnavHTML(qw422016 *qt422016.Writer, rq *http.Request, hyphaName, navTy
 //line templates/common.qtpl:25
 	qw422016.N().S(`

-	<nav class="navlinks">
-		<ul>
+	<nav class="hypha-tabs">
+		<ul class="hypha-tabs__flex">
 `)
 //line templates/common.qtpl:29
 	for _, entry := range navEntries {
 //line templates/common.qtpl:30
 		if navType == "revision" && entry.path == "revision" {
 //line templates/common.qtpl:30
-			qw422016.N().S(`			<li><b>`)
-//line templates/common.qtpl:31
+			qw422016.N().S(`			<li class="hypha-tabs__tab hypha-tabs__tab_active">
+				`)
+//line templates/common.qtpl:32
 			qw422016.E().S(revisionHash[0])
-//line templates/common.qtpl:31
-			qw422016.N().S(`</b></li>
-`)
 //line templates/common.qtpl:32
+			qw422016.N().S(`
+			</li>
+`)
+//line templates/common.qtpl:34
 		} else if navType == entry.path {
-//line templates/common.qtpl:32
-			qw422016.N().S(`			<li><b>`)
-//line templates/common.qtpl:33
-			qw422016.E().S(entry.title)
-//line templates/common.qtpl:33
-			qw422016.N().S(`</b></li>
-`)
 //line templates/common.qtpl:34
-		} else if entry.path != "revision" && u.CanProceed(entry.path) {
-//line templates/common.qtpl:34
-			qw422016.N().S(`			<li><a href="/`)
-//line templates/common.qtpl:35
-			qw422016.E().S(entry.path)
-//line templates/common.qtpl:35
-			qw422016.N().S(`/`)
-//line templates/common.qtpl:35
-			qw422016.E().S(hyphaName)
-//line templates/common.qtpl:35
-			qw422016.N().S(`">`)
-//line templates/common.qtpl:35
-			qw422016.E().S(entry.title)
-//line templates/common.qtpl:35
-			qw422016.N().S(`</a></li>
-`)
+			qw422016.N().S(`			<li class="hypha-tabs__tab hypha-tabs__tab_active">
+				`)
 //line templates/common.qtpl:36
+			qw422016.E().S(entry.title)
+//line templates/common.qtpl:36
+			qw422016.N().S(`
+			</li>
+`)
+//line templates/common.qtpl:38
+		} else if entry.path != "revision" && u.CanProceed(entry.path) {
+//line templates/common.qtpl:38
+			qw422016.N().S(`			<li class="hypha-tabs__tab">
+				<a href="/`)
+//line templates/common.qtpl:40
+			qw422016.E().S(entry.path)
+//line templates/common.qtpl:40
+			qw422016.N().S(`/`)
+//line templates/common.qtpl:40
+			qw422016.E().S(hyphaName)
+//line templates/common.qtpl:40
+			qw422016.N().S(`">`)
+//line templates/common.qtpl:40
+			qw422016.E().S(entry.title)
+//line templates/common.qtpl:40
+			qw422016.N().S(`</a>
+			</li>
+`)
+//line templates/common.qtpl:42
 		}
-//line templates/common.qtpl:37
+//line templates/common.qtpl:43
 	}
-//line templates/common.qtpl:37
+//line templates/common.qtpl:43
 	qw422016.N().S(`		`)
-//line templates/common.qtpl:38
+//line templates/common.qtpl:44
 	qw422016.N().S(userMenuHTML(u))
-//line templates/common.qtpl:38
+//line templates/common.qtpl:44
 	qw422016.N().S(`
 		</ul>
 	</nav>
 `)
-//line templates/common.qtpl:41
+//line templates/common.qtpl:47
 }

-//line templates/common.qtpl:41
+//line templates/common.qtpl:47
 func writenavHTML(qq422016 qtio422016.Writer, rq *http.Request, hyphaName, navType string, revisionHash ...string) {
-//line templates/common.qtpl:41
+//line templates/common.qtpl:47
 	qw422016 := qt422016.AcquireWriter(qq422016)
-//line templates/common.qtpl:41
+//line templates/common.qtpl:47
 	streamnavHTML(qw422016, rq, hyphaName, navType, revisionHash...)
-//line templates/common.qtpl:41
+//line templates/common.qtpl:47
 	qt422016.ReleaseWriter(qw422016)
-//line templates/common.qtpl:41
+//line templates/common.qtpl:47
 }

-//line templates/common.qtpl:41
+//line templates/common.qtpl:47
 func navHTML(rq *http.Request, hyphaName, navType string, revisionHash ...string) string {
-//line templates/common.qtpl:41
+//line templates/common.qtpl:47
 	qb422016 := qt422016.AcquireByteBuffer()
-//line templates/common.qtpl:41
+//line templates/common.qtpl:47
 	writenavHTML(qb422016, rq, hyphaName, navType, revisionHash...)
-//line templates/common.qtpl:41
+//line templates/common.qtpl:47
 	qs422016 := string(qb422016.B)
-//line templates/common.qtpl:41
+//line templates/common.qtpl:47
 	qt422016.ReleaseByteBuffer(qb422016)
-//line templates/common.qtpl:41
+//line templates/common.qtpl:47
 	return qs422016
-//line templates/common.qtpl:41
+//line templates/common.qtpl:47
 }

-//line templates/common.qtpl:43
+//line templates/common.qtpl:49
 func streamuserMenuHTML(qw422016 *qt422016.Writer, u *user.User) {
-//line templates/common.qtpl:43
+//line templates/common.qtpl:49
 	qw422016.N().S(`
 	`)
-//line templates/common.qtpl:44
+//line templates/common.qtpl:50
 	if user.AuthUsed {
-//line templates/common.qtpl:44
+//line templates/common.qtpl:50
 		qw422016.N().S(`
-			<li class="navlinks__user">
+			<li class="hypha-tabs__tab hypha-tabs__user">
 			`)
-//line templates/common.qtpl:46
+//line templates/common.qtpl:52
 		if u.Group == "anon" {
-//line templates/common.qtpl:46
+//line templates/common.qtpl:52
 			qw422016.N().S(`
 				<a href="/login">Login</a>
 			`)
-//line templates/common.qtpl:48
+//line templates/common.qtpl:54
 		} else {
-//line templates/common.qtpl:48
+//line templates/common.qtpl:54
 			qw422016.N().S(`
 				<a href="/page/`)
-//line templates/common.qtpl:49
+//line templates/common.qtpl:55
 			qw422016.E().S(util.UserTree)
-//line templates/common.qtpl:49
+//line templates/common.qtpl:55
 			qw422016.N().S(`/`)
-//line templates/common.qtpl:49
+//line templates/common.qtpl:55
 			qw422016.E().S(u.Name)
-//line templates/common.qtpl:49
+//line templates/common.qtpl:55
 			qw422016.N().S(`">`)
-//line templates/common.qtpl:49
+//line templates/common.qtpl:55
 			qw422016.E().S(u.Name)
-//line templates/common.qtpl:49
+//line templates/common.qtpl:55
 			qw422016.N().S(`</a>
 			`)
-//line templates/common.qtpl:50
+//line templates/common.qtpl:56
 		}
-//line templates/common.qtpl:50
+//line templates/common.qtpl:56
 		qw422016.N().S(`
 			</li>
 	`)
-//line templates/common.qtpl:52
+//line templates/common.qtpl:58
 	}
-//line templates/common.qtpl:52
+//line templates/common.qtpl:58
 	qw422016.N().S(`
 `)
-//line templates/common.qtpl:53
+//line templates/common.qtpl:59
 }

-//line templates/common.qtpl:53
+//line templates/common.qtpl:59
 func writeuserMenuHTML(qq422016 qtio422016.Writer, u *user.User) {
-//line templates/common.qtpl:53
+//line templates/common.qtpl:59
 	qw422016 := qt422016.AcquireWriter(qq422016)
-//line templates/common.qtpl:53
+//line templates/common.qtpl:59
 	streamuserMenuHTML(qw422016, u)
-//line templates/common.qtpl:53
+//line templates/common.qtpl:59
 	qt422016.ReleaseWriter(qw422016)
-//line templates/common.qtpl:53
+//line templates/common.qtpl:59
 }

-//line templates/common.qtpl:53
+//line templates/common.qtpl:59
 func userMenuHTML(u *user.User) string {
-//line templates/common.qtpl:53
+//line templates/common.qtpl:59
 	qb422016 := qt422016.AcquireByteBuffer()
-//line templates/common.qtpl:53
+//line templates/common.qtpl:59
 	writeuserMenuHTML(qb422016, u)
-//line templates/common.qtpl:53
+//line templates/common.qtpl:59
 	qs422016 := string(qb422016.B)
-//line templates/common.qtpl:53
+//line templates/common.qtpl:59
 	qt422016.ReleaseByteBuffer(qb422016)
-//line templates/common.qtpl:53
+//line templates/common.qtpl:59
 	return qs422016
-//line templates/common.qtpl:53
+//line templates/common.qtpl:59
 }
--- a/templates/default.css
+++ b/templates/default.css
@@ -1,9 +1,14 @@
 /* Layout stuff */
@media screen and (min-width: 800px) {
-	main {padding:1rem 2rem; margin: 0 auto; width: 800px;}
+	main { padding:1rem 2rem; margin: 0 auto; width: 800px; }
+	.hypha-tabs { padding: 1rem 2rem; margin: 0 auto; width: 800px; }
+	.hypha-tabs__tab:nth-of-type(1) { margin-left: 2rem; }
+	.hypha-tabs__tab { margin-right: 1.5rem; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); border-bottom: 2px #ddd solid; padding: 0 .5rem; }
 }
@media screen and (max-width: 800px) {
-	main {padding: 1rem; margin: 0; width: 100%;}
+	main { padding: 1rem; margin: 0; width: 100%; }
+	.hypha-tabs { padding: 1rem; margin: 0; width: 100%; }
+	.hypha-tabs__tab { box-shadow: none; margin-right: .5rem; padding: .25rem .5rem; }
 }
 *, *::before, *::after {box-sizing: border-box;}
 html { height:100%; padding:0; }
@@ -42,7 +47,7 @@ article pre.codeblock { padding:.5rem; white-space: pre-wrap; border-radius: .25
 .binary-container_with-video video,
 .binary-container_with-audio audio {width: 100%}

-.navi-title { padding-bottom: .5rem; margin-bottom: .25rem; }
+.navi-title { padding-bottom: .5rem; margin: .25rem 0; }
 .navi-title a {text-decoration:none; }
 .navi-title__separator { margin: 0 .25rem; }
 .navi-title__colon { margin-right: .5rem; }
@@ -56,12 +61,14 @@ aside { clear: both; }
 figure { margin: 0; }
 figcaption { padding-bottom: .5rem; }

-nav ul {display:flex; padding-left:0; flex-wrap:wrap; margin-top:0;}
-nav ul li {list-style-type:none;margin-right:1rem;}
-
 #new-name {width:100%;}
-.navlinks b {text-decoration: underline; }
-.navlinks__user {font-style:italic;}
+
+.hypha-tabs { padding: 0; }
+.hypha-tabs__flex { margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
+.hypha-tabs__tab { list-style-type: none; }
+.hypha-tabs__tab a { text-decoration: none; }
+.hypha-tabs__tab_active { font-weight: bold; }
+.hypha-tabs__user { font-style:italic; }

 .rc-entry { display: grid; list-style-type: none; padding: .25rem; grid-template-columns: 1fr 1fr; }
 .rc-entry__time { font-style: italic; }
@@ -96,12 +103,21 @@ article .codeblock,
 .prevnext__el,
 table { background-color: #eee; }

+@media screen and (max-width: 800px) {
+	.hypha-tabs { background-color: white; }
+	.hypha-tabs__tab { box-shadow: none; }
+}
+
 /* Other stuff */
 html { background-color: #ddd; 
 background-image: url("data:image/svg+xml,%3Csvg width='42' height='44' viewBox='0 0 42 44' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='Page-1' fill='none' fill-rule='evenodd'%3E%3Cg id='brick-wall' fill='%23bbbbbb' fill-opacity='0.4'%3E%3Cpath d='M0 0h42v44H0V0zm1 1h40v20H1V1zM0 23h20v20H0V23zm22 0h20v20H22V23z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
 } /* heropatterns.com */

-main { background-color: white; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.2); }
+main, .hypha-tabs__tab { background-color: white; }
+.hypha-tabs__tab { clip-path: inset(-20px -20px 0 -20px); }
+.hypha-tabs__tab a { color: black; }
+.hypha-tabs__tab_active { border-bottom: 2px white solid; }
+
 blockquote { border-left: 4px black solid; }
 .wikilink_new {color:#a55858;}
 .transclusion code, .transclusion .codeblock {background-color:#ddd;}
@@ -114,13 +130,18 @@ td { border: #ddd 1px solid; }
 /* Dark theme! */
@media (prefers-color-scheme: dark) {
 html { background: #222; color: #ddd; }
-main,  article { background-color: #343434; }
-blockquote { border-left: 4px #ddd solid; }
+main,  article, .hypha-tabs__tab { background-color: #343434; }
+
 a, .wikilink_external { color: #f1fa8c; }
 a:visited, .wikilink_external:visited { color: #ffb86c; }
 .wikilink_new, .wikilink_new:visited { color: #dd4444; }
 .prevnext__el, .prevnext__el:visited { color: #ddd; }

+.hypha-tabs__tab a, .hypha-tabs__tab { color: #ddd; background-color: #232323; border: 0; }
+.hypha-tabs__tab_active { background-color: #343434; }
+
+blockquote { border-left: 4px #ddd solid; }
+
 .transclusion .transclusion__link { color: #ddd; }
 article code, 
 article .codeblock, 
@@ -135,5 +156,8 @@ table { border: 0; background-color: #444444; color: #ddd; }
 .transclusion code,
 .transclusion .codeblock { background-color: #454545; }
 mark { background: rgba(130, 80, 30, 5); color: inherit; }
+@media screen and (max-width: 800px) {
+	.hypha-tabs { background-color: #232323; }
+}
 }

--- a/templates/delete.qtpl
+++ b/templates/delete.qtpl
@@ -2,8 +2,8 @@

 This dialog is to be shown to a user when they try to delete a hypha.
 {% func DeleteAskHTML(rq *http.Request, hyphaName string, isOld bool) %}
-<main>
 {%= navHTML(rq, hyphaName, "delete-ask") %}
+<main>
 {% if isOld %}
 	<section>
 		<h1>Delete {%s hyphaName %}?</h1>
--- a/templates/delete.qtpl.go
+++ b/templates/delete.qtpl.go
@@ -26,12 +26,12 @@ var (
 func StreamDeleteAskHTML(qw422016 *qt422016.Writer, rq *http.Request, hyphaName string, isOld bool) {
 //line templates/delete.qtpl:4
 	qw422016.N().S(`
-<main>
 `)
-//line templates/delete.qtpl:6
+//line templates/delete.qtpl:5
 	streamnavHTML(qw422016, rq, hyphaName, "delete-ask")
-//line templates/delete.qtpl:6
+//line templates/delete.qtpl:5
 	qw422016.N().S(`
+<main>
 `)
 //line templates/delete.qtpl:7
 	if isOld {
--- a/templates/http_mutators.qtpl
+++ b/templates/http_mutators.qtpl
@@ -1,8 +1,8 @@
 {% import "net/http" %}

 {% func EditHTML(rq *http.Request, hyphaName, textAreaFill, warning string) %}
-<main class="edit edit_no-preview">
 {%s= navHTML(rq, hyphaName, "edit") %}
+<main class="edit edit_no-preview">
 	<h1>Edit {%s hyphaName %}</h1>
 	{%s= warning %}
 	<form method="post" class="edit-form"
@@ -17,8 +17,8 @@
 {% endfunc %}

 {% func PreviewHTML(rq *http.Request, hyphaName, textAreaFill, warning string, renderedPage string) %}
-<main class="edit edit_with-preview">
 {%s= navHTML(rq, hyphaName, "edit") %}
+<main class="edit edit_with-preview">
 	<h1>Edit {%s hyphaName %} (preview)</h1>
 	{%s= warning %}
 	<form method="post" class="edit-form"
--- a/templates/http_mutators.qtpl.go
+++ b/templates/http_mutators.qtpl.go
@@ -24,12 +24,12 @@ var (
 func StreamEditHTML(qw422016 *qt422016.Writer, rq *http.Request, hyphaName, textAreaFill, warning string) {
 //line templates/http_mutators.qtpl:3
 	qw422016.N().S(`
-<main class="edit edit_no-preview">
 `)
-//line templates/http_mutators.qtpl:5
+//line templates/http_mutators.qtpl:4
 	qw422016.N().S(navHTML(rq, hyphaName, "edit"))
-//line templates/http_mutators.qtpl:5
+//line templates/http_mutators.qtpl:4
 	qw422016.N().S(`
+<main class="edit edit_no-preview">
 	<h1>Edit `)
 //line templates/http_mutators.qtpl:6
 	qw422016.E().S(hyphaName)
@@ -95,12 +95,12 @@ func EditHTML(rq *http.Request, hyphaName, textAreaFill, warning string) string
 func StreamPreviewHTML(qw422016 *qt422016.Writer, rq *http.Request, hyphaName, textAreaFill, warning string, renderedPage string) {
 //line templates/http_mutators.qtpl:19
 	qw422016.N().S(`
-<main class="edit edit_with-preview">
 `)
-//line templates/http_mutators.qtpl:21
+//line templates/http_mutators.qtpl:20
 	qw422016.N().S(navHTML(rq, hyphaName, "edit"))
-//line templates/http_mutators.qtpl:21
+//line templates/http_mutators.qtpl:20
 	qw422016.N().S(`
+<main class="edit edit_with-preview">
 	<h1>Edit `)
 //line templates/http_mutators.qtpl:22
 	qw422016.E().S(hyphaName)
--- a/templates/http_readers.qtpl
+++ b/templates/http_readers.qtpl
@@ -3,8 +3,8 @@
 {% import "github.com/bouncepaw/mycorrhiza/user" %}

 {% func HistoryHTML(rq *http.Request, hyphaName, list string) %}
-<main>
 {%= navHTML(rq, hyphaName, "history") %}
+<main>
 	<article class="history">
 		<h1>History of {%s hyphaName %}</h1>
 		{%s= list %}
@@ -13,8 +13,8 @@
 {% endfunc %}

 {% func RevisionHTML(rq *http.Request, hyphaName, naviTitle, contents, tree, revHash string) %}
-<main>
 {%= navHTML(rq, hyphaName, "revision", revHash) %}
+<main>
 	<article>
 		<p>Please note that viewing binary parts of hyphae is not supported in history for now.</p>
 		{%s= naviTitle %}
@@ -29,8 +29,8 @@

 If `contents` == "", a helpful message is shown instead.
 {% func PageHTML(rq *http.Request, hyphaName, naviTitle, contents, tree, prevHyphaName, nextHyphaName string, hasAmnt bool) %}
-<main>
 {%= navHTML(rq, hyphaName, "page") %}
+<main>
 	<article>
 		{%s= naviTitle %}
 		{% if contents == "" %}
--- a/templates/http_readers.qtpl.go
+++ b/templates/http_readers.qtpl.go
@@ -30,12 +30,12 @@ var (
 func StreamHistoryHTML(qw422016 *qt422016.Writer, rq *http.Request, hyphaName, list string) {
 //line templates/http_readers.qtpl:5
 	qw422016.N().S(`
-<main>
 `)
-//line templates/http_readers.qtpl:7
+//line templates/http_readers.qtpl:6
 	streamnavHTML(qw422016, rq, hyphaName, "history")
-//line templates/http_readers.qtpl:7
+//line templates/http_readers.qtpl:6
 	qw422016.N().S(`
+<main>
 	<article class="history">
 		<h1>History of `)
 //line templates/http_readers.qtpl:9
@@ -83,12 +83,12 @@ func HistoryHTML(rq *http.Request, hyphaName, list string) string {
 func StreamRevisionHTML(qw422016 *qt422016.Writer, rq *http.Request, hyphaName, naviTitle, contents, tree, revHash string) {
 //line templates/http_readers.qtpl:15
 	qw422016.N().S(`
-<main>
 `)
-//line templates/http_readers.qtpl:17
+//line templates/http_readers.qtpl:16
 	streamnavHTML(qw422016, rq, hyphaName, "revision", revHash)
-//line templates/http_readers.qtpl:17
+//line templates/http_readers.qtpl:16
 	qw422016.N().S(`
+<main>
 	<article>
 		<p>Please note that viewing binary parts of hyphae is not supported in history for now.</p>
 		`)
@@ -147,12 +147,12 @@ func RevisionHTML(rq *http.Request, hyphaName, naviTitle, contents, tree, revHas
 func StreamPageHTML(qw422016 *qt422016.Writer, rq *http.Request, hyphaName, naviTitle, contents, tree, prevHyphaName, nextHyphaName string, hasAmnt bool) {
 //line templates/http_readers.qtpl:31
 	qw422016.N().S(`
-<main>
 `)
-//line templates/http_readers.qtpl:33
+//line templates/http_readers.qtpl:32
 	streamnavHTML(qw422016, rq, hyphaName, "page")
-//line templates/http_readers.qtpl:33
+//line templates/http_readers.qtpl:32
 	qw422016.N().S(`
+<main>
 	<article>
 		`)
 //line templates/http_readers.qtpl:35
--- a/templates/rename.qtpl
+++ b/templates/rename.qtpl
@@ -1,8 +1,8 @@
 {% import "net/http" %}
 This dialog is to be shown to a user when they try to rename a hypha.
 {% func RenameAskHTML(rq *http.Request, hyphaName string, isOld bool) %}
-<main>
 {%= navHTML(rq, hyphaName, "rename-ask") %}
+<main>
 {%- if isOld -%}
 	<section>
 		<h1>Rename {%s hyphaName %}</h1>
--- a/templates/rename.qtpl.go
+++ b/templates/rename.qtpl.go
@@ -26,12 +26,12 @@ var (
 func StreamRenameAskHTML(qw422016 *qt422016.Writer, rq *http.Request, hyphaName string, isOld bool) {
 //line templates/rename.qtpl:3
 	qw422016.N().S(`
-<main>
 `)
-//line templates/rename.qtpl:5
+//line templates/rename.qtpl:4
 	streamnavHTML(qw422016, rq, hyphaName, "rename-ask")
-//line templates/rename.qtpl:5
+//line templates/rename.qtpl:4
 	qw422016.N().S(`
+<main>
 `)
 //line templates/rename.qtpl:6
 	if isOld {