Theme Colours

Definition

• Each theme has primary + 2 complementary(?) colour shades + background + foreground + accent
• Themes are designed to be (mostly?) WCAG 2.0 contrast compliant, theme meta tags are updated upon theme selection FAB

Implementation

• CSS colour variables in sets of numbers for RGB input ie. rgb(var(--color))
• To allow background transparency, add alpha value ie. rgba(var(--color), 0.5)
• Set class "darked" to define dark theme and use meta theme-color; Set attribute data-theme for custom colours based on light/dark themes
• Colour definitions (subject to usage):
  • For links, use "--primary"
  • For header prefix & visited links, use "--secondary"
  • For background shades or colour for use in Google Material 3 Design, use "--tertiary"
  • For page text, use "--foreground"
  • For page background, use "--background"
  • For sub-content background, use "--accent"

[[UNABLE TO SHOW ON LOCAL]]

[[UNABLE TO SHOW ON LOCAL]]

Floating Action Buttons (FABs)

Definition

• Action menus on corners of screen with lists of buttons, responsive to content
• On mobile screens scroll, menus will hide on scroll down after scrolled down certain level of top of page

Implementation

• Create node of class name "action-menu" with location of menu as class name (supports bottom-left/bottom-right), with children button nodes of class name "fab"
• Assume all menus fit on a min screen aspect-ratio of 1:1 and min width 320px (current page is content max-width 680px)

<div class="action-menu bottom-left">
<div class="fab back">...</div>
</div>
<div class="action-menu bottom-right">
<div class="fab theme">...</div>
</div>

[[UNABLE TO SHOW ON LOCAL]]

[[UNABLE TO SHOW ON LOCAL]]

Pop-Up Content

Definition

• On external link tags with supported URLs, show content or embedded iframe render as bottom sheet
• Link tags are detected by attribute target="_blank" (ie. must open in new window/tab)
• When mouse hover, link will be transformed to popup, with link node containing original content and content node containing rendered content
• For interaction, right click/tap and hold to view popup, click on scrim/background overlay to close; Left click not affected to comply with accessibility and allow link to open in mobile apps

Implementation

• Container class name "popup", cloned link child class "popup-text", rendered content child class "popup-content"
• Class name "show" will be appended to container when popup content is shown

The link will transform into
<div class="popup" data=url="[LINK]">
<a class="popup-text" href="[LINK]" target="_blank">[TEXT]</a>
<div class="popup-content">[CONTENT]</div>
</div>
and behave the same on left click, just that right click will show popup, if available.

[[UNABLE TO SHOW ON LOCAL]]

[[UNABLE TO SHOW ON LOCAL]]

Fallback when link is not supported for render, or exclude from render

Jisho.org iframe

Apple Music release/track embeds

Twitter/X posts, Instagram post/reel embeds

(Note: Instagram does not support dark mode on embed)

YouTube video, Shorts embeds

Images (by file formats and/or domain name)

MyAnimeList.net frame courtesy of Jikan API v4

(Note: Can priority filter by list of MAL anime IDs, if provided in window.anime)

Carousel

Definition

• Gallery with swappable image elements on click/tap
• Click/tap container fast (<0.2s) will turn off transition (for comparing differences)
• Right-click/tap and hold to show all items

Implementation

• Container class "carousel", child items class "carousel-item", all but first child class "hide" as initial state
• Append "show" class to container to allow fallback if JavaScript not supported but CSS supported, to prevent render issues

<div class="carousel">
<div class="carousel-item"></div>
<div class="carousel-item hide"></div>
<div class="carousel-item hide"></div>
...
</div>

[[UNABLE TO SHOW ON LOCAL]]

[[UNABLE TO SHOW ON LOCAL]]

Different image sizes and orientations, right-click image to show all

Even in a raincoat Isaki is still adorable af

Glad to see the Japanese universal tea drinking pose is still up and running haha

Same image size, multi-column

This week in violence we have: I gotta say Saki-chan you lost to Milika-san here this episode haha

Because you know, carrying girls other than your girlfriend(s) is his part-time hobby lol

Agenda

Definition

• Image-supported table of contents, in grid form
• All links should be page anchors, otherwise will display "Details" overlay

Implementation

• Container class "agenda", children classes "agenda-item" for content
• For container size layout customization, use inline style on container (eg. max-width), do not style children layout
• Inline style variables for container: "--columns" no. of columns (3 is default, 2 on mobile screens), "--ratio" to define image aspect ratio

<div class="agenda" style="--ratio: [RATIO]; --columns: [COLS];">
<div class="agenda-item"></div>
<div class="agenda-item"></div>
<div class="agenda-item"></div>
...
</div>

[[UNABLE TO SHOW ON LOCAL]]

6 items, default 3 columns, aspect ratio 2

Tsuzuri - NAME [Single]

Hanazawa Kana Fanclub "Destination Club" SUMMER GREETING CARD 2023

Kitou Akari Zepp Tour 2023 Goods

KannoMai Birthday Summer Goods

DEAD OR ALIVE Xtreme Venus Vacation Venus Acrylic Diorama Set (5.5 Years)

Ganbare Douki-chan Vol.10

2 items, 2 columns, default aspect ratio, inline style max width

Comic Dengeki Daiouji Vol.125

Ogura Yui Photobook "Yuitabi"

Data Table

Definition

• Responsive width table (not height responsive) with collapsed borders
• Fixed first and last column, fixed top row customization possible
• Table can be represented as list of cards, header row will be hidden, recommend content rows to be meaningful in context (see example)
• Reference data tables can be created from other data tables, showing only specific rows with header, if any

Implementation

• Use table generators (eg. DivTable.com) to render HTML and wrap with container class name "datatable"
• Children must be HTML table tag following HTML 1.1 standard (ie. tbody, tr, th, td elements)
• Use class "no-wrap" to prevent wrapping of text values (shorter height, horizontal overflow if > 4 columns)
• Use class "all-borders" to include vertical borders
• Use class "freeze-(left/right)" to freeze first/last column
• Use class "freeze-top" to freeze top row (not sticky above page for long tables)
• Use class "cards" to display as list of cards
• Use attribute "data-select" to define comma-separated zero-based index of (tr) rows with (td), excluding header rows with (th) elements
• Use attribute "data-ref" to reference the id of the component of an existing data table (mandatory to define ref tables)

<div class="datatable freeze-left freeze-right all-borders">
<table>
<tbody>
<tr>
<th></th>
<th></th>
...
</tr>
<tr>
<td
title='[FOR_OVERFLOW_USE]'
></td>
<td></td>
...
</tr>
...
</tbody>
</table>
</div>

[[UNABLE TO SHOW ON LOCAL]]

Freeze first column, no wrapping (visible scrollbar on desktop)

Reference table with 2 rows selected (based on above example)

<div class="datatable" data-ref="[ID_OF_TABLE]" data-select="[COMMA_SEPARATED_ZERO_BASED_INTEGERS]"></div>

Data table as cards
(Note: Header will be hidden)

Accordion

Definition

• Collapsible single item content (not in groups)
• Click on header to expand/collapse content
• Click on footer (if any) on bottom of content to collapse content, hidden with content

Implementation

• Container class "accordion"
• In DOM order: Children classes "header" for toggle, "content" for body, optional "footer" to collapse after end of body

<div class="accordion">
<blockquote class="header">[TITLE]</blockquote>
<div class="content">[CONTENT]</div>
<blockquote class="footer">CLOSE</blockquote>
</div>

[[UNABLE TO SHOW ON LOCAL]]

[[UNABLE TO SHOW ON LOCAL]]

Conversation

Definition

• Styled lines of text as conversation bubbles
• Bubbles are names, with right-aligned for sender and left-aligned for everyone else

Implementation

• Container class "conversation", will read children nodes innerText (in order)
• Set "data-separator" attribute to use custom separator between name and text, default ASCII colon ":"
• Set "data-sender" attribute to define sender to right align, else all left align
• To allow re-enactment of lines, set "data-animate" attribute, will be rendered with replay button at bottom of conversation
• Set inline styles at container to prevent overflow (max-height, overflow-y)

<div class="conversation" data-separator="[SEPARATOR]" data-sender="[NAME]" data-animate>
<div>[NAME][SEPARATOR][MESSAGE]</div>
...
</div>

[[UNABLE TO SHOW ON LOCAL]]

[[UNABLE TO SHOW ON LOCAL]]

Two party conversation, sender not defined, no inline styles, custom separator

Three party conversation, sender defined, animated, inline styles to prevent overflow

Abbreviation

Definition

• Extension of HTML abbr tag, to allow click/touch to show title in custom HTML dialog tag

<abbr title="[POPUP_TEXT]">
[CONTENT]
</abbr>

[[UNABLE TO SHOW ON LOCAL]]

[[UNABLE TO SHOW ON LOCAL]]

Omake

Definition

• Padded element to reflect content outside of main body

<div class="omake">
[CONTENT]
</div>

.omake {
    border-radius: 8px;
    background-color: rgb(var(--accent));
    padding: 1em;
    transition: background-color 0.2s cubic-bezier(0.2, 0.0, 0, 1.0);
}

Emoji

Definition

• Use of Noto Color Emoji required for desktop environments to display emoji correctly
  (Note: Mobile devices use their own emoji sets by default)
• Emoji that require this font for intended use: "Pinched fingers" will not render, "Bird" should show blue bird
• Emoji use are split in two categories, direct use and converted with the latter from text in the format "*[EXPRESSION]*"

Implementation

• Use .woff2 files based on "Self-hosted Noto Color Emoji font for Chrome and Edge" GitHub Repo, and determine what to download and host based on unicode ranges in table shown
• For the following emoji, use font files "3.woff2" to "9.woff2"

ALL EMOJI USED (IN NO PARTICULAR ORDER)

CONVERTED EMOJI LISTING & REFERENCE