Add more styling to the guestbook

This commit is contained in:
Helen Chong 2024-05-15 01:40:53 +08:00
parent 2dd5c56611
commit 447d1521d8
3 changed files with 83 additions and 25 deletions

View File

@ -4,7 +4,7 @@
<subtitle>Leilukin&#39;s personal website.</subtitle> <subtitle>Leilukin&#39;s personal website.</subtitle>
<link href="https://leilukin.neocities.org/feed.xml" rel="self"/> <link href="https://leilukin.neocities.org/feed.xml" rel="self"/>
<link href="https://leilukin.neocities.org"/> <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> <id>https://leilukin.neocities.org</id>
<author> <author>
<name>Leilukin</name> <name>Leilukin</name>

View File

@ -387,7 +387,7 @@
comments_header: 'Guestbook', comments_header: 'Guestbook',
name_label: 'Name', name_label: 'Name',
content_label: 'Enter your message here', 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"/>', 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"/>', 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!', no_comments_msg: 'No one has left any message yet. Be the first!',
@ -466,29 +466,58 @@
</script> </script>
<style> <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 { #HCB_comment_box {
height: auto; height: auto;
font-family: inherit; font-family: inherit;
font-size: 1.2rem; 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_form .btn,
#HCB_comment_box #HCB_comment_form_box .btn { #HCB_comment_box #HCB_comment_form_box .btn {
background: var(--clr-link-btn-bg); background: var(--clr-link-btn-bg);
color: var(--clr-link-btn-txt); color: var(--clr-link-btn-txt);
font-size: 1.2rem; 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> </style>
<!-- end www.htmlcommentbox.com --> <!-- end www.htmlcommentbox.com -->
</div> </div>

View File

@ -22,7 +22,7 @@ eleventyNavigation:
comments_header: 'Guestbook', comments_header: 'Guestbook',
name_label: 'Name', name_label: 'Name',
content_label: 'Enter your message here', 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"/>', 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"/>', 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!', no_comments_msg: 'No one has left any message yet. Be the first!',
@ -101,28 +101,57 @@ eleventyNavigation:
</script> </script>
<style> <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 { #HCB_comment_box {
height: auto; height: auto;
font-family: inherit; font-family: inherit;
font-size: 1.2rem; 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_form .btn,
#HCB_comment_box #HCB_comment_form_box .btn { #HCB_comment_box #HCB_comment_form_box .btn {
background: var(--clr-link-btn-bg); background: var(--clr-link-btn-bg);
color: var(--clr-link-btn-txt); color: var(--clr-link-btn-txt);
font-size: 1.2rem; 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> </style>
<!-- end www.htmlcommentbox.com --> <!-- end www.htmlcommentbox.com -->