From 4097dd033c31cdbda576428325a6ab08e414b2cd Mon Sep 17 00:00:00 2001
From: b <a>
Date: Tue, 19 Jan 2021 04:53:05 -0600
Subject: [PATCH] Scale text to look better/less eyestrain on mobile

---
 narrow.css | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++
 styles.css | 46 ----------------------------------------------
 wide.css   | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 100 insertions(+), 46 deletions(-)

diff --git a/narrow.css b/narrow.css
index f44cea8..c1674c5 100644
--- a/narrow.css
+++ b/narrow.css
@@ -42,3 +42,53 @@
 .wide-space {
     height: 1em;
 }
+
+.idLabel, .skpLabel, .idDesc, .skpDesc {
+    font-size: 100%;
+}
+
+.title{
+    text-align: center;
+    font-size: 190%;
+}
+.smalltitle{
+    text-align: center;
+    font-size: 155%;
+    margin-top: 10px;
+    margin-bottom: 4px;
+}
+
+.button-narrow {
+    background-color: #666; 
+    border: 2px solid #444;
+    border-radius: 5px;
+    color: #ddd;
+    text-align: center;
+    text-decoration: none;
+    font-family: 'Nunito',sans-serif;
+    font-weight: 700;
+    font-size: 113%;
+    display: inline-block;
+}
+button {
+    background-color: #666; 
+    border: 2px solid #444;
+    border-radius: 5px;
+    color: #ddd;
+    text-align: center;
+    text-decoration: none;
+    font-family: 'Nunito',sans-serif;
+    font-weight: 700;
+    font-size: 150%;
+    display: inline-block;
+}
+button:hover {
+    background-color: #556;
+}
+
+
+button:active {
+  background-color: #558;
+  box-shadow: 0 3px #666;
+  transform: translateY(1px);
+}
diff --git a/styles.css b/styles.css
index 471a5bb..f0bacad 100644
--- a/styles.css
+++ b/styles.css
@@ -33,9 +33,6 @@ div {
 .id-edit1 {
 
 }
-.idLabel, .skpLabel, .idDesc, .skpDesc {
-    font-size: 80%;
-}
 
 .skillpoints {
     padding: 0% 4% 2%;
@@ -66,16 +63,6 @@ div {
 a.link{
     color: #A5FDFF;
 }
-.title{
-    text-align: center;
-    font-size: 150%;
-}
-.smalltitle{
-    text-align: center;
-    font-size: 125%;
-    margin-top: 10px;
-    margin-bottom: 4px;
-}
 .center {
     text-align: center;
     position: relative;
@@ -235,40 +222,7 @@ table.center{
 ::-webkit-scrollbar-corner{
     background: #110110;
 }
-.button-narrow {
-    background-color: #666; 
-    border: 2px solid #444;
-    border-radius: 5px;
-    color: #ddd;
-    text-align: center;
-    text-decoration: none;
-    font-family: 'Nunito',sans-serif;
-    font-weight: 700;
-    font-size: 90%;
-    display: inline-block;
-}
-button {
-    background-color: #666; 
-    border: 2px solid #444;
-    border-radius: 5px;
-    color: #ddd;
-    text-align: center;
-    text-decoration: none;
-    font-family: 'Nunito',sans-serif;
-    font-weight: 700;
-    font-size: 120%;
-    display: inline-block;
-}
-button:hover {
-    background-color: #556;
-}
 
-
-button:active {
-  background-color: #558;
-  box-shadow: 0 3px #666;
-  transform: translateY(1px);
-}
 input {
     background-color: #666; 
     border: 2px solid #444;
diff --git a/wide.css b/wide.css
index 6f9436e..2ace65d 100644
--- a/wide.css
+++ b/wide.css
@@ -56,3 +56,53 @@
 .wide-space {
     height: 8em;
 }
+
+.idLabel, .skpLabel, .idDesc, .skpDesc {
+    font-size: 80%;
+}
+
+.title{
+    text-align: center;
+    font-size: 150%;
+}
+.smalltitle{
+    text-align: center;
+    font-size: 125%;
+    margin-top: 10px;
+    margin-bottom: 4px;
+}
+
+.button-narrow {
+    background-color: #666; 
+    border: 2px solid #444;
+    border-radius: 5px;
+    color: #ddd;
+    text-align: center;
+    text-decoration: none;
+    font-family: 'Nunito',sans-serif;
+    font-weight: 700;
+    font-size: 90%;
+    display: inline-block;
+}
+button {
+    background-color: #666; 
+    border: 2px solid #444;
+    border-radius: 5px;
+    color: #ddd;
+    text-align: center;
+    text-decoration: none;
+    font-family: 'Nunito',sans-serif;
+    font-weight: 700;
+    font-size: 120%;
+    display: inline-block;
+}
+button:hover {
+    background-color: #556;
+}
+
+
+button:active {
+  background-color: #558;
+  box-shadow: 0 3px #666;
+  transform: translateY(1px);
+}