diff --git a/docusaurus.config.js b/docusaurus.config.js
index a887b53..72a785c 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -56,6 +56,9 @@ const config = {
path: CURRICULUM_PATH,
routeBasePath: '/lessons',
sidebarPath: require.resolve('./sidebars.js'),
+ admonitions: {
+ keywords: ['explore'],
+ },
editUrl: ({ docPath }) => {
return `https://github.com/razorblade23/the-python-ledger/edit/main/curriculum/${docPath}`;
},
diff --git a/src/css/custom.css b/src/css/custom.css
index 68f3333..65e2733 100644
--- a/src/css/custom.css
+++ b/src/css/custom.css
@@ -202,3 +202,65 @@ kbd:hover {
transform: translateY(1px);
box-shadow: 0 1px 0 var(--ifm-color-emphasis-300);
}
+
+/* ==========================================================================
+ 5. EXPLORE ADMINITION CSS
+ ========================================================================== */
+
+/* Base Light Theme */
+:root {
+ --ifm-color-admonition-explore: #7c3aed;
+ --ifm-color-admonition-explore-background: rgba(124, 58, 237, 0.08);
+}
+
+/* Dark Mode Enhancements */
+[data-theme='dark'] .alert--explore {
+ /* High contrast neon purple accent line */
+ border-left-color: #d8b4fe !important;
+ border-left-width: 4px;
+
+ /* Richer, distinctly visible purple container background */
+ background-color: rgba(168, 85, 247, 0.22) !important;
+
+ /* Subtle border & outer glow to separate from page background */
+ border-top: 1px solid rgba(216, 180, 254, 0.2);
+ border-right: 1px solid rgba(216, 180, 254, 0.2);
+ border-bottom: 1px solid rgba(216, 180, 254, 0.2);
+ box-shadow: 0 4px 20px rgba(168, 85, 247, 0.15);
+}
+
+/* Header Text & Icon Contrast */
+[data-theme='dark'] .alert--explore .admonition-heading h5,
+[data-theme='dark'] .alert--explore .admonition-icon {
+ color: #e9d5ff !important;
+ fill: none !important;
+}
+
+/* Fix for broken icon wrapper square */
+.alert--explore .admonition-icon {
+ background: transparent !important;
+ border: none !important;
+}
+
+/* Admonition Layout & Icon Fixes */
+.alert--explore {
+ border-left-width: 4px;
+ border-left-color: var(--ifm-color-admonition-explore);
+ background-color: var(--ifm-color-admonition-explore-background);
+}
+
+[data-theme='dark'] .alert--explore {
+ /* Subtle glow to separate it from dark page backgrounds */
+ box-shadow: 0 0 12px rgba(192, 132, 252, 0.08);
+}
+
+/* Target Header & Icon Styling */
+.alert--explore .admonition-heading h5,
+.alert--explore .admonition-icon {
+ color: var(--ifm-color-admonition-explore);
+}
+
+.alert--explore .admonition-icon svg {
+ stroke: var(--ifm-color-admonition-explore);
+ fill: none;
+}
\ No newline at end of file
diff --git a/src/theme/Admonition/index.js b/src/theme/Admonition/index.js
new file mode 100644
index 0000000..ef94e22
--- /dev/null
+++ b/src/theme/Admonition/index.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import Admonition from '@theme-original/Admonition';
+
+export default function AdmonitionWrapper(props) {
+ if (props.type === 'explore') {
+ return (
+
+ );
+ }
+ return ;
+}
\ No newline at end of file