JSFiddle - React, Tailwind, and code Playground
JavaScript
// ==UserScript==
// @name matters bigger viewer
// @namespace https://matters.news/@yummei
// @version 0.21
// @description the bigger matter's novel viewer
// @author yummei
// @match https://matters.news/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
function addGlobalStyle(aCss) {
'use strict';
let head = document.getElementsByTagName('head')[0];
if (head) {
let style = document.createElement('style');
style.setAttribute('type', 'text/css');
style.textContent = aCss;
head.appendChild(style);
return style;
}
return null;
};
//jsx-2991097315 is rightside nav
//toolbar is comment input
//#latest-responses is comment
//jsx-988106619 is top bar
addGlobalStyle(`.jsx-2991097315{display:none;}
.toolbar.jsx-3976464707{position: static;}
.l-col-three-mid{display:flex;flex-direction:column}
header.solid-fixed.jsx-988106619{position: sticky;
transition-timing-function: cubic-bezier(0.4, 0.0, 0.6, 0.1);
transform: translateY(-40%);
opacity: 0;
transition: opacity .15s, transform .15s}
header.solid-fixed.jsx-988106619:hover, header.solid-fixed.jsx-988106619:focus-within{transform: translateY(0);
opacity: 1;
transition-timing-function: cubic-bezier(0.4, 0.0, 0.6, 0.1);
transition: opacity .2s, transform .2s}`);
})();