https://output.jsbin.com/retitey/quiet
(I have to share the link like this because Twitter banned JS Bin links.)
test |
body > table:first-of-type > tbody > tr:last-child { | |
animation: 0s fade-out 3s both; | |
} | |
@keyframes fade-out { | |
from { | |
opacity: 1; | |
} | |
to { |
https://output.jsbin.com/retitey/quiet
(I have to share the link like this because Twitter banned JS Bin links.)
:root { | |
--scale: 100%; | |
--brand-gradient: linear-gradient(45deg,#f012be,#0074d9); | |
--brand-gradient-alpha: linear-gradient(45deg,rgba(249,104,84,0.06667),rgba(119,136,153,0.06667)); | |
--brand-gradient-alpha2: linear-gradient(225deg,rgba(249,104,84,0.06667),rgba(119,136,153,0.06667)); | |
--link-color: #00f; | |
--font-stack: -apple-system,"BlinkMacSystemFont","Segoe UI",helvetica,arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; | |
} | |
@media (min-width:768px) { | |
:root { |
:root { | |
--scale: 100%; | |
--brand-gradient: linear-gradient(45deg,#f012be,#0074d9); | |
--brand-gradient-alpha: linear-gradient(45deg,rgba(249,104,84,0.06667),rgba(119,136,153,0.06667)); | |
--brand-gradient-alpha2: linear-gradient(225deg,rgba(249,104,84,0.06667),rgba(119,136,153,0.06667)); | |
--link-color: #00f; | |
--font-stack: -apple-system,"BlinkMacSystemFont","Segoe UI",helvetica,arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"; | |
} | |
@media (min-width:768px) { | |
:root { |
<!DOCTYPE html> | |
<html lang=""> | |
<head> | |
<meta charset="utf-8" /> | |
<meta name="viewport" content="width=device-width, initial-scale=1" /> | |
<link rel="stylesheet" href="/static/client.css" /> | |
<script> | |
window.__INITIAL_STATE__ = {}; | |
</script> | |
</head> |
<!DOCTYPE html> | |
<html lang="en" dir="ltr"> | |
<head prefix="og: http://ogp.me/ns#"> | |
<link rel="preconnect" href="https://interactive-examples.mdn.mozilla.net" pr="0.75" /> | |
<meta charset="utf-8"> |
// if the URL contains a hash, scroll to the associated heading | |
if (location.hash) { | |
let media = body.querySelectorAll('img, video'); | |
let elem = body.querySelector(location.hash); | |
let mediaPromise = []; | |
for (let m of media) { | |
// “<img>/<video> rendered” promises are needed for a scrollIntoView() re-run | |
mediaPromise.push( | |
new Promise((res) => { |
/* Document | |
* ========================================================================== */ | |
/** | |
* Add border box sizing in all browsers (opinionated). | |
*/ | |
*, | |
::before, | |
::after { |
:root{ | |
--scale:100%; | |
--brand-gradient:linear-gradient(45deg,#f012be,#0074d9); | |
--brand-gradient-alpha:linear-gradient(45deg,rgba(240,18,190,0.06667),rgba(0,116,217,0.06667)); | |
--font-stack:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol" | |
} | |
@media (min-width:768px){ | |
:root{ | |
--scale:117% | |
} |