Update stories page look

2 files changed, 58 insertions, 22 deletions

diff --git a/src/main.rs b/src/main.rs
index d7df3f6..b1312ad 100644
--- a/src/main.rs
+++ b/src/main.rs
@@ -57,20 +57,24 @@ struct Story {
 
 impl Story {
     fn render_as_card(self) -> Markup {
-        html!(card {
-            h2 {
-                span { (self.name) }
-            }
-            p { (self.description) } br
-            span { "Language: " (self.language) }
-            span { "Uploaded on: " (self.upload_date) }
-            @if let Some(update_date) = self.update_date {
-                span { "Updated on: " (update_date) }
-            }
-            br {}
-            a href=(&self.format_pdf_path()) download
-            {
-                "PDF"
+        html!(div class="story-card" {
+            card {
+                h2 { (self.name) }
+                p { (self.description) }
+                hr {}
+                ul {
+                    li { "Language: " (self.language) }
+                    li { "Uploaded on: " (self.upload_date) }
+                    @if let Some(update_date) = self.update_date {
+                        li { "Updated on: " (update_date) }
+                    }
+                    li {
+                        a href=(&self.format_pdf_path()) download
+                        {
+                            "PDF"
+                        }
+                    }
+                }
             }
         })
     }
diff --git a/src/page.rs b/src/page.rs
index a849a14..5e1a22e 100644
--- a/src/page.rs
+++ b/src/page.rs
@@ -25,10 +25,10 @@ pub trait Page: Sized {
                     }
                 }
                 nav {
-                    a href="" {
+                    a href="/index.html" {
                         "HOME";
                     }
-                    a href="" {
+                    a href="/stories.html" {
                         "STORIES";
                     }
                 }
@@ -49,7 +49,7 @@ pub trait Page: Sized {
         padding: 0.3rem;
         letter-spacing: 0.8rem;
         font-size: 1.5rem;
-        color: #0d234adb;
+        color: #2F3C57;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -57,9 +57,9 @@ pub trait Page: Sized {
     }
 
     h2 {
-        font-size: 2rem;
+        font-size: 1.8rem;
         margin-bottom: 2rem;
-        color: #0d234adb;
+        color: #2F3C57;
     }
 
 
@@ -92,14 +92,46 @@ pub trait Page: Sized {
 
         a {
             text-decoration: none;
-            color: #0d234adb;
+            color: #2F3C57;
 
-            &:hover {
+            &:hover {
                 text-decoration: underline;
             }
         }
     }
-            """
+
+    .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;
+    }
+"""
             }
         )
     }