feat: article demo

gruvbox-light.css

@@ -0,0 +1,85 @@
+/* Gruvbox Material Light theme for Highlight.js */
+pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em;
+}
+
+code.hljs {
+  padding: 3px 5px;
+}
+
+.hljs {
+  background: #fbf1c7; /* Gruvbox Material Light bg */
+  color: #3c3836; /* Gruvbox Material Light fg */
+}
+
+.hljs-comment {
+  color: #928374; /* Gruvbox Material Light comment */
+}
+
+.hljs-punctuation,
+.hljs-tag {
+  color: #3c3836;
+}
+
+.hljs-tag .hljs-attr,
+.hljs-tag .hljs-name,
+.hljs-attribute,
+.hljs-doctag,
+.hljs-keyword,
+.hljs-meta .hljs-keyword,
+.hljs-name,
+.hljs-selector-tag {
+  color: #d79921; /* Gruvbox Material Light orange */
+}
+
+.hljs-deletion,
+.hljs-number,
+.hljs-quote,
+.hljs-selector-class,
+.hljs-selector-id,
+.hljs-string,
+.hljs-template-tag,
+.hljs-type {
+  color: #cc241d; /* Gruvbox Material Light red */
+}
+
+.hljs-section,
+.hljs-title {
+  color: #689d6a; /* Gruvbox Material Light green */
+}
+
+.hljs-link,
+.hljs-operator,
+.hljs-regexp,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-symbol,
+.hljs-template-variable,
+.hljs-variable {
+  color: #689d6a; /* Gruvbox Material Light green */
+}
+
+.hljs-literal {
+  color: #d3869b; /* Gruvbox Material Light pink */
+}
+
+.hljs-addition,
+.hljs-built_in,
+.hljs-bullet,
+.hljs-code {
+  color: #98971a; /* Gruvbox Material Light yellow */
+}
+
+.hljs-meta {
+  color: #689d6a; /* Gruvbox Material Light green */
+}
+
+.hljs-meta .hljs-string {
+  color: #b8bb26; /* Gruvbox Material Light green */
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}