From 447d1521d88b979187217990eae4dd658338691b Mon Sep 17 00:00:00 2001
From: Helen Chong <119173961+helenclx@users.noreply.github.com>
Date: Wed, 15 May 2024 01:40:53 +0800
Subject: [PATCH] Add more styling to the guestbook

---
 _site/feed.xml             |  2 +-
 _site/guestbook/index.html | 53 +++++++++++++++++++++++++++++---------
 src/pages/guestbook.njk    | 53 +++++++++++++++++++++++++++++---------
 3 files changed, 83 insertions(+), 25 deletions(-)

diff --git a/_site/feed.xml b/_site/feed.xml
index 0812e12b..43b15c09 100644
--- a/_site/feed.xml
+++ b/_site/feed.xml
@@ -4,7 +4,7 @@
     <subtitle>Leilukin&#39;s personal website.</subtitle>
     <link href="https://leilukin.neocities.org/feed.xml" rel="self"/>
     <link href="https://leilukin.neocities.org"/>
-    <updated>2024-05-14T16:58:09Z</updated>
+    <updated>2024-05-14T17:38:17Z</updated>
     <id>https://leilukin.neocities.org</id>
     <author>
         <name>Leilukin</name>
diff --git a/_site/guestbook/index.html b/_site/guestbook/index.html
index 35a35d21..d3bdd775 100644
--- a/_site/guestbook/index.html
+++ b/_site/guestbook/index.html
@@ -387,7 +387,7 @@
         comments_header: 'Guestbook',
         name_label: 'Name',
         content_label: 'Enter your message here',
-        submit: 'Send',
+        submit: 'Send Message',
         logout_link: '<img title="log out" src="https://www.htmlcommentbox.com/static/images/door_out.svg" alt="[logout]" class="hcb-icon hcb-door-out"/>',
         admin_link: '<img src="https://www.htmlcommentbox.com/static/images/door_in.svg" alt="[login]" class="hcb-icon hcb-door-in"/>',
         no_comments_msg: 'No one has left any message yet. Be the first!',
@@ -466,29 +466,58 @@
 </script>
 
 <style>
-    #HCB_comment_box form {
-        display: grid;
-        gap: 0.3em;
-        margin: 1.3rem 0;
-    }
-
-    #HCB_comment_box #hcb_form textarea, #HCB_comment_box #hcb_form #hcb_form_name {
-        font-family: inherit;
-        font-size: 1.2rem;
-    }
-
     #HCB_comment_box {
         height: auto;
         font-family: inherit;
         font-size: 1.2rem;
     }
 
+    #HCB_comment_box form {
+        display: grid;
+        gap: 0.3em;
+        margin: 1rem 0 1.3rem;
+    }
+
+    #HCB_comment_box #hcb_form textarea,
+    #HCB_comment_box #hcb_form #hcb_form_name {
+        width: 100%;
+        font-family: inherit;
+        font-size: 1.2rem;
+    }
+
+    #HCB_comment_box #hcb_form #replying_to_container,
+    #HCB_comment_box .date {
+        font-size: 0.9rem;
+        color: var(--clr-body-txt);
+    }
+
+    #HCB_comment_box #hcb_form textarea:focus,
+    #HCB_comment_box #hcb_form #hcb_form_name:focus {
+        outline: 0.25em solid var(--clr-link);
+    }
+
     #HCB_comment_box #hcb_form .btn,
     #HCB_comment_box #HCB_comment_form_box .btn {
         background: var(--clr-link-btn-bg);
         color: var(--clr-link-btn-txt);
         font-size: 1.2rem;
     }
+
+    #HCB_comment_box #hcb_form .btn:focus,
+    #HCB_comment_box #HCB_comment_form_box .btn:focus {
+        outline: 0.15em solid var(--clr-link-btn-txt);
+    }
+
+    #HCB_comment_box #hcb_form .home-desc a,
+    #HCB_comment_box .home-desc a:visited,
+    #HCB_comment_box .hcb-comment-tb button {
+        color: var(--clr-link);
+    }
+
+    #HCB_comment_box #hcb_form .home-desc a,
+    #HCB_comment_box .home-desc a:visited {
+        text-decoration: underline;
+    }
 </style>
 <!-- end www.htmlcommentbox.com -->
 		</div>
diff --git a/src/pages/guestbook.njk b/src/pages/guestbook.njk
index ee7225ef..f194b227 100644
--- a/src/pages/guestbook.njk
+++ b/src/pages/guestbook.njk
@@ -22,7 +22,7 @@ eleventyNavigation:
         comments_header: 'Guestbook',
         name_label: 'Name',
         content_label: 'Enter your message here',
-        submit: 'Send',
+        submit: 'Send Message',
         logout_link: '<img title="log out" src="https://www.htmlcommentbox.com/static/images/door_out.svg" alt="[logout]" class="hcb-icon hcb-door-out"/>',
         admin_link: '<img src="https://www.htmlcommentbox.com/static/images/door_in.svg" alt="[login]" class="hcb-icon hcb-door-in"/>',
         no_comments_msg: 'No one has left any message yet. Be the first!',
@@ -101,28 +101,57 @@ eleventyNavigation:
 </script>
 
 <style>
-    #HCB_comment_box form {
-        display: grid;
-        gap: 0.3em;
-        margin: 1.3rem 0;
-    }
-
-    #HCB_comment_box #hcb_form textarea, #HCB_comment_box #hcb_form #hcb_form_name {
-        font-family: inherit;
-        font-size: 1.2rem;
-    }
-
     #HCB_comment_box {
         height: auto;
         font-family: inherit;
         font-size: 1.2rem;
     }
 
+    #HCB_comment_box form {
+        display: grid;
+        gap: 0.3em;
+        margin: 1rem 0 1.3rem;
+    }
+
+    #HCB_comment_box #hcb_form textarea,
+    #HCB_comment_box #hcb_form #hcb_form_name {
+        width: 100%;
+        font-family: inherit;
+        font-size: 1.2rem;
+    }
+
+    #HCB_comment_box #hcb_form #replying_to_container,
+    #HCB_comment_box .date {
+        font-size: 0.9rem;
+        color: var(--clr-body-txt);
+    }
+
+    #HCB_comment_box #hcb_form textarea:focus,
+    #HCB_comment_box #hcb_form #hcb_form_name:focus {
+        outline: 0.25em solid var(--clr-link);
+    }
+
     #HCB_comment_box #hcb_form .btn,
     #HCB_comment_box #HCB_comment_form_box .btn {
         background: var(--clr-link-btn-bg);
         color: var(--clr-link-btn-txt);
         font-size: 1.2rem;
     }
+
+    #HCB_comment_box #hcb_form .btn:focus,
+    #HCB_comment_box #HCB_comment_form_box .btn:focus {
+        outline: 0.15em solid var(--clr-link-btn-txt);
+    }
+
+    #HCB_comment_box #hcb_form .home-desc a,
+    #HCB_comment_box .home-desc a:visited,
+    #HCB_comment_box .hcb-comment-tb button {
+        color: var(--clr-link);
+    }
+
+    #HCB_comment_box #hcb_form .home-desc a,
+    #HCB_comment_box .home-desc a:visited {
+        text-decoration: underline;
+    }
 </style>
 <!-- end www.htmlcommentbox.com -->
\ No newline at end of file