added Sidebar using popover and css

.astro/settings.json

@@ -1,5 +1,5 @@
 {
 	"_variables": {
-		"lastUpdateCheck": 1727147326758
+		"lastUpdateCheck": 1732590554459
 	}
 }

abcd.code-workspace

@@ -23,7 +23,8 @@
       "titleBar.activeForeground": "#15202b",
       "titleBar.inactiveBackground": "#33ee4499",
       "titleBar.inactiveForeground": "#15202b99",
-      "sideBar.border": "#62f26f"
+      "sideBar.border": "#62f26f",
+      "tab.activeBorder": "#62f26f"
     },
     "peacock.color": "#33ee44",
     "workbench.colorTheme": "Firefox Dark",
@@ -121,7 +122,7 @@
       "tsconfig.json": "tsconfig.*.json, jsconfig.json",
       "package.json": "package-lock.json",
       ".gitignore": ".prettier*, .editorconfig, .eslint*, .npm*, .nojekyll",
-      "readme.md": "*.md",
+      "README.md": "*.md",
       "astro.config.mjs": "*.config.js, *.config.ts, *.config.mjs"
     },
     "git.enableSmartCommit": true,
@@ -209,6 +210,7 @@
     "editor.stickyScroll.enabled": true,
     "workbench.editor.pinnedTabSizing": "compact",
     "prettier.trailingComma": "none",
-    "editor.inlayHints.enabled": "offUnlessPressed"
+    "editor.inlayHints.enabled": "offUnlessPressed",
+    "typescript.tsdk": "node_modules/typescript/lib"
   }
 }

src/assets/styles/.vscode/settings.json

@@ -0,0 +1,24 @@
+{
+  "workbench.colorCustomizations": {
+    "activityBar.activeBackground": "#bdab3c",
+    "activityBar.background": "#bdab3c",
+    "activityBar.foreground": "#15202b",
+    "activityBar.inactiveForeground": "#15202b99",
+    "activityBarBadge.background": "#e7f7f5",
+    "activityBarBadge.foreground": "#15202b",
+    "commandCenter.border": "#15202b99",
+    "sash.hoverBorder": "#bdab3c",
+    "sideBar.border": "#bdab3c",
+    "statusBar.background": "#968830",
+    "statusBar.foreground": "#15202b",
+    "statusBarItem.hoverBackground": "#6f6524",
+    "statusBarItem.remoteBackground": "#968830",
+    "statusBarItem.remoteForeground": "#15202b",
+    "tab.activeBorder": "#bdab3c",
+    "titleBar.activeBackground": "#968830",
+    "titleBar.activeForeground": "#15202b",
+    "titleBar.inactiveBackground": "#96883099",
+    "titleBar.inactiveForeground": "#15202b99"
+  },
+  "peacock.color": "#968830"
+}

src/assets/styles/dialog.css

@@ -1,3 +1,8 @@
+/* following :root block added by css color collector at 10/17/2024, 9:01:47 PM */
+:root {
+	--dialog__bg--1: rgb(0 0 0 / 0%);
+	--dialog__bg--2: rgb(0 0 0 / 25%);
+}
 dialog[open] {
   opacity: 1;
   transform: scaleY(1);
@@ -28,7 +33,7 @@ dialog {
 
 /* Transition the :backdrop when the dialog modal is promoted to the top layer */
 dialog::backdrop {
-  background-color: rgb(0 0 0 / 0%);
+  background-color: var(--dialog__bg--1);
   transition:
     display 0.7s allow-discrete,
     overlay 0.7s allow-discrete,
@@ -38,14 +43,14 @@ dialog::backdrop {
 }
 
 dialog[open]::backdrop {
-  background-color: rgb(0 0 0 / 25%);
+  background-color: var(--dialog__bg--2);
 }
 
 /* This starting-style rule cannot be nested inside the above selector
 because the nesting selector cannot represent pseudo-elements. */
 
 @starting-style {
   dialog[open]::backdrop {
-    background-color: rgb(0 0 0 / 0%);
+    background-color: var(--dialog__bg--1);
   }
 }

src/assets/styles/global.css

@@ -1,12 +1,11 @@
-:root {
+/*:root {
   --accent: 136, 58, 234;
   --accent-light: 224, 204, 250;
   --accent-dark: 49, 10, 101;
   --accent-gradient: linear-gradient(45deg, rgb(var(--accent)), rgb(var(--accent-light)) 30%, white 60%);
   color-scheme: light dark;
   --text: white;
   --bg: #13151a;
-  /*border color */
   --bc: #deaeaed1;
   --header-h: 6rem;
   --footer-h: 4rem;
@@ -29,6 +28,8 @@ body {
   font-size: 16px;
 }
 
+*/
+
 /* custom fonts */
 @supports font-format(woff2) {
   @font-face {
@@ -96,7 +97,7 @@ header {
 }
 
 a {
-  color: light-dark(#f5f2f2, white);
+  color: light-dark(#151414, white);
 }
 
 h1 {