RhysTannerSandboxTestBed
:root {
    --posX: calc(50% - 358px - 12rem);
}
 
/*--- Footnote Auto-counter --*/
#page-content {
    counter-reset: megacount;
}
 
/*--- Footnote Superscript Number --*/
.fnnum {
    display: inline-block;
    width: min-content;
    text-indent: calc(-1% - 0.1em);
    overflow: hidden;
    line-height: 83%;
    word-break: initial;
    text-decoration: none;
    font-weight: bold;
    font-style: initial;
    color: transparent;
    position: relative; top: -0.25em; font-size: 82%;
    padding: .15em calc(.21em - 0.4px) .12em calc(.11em - 1px);
    margin-left: -0.06em;
    margin-right: -0.25em;
    counter-increment: megacount;
    user-select: none;
}
.fnnum::after {
    content: "" counter(megacount);
    color: var(--fnColor, #E6283C);
}
.fnnum:hover {
    text-decoration: none;
    cursor: pointer;
    background-color: var(--fnColor, #E6283C);
}
.fnnum:hover::after { color: white; }
 
/*--- Footnote Content Wrapper --*/
.fncon {
    position: absolute;
    right: calc(var(--posX) + 80px);
    line-height: 1.2;
    padding: 0.82rem;
    width: 10.3rem;
    background: white;
    border: 2px solid black;
    font-weight: initial;
    font-style: initial;
    text-align: initial;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.15s linear, right 0.3s cubic-bezier(.08,.72,.5,.94);
    z-index: 9;
}
.fnnum:hover + .fncon {
    opacity: 1;
    right: var(--posX);
}
.fncon::before {
    position: absolute;
    top: 0; left: 0;
    transform: translateX(-52%) translateY(-55%) scale(1.15);
    background-color: var(--fnColor, #E6283C);
    color: white;
    content: counter(megacount);
    font-size: initial;
    font-weight: bold;
    font-style: initial;
    padding-left: 0.32em; padding-right: 0.32em;
    padding-top: 0.18rem; padding-bottom: 0.08rem;
}
 
/*--- Mobile Query --*/
@media only screen and (max-width: 1279px) {
    .fncon {
        position: fixed;
        bottom: 1.3rem;
        left: calc(11% - 50px);
        width: 70%;
        transition: opacity 0.15s linear, left 0.3s cubic-bezier(.08,.72,.5,.94);
    }
    .fnnum:hover + .fncon {
        left: 11%;
     }
}

rating: 0+x

WARNING: THE FOLLOWING INFORMATION IS LEVEL 6013.RP CLASSIFIED.


This information is meant for internal Site-82 and Sitra Achra circulation only. Personnel responsible for unauthorized dissemination of this page or its contents will be subject to disciplinary action, up to and including excommunication in accordance with the Anathema Contingency.










Lurking dark underground
Descend to the bottom
Swim below eternally
Into the deep blue sea …

The Rosetta Protocol theme is a fairly straightforward edit of the Black Highlighter theme. The source code for standard Black Highlighter can be found here.

black-highlighter-logo.svg

You will need to import the Black Highlighter theme as well in order to use this theme. You can find information about Black Highlighter and its derivative themes here and here, respectively.


Payne's Grey--gray-monochrome(66, 66, 72)
Shining Breath--bright-accent(106, 173, 144)
{$color3-name}{$color3-variable}{$color3-info}
{$color4-name}{$color4-variable}{$color4-info}
{$color5-name}{$color5-variable}{$color5-info}
{$color6-name}{$color6-variable}{$color6-info}
Alto--very-light-gray-monochrome(215, 215, 215)
White Smoke--pale-gray-monochrome(244, 244, 244)
Bastille--dark-gray-monochrome(48, 48, 52)
The Trial Killer--medium-accent(47, 135, 97)
Garden of Traitors--dark-accent(48, 71, 60)
Priestess of Gyaros--newpage-color(193, 115, 209)
Aegean Blue--pale-accent(22, 85, 201)
{$subcolor8-name}{$subcolor8-variable}{$subcolor8-info}
{$subcolor9-name}{$subcolor9-variable}{$subcolor9-info}
{$subcolor10-name}{$subcolor10-variable}{$subcolor10-info}
{$subcolor11-name}{$subcolor11-variable}{$subcolor11-info}
{$subcolor12-name}{$subcolor12-variable}{$subcolor12-info}

The Rosetta Protocol theme makes use of multiple site components. Any site components you want to add must also be compatible with Black Highlighter.

  • Better Footnotes: This replaces the standard Wikidot footnotes2 with dynamic animated tabs..Like this. Standard footnotes can be used in conjunction with Better Footnotes.
  • Centered Header BHL: This centers the logo, title and subtitle of the page. Normally this information would be justified to the left side of the screen.
  • Fade In: Sleek. Mysterious. Enigmatic. Honestly a bit much sometimes. Cool though.
  • Pride Highlighter: I may not be straight, but my priorities definitely are. Go feral, you lovely little fruits.
  • Responsive Tables: This creates tables that dynamically adjust their size and shape to match the size of the page window (or screen size on mobile devices). Though they're very useful, they're also much more intensive to code than standard tables. An example of a responsive table is provided further below.
  • Toggle Sidebar BHL: This allows the reader to toggle the sidebar on or off the page, similar to how the website's standard mobile sidebar works.

rosetta_proposal-alt.png

The Rosetta Protocol logo, graciously provided by Volgun. Yes, that Volgun. What a sweetheart, right?

Example Text

Normalsuperscriptsubscriptraw text
Bold
Italics
Underline
Strikethrough
Monospaced
Here is a standard footnote …3
… and a footnote made using "Better Footnotes.".Marvelous, really.

A horizontal rule can be created with 5 hyphens (-----) and extends across the whole page if it's not placed inside anything (such as a blockquote). The lines separating sections of this document are horizontal rules.


Titles can be created by putting between one and six plus signs (+) at the start of a line.



This is a tab view.

This is a blockquote, created by enclosing content in [[div="blockquote"]] and [[/div]] or by putting a "> " at the start of each line, like so:

[[div="blockquote"]]
More text, if you can believe it.
[[/div]]


That's a horizontal rule. Notice how it stops at the margins of the div.

Blockquotes can be nested by starting another div inside an existing div or by placing an additional ">" on each nested line.

And one made using a div, for posterity.

This is a table.
You should know how to make these
already.

The body font is Raleway.
The title font is Mitr.
The header font is Titillium Web.


This is an example of a Responsive Table. Notice how its formatting and cell size adjust as you change the shape of the window. This scaling also works for tables viewed on mobile devices, which can help preserve the page's intended margins.

Column 1
Column 2
Column 3
Column 4
test
test
test
test

The header cell color is normally gray, but it can be changed by defining its background color in CSS. This formatting works best if placed at the bottom of the page, below any tables it is meant to affect.

[[module CSS]]
/* This module changes the color of the Responsive Table header cells to match the rest of
the Rosetta Protocol theme. In order to take effect, the module must be placed below the
table meant to be changed, otherwise the header cells will stay the standard gray color. */
.responsive_table .table_header_data {
        background: #6aad90;
}
@media screen and (max-width: 800px) {
  .responsive_table .table_data::before {
    background: #6aad90;
  }
}
[[/module]]


« Valid link | Current page | Invalid link »