docs: add expressive code styling and dark mode support

Author: mgcrea

docs/astro.config.mjs

@@ -16,6 +16,9 @@ export default defineConfig({
       },
       plugins: [starlightThemeRapide()],
       customCss: ["./src/styles/custom.css"],
+      expressiveCode: {
+        themes: ["github-dark"],
+      },
       social: [{ icon: "github", label: "GitHub", href: "https://github.com/mgcrea/react-native-tailwind" }],
       sidebar: [
         {

docs/src/styles/custom.css

@@ -1,14 +1,74 @@
 /* Custom theme colors - Blue accent */
-:root {
-  /* Light mode accent colors */
-  --sl-color-accent-low: #1e3a5f;
-  --sl-color-accent: #3b82f6;
-  --sl-color-accent-high: #60a5fa;
-}
-
-/* Dark mode accent colors */
-:root[data-theme="dark"] {
-  --sl-color-accent-low: #1e40af;
-  --sl-color-accent: #3b82f6;
-  --sl-color-accent-high: #93c5fd;
+
+/* Code Block Styling */
+
+/* Code block container */
+.expressive-code {
+  border-radius: 8px;
+  margin: 1.5rem 0;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+/* Code block frame/background */
+.expressive-code .frame {
+  border-radius: 8px;
+}
+
+/* Code font styling */
+.expressive-code code {
+  font-size: 0.875rem;
+  line-height: 1.7;
+  font-family:
+    "SF Mono", "JetBrains Mono", "Fira Code", "Cascadia Code", "Consolas", "Liberation Mono", monospace;
+  font-variant-ligatures: common-ligatures;
+}
+
+/* Inline code (backticks in text) */
+code:not(pre code) {
+  background-color: var(--sl-color-gray-6);
+  color: var(--sl-color-text-gray-1);
+  padding: 0.125rem 0.375rem;
+  border-radius: 0.25rem;
+  font-size: 0.875em;
+  border: 1px solid var(--sl-color-gray-5);
+  font-weight: 500;
+  font-family:
+    "SF Mono", "JetBrains Mono", "Fira Code", "Cascadia Code", "Consolas", "Liberation Mono", monospace;
+}
+
+/* Dark mode inline code */
+:root[data-theme="dark"] code:not(pre code) {
+  background-color: var(--sl-color-gray-5);
+  border-color: var(--sl-color-gray-4);
+}
+
+/* Hero Section Styling */
+
+/* Reduce hero height */
+.hero {
+  padding-top: 3rem !important;
+  padding-bottom: 3rem !important;
+}
+
+/* Make hero title more compact */
+.hero h1 {
+  font-size: 2.5rem !important;
+  margin-bottom: 1rem !important;
+}
+
+/* Reduce tagline spacing */
+.hero .tagline {
+  font-size: 1.125rem !important;
+  margin-bottom: 1.5rem !important;
+}
+
+/* Reduce hero image size */
+.hero .hero-image {
+  max-width: 300px !important;
+}
+
+/* Make action buttons more compact */
+.hero .actions {
+  margin-top: 1.5rem !important;
+  gap: 0.75rem !important;
 }