monospace fixes need for relative offsetting

uses gap instead of margins
use ems for percent and size elements
2021-07-09 10:43:19 -07:00 · 2021-07-09 10:43:00 -07:00 · 2021-07-09 10:42:26 -07:00 · 2021-07-09 10:41:18 -07:00
2 changed files with 6 additions and 8 deletions
--- a/src/client/lazy-app/Compress/Results/index.tsx
+++ b/src/client/lazy-app/Compress/Results/index.tsx
@@ -110,7 +110,7 @@ export default class Results extends Component<Props, State> {
              <div class={style.percentOutput}>
                {diff && diff !== 1 && (
                  <span class={style.sizeDirection}>
-                    {diff < 1 ? '↓' : '↑'}
+                    {diff < 1 ? '↓' : '+'}
                  </span>
                )}
                <span class={style.sizeValue}>{percent || 0}</span>
--- a/src/client/lazy-app/Compress/Results/style.css
+++ b/src/client/lazy-app/Compress/Results/style.css
@@ -172,6 +172,8 @@
  display: grid;
  grid-template-columns: auto auto auto;
  line-height: 1;
+  font-size: 2.6rem;
+  gap: 0.2rem;

  @media (min-width: 600px) {
    background: var(--main-theme-color);
@@ -185,19 +187,15 @@
 }

 .size-direction {
-  font-weight: 700;
  align-self: center;
-  font-family: sans-serif;
+  font-family: ui-monospace, monospace;
  opacity: 0.76;
  text-shadow: 0 2px rgba(0, 0, 0, 0.3);
-  font-size: 1.5rem;
-  position: relative;
-  top: 3px;
+  font-size: 0.75em;
 }

 .size-value {
  font-family: 'Roboto Mono Numbers';
-  font-size: 2.6rem;
  text-shadow: 0 2px rgba(0, 0, 0, 0.3);
 }

@@ -206,7 +204,7 @@
  position: relative;
  top: 4px;
  opacity: 0.76;
-  margin-left: 0.2rem;
+  font-size: 0.5em;
 }

 .download {
Author	SHA1	Message	Date
Adam Argyle	b243344f9e	monospace fixes need for relative offsetting	2021-07-09 10:43:19 -07:00
Adam Argyle	e0a852cb9f	uses gap instead of margins	2021-07-09 10:43:00 -07:00
Adam Argyle	7684c8f386	use ems for percent and size elements	2021-07-09 10:42:26 -07:00
Adam Argyle	b5c1c72e65	switch to a + when showing size growth	2021-07-09 10:41:18 -07:00