@mgks/docmd 0.2.0 → 0.2.2

package/src/assets/css/docmd-theme-sky.css

@@ -1,652 +1,9 @@
-/* theme-sky.css - Sky theme for docmd */
+/* Source file from the docmd project — https://github.com/mgks/docmd */
 
-:root [data-theme="light"] {
-  /* Font family */
-  --font-family-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-  --font-family-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
-  
-  /* Color palette */
-  --sky-primary: #0097ff;
-  --sky-primary-light: #e5f4ff;
-  --sky-primary-dark: #0078cc;
-  --sky-text: #1a1f36;
-  --sky-text-light: #4a5568;
-  --sky-text-lightest: #718096;
-  --sky-background: #ffffff;
-  --sky-background-alt: #f9fafb;
-  --sky-border: #e2e8f0;
-  --sky-border-light: #edf2f7;
-  
-  /* Apply colors to CSS variables */
-  --bg-color: var(--sky-background);
-  --text-color: var(--sky-text);
-  --sidebar-bg: #f7fafc;
-  --sidebar-text: var(--sky-text-light);
-  --sidebar-link-active-bg: #e5f4ff;
-  --sidebar-link-active-text: var(--sky-primary);
-  --link-color: var(--sky-primary);
-  --border-color: var(--sky-border);
-  --code-bg: var(--sky-primary-light);
-  --code-text: var(--sky-primary-dark);
-  --header-bg: var(--sky-background);
-  --header-border: var(--sky-border);
-  
-  /* Box shadows */
-  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-  
-  /* Image styling variables */
-  --image-border-color: var(--sky-border);
-  --image-shadow: var(--shadow-md);
-  --image-caption-bg: var(--sky-background-alt);
-  --image-caption-text: var(--sky-text-light);
-  --image-hover-transform: translateY(-2px);
-  --image-hover-shadow: var(--shadow-lg);
-  --image-border-radius: 8px;
-  --image-transition: all 0.3s ease;
-}
+/* 
+ * docmd Sky Theme
+ * Inspired by the clear blue sky
+ * Features: Blue tones, clean lines, subtle gradients
+ */
 
-/* Dark mode */
-:root [data-theme="dark"] {
-  /* Color palette dark */
-  --sky-primary: #3b82f6;
-  --sky-primary-light: #1e293b;
-  --sky-primary-dark: #60a5fa;
-  --sky-text: #f1f5f9;
-  --sky-text-light: #cbd5e1;
-  --sky-text-lightest: #94a3b8;
-  --sky-background: #0f172a;
-  --sky-background-alt: #1e293b;
-  --sky-border: #334155;
-  --sky-border-light: #1e293b;
-  
-  /* Apply colors to CSS variables */
-  --bg-color: var(--sky-background);
-  --text-color: var(--sky-text);
-  --sidebar-bg: #0f172a;
-  --sidebar-text: var(--sky-text-light);
-  --sidebar-link-active-bg: #1e293b;
-  --sidebar-link-active-text: var(--sky-primary);
-  --link-color: var(--sky-primary);
-  --border-color: var(--sky-border);
-  --code-bg: var(--sky-primary-light);
-  --code-text: var(--sky-text);
-  --header-bg: var(--sky-background);
-  --header-border: var(--sky-border);
-  
-  /* Box shadows for dark mode */
-  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
-  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
-  
-  /* Image styling variables for dark mode */
-  --image-border-color: var(--sky-border);
-  --image-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
-  --image-caption-bg: var(--sky-background-alt);
-  --image-caption-text: var(--sky-text-light);
-  --image-hover-transform: translateY(-2px);
-  --image-hover-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
-  --image-border-radius: 8px;
-  --image-transition: all 0.3s ease;
-}
-
-/* Apply theme styles */
-
-/* Typography improvements */
-body {
-  font-feature-settings: "salt", "ss01", "ss02";
-  letter-spacing: -0.01em;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  font-weight: 600;
-  line-height: 1.3;
-  margin-top: 2em;
-  margin-bottom: 0.5em;
-  color: var(--sky-text);
-}
-
-h1 {
-  font-size: 2.25rem;
-  font-weight: 700;
-  margin-top: 0;
-}
-
-h2 {
-  font-size: 1.75rem;
-  border-bottom: 1px solid var(--sky-border-light);
-  padding-bottom: 0.5rem;
-}
-
-h3 {
-  font-size: 1.5rem;
-}
-
-h4 {
-  font-size: 1.25rem;
-}
-
-a {
-  color: var(--link-color);
-  text-decoration: none;
-  transition: color 0.2s ease;
-}
-
-a:hover {
-  text-decoration: underline;
-}
-
-p {
-    margin: .5em 0;
-    padding: .5em 0;
-    line-height: 1.7;
-
-}
-
-/* Sidebar refinements */
-.sidebar {
-  box-shadow: var(--shadow-sm);
-}
-
-.sidebar nav li a {
-  border-radius: 6px;
-  margin-bottom: 2px;
-  transition: all 0.2s ease;
-}
-
-.sidebar nav li a:hover {
-  background-color: var(--sidebar-link-active-bg);
-  color: var(--sidebar-link-active-text);
-}
-
-.sidebar nav li a.active {
-  background-color: var(--sidebar-link-active-bg);
-  color: var(--sidebar-link-active-text);
-  font-weight: 500;
-}
-
-/* Content area */
-.content-area {
-    padding: 2.5rem 5%;
-
-}
-
-/* Code blocks */
-pre {
-  background-color: var(--code-bg);
-  border-radius: 8px;
-  margin: 1.5em 0;
-  padding: 1.25em;
-  box-shadow: var(--shadow-sm);
-}
-
-code {
-  font-size: 0.9em;
-  border-radius: 4px;
-  padding: 0.2em 0.4em;
-}
-
-/* Tables */
-table {
-  width: 100%;
-  border-collapse: separate;
-  border-spacing: 0;
-  margin: 1.5em 0;
-  border-radius: 8px;
-  overflow: hidden;
-  box-shadow: var(--shadow-sm);
-}
-
-th {
-  background-color: var(--sky-background-alt);
-  text-align: left;
-  font-weight: 600;
-  padding: 0.75rem 1rem;
-}
-
-td {
-  padding: 0.75rem 1rem;
-  border-top: 1px solid var(--sky-border-light);
-}
-
-tr:hover {
-  background-color: var(--sky-background-alt);
-}
-
-/* Custom container styling for Sky theme */
-.docmd-container {
-    padding: .5rem 1.5rem;
-    margin: 1.75rem 0;
-    border-radius: 10px;
-    border: 1px solid var(--sky-border-light);
-    background-color: var(--sky-background);
-    box-shadow: var(--shadow-sm);
-
-}
-
-/* Callouts */
-.callout {
-    position: relative;
-    border: none;
-    border-left: 5px solid;
-    background-color: var(--card-bg);
-
-}
-
-.callout-title {
-  font-weight: 600;
-  margin-bottom: 0.75em;
-  display: flex;
-  align-items: center;
-}
-
-.callout-title::before {
-  margin-right: 0.5rem;
-  font-size: 1.1em;
-}
-
-.callout-info {
-  border-left-color: var(--sky-primary);
-}
-
-.callout-info .callout-title::before {
-  content: "ℹ️";
-}
-
-.callout-warning {
-  border-left-color: #f59e0b;
-}
-
-.callout-warning .callout-title::before {
-  content: "⚠️";
-}
-
-.callout-tip {
-  border-left-color: #10b981;
-}
-
-.callout-tip .callout-title::before {
-  content: "💡";
-}
-
-.callout-danger {
-  border-left-color: #ef4444;
-}
-
-.callout-danger .callout-title::before {
-  content: "🚨";
-}
-
-.callout-success {
-  border-left-color: #10b981;
-}
-
-.callout-success .callout-title::before {
-  content: "✅";
-}
-
-/* Cards */
-.card {
-    border: 1px solid var(--sky-border);
-    background-color: var(--card-bg);
-    box-shadow: var(--text-color);
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
-    overflow: hidden;
-    display: flex;
-    flex-direction: column;
-
-}
-
-.card:hover {
-  transform: translateY(-2px);
-  box-shadow: var(--shadow-lg);
-}
-
-.card .card-title {
-    padding: .5rem 1.5rem 1rem;
-    border-bottom: 1px solid var(--sky-border);
-    font-weight: 600;
-    margin-top: 0;
-
-}
-
-.card .card-content {
-    flex: 1;
-    padding: .25rem;
-
-}
-
-.card .card-content > *:first-child {
-  margin-top: 0;
-}
-
-.card .card-content > *:last-child {
-  margin-bottom: 0;
-}
-
-/* Steps - Mintlify-inspired connected style */
-.steps {
-  counter-reset: step-counter;
-  border: none;
-  background-color: transparent;
-  box-shadow: none;
-  padding: 0;
-  position: relative;
-  margin-left: 1rem;
-}
-
-/* The vertical line connecting steps */
-.steps::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0rem !important;
-  left: 1.5rem !important;
-  width: 3px !important;
-  background-color: var(--sky-border);
-  transform: translateX(-50%);
-  z-index: 0;
-
-}
-
-.steps .step {
-    position: relative;
-    padding: .5rem 2.5em;
-    border-radius: 10px;
-    margin-bottom: 1em;
-    display: block;
-    background-color: var(--card-bg);
-
-}
-
-.steps .step:last-child {
-  padding-bottom: 0;
-}
-
-/* Fix step headers */
-.steps h4,
-.steps ol li:first-child, 
-.steps ol li strong:first-child {
-    position: relative;
-    counter-increment: step-counter;
-    margin-bottom: 1rem;
-    font-weight: 600;
-    font-size: 1.1rem;
-    display: block;
-
-}
-
-.steps h4::before,
-.steps ol li::before {
-    content: counter(list-counter) !important;
-    position: absolute;
-    left: -2.55rem;
-    top: .5rem;
-    width: 2rem;
-    height: 2rem;
-    background-color: var(--sky-primary);
-    color: #fff !important;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 1rem !important;
-    font-weight: 500 !important;
-    z-index: 1;
-
-}
-
-/* Step content container */
-.step-content {
-  display: block;
-  margin-top: 0.5rem;
-  margin-bottom: 1rem;
-}
-
-.step-content > p,
-.step-content > div,
-.step-content > pre {
-  display: block;
-  margin-top: 0.5rem;
-  margin-bottom: 1rem;
-}
-
-/* Additional styling for ordered lists in steps */
-.steps ol {
-  list-style: none;
-  padding-left: 0;
-  margin-left: 0;
-  display: block;
-}
-
-.steps ol li {
-  position: relative;
-  margin-bottom: 1rem;
-  display: block;
-}
-
-/* Ensure the step number appears correctly */
-.steps .step h4 {
-  display: block;
-  font-weight: 600;
-  margin-bottom: 1rem;
-}
-
-/* Ensure content after the heading appears properly */
-.steps .step > p,
-.steps .step > div,
-.steps .step > pre {
-    display: block;
-
-}
-
-/* Fix for numerical steps in ordered lists */
-.steps .step ol {
-  counter-reset: none;
-  list-style: decimal;
-  padding-left: 1.5rem;
-  margin-top: 0.5rem;
-  display: block;
-}
-
-.steps .step ol li {
-  padding-left: 0;
-  margin-bottom: 0.5rem;
-  display: list-item;
-}
-
-/* Remove the pseudo-element from nested list items */
-.steps .step ol li::before {
-  display: none;
-}
-
-.steps pre {
-    margin-top: 1rem;
-    margin-bottom: 1rem;
-
-}
-
-.steps ol + * {
-    margin-top: 1rem;
-
-}
-
-/* Buttons */
-button, .button {
-  padding: 0.5rem 1rem;
-  background-color: var(--sky-primary);
-  color: white;
-  border: none;
-  border-radius: 6px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-}
-
-button:hover, .button:hover {
-  background-color: var(--sky-primary-dark);
-}
-
-/* Theme toggle improvements */
-.theme-toggle-button {
-  background-color: var(--sky-background-alt);
-  border-color: var(--sky-border-light);
-  border-radius: 6px;
-  transition: all 0.2s ease;
-}
-
-.theme-toggle-button:hover {
-  background-color: var(--sky-primary-light);
-}
-
-/* Mobile responsiveness improvements */
-@media (max-width: 768px) {
-  .content-area {
-    padding: 1.5rem 1rem;
-  }
-  
-  h1 {
-    font-size: 1.75rem;
-  }
-  
-  h2 {
-    font-size: 1.5rem;
-  }
-  
-  h3 {
-    font-size: 1.25rem;
-  }
-}  
-
-/* Enhanced image styling for Sky theme */
-img {
-  border-radius: var(--image-border-radius);
-  transition: var(--image-transition);
-}
-
-/* Enhanced borders and shadows */
-img.with-border {
-  border: 1px solid var(--image-border-color);
-  padding: 8px;
-  background-color: var(--bg-color);
-}
-
-img.with-shadow {
-  box-shadow: var(--image-shadow);
-}
-
-img.with-shadow:hover {
-  box-shadow: var(--image-hover-shadow);
-}
-
-/* Beautiful figure styling */
-figure {
-  border-radius: var(--image-border-radius);
-  overflow: hidden;
-  transition: var(--image-transition);
-  box-shadow: var(--shadow-sm);
-}
-
-figure:hover {
-  box-shadow: var(--shadow-md);
-}
-
-figure img {
-  margin-bottom: 0;
-  border-radius: var(--image-border-radius) var(--image-border-radius) 0 0;
-}
-
-figcaption {
-  background-color: var(--image-caption-bg);
-  color: var(--image-caption-text);
-  padding: 0.75rem 1rem;
-  font-size: 0.9rem;
-  font-weight: 500;
-}
-
-/* Advanced image gallery */
-.image-gallery {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 1.5rem;
-  margin: 2rem 0;
-}
-
-.image-gallery figure {
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  transition: var(--image-transition);
-}
-
-.image-gallery figure:hover {
-  transform: var(--image-hover-transform);
-}
-
-.image-gallery img {
-  height: 200px;
-  width: 100%;
-  object-fit: cover;
-  margin: 0;
-}
-
-.image-gallery figcaption {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-}
-
-/* Zoom effect on gallery images */
-.image-gallery.zoom img {
-  transition: transform 0.5s ease;
-}
-
-.image-gallery.zoom figure:hover img {
-  transform: scale(1.05);
-}
-
-/* Lightbox effect - requires JavaScript implementation */
-img.lightbox {
-  cursor: zoom-in;
-}
-
-/* Image with frames */
-img.framed {
-  border: 8px solid white;
-  box-shadow: 0 0 0 1px var(--image-border-color), var(--image-shadow);
-  box-sizing: border-box;
-}
-
-/* Polaroid style */
-figure.polaroid {
-  background: white;
-  padding: 10px 10px 30px 10px;
-  box-shadow: var(--shadow-md);
-}
-
-figure.polaroid img {
-  border-radius: 0;
-  box-shadow: none;
-}
-
-figure.polaroid figcaption {
-  background: white;
-  color: var(--sky-text);
-  font-family: 'Caveat', cursive, var(--font-family-sans);
-  font-size: 1.1rem;
-}
-
-/* Responsive adjustments */
-@media (max-width: 768px) {
-  .image-gallery {
-    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  }
-  
-  .image-gallery img {
-    height: 150px;
-  }
-}
+.sidebar nav li a.active,.sidebar nav li a:hover{background-color:var(--sidebar-link-active-bg);color:var(--sidebar-link-active-text)}pre,table{margin:1.5em 0;border-radius:8px;box-shadow:var(--shadow-sm)}td,th{padding:.75rem 1rem}th,tr:hover{background-color:var(--sky-background-alt)}.callout,.steps{position:relative}.card,figure,table{overflow:hidden}.docmd-container,.sidebar,figure,pre,table{box-shadow:var(--shadow-sm)}.card .card-content>:last-child,figure img{margin-bottom:0}:root[data-theme=light]{--font-family-sans:'Inter',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;--font-family-mono:'JetBrains Mono','SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;--sky-primary:#0097ff;--sky-primary-light:#e5f4ff;--sky-primary-dark:#0078cc;--sky-text:#1a1f36;--sky-text-light:#4a5568;--sky-text-lightest:#718096;--sky-background:#ffffff;--sky-background-alt:#f9fafb;--sky-border:#e2e8f0;--sky-border-light:#edf2f7;--bg-color:var(--sky-background);--text-color:var(--sky-text);--sidebar-bg:#f7fafc;--sidebar-text:var(--sky-text-light);--sidebar-link-active-bg:#e5f4ff;--sidebar-link-active-text:var(--sky-primary);--link-color:var(--sky-primary);--border-color:var(--sky-border);--code-bg:var(--sky-primary-light);--code-text:var(--sky-primary-dark);--header-bg:var(--sky-background);--header-border:var(--sky-border);--shadow-sm:0 1px 2px 0 rgba(0, 0, 0, 0.05);--shadow-md:0 4px 6px -1px rgba(0, 0, 0, 0.1),0 2px 4px -1px rgba(0, 0, 0, 0.06);--shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.1),0 4px 6px -2px rgba(0, 0, 0, 0.05);--image-border-color:var(--sky-border);--image-shadow:var(--shadow-md);--image-caption-bg:var(--sky-background-alt);--image-caption-text:var(--sky-text-light);--image-hover-transform:translateY(-2px);--image-hover-shadow:var(--shadow-lg);--image-border-radius:8px;--image-transition:all 0.3s ease}:root[data-theme=dark]{--sky-primary:#3b82f6;--sky-primary-light:#1e293b;--sky-primary-dark:#60a5fa;--sky-text:#f1f5f9;--sky-text-light:#cbd5e1;--sky-text-lightest:#94a3b8;--sky-background:#0f172a;--sky-background-alt:#1e293b;--sky-border:#334155;--sky-border-light:#1e293b;--bg-color:var(--sky-background);--text-color:var(--sky-text);--sidebar-bg:#0f172a;--sidebar-text:var(--sky-text-light);--sidebar-link-active-bg:#1e293b;--sidebar-link-active-text:var(--sky-primary);--link-color:var(--sky-primary);--border-color:var(--sky-border);--code-bg:var(--sky-primary-light);--code-text:var(--sky-text);--header-bg:var(--sky-background);--header-border:var(--sky-border);--shadow-sm:0 1px 2px 0 rgba(0, 0, 0, 0.3);--shadow-md:0 4px 6px -1px rgba(0, 0, 0, 0.3),0 2px 4px -1px rgba(0, 0, 0, 0.2);--shadow-lg:0 10px 15px -3px rgba(0, 0, 0, 0.3),0 4px 6px -2px rgba(0, 0, 0, 0.2);--image-border-color:var(--sky-border);--image-shadow:0 4px 8px rgba(0, 0, 0, 0.5);--image-caption-bg:var(--sky-background-alt);--image-caption-text:var(--sky-text-light);--image-hover-transform:translateY(-2px);--image-hover-shadow:0 6px 12px rgba(0, 0, 0, 0.7);--image-border-radius:8px;--image-transition:all 0.3s ease}body{font-feature-settings:"salt","ss01","ss02";letter-spacing:-.01em}h1,h2,h3,h4,h5,h6{font-weight:600;line-height:1.3;margin-top:2em;margin-bottom:.5em;color:var(--sky-text)}.card .card-content>:first-child,h1{margin-top:0}h1{font-size:2.25rem;font-weight:700}h2{font-size:1.75rem;border-bottom:1px solid var(--sky-border-light);padding-bottom:.5rem}h3{font-size:1.5rem}h4{font-size:1.25rem}a{color:var(--link-color);text-decoration:none;transition:color .2s}a:hover{text-decoration:underline}p{margin:.5em 0;padding:.5em 0;line-height:1.7}.sidebar nav li a{border-radius:6px;margin-bottom:2px;transition:.2s}.sidebar nav li a.active{font-weight:500}.content-area{padding:2.5rem 5%}pre{background-color:var(--code-bg);padding:1.25em}code{font-size:.9em;border-radius:4px;padding:.2em .4em}table{width:100%;border-collapse:separate;border-spacing:0}th{text-align:left;font-weight:600}td{border-top:1px solid var(--sky-border-light)}.docmd-container{padding:.5rem 1.5rem;margin:1.75rem 0;border-radius:10px;border:1px solid var(--sky-border-light);background-color:var(--sky-background)}.callout,.card{background-color:var(--card-bg)}.callout{border:none;border-left:5px solid}.callout-title{font-weight:600;margin-bottom:.75em;display:flex;align-items:center}.callout-title::before{margin-right:.5rem;font-size:1.1em}.callout-info{border-left-color:var(--sky-primary)}.callout-info .callout-title::before{content:"ℹ️"}.callout-warning{border-left-color:#f59e0b}.callout-warning .callout-title::before{content:"⚠️"}.callout-success,.callout-tip{border-left-color:#10b981}.callout-tip .callout-title::before{content:"💡"}.callout-danger{border-left-color:#ef4444}.callout-danger .callout-title::before{content:"🚨"}.callout-success .callout-title::before{content:"✅"}.card{border:1px solid var(--sky-border);box-shadow:var(--text-color);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}.card .card-title{padding:.5rem 1.5rem 1rem;border-bottom:1px solid var(--sky-border);font-weight:600;margin-top:0}.card .card-content{flex:1;padding:.25rem}.steps{counter-reset:step-counter;border:none;background-color:transparent;box-shadow:none;padding:0;margin-left:1rem}.steps::before{content:'';position:absolute;top:0;bottom:0!important;left:1.5rem!important;width:3px!important;background-color:var(--sky-border);transform:translateX(-50%);z-index:0}.steps .step{position:relative;padding:.5rem 2.5em;border-radius:10px;margin-bottom:1em;display:block;background-color:var(--card-bg)}.steps .step:last-child{padding-bottom:0}.steps h4,.steps ol li strong:first-child,.steps ol li:first-child{position:relative;counter-increment:step-counter;margin-bottom:1rem;font-weight:600;font-size:1.1rem;display:block}.steps h4::before,.steps ol li::before{content:counter(list-counter)!important;position:absolute;left:-2.55rem;top:.5rem;width:2rem;height:2rem;background-color:var(--sky-primary);color:#fff!important;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1rem!important;font-weight:500!important;z-index:1}.steps .step h4,.steps .step ol,.steps .step>div,.steps .step>p,.steps .step>pre,.steps ol,.steps ol li{display:block}.step-content,.step-content>div,.step-content>p,.step-content>pre{display:block;margin-top:.5rem;margin-bottom:1rem}.steps ol+*,.steps pre{margin-top:1rem}.steps ol{list-style:none;padding-left:0;margin-left:0}.steps ol li{position:relative;margin-bottom:1rem}.steps .step h4{font-weight:600;margin-bottom:1rem}.steps .step ol{counter-reset:none;list-style:decimal;padding-left:1.5rem;margin-top:.5rem}.steps .step ol li{padding-left:0;margin-bottom:.5rem;display:list-item}.steps .step ol li::before{display:none}.steps pre{margin-bottom:1rem}.button,button{padding:.5rem 1rem;background-color:var(--sky-primary);color:#fff;border:none;border-radius:6px;font-weight:500;cursor:pointer;transition:background-color .2s}.image-gallery figure,figure,img{transition:var(--image-transition)}.button:hover,button:hover{background-color:var(--sky-primary-dark)}.theme-toggle-button{background-color:var(--sky-background-alt);border-color:var(--sky-border-light);border-radius:6px;transition:.2s}.theme-toggle-button:hover{background-color:var(--sky-primary-light)}img{border-radius:var(--image-border-radius)}img.with-border{border:1px solid var(--image-border-color);padding:8px;background-color:var(--bg-color)}img.with-shadow{box-shadow:var(--image-shadow)}img.with-shadow:hover{box-shadow:var(--image-hover-shadow)}figure{border-radius:var(--image-border-radius)}figure:hover{box-shadow:var(--shadow-md)}figure img{border-radius:var(--image-border-radius) var(--image-border-radius) 0 0}figcaption{background-color:var(--image-caption-bg);color:var(--image-caption-text);padding:.75rem 1rem;font-size:.9rem;font-weight:500}.image-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin:2rem 0}.image-gallery figure{height:100%;display:flex;flex-direction:column;margin:0}.image-gallery figure:hover{transform:var(--image-hover-transform)}.image-gallery img{height:200px;width:100%;object-fit:cover;margin:0}.image-gallery figcaption{flex:1;display:flex;align-items:center;justify-content:center;text-align:center}.image-gallery.zoom img{transition:transform .5s}.image-gallery.zoom figure:hover img{transform:scale(1.05)}img.lightbox{cursor:zoom-in}img.framed{border:8px solid #fff;box-shadow:0 0 0 1px var(--image-border-color),var(--image-shadow);box-sizing:border-box}figure.polaroid{background:#fff;padding:10px 10px 30px;box-shadow:var(--shadow-md)}figure.polaroid img{border-radius:0;box-shadow:none}figure.polaroid figcaption{background:#fff;color:var(--sky-text);font-family:Caveat,cursive,var(--font-family-sans);font-size:1.1rem}@media (max-width:768px){.content-area{padding:1.5rem 1rem}h1{font-size:1.75rem}h2{font-size:1.5rem}h3{font-size:1.25rem}.image-gallery{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.image-gallery img{height:150px}}

package/src/assets/js/docmd-image-lightbox.js

@@ -1,4 +1,8 @@
-// docmd-image-lightbox.js - Simple lightbox implementation for docmd images
+// Source file from the docmd project — https://github.com/mgks/docmd
+
+/* 
+ * A simple lightbox implementation for docmd images
+ */
 
 document.addEventListener('DOMContentLoaded', function() {
   // Create lightbox elements