Responsive font size based on content length

The shorter, the larger font-size

src/components/status.css

@@ -191,6 +191,7 @@
 }
 .status.large .content {
   font-size: 150%;
+  font-size: calc(100% + 50% / var(--content-text-weight));
 }
 .status.large .poll,
 .status.large .actions {

src/components/status.jsx

@@ -10,6 +10,7 @@ import Loader from '../components/loader';
 import Modal from '../components/modal';
 import NameText from '../components/name-text';
 import enhanceContent from '../utils/enhance-content';
+import htmlContentLength from '../utils/html-content-length';
 import shortenNumber from '../utils/shorten-number';
 import states from '../utils/states';
 import store from '../utils/store';
@@ -695,6 +696,14 @@ function Status({
           class={`content-container ${
             sensitive || spoilerText ? 'has-spoiler' : ''
           } ${showSpoiler ? 'show-spoiler' : ''}`}
+          style={
+            size === 'l' && {
+              '--content-text-weight':
+                Math.round(
+                  (spoilerText.length + htmlContentLength(content)) / 140,
+                ) || 1,
+            }
+          }
         >
           {!!spoilerText && sensitive && (
             <>

src/utils/html-content-length.js

@@ -0,0 +1,5 @@
+const div = document.createElement('div');
+export default (html) => {
+  div.innerHTML = html;
+  return div.innerText.length;
+};