Theme Colours

Definition

• Rationale behind colour variants is single primary + 2 complementary shades of colour, with grayscale equivalents for background/foreground, accent gray colour: Total 10 for light and dark mode
• Primary colour is used on links mostly, secondary colour on headers, tertiary is on most components following Material 3 degisn, accent is on sub-content blocks

Implementation

• CSS colour variables in sets of numbers for RGB input ie. rgb(var(--color))
• To allow background transparency, use alpha value ie. rgba(var(--color), 0.5)

:root {
	--primary: 27, 63, 255;
	--secondary: 117, 153, 255;
	--tertiary: 221, 221, 255;
	--background: 255, 255, 255;
	--foreground: 0, 20, 20;
	--accent: 221, 221, 221;
}

.darked:root {
	--primary: 50, 228, 255;
	--secondary: 36, 159, 179;
	--tertiary: 22, 98, 100;
	--background: 0, 0, 0;
	--foreground: 245, 245, 255;
	--accent: 69, 69, 69;
}

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 function not affected

Implementation

• Container class name "popup", link cloned child class "popup-text", rendered content 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]">
    <div class="text">[TEXT]</div>
    <div class="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

Jisho.org frame

(Dark mode determined by media query, unable to toggle unlike theme here)

Apple Music release/track embeds

Twitter/X posts, Instagram post/reel embeds

YouTube video/YouTube Shorts embeds

images (by domain name)

MyAnimeList.net frame courtesy of Jikan API v4 (Can filter by list of MAL show IDs, if provided in window['shows-list'])

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

• Media-supported table of contents, in grid form
• All links should be anchors, and if otherwise will display "More" button

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
• Style variables for container: "--columns" to change no. of columns default 3 (fixed to 2 on mobile screens), "--ratio" to define custom image aspect ratios

<div class="agenda" style="--aspect-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, does not have sticky rows) with collapsed borders
• Fixed first and last column, fixed top row possible
• Table can be represented as list of cards, but header row will be hidden, so recommend content rows to be meaningful in context, see example)
• Data tables can also be created from other data tables, becoming their subsets, showing only specific rows

Implementation

• Use table generators (eg. DivTable.com) to render HTML and wrap with container class name "datatable"
• Children must be HTML table tag which follows HTML 1.1 standard (ie. tbody, tr, th, td elements)
• Use class add "all-borders" to include vertical borders
• Use class "freeze-(left/right)" to freeze first/last column
• Use class "freeze-top" to freeze top row
• Use class "cards" to display as list of cards
• Add "data-ref" attribute to reference the id of the component of an existing data table (if any), add "data-select" attribute to select the zero-based index of rows excluding header rows

<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, inline smaller font

Reference tables, to be rendered (based on table in first example)

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

Single row card class, header will be hidden

Accordion

Definition

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

Implementation

• Container class "accordion", (in DOM order) child class "header" to expand children class "content" with optional class "footer"
• If footer class element not present, click on header to collapse (for smaller content)

<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 (optionally animated) paragraphs of text as conversation bubbles
• Bubbles are right-aligned for sender (to be defined on container), left-aligned for everyone else
• No avatar support as of now, will show full names

Implementation

• Container class "conversation", will read children nodes innerText as conversation dialogues (in order)
• To use custom seaprator, set "data-separator" attribute on container, default ASCII colon character ":"
• To choose who is right aligned (sender), set "data-sender" attribute, else all left align
• To allow re-enactment of lines, set "data-animate" attribute, inline styles to allow animation to stay in container (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 a dialog box

<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