A CAN WE PRETEND THAT AIRPLANES IN THE NIGHT SKY ARE LIKE SHOOTING STARS

──────── ✦ ────────

EPHEMERIS
A NIGHT-SKY JANITORAI PROFILE TEMPLATE | BIO CODE BY @MONIE_

✦ HOW TO USE THIS GUIDE ✦

01 / BEFORE YOU START

QUICK START

1 · Copy EVERYTHING | GOLD | (GOOGLE DOCS)

2 · Edit it with Find (Ctrl/Cmd + F). Search the class names in this guide, like nx-title.

3 · Select all, copy, and paste into your JanitorAI About Me box. Save, refresh, check your phone.

──────── ✦ ────────

02 / SO NOTHING BREAKS

THE 5 RULES

✦ No blank lines. For a new line type <br>.

✦ Direct image links only. Must end in .png / .jpg / .gif. Leave unused pictures as src="" and they hide themselves.

✦ Only change words inside "quotes" or between > and <. Never delete quote marks, < >, { } or class=.

✦ No comments or * ~ characters in the <style> part. JanitorAI cuts the stylesheet off at them.

✦ JanitorAI deletes url(), @import, data: pictures, CSS variables, <input>, <label>, and the CSS properties scale: and rotate:.

· ─────── ✦ ─────── ·

03 / SEARCH → CHANGE

I WANT TO CHANGE...

my name → nx-title

the welcome line → nx-kicker

my character picture → nx-sona

my moon picture → nx-moon-pic

ticker text (edit both copies) → nx-ticker-set

About Me boxes → nx-acc

About Me pictures (3) → nx-portrait

Rules / FAQ → nx-rf · nx-rule

my links → nx-fl

friends → nx-friend

gallery (edit both groups) → nx-gi

series → nx-cover

banners → nx-banner

music player → nx-mp-trk

fairy lights → nx-fairy · nx-fairyb

page pet → nx-pet

the credit → nx-credit

──────── ✦ ────────

04 / EVERY PANEL

THE SECTIONS

ABOUT ME

Three pictures in the arched frame, one per box. Each box is a <details>: title in <summary>, text in <p>. Keep all three boxes. Copy a whole block to add one.

✦ RULES & FAQ — two picture cards; hover slides, tap opens the list. Rules are nx-rule (title in <b>, reason in <span>). FAQ questions are <details>.

✦ FIND ME — one nx-fl row per link: symbol in <i>, name in <b>, line in <small>, link in href.

✦ FRIENDS — one nx-friend row each (name, line, picture, link). Four fit; more scroll.

✦ GALLERY — side-scrolling strip. There are TWO identical groups (nx-gset): change every picture in BOTH.

✦ SERIES — each series is ONE <details class="nx-cover"> ... </details> block. Copy a whole block to add one; never paste inside a block.

✦ ABOUT · RULES · LINKS · FRIENDS · GALLERY · SERIES ✦

· · · ✦ · · ·

05 / LITTLE EXTRAS

MUSIC PLAYER

Frosted-glass bar along the bottom of the hero. Rewind and forward switch between 3 tracks (disc picture, title, artist and link all change). Play opens that track's link.

Find nx-mp-trk → three blocks. Change nx-mp-song, nx-mp-artist, the <img src=""> and the nx-mp-btn href.

YouTube autoplay link: https://www.youtube.com/watch?v=VIDEO_ID&list=PLAYLIST_ID&autoplay=1
Spotify opens the playlist but cannot be forced to autoplay.

05B / STAR GARLANDS

FAIRY LIGHTS

Two layered garlands of twinkling stars hang from the bottom of the site's top bar, with dangling stars that sway. They stay in place while you scroll and never block clicks. The first is nx-fairy (7 even swags), the busier one on top is nx-fairyb (11 uneven swags).

Move them up or down → change top:56px in both rules (same number). Phones use top:44px in the @media (max-width:720px) line near the end of the CSS.

Remove one → delete its <div class="nx-fairy..."> block at the very top of the code. Delete the matching CSS only if you want the code tidy.

06 / THE MOON

MOON

Put a transparent PNG in nx-moon-pic. It cycles for 60 seconds: shadow slides off, picture flips, shadow slides back. Change 60s in the four moon rules (keep them equal); -12s is the start point. If it sits off-center change inset:-19% in .nx-moon-pic.

07 / PALETTE

COLORS & FONTS

Colors are written out in every rule, so Find & Replace recolors everything.

#d9dce6 silver #b9a6d6 purple accent #5b5b66 grey borders #ececf0 body text

Gold version: use the Gold Template, or replace #d9dce6 → #efddba and #b9a6d6 → #dfc277 (the full table is in the .txt Read Me).

Fonts: only the site's built-in fonts work (no @import). Swap a name with Find & Replace, you can find a list of accepted fonts HERE.

──────── ✦ ────────

08 / WHEN SOMETHING LOOKS WRONG

TROUBLESHOOTING

♡ Page looks unstyled — a * ~ or /* */ got into <style>, or a } was deleted

♡ Picture missing — link isn't direct, or src="" is empty

♡ Ticker / gallery jumps — the two copies don't match

♡ Player buttons do nothing — name="nxmp" missing, or two tracks have open

♡ Accordion won't switch — a <details> lost its name= or </details>

09 / BE KIND

CREDIT RULES

✔ Free to use and edit on your own profile. You may remove the credit line.

✦ ✦ ✦

EPHEMERIS · QUESTIONS? MESSAGE ME!