From edb7bf7c5af673cd1387df132e3ca25405d0b49e Mon Sep 17 00:00:00 2001
From: donkey <84121166+iadonkey@users.noreply.github.com>
Date: Tue, 12 Nov 2024 14:24:09 +0100
Subject: [PATCH] chore: styling

---
 assets/style.css | 117 +++++++++++++++++++++++++++++++++++++----------
 1 file changed, 94 insertions(+), 23 deletions(-)

diff --git a/assets/style.css b/assets/style.css
index dbc9290..9767d81 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -1,66 +1,137 @@
+<style>
 body {
-  font-family: Arial, sans-serif;
+  font-family: 'Arial', sans-serif;
   line-height: 1.6;
-  padding: 20px;
+  padding: 0;
+  margin: 0;
+  background-color: #F4F6F9; 
+  color: #333; 
+  padding-top: 120px;
 }
 
 h1, h2, h3 {
   color: #333;
+  margin: 0;
+  padding-bottom: 10px;
 }
 
 header {
-  background: #f4f4f4;
-  padding: 10px 0;
+  position: fixed; 
+  top: 0;
+  left: 0;
+  width: 100%;
+  background-color: #4A90E2; 
+  color: white;
+  padding: 20px 0;
   text-align: center;
+  z-index: 1000;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); 
 }
 
-footer {
-  text-align: center;
-  margin-top: 20px;
+header h1 {
+  font-size: 2.5rem;
+  margin: 0;
 }
 
-input[type="text"] {
-  width: 100%;
-  padding: 10px;
+
+#search {
+  position: fixed; 
+  top: 120px; 
+  left: 20px; 
+  width: calc(100% - 40px); 
+  padding: 12px 15px;
   margin-bottom: 20px;
   border: 1px solid #ccc;
-  border-radius: 4px;
+  border-radius: 6px;
+  font-size: 1rem;
+  background-color: #fff;
+  transition: border-color 0.3s ease, box-shadow 0.3s ease;
+  z-index: 999; 
+}
+
+#search:focus {
+  border-color: #4A90E2;
+  box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
+  outline: none;
+}
+
+footer {
+  text-align: center;
+  margin-top: 20px;
+  font-size: 0.875rem;
+  color: #6c757d; 
 }
 
 table {
   width: 100%;
   border-collapse: collapse;
-  border: 1px;
+  margin-top: 75px;
+  margin-bottom: 20px;
 }
 
-th,
-td {
-  padding: 10px;
+th, td {
+  padding: 15px;
   text-align: left;
   border-bottom: 1px solid #ddd;
+  transition: background-color 0.3s ease;
 }
 
 th {
-  background-color: #007BFF;
+  background-color: #4A90E2; 
   color: white;
+  text-transform: uppercase;
 }
 
-td:first-child, th:first-child {
+td {
+  background-color: #ffffff; 
+}
+
+td:first-child {
+  font-weight: bold;
+  position: sticky;
+  left: 0;
+  background-color: #F4F6F9; 
+  z-index: 2;
+}
+  
+th:first-child {
   font-weight: bold;
   position: sticky;
   left: 0;
-  background-color: #f9f9f9;
-  z-index: 1;
+  z-index: 2;
 }
 
+
 table tr:hover {
-  background-color: #f1f1f1;
+  background-color: #E1F5FE; 
 }
 
 table td:hover {
-  background-color: #f1f1f1;
+  background-color: #f9f9f9; 
 }
 
-table tr:hover td:hover {
-  background-color: #e0e0e0;
+
+@media (max-width: 768px) {
+  table, thead, tbody, th, td, tr {
+    display: block;
+  }
+
+  th, td {
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  td {
+    border: none;
+    position: relative;
+    padding-left: 50%;
+  }
+
+  td::before {
+    content: attr(data-label);
+    position: absolute;
+    left: 10px;
+    font-weight: bold;
+  }
 }
+</style>