fix json + work on search page

main.css

@@ -21,9 +21,11 @@
 @keyframes not-cheating {
     0% {
         opacity: 0;
+        transform: translateY(-20px);
     }
     100% {
         opacity: 1;
+        transform: translateY(0);
     }
 }
 
@@ -60,8 +62,10 @@ header {
     justify-content: space-around;
     align-items: center;
     flex-flow: row wrap;
-    padding-bottom: 8px;
+    padding-bottom: 4px; padding-top: 4px;
     border-bottom: 1px solid var(--grey);
+    max-width: 1000px;
+    margin: auto;
 }
 
 header * {
@@ -115,8 +119,9 @@ header.fullscreen {
     height: 100%;
     flex-flow: column;
     justify-content: center;
-    padding-bottom: 0px;
+    padding-bottom: 0px; padding-top: 0px;
     border-bottom: none;
+    max-width: unset;
 }
 
 header.fullscreen span.heonian {
@@ -138,6 +143,9 @@ header.fullscreen #search {
 
 main {
     opacity: 0;
+    max-width: 600px;
+    margin: auto;
+    margin-top: 1rem;
 }
 
 .main-animation {
@@ -148,9 +156,49 @@ main {
     animation: not-cheating 0.5s ease-in-out reverse;
 }
 
+.capitalize {
+    text-transform: capitalize;
+}
+
+.result {
+    padding-bottom: 8px;
+    padding-top: 24px;
+    border-bottom: 1px solid var(--darkgrey);
+}
+
+.result-meaning {
+    padding-bottom: 8px;
+}
+
+.result .result-meaning:last-child {
+    padding-bottom: 0px;
+}
+
 .result-header {
     font-family: var(--font-h);
-    font-size: 2rem;
+    font-size: 2.5rem;
+}
+
+.result-number {
+    color: var(--darkgrey);
+    font-size: 1.25rem;
+}
+
+.result-big {
+    font-size: 1.25rem;
+}
+
+.result-number::after {
+    content: ". ";
+}
+
+.result summary {
+    color: grey;
+}
+
+.result details p {
+    margin-top: 4px;
+    margin-bottom: 4px;
 }
 
 /* todo. organize this file better. this is a fucking mess */

main.js

@@ -120,10 +120,14 @@ function heonianToRoman(text) {
         let h = text.codePointAt(i);
         if (h >= 57344 && h <= 57606) {
             h = text.codePointAt(i).toString(16).split("");
-            if (h[1] == 0 && h[2] == 0) {
+            if (h[1] == 0 && h[2] == 0) { //if vowel
                 roman += heonianVowelsSeparate[h[3]];
-            } else {
-                roman += heonianConsonants[h[1] + "" + h[2]] + heonianVowels[h[3] - 1];
+            } else { //if consonant
+                if (h[1] == 0 && h[2] == 6 && h[3] == 1) {
+                    roman += "n";
+                } else {
+                    roman += heonianConsonants[h[1] + "" + h[2]] + heonianVowels[h[3] - 1];
+                }
             }
         } else {
             roman += text.charAt(i);
@@ -193,7 +197,8 @@ function doSearch() {
         [words - 420 found / expressions - 69 found / wahtever else - ygettheidea] (click one to filter to just those)
         */
         for (let i = 0; i < results.length; i++) {
-            let div = document.createElement("div");
+            let result = document.createElement("div");
+            result.classList.add("result");
 
             // 1. add word in heo + romanized ruby as header
             let header = document.createElement("ruby");
@@ -213,14 +218,31 @@ function doSearch() {
                 and. source/who made it/etc
                 repeat for all meanings of word,
             */
-            div.appendChild(header);
+            result.appendChild(header);
             for (let o = 0; o < json[results[i]].length; o++) {
-                let div2 = document.createElement("div");
-                div2.classList.add("result-meaning");
-                div2.innerHTML = json[results[i]][o]["meaning"];
-                div.appendChild(div2); //y, yeah.
+                let meaning = document.createElement("div");
+                meaning.classList.add("result-meaning");
+                //ripping off jisho: Bold, word type (*required)
+                meaning.innerHTML += "<b class='capitalize'>"+json[results[i]][o]["type"]+"</b>";
+                //number, meaning (*required)
+                meaning.innerHTML += "<br><span class='result-number'>"+(o+1)+"</span><span class='result-big'>"+json[results[i]][o]["meaning"]+"</span>";
+                //longer translation (below are not required, make sure to check for them)
+                if (json[results[i]][o]["translation"] != undefined) {
+                    meaning.innerHTML += "<br><details><summary>Translation</summary><p>"+json[results[i]][o]["translation"]+"</p></details>";
+                }
+                //example
+                if (json[results[i]][o]["example"] != undefined) {
+                    //todo
+                }
+                //notes
+                if (json[results[i]][o]["notes"] != undefined) {
+                    meaning.innerHTML += "<br><p class='result-notes'>"+json[results[i]][o]["notes"]+"</p>";
+                }
+                //(source, etc)
+                //todo
+                result.appendChild(meaning); //y, yeah.
             }
-            main.appendChild(div);
+            main.appendChild(result);
         }
     }
 }

wordlist.json

@@ -154,7 +154,7 @@
             "type": "verb",
             "meaning": "To have an inclination or preference",
             "translation": "To like"
-        }
+        },
         {
             "type": "verb",
             "meaning": "To find pleasant or attractive, to enjoy",