Update Styling?

assets/page.html

@@ -20,8 +20,8 @@
             <form class="edit-form" method="POST" action="{{.PostURL}}">
                 <textarea name="content" autofocus>{{.RawContent}}</textarea>
                 <div class="form-actions">
-                    <button class="btn-save" type="submit">Save</button>
-                    <a class="btn-cancel" href="{{.PostURL}}">Cancel</a>
+                    <a class="btn-cancel" href="{{.PostURL}}">CANCEL</a>
+                    <button class="btn-save" type="submit">SAVE</button>
                 </div>
             </form>
             {{else}} {{if .Content}}
@@ -38,9 +38,7 @@
                 {{end}}
             </div>
             {{else if not .Content}}
-            <p class="empty">
-                Empty folder — <a href="?edit">create index.md</a>
-            </p>
+            <p class="empty">Empty folder — <a href="?edit">[CREATE]</a></p>
             {{end}} {{end}}
         </main>
     </body>

assets/style.css

@@ -47,12 +47,13 @@ body::after {
 
 /* === Links === */
 a {
-    color: white;
+    color: #ffb300;
+    text-shadow: 0 0 5px #b37800;
     text-decoration: none;
 }
 a:hover {
-    color: #0f0;
-    text-shadow: 0 0 8px #0f0;
+    color: #ffd54f;
+    text-shadow: 0 0 8px #ffb300;
 }
 
 /* === Header === */
@@ -80,7 +81,7 @@ header {
 .edit-btn {
     background: none;
     border: none;
-    color: white;
+    color: #ffb300;
     font: inherit;
     cursor: pointer;
     padding: 0;
@@ -94,8 +95,8 @@ header {
     content: "]";
 }
 .edit-btn:hover {
-    color: #0f0;
-    text-shadow: 0 0 8px #0f0;
+    color: #ffd54f;
+    text-shadow: 0 0 8px #ffb300;
 }
 
 /* === Main === */
@@ -223,7 +224,7 @@ main {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    color: white;
+    color: #ffb300;
 }
 .listing-item .meta {
     color: #888;
@@ -261,12 +262,13 @@ textarea:focus {
 .form-actions {
     display: flex;
     gap: 0.75rem;
+    justify-content: flex-end;
 }
 
 .btn-save {
     background: none;
     border: none;
-    color: white;
+    color: #ffb300;
     font: inherit;
     cursor: pointer;
     padding: 0;
@@ -278,14 +280,14 @@ textarea:focus {
     content: "]";
 }
 .btn-save:hover {
-    color: #0f0;
-    text-shadow: 0 0 8px #0f0;
+    color: #ffd54f;
+    text-shadow: 0 0 8px #ffb300;
 }
 
 .btn-cancel {
     background: none;
     border: none;
-    color: #888;
+    color: #ffb300;
     font: inherit;
     cursor: pointer;
     padding: 0;
@@ -299,14 +301,12 @@ textarea:focus {
     content: "]";
 }
 .btn-cancel:hover {
-    color: white;
-    text-shadow: none;
+    color: #ffb300;
+    text-shadow: 0 0 8px #b37800;
 }
 
 /* === Empty state === */
 .empty {
-    color: #666;
-    font-style: italic;
     padding: 1rem;
     text-align: center;
 }