Story Preview

This must be placed before <!-- more -->.

Syntax

<div class="preview-wrapper reverse" style="--storyColor: #hex;--storyColor-rgb: r,g,b;--storyColor-h: hue;--storyColor-s: saturation%;--storyColor-l: lightness%;">
    <div class="grid-wrapper">
        <div class="preview-background" style="background-image: url('/tl/img/enst/story/assets/card_rectangle4_##_evolution.webp')"></div>
        <div class="preview-box">
            <div class="title-area">
                <div class="title-area__title">Title ENG</div>
                <div class="title-area__subtitle">Title JP</div>
                <div class="title-area__start"><a href="/tl/post/story/1">Start Reading</a></div>
            </div>
            <div class="info-area">
                <div class="synopsis">
                    Text <span style="display:inline-block">last word... <a href="https://twitter.com/ensemble_stars/status/{id}">➹</a></span>
                </div>
                <div class="info">
                    <div class="info-item season">
                        <div class="label">
                            Season
                        </div>
                        <div class="value">
                            ---
                        </div>
                    </div>
                    <div class="info-item chapters">
                        <div class="label">
                            Chapters
                        </div>
                        <div class="value">
                            ##
                        </div>
                    </div>
                    <div class="info-item writer">
                        <div class="label">
                            Writer
                        </div>
                        <div class="value">
                            Person
                        </div>
                    </div>
                    <div class="info-item characters">
                        <div class="label">
                            Characters
                        </div>
                        <div class="value">
                            <a href="/tl/categories/Ensemble-Stars/Name/" character="Name" title="Name"></a>
                        </div>
                    </div>
                    <div class="info-item tl">
                        <div class="label">
                            Translator
                        </div>
                        <div class="value">
                            TLer
                        </div>
                    </div>
                    <div class="info-item pr">
                        <div class="label">
                            Proofreaders
                        </div>
                        <div class="value">
                            PRs
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Options

• reverse: Placed on alongside the preview-wrapper div. Moves the preview image to the right.
• <a character="Name" title="Name"></a>: Displays characters. See Stylesheet.