update: web-styling

docs/setup.md → docs/contribute.md

@@ -1,4 +1,4 @@
-# 🚀 Setup the Project
+# How to Contribute? 🚀
 
 Welcome to the **AI-Code** project! Follow these easy steps to get started. Let's build some awesome AI projects together! 😄
 

docs/customs/extra.css

@@ -0,0 +1,49 @@
+body {
+    background-image: url('https://github.com/user-attachments/assets/70330a16-a16d-4228-b389-b1af64c03972');
+}
+
+.md-header,
+.md-footer {
+    background: transparent;
+}
+
+.md-header {
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+}
+
+/* Light Mode Styling */
+[data-md-color-scheme="default"] {
+    --text-color: black;
+    --border-color: #12151e;
+}
+
+[data-md-color-scheme="default"] * {
+    color: var(--text-color);
+}
+
+[data-md-color-scheme="default"] .md-header {
+    border-bottom: 1px solid var(--border-color);
+}
+
+[data-md-color-scheme="default"] .md-footer {
+    border-top: 1px solid var(--border-color);
+}
+
+/* Dark Mode Styling */
+[data-md-color-scheme="slate"] {
+    --text-color: white;
+    --border-color: #53535b;
+}
+
+[data-md-color-scheme="slate"] * {
+    color: var(--text-color);
+}
+
+[data-md-color-scheme="slate"] .md-header {
+    border-bottom: 1px solid var(--border-color);
+}
+
+[data-md-color-scheme="slate"] .md-footer {
+    border-top: 1px solid var(--border-color);
+}

docs/index.md

@@ -1,4 +1,4 @@
-# 👋 Welcome to AI Code 
+# Welcome to AI Code 👋 
 
 <div align="center">
   <p>
@@ -45,6 +45,7 @@ AI-Code is an open-source project designed to help individuals learn and underst
 ### 🛠️ **Tech Stack**
 
 - Python 3.9+
+- Mk Docs (A Python Package)
 - Markdown
 - Git/GitHub
 - VS Code

mkdocs.yml

@@ -1,31 +1,35 @@
 site_name: AI Code
 site_url: https://avdhesh-varshney.github.io/AI-Code/
+
+nav:
+  - 🏠 Home: index.md
+  - 🔷 Algorithms: algorithms/index.md
+  - 🎉 Projects: projects/index.md
+  - 📝 Contribute: contribute.md
+
 theme:
   name: material
   font:
-    text: Merriweather Sans
+    text: IBM Plex Mono
     code: Red Hat Mono
   features:
     - navigation.sections
     - navigation.footer
-    - header.autohide
     - content.code.copy
   palette:
     # Dark Mode
     - scheme: slate
       toggle:
         icon: material/weather-sunny
         name: Dark mode
-      primary: green
-      accent: deep purple
+      accent: blue grey
 
     # Light Mode
     - scheme: default
       toggle:
         icon: material/weather-night
         name: Light mode
-      primary: blue
-      accent: deep orange
+      accent: grey
 
 markdown_extensions:
   - attr_list
@@ -52,11 +56,18 @@ markdown_extensions:
 
 extra:
   social:
-    - icon: simple/youtube
-      link: https://youtube.com/@Code_A2Z
+    - icon: simple/github
+      link: https://github.com/Avdhesh-Varshney
+    - icon: simple/x
+      link: https://twitter.com/__Avdhesh__
     - icon: simple/linkedin
       link: https://linkedin.com/in/avdhesh-varshney/
-    - icon: simple/github
-      link: https://github.com/Avdhesh-Varshney/AI-Code
+    - icon: simple/youtube
+      link: https://youtube.com/@Code_A2Z
+    - icon: simple/discord
+      link: https://discord.gg/tSqtvHUJzE
+
+extra_css:
+  - customs/extra.css
 
 copyright: Copyright © 2024 Avdhesh Varshney