Template Snippets
Mood / Weather / Moon Strip
<div class="entry-meta"> <span>mood: calm</span> <span>weather: rainy</span> <span>moon: waxing</span> </div>
Journal Lines
<div class="journal-lines"> <p>Your journal text goes here.</p> <p>Add another paragraph if you want more room.</p> </div>
Reading Log Card
<div class="reading-box"> <p><strong>Question:</strong> What do I need to know today?</p> <p><strong>Tarot:</strong> Card one, card two, card three</p> <p><strong>Spindlewheel:</strong> Wheel one, wheel two, wheel three</p> <p><strong>First impression:</strong> Write your immediate gut read here.</p> <p><strong>Later reflection:</strong> Return later and write what actually happened.</p> </div>
Note Box
<div class="note-box"> Use this for correspondences, reminders, or interpretation notes. </div>
Ingredients Box
<div class="ingredients-box"> Rose, rosemary, salt, black tea, candle stub, charm, etc. </div>
Spell Box
<div class="spell-box"> Write the working, ritual steps, or spoken words here. </div>
Warning Box
<div class="warning-box"> Use this for safety notes, allergies, fire warnings, or mundane reminders. </div>
2 by 3 Reading Gallery
<div class="gallery-box">
<div class="reading-gallery">
<figure>
<img src="../images/gallery-placeholder-1.svg" alt="Tarot card one">
<figcaption>Tarot 1</figcaption>
</figure>
<figure>
<img src="../images/gallery-placeholder-4.svg" alt="Spindlewheel card one">
<figcaption>Wheel 1</figcaption>
</figure>
<figure>
<img src="../images/gallery-placeholder-2.svg" alt="Tarot card two">
<figcaption>Tarot 2</figcaption>
</figure>
<figure>
<img src="../images/gallery-placeholder-5.svg" alt="Spindlewheel card two">
<figcaption>Wheel 2</figcaption>
</figure>
<figure>
<img src="../images/gallery-placeholder-3.svg" alt="Tarot card three">
<figcaption>Tarot 3</figcaption>
</figure>
<figure>
<img src="../images/gallery-placeholder-6.svg" alt="Spindlewheel card three">
<figcaption>Wheel 3</figcaption>
</figure>
</div>
<p class="gallery-note">Replace the image links with your uploaded files, then change the captions.</p>
</div>
Sigil Page
<div class="sigil-page">
<div class="entry-meta">
<span>mood: focused</span>
<span>weather: rainy</span>
<span>moon: waning</span>
</div>
<div class="sigil-box">
<h2>Sigil Name</h2>
<div class="sigil-image-frame">
<img src="../images/my-sigil.png" alt="Sigil description">
</div>
<p class="sigil-intention">
Intention: write the purpose of the sigil here.
</p>
</div>
<div class="sigil-details">
<p><strong>Status:</strong> Active</p>
<p><strong>Method:</strong> Alphabet of Desire + line reduction</p>
<p><strong>Charged by:</strong> Candle flame, breath, repetition</p>
<p><strong>Placed:</strong> Journal cover / phone lock screen / altar card</p>
</div>
<div class="activation-log">
<h3>Activation Log</h3>
<p><strong>May 18:</strong> Drawn in black ink. Charged with breath. Felt steady.</p>
</div>
<div class="note-box">
Notes: write results, changes, edits, or later observations here.
</div>
</div>
Sigil Image Box Only
<div class="sigil-box">
<h2>Sigil Name</h2>
<div class="sigil-image-frame">
<img src="../images/my-sigil.png" alt="Sigil description">
</div>
<p class="sigil-intention">Intention: write the purpose here.</p>
</div>
Working / Ritual Result Log
<div class="working-log"> <p><strong>Working:</strong> Name of the spell or ritual.</p> <p><strong>Date started:</strong> Month Day, Year.</p> <p><strong>Purpose:</strong> What this working is meant to do.</p> <p><strong>Materials:</strong> Candle, tea, herb, charm, paper, etc.</p> <p><strong>Result:</strong> What happened afterward.</p> <p><strong>Would repeat?</strong> Yes / no / only with changes.</p> </div>
Library Card
<div class="library-card">
<img src="images/my-image.png" alt="Short image description">
<div>
<h2><a href="posts/my-post.html">Entry Title</a></h2>
<p>One sentence about what this entry is for.</p>
<div class="library-labels">
<span class="library-label">tag</span>
<span class="sigil-status status-active">active</span>
</div>
</div>
</div>
Library Book / Shelf Link
<a class="library-book sigil-book book-wide" href="sigil-library.html"> <span>Sigils</span> </a>
Spell / Working Post Template
Use this for spell posts, ritual notes, repeatable workings, and practical grimoire entries.
Copy the code below into a new file inside the posts folder, then add the matching post line to script.js.
<!-- ==========================================================
SPELL / WORKING POST TEMPLATE
Copy this into a new post file.
Example filename:
posts/2026-05-20-Hearth-Quieting-Spell.html
========================================================== -->
<div class="entry-meta">
<span>mood: steady</span>
<span>weather: cloudy</span>
<span>moon: waxing</span>
</div>
<div class="spell-page">
<div class="spell-header-card">
<p class="spell-type">Spell / Working</p>
<p class="spell-purpose"><strong>Purpose:</strong> Write what this spell is for in plain language.</p>
<p class="spell-intention">“Write the central intention here, like a charm line.”</p>
</div>
<div class="spell-quick-info">
<p><strong>Best for:</strong> anxiety, sleep, protection, clarity, renewal, home peace</p>
<p><strong>Timing:</strong> morning / evening / new moon / waning moon / anytime</p>
<p><strong>Difficulty:</strong> easy</p>
<p><strong>Mess level:</strong> low</p>
</div>
<div class="materials-box">
<h2>Materials</h2>
<ul>
<li>Material one</li>
<li>Material two</li>
<li>Material three</li>
<li>Optional: related sigil, candle, tea, thread, charm, stone, etc.</li>
</ul>
</div>
<div class="warning-box">
Safety note: do not burn anything unattended, do not ingest herbs unless you know they are safe for you,
and keep smoke, oils, salt, string, and small objects away from pets.
</div>
<div class="method-box">
<h2>Method</h2>
<ol>
<li>Prepare the space. This can be as simple as clearing a table and taking three slow breaths.</li>
<li>Place the materials in front of you.</li>
<li>State the intention out loud or write it down.</li>
<li>Perform the main action of the spell here.</li>
<li>Close the working with a final phrase, gesture, or grounding action.</li>
</ol>
</div>
<div class="charm-box">
<h2>Words</h2>
<p>“Write the spoken charm here. Keep it simple enough that future-you can actually say it.”</p>
<p class="latin-line">Optional Latin: <em>Lux maneat. Malum transeat.</em></p>
<p class="translation-line">Translation: Let light remain. Let harm pass by.</p>
</div>
<div class="note-box">
<strong>What this does:</strong> Describe the effect in realistic terms.
</div>
<div class="working-log">
<p><strong>Date performed:</strong> Month Day, Year</p>
<p><strong>Where:</strong> bedroom desk / kitchen table / altar / outside</p>
<p><strong>Materials actually used:</strong> list what you actually used, not the ideal version</p>
<p><strong>Immediate feeling:</strong> what changed right after?</p>
<p><strong>Result:</strong> what happened later?</p>
<p><strong>Would repeat?</strong> yes / no / with changes</p>
</div>
<div class="journal-lines">
<p>Personal notes go here.</p>
</div>
</div>
Altar Object Link
Use this if you add another clickable object to the altar. Add this inside <div class="altar-stage">, then create a matching CSS placement class.
<a class="altar-object altar-new-object" href="your-page.html" aria-label="Object name: what it opens"> <img src="images/your-object.png" alt="Short object description"> <span>Object</span> </a>
Altar Object CSS Position
Paste this into style.css and adjust the percentages until the object sits where you want.
.altar-new-object {
left: 50%;
top: 50%;
width: 12%;
z-index: 7;
}
Offering Log
<div class="offering-log"> <p><strong>Date:</strong> Month Day, Year</p> <p><strong>Offered:</strong> candlelight, water, written note, coin, tea, etc.</p> <p><strong>For:</strong> what the offering is for</p> <p><strong>Afterward:</strong> what shifted, what you noticed, or whether nothing obvious happened yet</p> </div>