Changes for better readibility of stanzas, and reworked CSS

zalbright90 · Jul 30, 2024 · e8b003d · e8b003d
1 parent 7f4306a
commit e8b003d
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 87 deletions.
diff --git a/huginn.js b/huginn.js
@@ -82,25 +82,37 @@ function updateRunicTranslation() {
 function addRunicFunctionality() {
     const stanzaElement = document.getElementById("stanza");
     const text = stanzaElement.textContent;
+    const words = text.split(/\s+/);
 
     stanzaElement.innerHTML = '';
 
-    for (let i = 0; i < text.length; i++) {
-        const char = text[i];
-        const span = document.createElement('span');
-        span.textContent = char;
+    words.forEach((word, index) => {
+        const wordSpan = document.createElement('span');
+        wordSpan.className = 'word';
 
-        const lowerChar = char.toLowerCase();
-        const currentRune = runeMap[lowerChar];
-
-        if (currentRune) {
-            span.className = 'runic-text';
-            span.setAttribute('data-latin', currentRune);
-            addTouchEventListeners(span);
+        for (let i = 0; i < word.length; i++) {
+            const char = word[i];
+            const span = document.createElement('span');
+            span.textContent = char;
+
+            const lowerChar = char.toLowerCase();
+            const currentRune = runeMap[lowerChar];
+
+            if (currentRune) {
+                span.className = 'runic-text';
+                span.setAttribute('data-latin', currentRune);
+                addTouchEventListeners(span);
+            }
+
+            wordSpan.appendChild(span);
         }
 
-        stanzaElement.appendChild(span);
-    }
+        stanzaElement.appendChild(wordSpan);
+
+        if (index < words.length - 1) {
+            stanzaElement.appendChild(document.createTextNode(' '));
+        }
+    });
 }
 
 function convertToRunes(text) {

diff --git a/index.html b/index.html
@@ -10,6 +10,7 @@
     <link rel="manifest" href="/site.webmanifest">
     <meta name="description" content="Discover daily Havamal stanzas with humorous insights by Huginn. Learn about Norse mythology with a modern twist.">
     <meta name="keywords" content="Havamal, daily Havamal, Norse mythology, Huginn, Muninn, humorous Havamal, Norse poems, stanza, stanzas, Ursula Dronke">
+    <link rel="canonical" href="https://zalbright90.github.io/HavamalStanzas/">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Runic&display=swap" rel="stylesheet">

diff --git a/muninn.css b/muninn.css
@@ -3,6 +3,8 @@ body {
     margin: 0;
     padding: 0;
     background: #000000;
+    color: #5c0101;
+    line-height: 1.6;
 }
 
 .background-container {
@@ -18,6 +20,7 @@ body {
     background-position: center;
     background-repeat: no-repeat;
     backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
     overflow-y: auto;
 }
 
@@ -28,37 +31,41 @@ body {
     padding: 1.25rem;
     margin: 2.25rem auto;
     background-image: url(vellum-75.png);
-    border-radius: 8px;
+    border-radius: 12px;
     width: 90%;
     max-width: 600px;
-    box-shadow: 9px 9px 12px rgba(0, 0, 0, 0.5);
+    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.5);
     flex-grow: 1;
 }
 
 #stanza {
-    font-size: 1.2em;
-    color: rgb(92, 1, 1);
-    cursor: pointer;
+    font-size: 1.4em;
+    color: #5c0101;
     min-height: 100px;
     margin-bottom: 1rem;
-    padding: 9px;
-    hyphens: auto;
+    padding: 15px;
+    cursor: pointer;
+    white-space: pre-wrap;
+    word-break: keep-all;
+    line-height: 1.8;
 }
 
 #runic-translation {
     font-family: "Noto Sans Runic", sans-serif;
     font-weight: 600;
-    font-size: 1.2em;
-    color: rgb(92, 1, 1);
-    margin-top: 1rem;
-    padding: 10px;
-    border-radius: 5px;
+    font-size: 1.4em;
+    color: #5c0101;
+    margin-top: 1.5rem;
+    padding: 15px;
+    border-radius: 8px;
     word-break: break-word;
+    line-height: 1.8;
 }
 
 .runic-text {
     position: relative;
     display: inline-block;
+    margin-right: 2px;
 }
 
 .runic-text::after {
@@ -69,13 +76,14 @@ body {
     transform: translateX(-50%);
     background-color: rgba(0, 0, 0, 0.8);
     color: white;
-    padding: 5px;
-    border-radius: 3px;
+    padding: 5px 10px;
+    border-radius: 4px;
     font-size: 0.8em;
     visibility: hidden;
     opacity: 0;
-    transition: opacity 0.3s;
+    transition: opacity 0.3s, visibility 0.3s;
     white-space: nowrap;
+    z-index: 10;
 }
 
 .runic-text:hover::after,
@@ -85,66 +93,58 @@ body {
 }
 
 #message {
-    display: flex;
-    justify-content: center;
-    color: rgb(100, 8, 8);
-    font: 1.5rem bold;
-    padding: 10px;
+    color: #5c0101;
+    font-size: 1.2rem;
+    padding: 15px;
+    margin-bottom: 1rem;
 }
 
 #info-text {
-    color: rgb(100, 8, 8);
-    font-size: 0.9em;
+    color: #640808;
+    font-size: 1em;
     font-style: italic;
+    margin-bottom: 1rem;
 }
 
 .disclaimer {
     font-size: 0.9em;
     font-style: italic;
     text-align: center;
-    margin: 1rem auto;
+    margin: 1.5rem auto;
     color: #cecece;
     width: 90%;
     max-width: 600px;
 }
 
 h1, h2, h3 {
     font-family: "Noto Sans Runic", sans-serif;
-    margin: -2px auto;
+    margin: 0px auto;
+    color: #5c0101;
 }
 
-h1 {
-    margin-bottom: 0.5rem;
-    color: rgb(92, 1, 1);
-    font-size: 2rem;
-}
+h1 { font-size: 2.5rem; }
 
-h2 {
-    color: rgb(92, 1, 1);
-    font-size: 1.5rem;
-}
-
-h3 {
-    margin-bottom: 0.5rem;
-    color: rgb(92, 1, 1);
-    font-size: 1.2rem;
-}
+h2 { font-size: 2rem; }
+h3 { font-size: 1.5rem; }
 
 .tiktok-container {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     max-width: 340px;
-    margin: 0 auto;
+    margin: 2rem auto;
 }
 
 .tiktok-embed {
     width: 100%;
     max-width: 325px;
-    border-radius: 9px;
+    border-radius: 12px;
     border: 9px ridge rgb(92, 1, 1);
-    box-shadow: 12px 12px 1rem;
+    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
+    overflow: hidden;
+    margin: 0 !important;
+    padding: 0 !important;
 }
 
 .tiktok-embed iframe {
@@ -157,22 +157,23 @@ h3 {
     max-height: 90vh !important; 
 }
 
-.tiktok-embed {
-    margin: 0 !important;
-    padding: 0 !important;
-}
-
 .tiktok-embed::before,
 .tiktok-embed::after {
     display: none !important;
 }
 
+.word {
+    display: inline-block;
+    margin-right: 0.2em;
+}
+
 footer {
-    font-size: 0.6em;
+    font-size: 0.8em;
     color: #cecece;
     text-align: center;
     width: 100%;
-    margin-top: 1rem;
+    margin-top: 2rem;
+    padding: 1rem 0;
 }
 
 @media (max-width: 768px) {
@@ -186,41 +187,28 @@ footer {
         font-size: 1em;
     }
 
-    #info-text {
-        font-size: 0.8em;
-    }
-
-    h1 {
-        font-size: 1.5em;
-    }
-
-    h3 {
-        font-size: 1em;
-    }
-
-    .disclaimer {
-        font-size: 0.7em;
-    }
+    h1 { font-size: 2rem; }
+    h2 { font-size: 1.7rem; }
+    h3 { font-size: 1.3rem; }
 }
 
 @media (max-width: 480px) {
-    .background-container {
-        min-height: 100vh;  
-    }
-
     .container {
         width: 95%;
         padding: 1rem;
     }
 
-    .disclaimer, footer {
-        width: 95%; 
+    #stanza, #runic-translation {
+        font-size: 1em;
     }
 
-    #stanza:hover, #info-text:hover, #runic-translation:hover, #message:hover {
-        /* Disable hover styles */
-        cursor: default;
-        background-color: transparent;
+    h1 { font-size: 1.8rem; }
+    h2 { font-size: 1.5rem; }
+    h3 { font-size: 1.2rem; }
+
+    .disclaimer, footer {
+        width: 95%; 
+        font-size: 0.8em;
     }
 }