This documentation contains internal website specifications, architecture diagrams, and administrative workflows. Please log in with a Discord account holding a Hawthorne Staff role to view this page.
For more information, please see the Discord Login Explanation.
Site Documentation: Editing the Homepage
This guide explains how to make simple edits to the main homepage (index.html) of the guild website.
The homepage uses a responsive grid designed to highlight key entry points for players and DMs.
The homepage is built in a semantic pattern:
Hawthorne Guild
<div class="home-section">): Containers for major topics. Each has an <h3> title.<div class="card-grid">): The wrapper for the individual cards.<div class="feature-card">): Each card contains a title, a thumbnail image, a brief description, and a button.To edit a card, find the corresponding block in index.html.
<div class="feature-card">
<h4>Player's Guide</h4>
<a href="/Guides/playersguide/index/">
<img src="/Guides/assets/thumbnails/players-300.png" alt="Player's Guide" class="card-thumbnail">
</a>
<p>Everything you need to know to create characters and play on the Hawthorne D&D 5e Server</p>
<a href="/Guides/playersguide/index/" class="card-button">Read Guide</a>
</div>
<h4></h4>: The title displayed at the top of the card.src="/Guides/assets/thumbnails/...": The thumbnail image. For best results, use 300x200px images.<p></p>: The short descriptive blurb.href="/Guides/...": The link location. Ensure this matches your directory path (e.g., lore/ or playersguide/index/).[!IMPORTANT] When adding or removing cards, try to maintain a multiple of 3 or 4 per row to keep the grid looking balanced on desktop screens.