Add responsive elements visibility and individual hyphenation

1 files changed, 69 insertions, 60 deletions

diff --git a/src/main.rs b/src/main.rs
index 5882335..5879f83 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -25,13 +25,13 @@ impl page::Page for Data {
         let last_story = self.stories.first();
         html!(
             @if let Some(story) = last_story {
-                div class="latest-story" {
-                    h2 { "Latest Story" }
+                div class="latest-story" lang=(story.html_lang_value()) {
+                    h2 lang="en" { "Latest Story" }
                     h3 {
                         (story.name)
                     }
                     p { (story.description) }
-                    ul {
+                    ul lang="en" {
                         li { "Language: " (story.language) }
                         li {
                             a href=(&story.format_pdf_path()) download
@@ -49,40 +49,41 @@ impl page::Page for Data {
     fn content_style() -> Markup {
         html!(
         """
-            h2 {
-                font-size: 2.5rem;
-                color: #2F3C57;
-                text-decoration: 0.1rem solid underline black;
-            }
+h2 {
+    font-size: 2.5rem;
+    color: #2F3C57;
+    text-decoration: 0.1rem solid underline black;
+}
 
-            h3 {
-                font-size: 1.8rem;
-                color: #2F3C57;
-                padding: 2rem 0;
-            }
+h3 {
+    font-size: 1.8rem;
+    color: #2F3C57;
+    padding: 2rem 0;
+}
 
-            .latest-story {
-                padding: 3rem;
-                margin: 3rem;
-                text-align: left;
-                background-color: #FFD1A3;
-                * {
-                    margin: 1rem 0;
-                }
+.latest-story {
+    padding: 3rem;
+    margin: 3rem;
+    text-align: left;
+    background-color: #FFD1A3;
+    hyphens: auto;
+    * {
+        margin: 1rem 0;
+    }
 
-                p {
-                    font-size: 1.2rem;
-                }
-            }
+    p {
+        font-size: 1.2rem;
+    }
+}
 
-            a {
-                text-decoration: underline;
-                color: #3D1D49;
-            }
+a {
+    text-decoration: underline;
+    color: #3D1D49;
+}
 
-            ul {
-                list-style: none;
-            }
+ul {
+    list-style: none;
+}
 
         """
         )
@@ -129,37 +130,38 @@ hr {
 
 
 .story-card {
-        text-align: left;
-        font-size: 1.2rem;
-        ul {
-            display: flex;
-            justify-content: start;
-            list-style: none;
-            flex-wrap: wrap;
+    text-align: left;
+    font-size: 1.2rem;
+    hyphens: auto;
+    ul {
+        display: flex;
+        justify-content: start;
+        list-style: none;
+        flex-wrap: wrap;
+        
+        li {
+            font-size: 1rem;
+            padding: 0.8rem;
+            margin: 0.8rem;
+            background-color: #2F3C57;
+            color: #ffd1a3;
+            outline: 0.2rem solid #2F3C57;
             
-            li {
-                font-size: 1rem;
-                padding: 0.8rem;
-                margin: 0.8rem;
-                background-color: #2F3C57;
-                color: #ffd1a3;
-                outline: 0.2rem solid #2F3C57;
-                
-                a {
-                    text-decoration: underline #E1CCEB;
-                    color: #E1CCEB;
-                }
+            a {
+                text-decoration: underline #E1CCEB;
+                color: #E1CCEB;
             }
         }
+    }
 
-        hr {
-            margin: 2rem 0;
-        }
-        padding: 3rem;
-        margin: 3rem;
-        background-color: #ffd1a3;
-        border-bottom: 0.1rem dotted black;
+    hr {
+        margin: 2rem 0;
     }
+    padding: 3rem;
+    margin: 3rem;
+    background-color: #ffd1a3;
+    border-bottom: 0.1rem dotted black;
+}
         """
         )
     }
@@ -189,12 +191,12 @@ struct Story {
 
 impl Story {
     fn render_as_card(&self) -> Markup {
-        html!(div class="story-card" {
+        html!(div class="story-card" lang=(self.html_lang_value()) {
             card {
                 h2 { (self.name) }
                 p { (self.description) }
                 hr {}
-                ul {
+                ul lang="en" {
                     li { "Language: " (self.language) }
                     li { "Uploaded on: " (self.upload_date) }
                     @if let Some(update_date) = self.update_date {
@@ -219,6 +221,13 @@ impl Story {
     fn format_local_pdf_path(&self) -> String {
         format!("dist/{}", self.format_pdf_path())
     }
+
+    fn html_lang_value(&self) -> String {
+        match self.language {
+            StoryLanguage::German => String::from("de"),
+            StoryLanguage::English => String::from("en"),
+        }
+    }
 }
 
 fn main() -> Result<()> {