Fix story details wrap + refactor style

2 files changed, 65 insertions, 51 deletions

diff --git a/src/main.rs b/src/main.rs
index ec38670..7ad56c2 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -36,6 +36,56 @@ impl page::Page for Vec<Story> {
         }
         Ok(())
     }
+
+    fn content_style() -> Markup {
+        html!(
+        """
+h2 {
+    font-size: 1.8rem;
+    margin-bottom: 2rem;
+    color: #2F3C57;
+}
+
+hr {
+    margin: 1rem;
+}
+
+
+.story-card {
+        text-align: left;
+        font-size: 1.2rem;
+        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;
+                
+                a {
+                    text-decoration: underline #E1CCEB;
+                    color: #E1CCEB;
+                }
+            }
+        }
+
+        hr {
+            margin: 2rem 0;
+        }
+        padding: 3rem;
+        margin: 3rem;
+        background-color: #ffd1a3;
+        border-bottom: 0.1rem dotted black;
+    }
+        """
+        )
+    }
 }
 
 #[derive(Deserialize, Debug)]
diff --git a/src/page.rs b/src/page.rs
index e05f2e2..ed2e0a5 100644
--- a/src/page.rs
+++ b/src/page.rs
@@ -36,11 +36,9 @@ pub trait Page: Sized {
         )
     }
 
-    fn style() -> Markup {
-        html!(
-            style {
-                """
-* {
+    fn main_style() -> Markup {
+        html!("""
+    * {
         padding: 0;
         margin: 0;
     }
@@ -56,28 +54,13 @@ pub trait Page: Sized {
         gap: 2rem;
     }
 
-    h2 {
-        font-size: 1.8rem;
-        margin-bottom: 2rem;
-        color: #2F3C57;
-    }
-
-
+    
     body {
         margin: 2rem 1rem;
         background-color: #ffc994;
         text-align: center;
     }
 
-    hr {
-        margin: 1rem;
-    }
-
-    img {
-        max-width: 3rem;
-        max-height: 3rem;
-    }
-
     .navbar {
         display: flex;
         justify-content: space-between;
@@ -100,38 +83,19 @@ pub trait Page: Sized {
         }
     }
 
-    .story-card {
-        text-align: left;
-        font-size: 1.2rem;
-        ul {
-            display: flex;
-            justify-content: start;
-            list-style: none;
-            
-            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;
-                }
-            }
-        }
+    """     
+        )
+    }
 
-        hr {
-            margin: 2rem 0;
-        }
-        padding: 3rem;
-        margin: 3rem;
-        background-color: #ffd1a3;
-        border-bottom: 0.1rem dotted black;
+    fn content_style() -> Markup {
+        html!("")
     }
-"""
+
+    fn style() -> Markup {
+        html!(
+            style {
+                (Self::main_style())
+                (Self::content_style())
             }
         )
     }