Merge branch 'main' into update-csharp-snippet-titles

Author: chaitanya-jvnm

.prettierignore

@@ -1,5 +1,7 @@
 node_modules
 dist
+snippets
+public
 .vite
 coverage
 package-lock.json

public/consolidated/scss.json

@@ -95,6 +95,21 @@
                 "contributors": [],
                 "code": "@mixin aspect-ratio($width, $height) {\n  position: relative;\n  width: 100%;\n  padding-top: ($height / $width) * 100%;\n  > * {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n  }\n}\n"
             },
+            {
+                "title": "Dark Theme",
+                "description": "SCSS mixin to change styles for dark themes.",
+                "author": "gihanrangana",
+                "tags": [
+                    "scss",
+                    "css",
+                    "mixin",
+                    "snippet",
+                    "dark-theme",
+                    "layout"
+                ],
+                "contributors": [],
+                "code": "@mixin isDark($type: 'module') {\n  $root: &;\n\n  @if $type == 'module' {\n    :global {\n      @at-root body[theme='dark'] #{$root} {\n        @content;\n      }\n    }\n  } @else {\n    &[theme='dark'] {\n      @content;\n    }\n  }\n}\n\n// Usage:\n.container{\n\tbackground: #f0f0f0;\n\t@include isDark {\n\t\tbackground: #222;\n\t}\n}\n"
+            },
             {
                 "title": "Flex Center",
                 "description": "A mixin to center content using flexbox.",

snippets/scss/layouts/dark-theme.md

@@ -0,0 +1,32 @@
+---
+title: Dark Theme
+description: SCSS mixin to change styles for dark themes.
+author: gihanrangana
+tags: scss, css, mixin, snippet, dark-theme, layout
+---
+
+```scss
+@mixin isDark($type: 'module') {
+  $root: &;
+
+  @if $type == 'module' {
+    :global {
+      @at-root body[theme='dark'] #{$root} {
+        @content;
+      }
+    }
+  } @else {
+    &[theme='dark'] {
+      @content;
+    }
+  }
+}
+
+// Usage:
+.container{
+	background: #f0f0f0;
+	@include isDark {
+		background: #222;
+	}
+}
+```

src/styles/main.css

@@ -367,7 +367,7 @@ abbr {
 
   position: absolute;
   width: 100%;
-  max-height: 15rem;
+  max-height: 20rem;
   overflow-y: auto;
 
   background-color: var(--clr-bg-secondary);