Add responsive elements visibility and individual hyphenation

2 files changed, 119 insertions, 103 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<()> {
diff --git a/src/page.rs b/src/page.rs
index e473c4d..ca6abcc 100644
--- a/src/page.rs
+++ b/src/page.rs
@@ -55,61 +55,68 @@ pub trait Page: Sized {
 
     fn main_style() -> Markup {
         html!("""
-    * {
-        padding: 0;
-        margin: 0;
-    }
+* {
+    padding: 0;
+    margin: 0;
+}
 
-    h1 {
-        padding: 0.3rem;
-        letter-spacing: 0.8rem;
-        font-size: 1.5rem;
-        color: #2F3C57;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        gap: 2rem;
-    }
+h1 {
+    padding: 0.3rem;
+    letter-spacing: 0.8rem;
+    font-size: 1.5rem;
+    color: #2F3C57;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 2rem;
+}
 
-    
-    body {
-        margin: 2rem 1rem;
-        background-color: #ffc994;
-        text-align: center;
-    }
 
-    .navbar {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 0 3rem;
-    }
+body {
+    margin: 2rem 1rem;
+    background-color: #ffc994;
+    text-align: center;
+}
 
-    header {
-        display: flex;
-        align-items: center;
-        a {
-            margin: 0 1rem;
-        }
+.navbar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 3rem;
+}
+
+header {
+    display: flex;
+    align-items: center;
+    a {
+        margin: 0 1rem;
     }
+}
 
-    nav {
-        display: flex;
-        justify-content: space-around;
-        width: 50%;
+nav {
+    display: flex;
+    justify-content: space-around;
+    width: 50%;
 
-        a {
-            text-decoration: none;
-            color: #2F3C57;
+    a {
+        text-decoration: none;
+        color: #2F3C57;
 
-            &amp;:hover {
-                text-decoration: underline;
-            }
+        &amp;:hover {
+            text-decoration: underline;
         }
     }
+}
 
+@media (max-width: 800px) {
+    nav a:first-child {
+        display: none;
+    }
     
-
+    header h1 {
+        display: none;
+    }
+}
     """     
         )
     }