From af2dddb3f1bff693d3ce874991d18647776712ea Mon Sep 17 00:00:00 2001
From: David <133239148+ThatSINEWAVE@users.noreply.github.com>
Date: Sat, 4 May 2024 04:03:11 +0300
Subject: [PATCH] Improved styling

---
 docs/styles/main.css | 352 +++++++++++++++++++++++++------------------
 1 file changed, 203 insertions(+), 149 deletions(-)

diff --git a/docs/styles/main.css b/docs/styles/main.css
index ed56df8..c19e1ff 100644
--- a/docs/styles/main.css
+++ b/docs/styles/main.css
@@ -1,285 +1,339 @@
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
 
 * {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
+ box-sizing: border-box;
+ margin: 0;
+ padding: 0;
 }
 
 body {
-  font-family: 'Poppins', sans-serif;
-  background-color: #1c1c1c;
-  color: #fff;
-  line-height: 1.6;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
+ font-family: 'Poppins', sans-serif;
+ background-color: #121212;
+ color: #fff;
+ line-height: 1.6;
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
 }
 
 header {
-  background-color: #333;
-  padding: 1rem;
+ background-color: #1c1c1c;
+ padding: 1rem;
+ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
 nav {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  max-width: 1200px;
-  margin: 0 auto;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ max-width: 1200px;
+ margin: 0 auto;
 }
 
 .logo {
-  font-size: 1.5rem;
-  font-weight: 600;
-  color: #fff;
-  text-decoration: none;
+ font-size: 1.8rem;
+ font-weight: 600;
+ color: #fff;
+ text-decoration: none;
 }
 
 .nav-links a {
-  color: #fff;
-  text-decoration: none;
-  margin-left: 1rem;
-  transition: color 0.3s ease;
+ color: #ccc;
+ text-decoration: none;
+ margin-left: 1.5rem;
+ transition: color 0.3s ease;
+ font-weight: 500;
+ letter-spacing: 0.5px;
 }
 
 .nav-links a:hover {
-  color: #ccc;
+ color: #fff;
 }
 
 main {
-  max-width: 1200px;
-  margin: 2rem auto;
-  padding: 0 1rem;
-  flex-grow: 1;
+ max-width: 1200px;
+ margin: 2rem auto;
+ padding: 0 1rem;
+ flex-grow: 1;
 }
 
 section {
-  margin-bottom: 3rem;
+ margin-bottom: 4rem;
 }
 
 section h2 {
-  font-size: 2rem;
-  margin-bottom: 1rem;
-  text-align: center;
+ font-size: 2.4rem;
+ margin-bottom: 2rem;
+ text-align: center;
+ color: #ccc;
 }
 
 .box {
-  background-color: #333;
-  border-radius: 8px;
-  padding: 2rem;
-  text-align: center;
+ background-color: #1c1c1c;
+ border-radius: 12px;
+ padding: 3rem;
+ text-align: center;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
 .category-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  grid-gap: 2rem;
+ display: grid;
+ grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
+ grid-gap: 2rem;
 }
 
 .category-card {
-  background-color: #333;
-  border-radius: 8px;
-  padding: 2rem;
-  text-align: center;
-  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  transition: transform 0.3s ease;
+ background-color: #1c1c1c;
+ border-radius: 12px;
+ padding: 2rem;
+ text-align: center;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+ transition: transform 0.3s ease;
 }
 
 .category-card:hover {
-  transform: translateY(-5px);
+ transform: translateY(-8px);
 }
 
 .category-card i {
-  font-size: 3rem;
-  color: #ccc;
-  margin-bottom: 1rem;
+ font-size: 3.5rem;
+ color: #ccc;
+ margin-bottom: 1.5rem;
 }
 
 .category-card h3 {
-  font-size: 1.5rem;
-  margin-bottom: 1rem;
+ font-size: 1.8rem;
+ margin-bottom: 1.2rem;
+ color: #fff;
 }
 
 .category-card p {
-  margin-bottom: 1.5rem;
+ margin-bottom: 1.8rem;
+ color: #aaa;
 }
 
 .category-link {
-  display: inline-block;
-  background-color: #555;
-  color: #fff;
-  text-decoration: none;
-  padding: 0.5rem 1rem;
-  border-radius: 4px;
-  transition: background-color 0.3s ease;
+ display: inline-block;
+ background-color: #333;
+ color: #fff;
+ text-decoration: none;
+ padding: 0.8rem 1.5rem;
+ border-radius: 6px;
+ transition: background-color 0.3s ease;
+ font-weight: 500;
+ letter-spacing: 0.5px;
 }
 
 .category-link:hover {
-  background-color: #777;
+ background-color: #444;
 }
 
 .category-info {
-  text-align: center;
+ text-align: center;
 }
 
 .article-heading {
-  text-align: center;
-  margin-bottom: 2rem;
+ text-align: center;
+ margin-bottom: 2rem;
 }
 
 .category-list {
-  display: grid;
-  grid-template-columns: 1fr;
-  grid-gap: 1rem;
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-gap: 1.5rem;
 }
 
 .article-row {
-  display: flex;
-  justify-content: space-between;
-  background-color: #333;
-  border-radius: 8px;
-  padding: 1rem;
-  margin-bottom: 1rem;
+ display: flex;
+ justify-content: space-between;
+ background-color: #1c1c1c;
+ border-radius: 12px;
+ padding: 1.5rem;
+ margin-bottom: 1.5rem;
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
 
 .article-info {
-  flex-grow: 1;
+ flex-grow: 1;
 }
 
 .article-info h3 {
-  font-size: 1.2rem;
-  margin-bottom: 0.5rem;
+ font-size: 1.4rem;
+ margin-bottom: 0.8rem;
+ color: #fff;
 }
 
 .article-info p {
-  margin-bottom: 0;
+ margin-bottom: 0;
+ color: #aaa;
 }
 
 .article-link {
-  display: inline-block;
-  background-color: #555;
-  color: #fff;
-  text-decoration: none;
-  border-radius: 4px;
-  transition: background-color 0.3s ease;
-  min-width: 150px;
-  height: 40px;
-  text-align: center;
-  line-height: 40px;
-  margin-bottom: 1rem;
+ display: inline-block;
+ background-color: #333;
+ color: #fff;
+ text-decoration: none;
+ border-radius: 6px;
+ transition: background-color 0.3s ease;
+ min-width: 160px;
+ height: 44px;
+ text-align: center;
+ line-height: 44px;
+ margin-bottom: 1rem;
+ font-weight: 500;
+ letter-spacing: 0.5px;
 }
 
 .article-link:hover {
-  background-color: #777;
+ background-color: #444;
 }
 
 .article-content {
-  text-align: center;
+ text-align: center;
 }
 
 .article-content h1 {
-  font-size: 2.5rem;
-  margin-bottom: 1rem;
+ font-size: 3rem;
+ margin-bottom: 1.5rem;
+ color: #ccc;
 }
 
 .github-link {
-  display: inline-block;
-  background-color: #555;
-  color: #fff;
-  text-decoration: none;
-  padding: 0.75rem 1.5rem;
-  border-radius: 4px;
-  transition: background-color 0.3s ease;
-  margin: 2rem auto;
-  display: block;
-  max-width: fit-content;
+ display: inline-block;
+ background-color: #333;
+ color: #fff;
+ text-decoration: none;
+ padding: 1rem 2rem;
+ border-radius: 6px;
+ transition: background-color 0.3s ease;
+ margin: 2rem auto;
+ display: block;
+ max-width: fit-content;
+ font-weight: 500;
+ letter-spacing: 0.5px;
 }
 
 .github-link:hover {
-  background-color: #777;
+ background-color: #444;
 }
 
 .breadcrumb {
-  list-style: none;
-  display: flex;
-  max-width: 1200px;
-  margin: 20px auto 0;
-  padding: 0 1rem 20px;
-  font-size: 0.9rem;
-  color: #aaa;
+ list-style: none;
+ display: flex;
+ max-width: 1200px;
+ margin: 20px auto 0;
+ padding: 0 1rem 20px;
+ font-size: 0.9rem;
+ color: #aaa;
 }
 
 .breadcrumb-item {
-  margin-right: 0.5rem;
+ margin-right: 0.5rem;
 }
 
 .breadcrumb-item:not(:last-child)::after {
-  content: ">";
-  margin-left: 0.5rem;
-  color: #777;
+ content: ">";
+ margin-left: 0.5rem;
+ color: #777;
 }
 
 .breadcrumb-item a {
-  color: #aaa;
-  text-decoration: none;
-  transition: color 0.3s ease;
+ color: #aaa;
+ text-decoration: none;
+ transition: color 0.3s ease;
 }
 
 .breadcrumb-item a:hover {
-  color: #ccc;
+ color: #ccc;
 }
 
 .breadcrumb-item.active {
-  color: #fff;
-  font-weight: 600;
+ color: #fff;
+ font-weight: 600;
 }
 
 main {
-  max-width: 1200px;
-  margin: 0 auto;
-  padding: 0 1rem;
-  flex-grow: 1;
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 1rem;
+ flex-grow: 1;
 }
 
 footer {
-  background-color: #333;
-  padding: 1rem;
-  text-align: center;
-  color: #999;
-  margin-top: 1rem;
+ background-color: #1c1c1c;
+ padding: 1rem;
+ text-align: center;
+ color: #999;
+ margin-top: 1rem;
+ box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
 }
 
 ::-webkit-scrollbar {
-  width: 12px;
-  height: 12px;
+ width: 12px;
+ height: 12px;
 }
 
 ::-webkit-scrollbar-track {
-  background-color: #222222;
+ background-color: #121212;
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: #555;
-  border-radius: 6px;
+ background-color: #555;
+ border-radius: 6px;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: #666;
+ background-color: #666;
 }
 
 @media (max-width: 768px) {
-  .category-list {
-    grid-template-columns: 1fr;
-  }
-
-  .article-row {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-
-  .article-info {
-    margin-bottom: 1rem;
-    margin-right: 0;
-  }
+ .category-list {
+   grid-template-columns: 1fr;
+ }
+
+ .article-row {
+   flex-direction: column;
+   align-items: flex-start;
+ }
+
+ .article-info {
+   margin-bottom: 1.5rem;
+   margin-right: 0;
+ }
+
+ .article-link {
+   margin-bottom: 0;
+ }
+
+ .category-grid {
+   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+ }
+
+ .category-card {
+   padding: 1.5rem;
+ }
+
+ .category-card h3 {
+   font-size: 1.5rem;
+ }
+
+ .category-card i {
+   font-size: 3rem;
+ }
+
+ .box {
+   padding: 2rem;
+ }
+
+ section h2 {
+   font-size: 2rem;
+ }
+
+ .article-content h1 {
+   font-size: 2.5rem;
+ }
+
+ .nav-links a {
+   margin-left: 1rem;
+ }
 }
\ No newline at end of file