mostly styling..

public/global.css

@@ -55,14 +55,6 @@ button:disabled {
 button:disabled:hover {
   cursor: default;
 }
-.button {
-  color: #333;
-  background-color: #f4f4f4;
-  border: 1px solid lightgrey;
-  padding: 0.2em 0.4em;
-  grid-column: 2/3;
-  margin-right: 0.2rem;
-}
 
 button:not(:disabled):active {
   background-color: #ddd;
@@ -72,11 +64,20 @@ button:focus {
   border-color: #666;
 }
 
-button:hover {
+button:hover, .newtierbutton:hover {
   cursor: pointer;
 }
 /* custom part */
 
+.newtierbutton {
+  color: #000;
+  background-color: #dddddd;
+  padding: 0.2em 0.4em;
+  grid-column: 2/3;
+  margin-right: 0.2rem;
+}
+
+
 .formgrid {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -175,16 +176,18 @@ select {
   margin-bottom: 0.3rem;
   text-transform: capitalize;
   display: block;
-  background: #00000008;
   text-align: right;
   font-size: smaller;
+  padding-top: 0.2rem;
 }
 
 .fmMeta {
   border-bottom: 2px #0000001a solid;
+  border-right: 1px #0000001a solid;
   padding-bottom: 1rem;
   margin-bottom: 0.5rem;
   background: #ffffff1c;
+  padding-right: 0.2rem;
 }
 
 .fmItem {
@@ -194,11 +197,15 @@ select {
 }
 
 .fmCollapse, .fmExpand {
-  padding-top: 0.5rem;
+  padding-top: 0.2rem;
   margin-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
 
+.fmExpand:hover, .fmCollapse:hover {
+  cursor: pointer;
+}
+
 .fmCollapse::before {
   margin-right: 0.3rem;
   content: "⇲"; 
@@ -212,12 +219,27 @@ select {
 #fmicon, #frontmatter, input.hasinput {
   background-color: #ffccbc;
   padding-right: 0.3rem;
+  padding-left: 0.3rem;
+  padding-bottom: 0.3rem;
 }
 
 .newtiers {
   display: none;
 }
 
-.news {
+#newtierstitle {
-  grid-column: 2/3;
+  margin-right: 0.4rem;
+  display: block;
+}
+
+.newtiersbar {
+  padding-bottom: 0.4rem;
+  padding-top: 0.4rem;
+  margin-left: auto;
+  display: flex;
+  border-bottom: 2px #0000001a solid;
+  border-right: 1px #0000001a solid;
+  justify-content: flex-end;
+  align-items: center;
+  background: #00000008;
 }

src/App.svelte

@@ -188,10 +188,18 @@
       document.querySelectorAll(".newtiers").forEach((button) => {
         button.style.display = "none";
       });
+      let newtierstitle = document.getElementById("newtierstitle")
+      if (newtierstitle) {
+        newtierstitle.style.display = "none";
+      }
     } else {
       document.querySelectorAll(".newtiers").forEach((button) => {
         button.style.display = "block";
       });
+      let newtierstitle = document.getElementById("newtierstitle")
+      if (newtierstitle) {
+        newtierstitle.style.display = "block";
+      }
     }
 
     const ct = Object.entries(frontmatter).filter((i) => i[1].length == 0 && i[0] == "triad")[0];
@@ -280,16 +288,17 @@
           {/if}
         {/each}
       {/each}
-      <div class="buttons news">
+      <div class="newtiersbar">
-        <div id="newtriad" class="newtiers button" on:click={() => newTier("triad", "_new", null)}>
+        <div id="newtierstitle">Add new:</div>
-          NEW TIER
+        <div id="newtriad" class="newtiers newtierbutton" on:click={() => newTier("triad", "_new", null)}>
+          TRIAD TIER
         </div>
         <div
           id="newascription"
-          class="newtiers button"
+          class="newtiers newtierbutton"
           on:click={() => newTier("ascription", "_new", null)}
         >
-          NEW ASCRIPTION
+          ASCRIPTION
         </div>
       </div>
     </span>