Up-in-the-Air – commitdiff

Clone
You can use Git to clone the repository via the web URL. Download snapshot (zip)
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 3ba20c0)
Get rid of font-size-adjust CSS (not quite there yet cross-browser)
authorJulian Fietkau <git@fietkau.software>
Sun, 29 Sep 2024 16:59:26 +0000 (18:59 +0200)
committerJulian Fietkau <git@fietkau.software>
Sun, 29 Sep 2024 16:59:26 +0000 (18:59 +0200)
index.html patch | blob | history
main.js patch | blob | history

diff --git a/index.html b/index.html
index fa3e03b0a7b9a550b3a2cfafa5ba5a8b808866c1..d57bad92361d1145738631bdf518d311e5a66c1d 100644 (file)
--- a/index.html
+++ b/index.html
@@ -75,7 +75,6 @@
     width: min(calc(100cqh - 2 * var(--game-margin)), calc(100cqw));
     aspect-ratio: 1 / 1;
     background: #fff;
-    font-size-adjust: 0.4;
     image-rendering: pixelated;
     box-shadow: 1px 1px 3px #000a;
     overflow: hidden;
@@ -143,12 +142,15 @@
   }
   .game-upintheair .ui-container.font-atkinson * {
     font-family: 'Atkinson Hyperlegible' !important;
-    font-size-adjust: 0.45;
+  }
+  .game-upintheair .ui-container.font-atkinson > .ui-page {
+    font-size: .9em;
   }
   .game-upintheair .ui-container.font-opendyslexic * {
     font-family: 'OpenDyslexic' !important;
-    font-size-adjust: 0.4;
-    line-height: 1.0;
+  }
+  .game-upintheair .ui-container.font-opendyslexic > .ui-page {
+    font-size: .8em;
   }
   .virtual-input-widget.touchpad {
     display: block;
@@ -214,7 +216,6 @@
     padding: 0;
     font-family: Cookie;
     font-size: 3em;
-    font-size-adjust: 0.12;
     text-shadow: -.05em -.05em 0 #fff, .05em -.05em 0 #fff, .05em .05em 0 #fff, -.05em .05em 0 #fff, 0 -.07em 0 #fff, .07em 0 0 #fff, 0 .07em 0 #fff, -.07em 0 0 #fff;
   }
   .ui-page .area {
@@ -287,6 +288,8 @@
   .ui-page.controls p {
     margin: .15em auto;
     max-width: 23em;
+    font-size: .8em;
+    line-height: 1.2;
   }
   .ui-page.controls p:last-child {
     font-size: .85;
@@ -432,11 +435,14 @@
     line-height: 1em;
     appearance: none;
     background: #f4f09a;
-    border: .5em outset #888;
+    border: .4em outset #fffcbf;
     border-radius: 1em;
     border-image: url('textures/button-standard.png') 20 / .75em round;
     border-image-outset: .2em;
   }
+  .font-opendyslexic .ui-page > button, .font-opendyslexic .ui-page.outro .area button {
+    min-width: 10em;
+  }
   .ui-page > button:hover, .ui-page.outro .area button:hover {
     background: #e9ce8a;
     border-image-source: url('textures/button-hover.png');
@@ -472,12 +478,11 @@
   .ui-page.gameplay p {
     position: absolute;
     font-family: 'Cookie';
-    font-size: 1em;
-    text-shadow: -.15em -.15em 0 #fff, .15em -.15em 0 #fff, .15em .15em 0 #fff, -.15em .15em 0 #fff, 0 -.19em 0 #fff, .19em 0 0 #fff, 0 .19em 0 #fff, -.19em 0 0 #fff;
+    font-size: 3em;
+    text-shadow: -.05em -.05em 0 #fff, .05em -.05em 0 #fff, .05em .05em 0 #fff, -.05em .05em 0 #fff, 0 -.07em 0 #fff, .07em 0 0 #fff, 0 .07em 0 #fff, -.07em 0 0 #fff;
   }
-  .font-atkinson .ui-page.gameplay p, .font-opendyslexic .ui-page.gameplay p {
-    font-size-adjust: 1;
-    line-height: 2.5;
+  .font-opendyslexic .ui-page.gameplay p {
+    font-size: 2.4em;
   }
   .ui-page.credits {
     padding: 1em;
@@ -506,7 +511,7 @@
   }
   .ui-page.options .areatabs button {
     appearance: none;
-    width: 8em;
+    width: 10em;
     padding: .5em;
     border: none;
     border-radius: 1em 1em 0 0;
@@ -577,15 +582,12 @@
   }
   .ui-page.options label.standardfont {
     font-family: 'Nihonium113' !important;
-    font-size-adjust: 0.45;
   }
   .ui-page.options label.atkinson {
     font-family: 'Atkinson Hyperlegible' !important;
-    font-size-adjust: 0.45;
   }
   .ui-page.options label.opendyslexic {
     font-family: OpenDyslexic !important;
-    font-size-adjust: 0.4;
   }
   .ui-page.options div.difficulty p:nth-child(4) {
     margin-top: 1ex;
@@ -691,23 +693,13 @@
   .ui-page.outro .area div.examples {
     box-sizing: border-box;
     width: 100%;
-    border-radius: 1em;
-    padding: 2em;
+    border-radius: .4em;
+    padding: .6em;
     background: #ece3d5;
     display: flex;
     flex-direction: column;
-    gap: 1.5em;
     color: #000;
     font-family: Cookie;
-    font-size: .3em;
-    line-height: 3em;
-  }
-  .font-atkinson .ui-page.outro .area div.examples,
-  .font-opendyslexic .ui-page.outro .area div.examples {
-    padding: .5em;
-    gap: 0.5em;
-    font-size: 1em;
-    line-height: 1em;
   }
   .font-opendyslexic .ui-page.outro .area > p {
     font-size: 0.9em;
diff --git a/main.js b/main.js
index 5a0aef70b593de786fbb4938c88782d5a3f0719c..71fb04100d4e7537944caa7304ff2c534cf0712c 100644 (file)
--- a/main.js
+++ b/main.js
@@ -777,8 +777,8 @@ function animate(game, scene) {
         for(let line of lines) {
           let elem = document.createElement('p');
           elem.innerText = line;
-          elem.style.left = (5 + 6 * lines.indexOf(line)) + 'em';
-          elem.style.top = (6 + 4 * lines.indexOf(line)) + 'em';
+          elem.style.left = (1.5 + 2 * lines.indexOf(line)) + 'em';
+          elem.style.top = (1 + 1.2 * lines.indexOf(line)) + 'em';
           elem.style.opacity = '0';
           document.querySelector('.ui-page.gameplay').appendChild(elem);
         }
@@ -1229,7 +1229,7 @@ function applySettings(game) {
     game.ui.root.classList.remove('control-mouse', 'control-touchpad', 'control-thumbstick');
   }
   for(let timeout of [10, 100, 1000]) {
-    setTimeout(() => { game.ui.root.style.fontSize = (game.ui.root.clientWidth / 50) + 'px'; }, timeout);
+    setTimeout(() => { game.ui.root.style.fontSize = (game.ui.root.clientWidth / 48) + 'px'; }, timeout);
   }
   game.settings['graphics'] = parseInt(ui.querySelector('input[name="upInTheAirGame-graphics"]:checked').value, 10);
   if(game.view) {
@@ -2020,9 +2020,9 @@ game.ui.root.querySelectorAll('.ui-page .areatabs button').forEach((btn) => {
     btn.closest('.ui-page').querySelector('div.' + val).style.display = 'flex';
   });
 });
-game.ui.root.style.fontSize = (game.ui.root.clientWidth / 50) + 'px';
+game.ui.root.style.fontSize = (game.ui.root.clientWidth / 48) + 'px';
 window.addEventListener('resize', () => {
-  game.ui.root.style.fontSize = (game.ui.root.clientWidth / 50) + 'px';
+  game.ui.root.style.fontSize = (game.ui.root.clientWidth / 48) + 'px';
 });
 window.addEventListener('scroll', () => {
   if(['gameplay', 'openingcutscene', 'endingcutscene'].includes(game.ui.currentPage)) {