style for github pages

jeevasusej · jeevasusej · commit b7dd9b75e678 · 2025-06-15T11:40:50.000+05:30
diff --git a/docs/index.html b/docs/index.html
@@ -5,23 +5,104 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>ValueMapper</title>
   <style>
-    body { font-family: sans-serif; max-width: 800px; margin: 2rem auto; padding: 1rem; line-height: 1.6; }
-    header { display: flex; justify-content: space-between; align-items: center; }
-    button {
-      background-color: #24292e;
-      color: white;
-      border: none;
-      padding: 0.5rem 1rem;
-      cursor: pointer;
-      border-radius: 4px;
-    }
-    pre {
-      background: #f4f4f4;
-      padding: 0.5rem;
-      overflow-x: auto;
-    }
-    code { background: #f4f4f4; }
-  </style>
+  body {
+    font-family: 'Segoe UI', Roboto, sans-serif;
+    line-height: 1.6;
+    max-width: 960px;
+    margin: 2rem auto;
+    padding: 1rem;
+    background: #f9f9f9;
+    color: #222;
+  }
+
+  h1, h2, h3, h4 {
+    color: #1a202c;
+    margin-top: 2rem;
+  }
+
+  a {
+    color: #0366d6;
+    text-decoration: none;
+  }
+
+  a:hover {
+    text-decoration: underline;
+  }
+
+  pre {
+    background: #2d2d2d;
+    color: #f8f8f2;
+    padding: 1rem;
+    border-radius: 6px;
+    overflow-x: auto;
+  }
+
+  code {
+    font-family: 'Fira Code', monospace;
+    font-size: 0.95em;
+    background: #f0f0f0;
+    padding: 0.2em 0.4em;
+    border-radius: 4px;
+  }
+
+  table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 1rem;
+    margin-bottom: 2rem;
+    background: white;
+    border: 1px solid #ccc;
+    border-radius: 6px;
+    overflow: hidden;
+  }
+
+  table thead {
+    background: #4a5568;
+    color: #fff;
+  }
+
+  table th, table td {
+    padding: 0.75rem 1rem;
+    border: 1px solid #ddd;
+    text-align: left;
+    vertical-align: middle;
+  }
+
+  table tbody tr:nth-child(even) {
+    background: #f7fafc;
+  }
+
+  ul, ol {
+    margin-left: 2rem;
+  }
+
+  li {
+    margin-bottom: 0.5rem;
+  }
+
+  .button-link {
+    display: inline-block;
+    background-color: #24292e;
+    color: white;
+    padding: 0.5rem 1rem;
+    text-decoration: none;
+    border-radius: 4px;
+    font-weight: bold;
+    margin-top: 1rem;
+  }
+
+  .button-link:hover {
+    background-color: #444c56;
+  }
+
+  .container {
+    padding: 2rem;
+    background: white;
+    border-radius: 10px;
+    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+  }
+</style>
+
 </head>
 <body>
   <header>
