make the hint stand out (one letter)

README.md

@@ -100,6 +100,8 @@ If you like the tool and wish it developed further with more functions and easie
   ✅ Fixed incorrect display of Soul orbs amount for early HK save file versions (like 1.0.0.6).  
 
   — **Hints** changes:  
+  ✅ change: Made the Hints section stand out more from the rest of the tool.  
+  ✅ change: Re-phrased all clues.  
   ✅ change: Rearranged the sequence of the clues. More emphasis on gradually increasing difficulty (magic words: Watcher Knights).  
 
   — **Grimm Troupe Content Pack** changes:  

build/app.js

@@ -5380,7 +5380,7 @@ function GenerateInnerHTML(db) {
 
       case "hints":
         obj.b = ["", ""];
-        obj.span = ["<span>", "</span>"];
+        obj.span = ["<span class='hint'>", "</span>"];
         obj.icon = "";
         obj.textPrefix = "";
         obj.div = div;

build/main.css

@@ -217,6 +217,7 @@ h2 {
     text-align: center;
     margin: 0.6rem 0;
     color: rgba(231, 251, 255, 0.6);
+    font-weight: 700;
 }
 
 h6 {
@@ -235,6 +236,13 @@ h6 {
     margin: 1.3rem;
 }
 
+#h2-hk-hints {
+    margin-top: 0;
+    color: rgba(255, 255, 255, 1.0);
+    font-weight: 400;
+    text-align: left;
+}
+
 #save-location-input {
     display: block;
     font-family: 'Consolas', monospace;
@@ -318,6 +326,22 @@ input[type="file"] {
     height: 5.65rem;
 }
 
+.hint {
+    display: block;
+    font-style: italic;
+}
+
+.hint::first-letter {
+    position: absolute;
+    float: left;
+    margin-right: 0.6rem;
+    margin-top: 0.2rem;
+    left: 0;
+    top: 0;
+    font-size: 2.7rem;
+    line-height: 1;
+}
+
 .buttons {
     display: flex;
     flex-direction: row;

src/css/style.css

@@ -110,6 +110,7 @@ h2 {
     text-align: center;
     margin: 0.6rem 0;
     color: rgba(231, 251, 255, 0.6);
+    font-weight: 700;
 }
 
 h6 {
@@ -128,6 +129,13 @@ h6 {
     margin: 1.3rem;
 }
 
+#h2-hk-hints {
+    margin-top: 0;
+    color: rgba(255, 255, 255, 1.0);
+    font-weight: 400;
+    text-align: left;
+}
+
 #save-location-input {
     display: block;
     font-family: 'Consolas', monospace;
@@ -211,6 +219,22 @@ input[type="file"] {
     height: 5.65rem;
 }
 
+.hint {
+    display: block;
+    font-style: italic;
+}
+
+.hint::first-letter {
+    position: absolute;
+    float: left;
+    margin-right: 0.6rem;
+    margin-top: 0.2rem;
+    left: 0;
+    top: 0;
+    font-size: 2.7rem;
+    line-height: 1;
+}
+
 .buttons {
     display: flex;
     flex-direction: row;

src/js/page-functions.js

@@ -337,7 +337,7 @@ function GenerateInnerHTML(db) {
 
             case "hints":
                 obj.b = ["", ""];
-                obj.span = ["<span>", "</span>"];
+                obj.span = ["<span class='hint'>", "</span>"];
                 obj.icon = "";
                 obj.textPrefix = "";
                 obj.div = div;