Move actions into floatin action button

assets/page.html

@@ -1,21 +1,5 @@
 {{define "headScripts"}}<script src="/_/page-actions.js"></script>{{end}}
 
-{{define "headerActions"}}
-{{if .CanEdit}}
-<div class="dropdown">
-    <button class="btn" data-action="actions-drop" title="Actions">ACTIONS ▾</button>
-    <div class="dropdown-menu align-right">
-        <button class="btn dropdown-item" onclick="newPage()" title="New page (N)">NEW</button>
-        <a class="btn dropdown-item" href="?edit" title="Edit page (E)">EDIT</a>
-        {{if not .IsRoot}}
-        <button class="btn dropdown-item" onclick="movePage()" title="Move page (M)">MOVE</button>
-        <button class="btn dropdown-item danger" onclick="deletePage()" title="Delete page">DELETE</button>
-        {{end}}
-    </div>
-</div>
-{{end}}
-{{end}}
-
 {{define "content"}}
 {{if .Content}}
 <div class="content">{{.Content}}</div>
@@ -49,4 +33,19 @@
 {{end}}
 {{end}}
 
-{{define "extras"}}{{if .SidebarWidget}}{{.SidebarWidget}}{{end}}{{end}}
+{{define "extras"}}
+{{if .SidebarWidget}}{{.SidebarWidget}}{{end}}
+{{if .CanEdit}}
+<div class="fab dropdown">
+    <button class="btn btn-fab" data-action="actions-drop" title="Actions" aria-label="Actions">≡</button>
+    <div class="dropdown-menu align-right open-up">
+        <button class="btn dropdown-item" onclick="newPage()" title="New page (N)">NEW</button>
+        <a class="btn dropdown-item" href="?edit" title="Edit page (E)">EDIT</a>
+        {{if not .IsRoot}}
+        <button class="btn dropdown-item" onclick="movePage()" title="Move page (M)">MOVE</button>
+        <button class="btn dropdown-item danger" onclick="deletePage()" title="Delete page">DELETE</button>
+        {{end}}
+    </div>
+</div>
+{{end}}
+{{end}}

assets/style.css

@@ -323,10 +323,44 @@ main {
     right: 0;
 }
 
+.dropdown-menu.open-up {
+    top: auto;
+    bottom: 100%;
+    margin-bottom: 0.4rem;
+}
+
 .dropdown-menu.is-open {
     display: block;
 }
 
+/* === Floating action button === */
+.fab {
+    position: fixed;
+    bottom: 1rem;
+    right: 1rem;
+    z-index: 50;
+}
+
+.btn-fab {
+    background: var(--bg-panel);
+    border: 1px solid var(--secondary);
+    width: 3rem;
+    height: 3rem;
+    font-size: 1.5rem;
+    line-height: 1;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+.btn-fab::before,
+.btn-fab::after {
+    content: none;
+}
+.btn-fab:hover {
+    background: var(--bg-panel-hover);
+    color: var(--primary-hover);
+}
+
 .dropdown-item {
     display: block;
     width: 100%;
@@ -459,7 +493,7 @@ hr {
     top: 1rem;
     right: 1rem;
     width: 14rem;
-    max-height: calc(100vh - 2rem);
+    max-height: calc(100vh - 6rem);
     overflow-y: auto;
     border: 1px solid var(--secondary);
     background: var(--bg);