From 6823641f732563d54e8a71c4fcbd7d47fe24324e Mon Sep 17 00:00:00 2001
From: remi <remilia@remilia.se>
Date: Fri, 6 May 2022 17:07:07 +0200
Subject: [PATCH] design changes for popup

---
 html/pop_up.html  | 10 ++++++----
 main.js           |  3 ---
 test.html         | 10 ++++++----
 text_analysis.css | 31 +++++++++++++++++++++++++++----
 4 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/html/pop_up.html b/html/pop_up.html
index 74cd17d..4f73034 100644
--- a/html/pop_up.html
+++ b/html/pop_up.html
@@ -1,16 +1,18 @@
         <div id="popup-container" style="opacity: 0; pointer-events: none;">
             <div id="popup">
                 <h1>um</h1>
-                <div>
-                    <b><span id="popup-e">heonian: </span></b><span id="popup-heo"></span><br>
+                <p id="popup-heo"></p>
+                <div class="spacer"></div>
+                <div id="popup-middle">
                     <b>type: </b><span id="popup-type"></span><br>
-                    <div id="popup-quirks-container"><b>quirks:</b> <span id="popup-quirks"></span></div>
+                    <div id="popup-quirks-container"><span id="popup-quirks"></span></div>
                 </div>
+                <div class="spacer"></div>
                 <p id="popup-meaning"></p>
             </div>
         </div>
         <div id="smol-popup" style="opacity: 0; pointer-events: none;">
             <h1>um</h1>
             <p id="smol-meaning"></p>
-            <p style="font-size:0.75rem">click for more info!</p>
+            <p>click for more info!</p>
         </div>
\ No newline at end of file
diff --git a/main.js b/main.js
index 665acc8..36d505f 100644
--- a/main.js
+++ b/main.js
@@ -137,12 +137,10 @@ function showPopup(ogword, word, quirks = "") {
         p.querySelector("h1").innerText = words[word]["romanizationProper"];
         p.querySelector("#popup-heo").innerText = words[word]["heonian"];
         p.querySelector("h1").style.fontFamily = "var(--font-normal)";
-        p.querySelector("#popup-e").innerText = "heonian: ";
     } else {
         p.querySelector("h1").innerText = words[word]["heonian"];
         p.querySelector("#popup-heo").innerText = words[word]["romanizationProper"];
         p.querySelector("h1").style.fontFamily = "var(--font-heonian)";
-        p.querySelector("#popup-e").innerText = "romanization: ";
     }
     p.querySelector("#popup-type").innerText = words[word]["type"];
     p.querySelector("#popup-meaning").innerText = words[word]["meaning"];
@@ -161,7 +159,6 @@ function showPopup(ogword, word, quirks = "") {
                     p.querySelector("#popup-meaning").innerText = quirkBadges[quirk]["description"];
                     p.querySelector("#popup-type").innerText = quirkBadges[quirk]["type"];
                     p.querySelector("#popup-quirks-container").style.display = "none";
-                    p.querySelector("#popup-e").innerText = "bending: ";
                     p.querySelector("#popup-heo").innerText = quirkBadges[quirk]["bending"];
                 }
             } catch (e) {
diff --git a/test.html b/test.html
index b47b244..6ffe7f9 100644
--- a/test.html
+++ b/test.html
@@ -4292,18 +4292,20 @@ fayu
         <div id="popup-container" style="opacity: 0; pointer-events: none;">
             <div id="popup">
                 <h1>um</h1>
-                <div>
-                    <b><span id="popup-e">heonian: </span></b><span id="popup-heo"></span><br>
+                <p id="popup-heo"></p>
+                <div class="spacer"></div>
+                <div id="popup-middle">
                     <b>type: </b><span id="popup-type"></span><br>
-                    <div id="popup-quirks-container"><b>quirks:</b> <span id="popup-quirks"></span></div>
+                    <div id="popup-quirks-container"><span id="popup-quirks"></span></div>
                 </div>
+                <div class="spacer"></div>
                 <p id="popup-meaning"></p>
             </div>
         </div>
         <div id="smol-popup" style="opacity: 0; pointer-events: none;">
             <h1>um</h1>
             <p id="smol-meaning"></p>
-            <p style="font-size:0.75rem">click for more info!</p>
+            <p>click for more info!</p>
         </div>
     </main>
     <script src="main.js"></script>
diff --git a/text_analysis.css b/text_analysis.css
index e05811c..4b8758b 100644
--- a/text_analysis.css
+++ b/text_analysis.css
@@ -13,6 +13,7 @@
     --right-color: #61ce61;
     --font-normal: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
     --font-heonian: "heonian", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+    --popup-bg: rgba(255,255,255,0.6);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -24,6 +25,7 @@
         --spacer-color-2: rgba(255, 255, 255, 0.2);
         --left-color: rgb(38,37,40);
         --right-color: #61ce61;
+        --popup-bg: rgba(30,30,30,0.6);
     }
 }
 
@@ -174,7 +176,9 @@ main {
 
 #popup {
     width: 300px;
-    background-color: var(--left-color);
+    background-color: var(--popup-bg);
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
     border-radius: 8px;
     padding: 8px;
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
@@ -183,7 +187,9 @@ main {
 
 #smol-popup {
     width: 200px;
-    background-color: var(--left-color);
+    background-color: var(--popup-bg);
+    -webkit-backdrop-filter: blur(20px);
+    backdrop-filter: blur(20px);
     border-radius: 8px;
     padding: 8px;
     box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
@@ -192,24 +198,41 @@ main {
     left: 0;
     transition: opacity 0.3s;
     text-align: center;
+    /* padding-top: 0px; account for Funny */
 }
 
-#popup h1 {
+#popup h1, #smol-popup h1 {
     text-align: center;
+    margin: 0;
 }
 
-#smol-popup h1 {
+#smol-popup p {
     margin: 0;
 }
 
+#smol-popup p:last-child {
+    font-size: 0.75rem;
+    color: var(--spacer-color);
+    margin-top: 4px;
+}
+
 #popup-heo, #smol-heo {
     font-family: "heonian";
+    text-align: center;
+    margin: 4px;
+    margin-bottom: 8px;
+}
+
+#popup-middle, #popup-meaning {
+    padding: 8px;
+    margin: 0;
 }
 
 #popup-quirks {
     display: flex;
     flex-flow: row wrap;
     justify-content: space-around;
+    margin-top: 8px;
 }
 
 #popup-quirks * {