Add responsive elements visibility and individual hyphenation

1 files changed, 50 insertions, 43 deletions

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;
 
-            &:hover {
-                text-decoration: underline;
-            }
+        &:hover {
+            text-decoration: underline;
         }
     }
+}
 
+@media (max-width: 800px) {
+    nav a:first-child {
+        display: none;
+    }
     
-
+    header h1 {
+        display: none;
+    }
+}
     """     
         )
     }