🎨 Format code

README.md

@@ -41,7 +41,7 @@ npm install svelte-github-calendar
 ## Props
 
 | Prop           | Type       | Default      | Description                              |
-|----------------|------------|--------------|------------------------------------------|
+| -------------- | ---------- | ------------ | ---------------------------------------- |
 | `username`     | `string`   | **Required** | GitHub username to display calendar for  |
 | `summary_text` | `string`   | `undefined`  | Custom summary text template.            |
 | `proxy`        | `function` | `undefined`  | Custom proxy function for API requests   |
@@ -65,6 +65,7 @@ This library is licensed under the MIT License. See the [LICENSE](LICENSE) file
 ## Contributing
 
 Contributions are welcome! Feel free to:
+
 - Report bugs
 - Suggest new features
 - Submit pull requests
@@ -73,5 +74,6 @@ Contributions are welcome! Feel free to:
 ## Troubleshooting
 
 ### Calendar not loading
+
 - Ensure the username is valid and public
 - Verify network connectivity

src/lib/GitHubCalendar.svelte

@@ -22,9 +22,7 @@
 	});
 </script>
 
-<div class={`calendar-holder ${className}`}>
-	<div class="calendar"></div>
-</div>
+<div class={`calendar ${className}`}></div>
 
 <style global>
 	:root {
@@ -35,7 +33,6 @@
 		--color-calendar-graph-day-L4-bg: #0a4208 !important;
 	}
 	:global {
-		.calendar-holder {
 		.ContributionCalendar-day[data-level='0'] {
 			background-color: var(--color-calendar-graph-day-bg) !important;
 		}
@@ -58,6 +55,7 @@
 
 		table.ContributionCalendar-grid {
 			margin-bottom: 0pt !important;
+			border-collapse: separate !important;
 		}
 
 		table.ContributionCalendar-grid td {
@@ -144,6 +142,10 @@
 			font-size: 11px !important;
 		}
 
+		.contrib-column span {
+			color: #000 !important;
+		}
+
 		.contrib-column-first {
 			border-left: 0 !important;
 		}
@@ -191,6 +193,10 @@
 			height: 26px !important;
 		}
 
+		.calendar .text-muted {
+			color: inherit !important;
+		}
+
 		.left.text-muted {
 			float: left !important;
 			margin-left: 9px !important;
@@ -266,5 +272,4 @@
 			}
 		}
 	}
-	}
 </style>

src/routes/+page.svelte

@@ -2,4 +2,6 @@
 	import { GitHubCalendar } from '../lib/index.js';
 </script>
 
+<main>
 	<GitHubCalendar username="Paillat-dev" class="w-full h-auto" />
+</main>