Pure Javascript (no jQuery) animation triggered on scroll.
A Pen by Arno Gourdol on CodePen.
Pure Javascript (no jQuery) animation triggered on scroll.
A Pen by Arno Gourdol on CodePen.
/** | |
* The first commented line is your dabblet’s title | |
*/ | |
background: #f06; | |
background: linear-gradient(30deg, #f06, #ffddcc); | |
min-height:100%; |
# 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. |
@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"] { |
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"); |
img { | |
mix-blend-mode: multiply; | |
} | |
@media (prefers-color-scheme: dark) { img { | |
filter: invert(100%) hue-rotate(180deg); | |
mix-blend-mode: screen; | |
}} |
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%);; |
[ | |
{ | |
"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'>", |