final touches

6 files changed, 41 insertions, 14 deletions

diff --git a/about.html b/about.html
index c0536e2..138d1e9 100644
--- a/about.html
+++ b/about.html
@@ -13,23 +13,30 @@
             <img class="flex" src="images/pixel-lasso.jpeg" max-width="50%" alt="Pixel art of a cowboy lassoing a dragon.">
             <div class="flex flex2" style="max-width: 500px; color: unset;">
                 <p>
-                This site uses word similarity to score all dragon names in terms of its 
-                "closeness" to the given name. 
-                The dragon name that is the "closest" is the one selected as the user's dragon.</p>
+                    This site uses word similarity to score all dragon names from George R.R. Martin's 
+                    <a href="https://en.wikipedia.org/wiki/Game_of_Thrones" target="_blank">A Song of Ice and Fire</a> 
+                    universe in terms of their "closeness" to the given name. 
+                    The dragon name that is the "closest" is the one selected as the user's dragon.
+                </p>
                 <p>
-                It uses three popular techniques to calculate similarity scores - 
-                these are the <a href="https://en.wikipedia.org/wiki/Levenshtein_distance" target="_blank">Levenshtein Distance</a>, 
-                <a href="https://en.wikipedia.org/wiki/Cosine_similarity" target="_blank">Cosine Similarity</a>, 
-                and <a href="https://en.wikipedia.org/wiki/Jaccard_index" target="_blank">Jaccard Similarity</a>.
+                    It uses three popular techniques in 
+                    <a href="https://en.wikipedia.org/wiki/Natural_language_processing" target="_blank">NLP</a>
+                    to calculate similarity scores - these are the 
+                    <a href="https://en.wikipedia.org/wiki/Levenshtein_distance" target="_blank">Levenshtein Distance</a>, 
+                    <a href="https://en.wikipedia.org/wiki/Cosine_similarity" target="_blank">Cosine Similarity</a>, 
+                    and <a href="https://en.wikipedia.org/wiki/Jaccard_index" target="_blank">Jaccard Similarity</a>.
                 </p>
                 <p>
-                The final result shown to the user uses cosine similarity only,
-                but top ranking dragons from each of the other two techniques are 
-                also shown as alternatives.
+                    The final result shown to the user uses cosine similarity only,
+                    but top ranking dragons from each of the other two techniques are 
+                    also shown as alternatives.
                 </p>
             </div>
         </div>
-        <a href="index.html">Home</a>
+        <footer>
+            <a href="index.html">Home</a><br>
+            <a href="https://kumardamani.net" target="_blank">Author</a>
+        </footer>
     </center>
 </body>
 </html>
diff --git a/audio/western-cover.m4a b/audio/western-cover.m4a
deleted file mode 100644
index 193a465..0000000
--- a/audio/western-cover.m4a
+++ /dev/null
diff --git a/audio/western-cover.mp3 b/audio/western-cover.mp3
new file mode 100644
index 0000000..c735513
--- /dev/null
+++ b/audio/western-cover.mp3
diff --git a/images/pink-panther-lasso-rope.gif b/images/pink-panther-lasso-rope.gif
deleted file mode 100644
index 538ff06..0000000
--- a/images/pink-panther-lasso-rope.gif
+++ /dev/null
diff --git a/index.html b/index.html
index 785667b..3e445c5 100644
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
     <center>
         <h1>Name my Dragon</h1>
         <audio id="audio-player" loop>
-            <source src="audio/western-cover.m4a" type="audio/mp4">
+            <source src="audio/western-cover.mp3" type="audio/mp3">
             Enable audio on your browser to get the best experience.
         </audio>
         <div class="alert">
@@ -39,7 +39,10 @@
             <p>See a comparison of all the dragons here:</p>
             <img src="images/dragon-sizes.png" width="50%" alt="Comparison chart for all the dragons">
         </div>
-        <a href="about.html">How it works</a>
+        <footer>
+            <a href="about.html">How it works</a><br>
+            <a href="https://kumardamani.net" target="_blank">Author</a>
+        </footer>
     </center>
 
     <script type="text/javascript" src="dragons.js"></script>
diff --git a/style.css b/style.css
index 9445212..9e664c4 100644
--- a/style.css
+++ b/style.css
@@ -3,8 +3,25 @@
   src: url('fonts/gameofthrones.ttf');
 }
 
+html {
+  --s: 60px; /* control the size*/
+  --c1: #b09f79;
+  --c2: #000000;
+  
+  --_g: #0000 83%,var(--c1) 85% 99%,#0000 101%;
+  background:
+    radial-gradient(27% 29% at right ,var(--_g)) calc(var(--s)/ 2) var(--s),
+    radial-gradient(27% 29% at left  ,var(--_g)) calc(var(--s)/-2) var(--s),
+    radial-gradient(29% 27% at top   ,var(--_g)) 0 calc(var(--s)/ 2),
+    radial-gradient(29% 27% at bottom,var(--_g)) 0 calc(var(--s)/-2)
+    var(--c2);
+  background-size: calc(2*var(--s)) calc(2*var(--s));
+}
+
 body {
-    background: #faf0e5
+    background: #faf0e5;
+    opacity: 0.97;
+    padding: 10px;
 }
 
 h1 {