Guestbooks are back

Well, guestbooks never really left. Many bloggers use them, and I love it. Such a simple and lovely way to leave a small note.

What I’m referring to in the title is the Guestbooks service by Mire. It was down for quite some time due to an issue with the hosting provider, but now it’s up and running again.

Unfortunately, a lot of data was lost because of this. Mire writes:

I only had an old data backup, so a bunch of stuff was lost. I'm especially sorry for those who had important data on Mire and Guestbooks, as that's now gone.

That’s why many of the wonderful comments in my guestbook are gone. I still carry them in my heart, though. Maybe that sounds cheesy, but I really love reading what people write. It’s motivating, and a very good reminder to keep blogging, which is a constant “battle” for me.

When I logged back into my account, I noticed there’s now a feature for replying to comments. I hadn’t seen it before, so maybe it’s relatively new. Either way, I think it’s a great addition.

I’m working on a new Bear theme (no surprise there), so I decided to include some styles for replies. Just a small touch to separate my replies from reader comments. I’ll probably tweak it a bit more, but feel free to use the styles as a starting point for your own blog:

/* Guestbook (guestbooks.meadow.cafe) */
#guestbooks___guestbook-form-container form {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  margin-block: 1.6em;
}

#guestbooks___guestbook-form-container :is(input, textarea, button) {
  font: inherit;
  letter-spacing: inherit;
  appearance: none;
}

#guestbooks___guestbook-form-container :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
  width: 100%;
  padding: 0.65em 0.85em;
  color: var(--text-color);
  background: var(--background-color);
  border: 1px solid color-mix(in srgb, var(--text-color) 30%, var(--background-color));
  border-radius: 3px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

#guestbooks___guestbook-form-container :is(input[type="text"], input[type="email"], input[type="url"], textarea):focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: 2px;
  border-color: color-mix(in srgb, var(--text-color) 35%, var(--background-color));
}

#guestbooks___guestbook-form-container textarea {
  min-height: 7.5em;
  resize: vertical;
}

#guestbooks___guestbook-form-container :is(button, input[type="submit"]) {
  align-self: flex-start;
  padding: 0.55em 0.9em;
  color: var(--text-color);
  background: var(--background-color);
  border: 1px solid color-mix(in srgb, var(--text-color) 30%, var(--background-color));
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

#guestbooks___guestbook-form-container :is(button, input[type="submit"]):focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: 2px;
}

@media (hover: hover) {
  #guestbooks___guestbook-form-container :is(button, input[type="submit"]):hover {
    border-color: color-mix(in srgb, var(--link-color) 45%, var(--background-color));
    background: color-mix(in srgb, var(--link-color) 4%, var(--background-color));
  }
}

#guestbooks___guestbook-messages-header {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-block: 2em 1em;
}

#guestbooks___guestbook-messages-header::before {
  content: "💬";
  translate: 0 1px;
}

#guestbooks___guestbook-messages-container > div {
  margin-block: 1.2em;
  padding: 1em 1.2em;
  font-size: 0.95em;
  border: 1px solid color-mix(in srgb, var(--text-color) 18%, var(--background-color));
  border-radius: 3px;
}

#guestbooks___guestbook-messages-container p {
  margin: 0.35em 0 0;
  padding: 0;
}

#guestbooks___guestbook-messages-container blockquote {
  margin: 0.35em 0 0;
  padding: 0;
  border: 0;
  background: none;
  font-style: normal;
}

#guestbooks___guestbook-messages-container time {
  font-size: 0.85em;
  opacity: 0.8;
  white-space: nowrap;
}

#guestbooks___guestbook-messages-container .guestbook-message-reply {
  position: relative;
  margin-block: 0.9em 0.2em;
  margin-inline-start: 1.6em;
  padding: 0.9em 1.1em;
  background: color-mix(in srgb, var(--text-color) 4%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-color) 18%, var(--background-color));
  border-radius: 3px;
}

#guestbooks___guestbook-messages-container .guestbook-message-reply::before {
  content: "";
  position: absolute;
  top: -1em;
  left: -0.9em;
  width: 0.7em;
  height: 1.6em;
  border-left: 2px solid color-mix(in srgb, var(--text-color) 18%, var(--background-color));
  border-bottom: 2px solid color-mix(in srgb, var(--text-color) 18%, var(--background-color));
  border-bottom-left-radius: 3px;
  opacity: 0.6;
}

PS. I’m also looking forward to seeing what Kami is cooking.