leilukin-site/src/pages/guestbook.njk

---
layout: main/content
title: Guestbook
desc: Leave a message for Leilukin.
eleventyNavigation:
    key: Guestbook
    order: 9
---

<p>Feel free to say hi and connect with me! You may share your own website here.</p>

<p>This guestbook is not the place to ask for help with my video game mods. Ask for mod support or report issues with my mods on Deadly Stream, Nexus Mods or email me.</p>

<p><a href="https://web.archive.org/web/20240510121252/https%3A%2F%2Fleilukin.123guestbook.com%2F">Archive of my previous guestbook hosted on 123Guestbook</a></p>

<h2>Leave A Message</h2>

<form class="gb__form">
    <div class="gb__form--input">
        <label for="name-input">Name:</label>
        <input type="text" name="name" id="name-input" required>
    </div>

    <div class="gb__form--input">
        <label for="email-input">Email:</label>
        <input type="email" name="email" id="email-input" required>
    </div>

    <div class="gb__form--input">
        <label for="website-input">Website (optional):</label>
        <input type="text" name="website" id="website-input">
    </div>

    <div class="gb__form--input">
        <label for="message-input">Message:</label>
        <textarea type="text" rows="4" name="message" id="message-input" required></textarea>
    </div>

    <button type="submit" class="gb__form--submit">Publish</button>
</form>

<section class="gb__messages">
    <h2>Messages</h2>
    <div class="gb__message--list"></div>
</section>

<style>
    .gb__form,
    .gb__form--input,
    .gb__message--list,
    .gb__message {
        display: grid;
    }

    .gb__form {
        gap: 0.6em;
        margin-bottom: 2em;
    }

    .gb__form--input {
        gap: 0.2em;
    }

    .gb__form--submit,
    .gb__message--reply-btn {
        border: none;
        background: var(--clr-link-btn-bg);
        color: var(--clr-link-btn-txt);
        padding: 0.3em 0.6em;
    }

    .gb__form--input input,
    .gb__form--input textarea,
    .gb__form--submit,
    .gb__message--reply-btn {
        border-radius: 0.2em;
    }

    .gb__form--input textarea {
        resize: vertical;
    }

    .gb__form--input input:focus,
    .gb__form--input textarea:focus {
         outline: 0.15em solid var(--clr-link);
    }

    .gb__message--list {
        gap: 1em;
    }

    .gb__message {
        gap: 0.5em;
        padding: 1em 1.4em 1.4em;
        background-color: var(--clr-quote-bg);
    }

    .gb__message--name {
        font-size: 1.4rem;
    }

    .gb__message--time,
    .gb__message--reply-btn {
        font-size: 1rem;
    }

    .gb__message--reply-btn {
        justify-self: start;
        margin-top: 0.3em;
    }
</style>

<script type="module" src="/assets/js/guestbook.js" defer></script>