arnog

[
  {
    "key": "i would rather, Ciluvan coita",
    "value": [
      "<h2>I would rather...</h2>",
      "",
      "<cite>Arwen, The Lord of the Rings: The Fellowship of the Ring (the movie) inspired by J.R.R. Tolkien</cite>",
      "",
      "{lang:English}",
      "<div class='two-columns'>",

arnog

body {
    --hue: 206;
    --surface: #fafafa;        
    --surface-border: #fff;
    --editable-surface: #fff;
    --editable-surface-border: #fafafa;
    --secondary: #f2f2f2;
    --secondary-border: hsl(0,0%,91%);
    --on-surface: hsl(var(--hue),19%,26%);
    --link: hsl(var(--hue),40%,49%);;

arnog

img {
    mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) { img {
    filter: invert(100%) hue-rotate(180deg);
    mix-blend-mode: screen;
}}

arnog

function switchTheme(ev) {
    // If the alt/option key is pressed, reset to system default
    if (ev.altKey) {
        document.getElementsByTagName("BODY")[0].removeAttribute("theme");
        return; 
    }

    const prefersDark = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;

    let theme = document.getElementsByTagName("BODY")[0].getAttribute("theme");

arnog

@media (prefers-color-scheme: dark) { body:not([theme="light"]) {
    --surface: hsl(var(--hue),19%,26%);
    --editable-surface: #333;      
    --editable-surface-border: hsl(0,0%,13%);
    --secondary: hsl(var(--hue),25%,35%);
    --secondary-border: hsl(var(--hue),19%,26%);
    --on-surface: hsl(0,0%,98%);
    --link: hsl(var(--hue),36%,84%);
}}
body[theme="dark"] {

arnog

# Mathlive Contributor License Agreement

Thank you for considering contributing to MathLive!

Before we can accept your contribution, please read 
and sign the following Contributor License Agreement (CLA)

This document is intended to protect both you and us from 
legal problems.

arnog

Animate on scroll

Pure Javascript (no jQuery) animation triggered on scroll.

A Pen by Arno Gourdol on CodePen.

License.

arnog

/**
 * The first commented line is your dabblet’s title
 */

background: #f06;
background: linear-gradient(30deg, #f06, #ffddcc);
min-height:100%;