start reworking the menu style a little

5 years ago · 33b2080d38
parent da7cca5351
commit 33b2080d38
2 changed files with 30 additions and 17 deletions
--- a/views/header.html
+++ b/views/header.html
@ -15,22 +15,26 @@
 </head>
 <body>
 <header>
-<span><a id="homelink" href="/">home</a></span>
 {{ if .UserInfo }}
-<span><a id="atmelink" href="/atme">@me</a></span>
-<span><a href="/{{ .UserSep }}/{{ .UserInfo.Username }}">{{ .UserInfo.Username }}</a></span>
-<span><a href="/honkers">honkers</a></span>
-<span><a href="/c">combos</a></span>
 <details>
-<summary>more</summary>
-<span><a href="/about">about</a></span>
-<span><a href="/front">front</a></span>
-<span><a href="/xzone">xzone</a></span>
-<span><a href="/zonkzone">zonkzone</a></span>
-<span><a href="/funzone">funzone</a></span>
-<span><a href="/account">account</a></span>
+<summary>menu</summary>
+<p>
+<ul>
+<li><a href="/{{ .UserSep }}/{{ .UserInfo.Username }}">{{ .UserInfo.Username }}</a></span>
+<li><a href="/honkers">honkers</a></span>
+<li><a href="/c">combos</a></span>
+<li><a href="/about">about</a></span>
+<li><a href="/front">front</a></span>
+<li><a href="/xzone">xzone</a></span>
+<li><a href="/zonkzone">zonkzone</a></span>
+<li><a href="/funzone">funzone</a></span>
+<li><a href="/account">account</a></span>
 </details>
+<p>
+<span><a id="homelink" href="/">home</a></span>
+<span><a id="atmelink" href="/atme">@me</a></span>
 {{ else }}
+<span><a id="homelink" href="/">home</a></span>
 <span><a href="/about">about</a></span>
 {{ if .ShowRSS }}
 <span><a href="/rss">rss</a></span>
--- a/views/style.css
+++ b/views/style.css
@ -45,16 +45,26 @@ body > header {
 	max-width: 1200px;
 	margin: 1em auto;
 	font-size: 1.5em;
-	text-align: right;
+}
+body > header p {
+	margin-left: 4em;
 }
 body > header span {
-	margin-right: 2em;
+	margin-left: 2em;
 }
 header details {
+	background: $bg-page;
+	padding: 1em;
+	position: fixed;
+	top: 0;
 	display: inline;
 }
-header details[open] summary {
-	display: none;
+header details[open] {
+	background: $bg-dark;
+	border: 1px solid $fg;
+}
+header details li {
+	margin: 1em;
 }
 main {
 	max-width: 1200px;
@ -114,7 +124,6 @@ input[type=file] {
 }

 .honk {
-	width: 90%;
 	margin: auto;
 	background: $bg-dark;
 	border: 1px solid $fg;