Scale text inscriptions to fit preview (ordinals#1222)

casey · Jan 16, 2023 · 0926da1 · 0926da1
1 parent b585240
commit 0926da1
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 1 deletion.
diff --git a/src/templates/iframe.rs b/src/templates/iframe.rs
@@ -46,7 +46,7 @@ mod tests {
  use super::*;
 
  #[test]
- fn preview() {
+ fn thumbnail() {
  assert_regex_match!(
  Iframe::thumbnail(inscription_id(1))
  .0.to_string(),

diff --git a/static/preview-text.css b/static/preview-text.css
@@ -1,8 +1,28 @@
 html {
  background-color: #131516;
  color: white;
+ font-size: 16px;
+ height: 100%;
+ line-height: 1;
 }
 
 body {
+ display: grid;
+ grid-template: 1fr / 1fr;
+ height: 100%;
  margin: 0;
+ place-items: center;
+}
+
+pre {
+ margin: 0;
+}
+
+body > * {
+ grid-column: 1 / 1;
+ grid-row: 1 / 1;
+}
+
+body > pre {
+ opacity: 0;
 }
diff --git a/static/preview-text.js b/static/preview-text.js
@@ -0,0 +1,6 @@
+let pre = document.querySelector('body > pre');
+let { width, height } = pre.getBoundingClientRect();
+let columns = width / 16;
+let rows = height / 16;
+pre.style.fontSize = `min(${95/columns}vw, ${95/rows}vh)`;
+pre.style.opacity = 1;
diff --git a/templates/preview-text.html b/templates/preview-text.html
@@ -4,8 +4,12 @@
  <meta charset=utf-8>
  <meta name=format-detection content='telephone=no'>
  <link href=/static/preview-text.css rel=stylesheet>
+ <script src=/static/preview-text.js defer></script>
  </head>
  <body>
  <pre>{{self.text}}</pre>
+ <noscript>
+ <pre>{{self.text}}</pre>
+ </noscript>
  </body>
 </html>