design changes for popup

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>
+                <p id="popup-heo"></p>
-                    <b><span id="popup-e">heonian: </span></b><span id="popup-heo"></span><br>
+                <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.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) {

test.html

@@ -4292,18 +4292,20 @@ fayu
         <div id="popup-container" style="opacity: 0; pointer-events: none;">
             <div id="popup">
                 <h1>um</h1>
-                <div>
+                <p id="popup-heo"></p>
-                    <b><span id="popup-e">heonian: </span></b><span id="popup-heo"></span><br>
+                <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>

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 * {