@mgks/docmd 0.3.2 → 0.3.3

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

@@ -1,618 +0,0 @@
-/* Source file from the docmd project — https://github.com/mgks/docmd */
-
-/* 
- * docmd Sky Theme
- * Inspired by the clear blue sky
- * Features: Blue tones, clean lines, subtle gradients
- */
-
-.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 {
-    --sky-primary: #0097ff
-}
-
-: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;
-    --accent-color: #0097ff;
-    --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)
-}
-
-.docmd-search-trigger,
-.theme-toggle-button {
-    background-color: var(--sky-background-alt);
-    border-color: var(--sky-border-light);
-    border-radius: 6px;
-    transition: .2s
-}
-
-.docmd-search-trigger:hover,
-.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,74 +0,0 @@
-// 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
-  const lightbox = document.createElement('div');
-  lightbox.className = 'docmd-lightbox';
-  lightbox.innerHTML = `
-    <div class="docmd-lightbox-content">
-      <img src="" alt="">
-      <div class="docmd-lightbox-caption"></div>
-    </div>
-    <div class="docmd-lightbox-close">&times;</div>
-  `;
-  document.body.appendChild(lightbox);
-
-  const lightboxImg = lightbox.querySelector('img');
-  const lightboxCaption = lightbox.querySelector('.docmd-lightbox-caption');
-  const lightboxClose = lightbox.querySelector('.docmd-lightbox-close');
-
-  // Find all images with lightbox class or in image galleries
-  const lightboxImages = document.querySelectorAll('img.lightbox, .image-gallery img');
-
-  // Add click event to each image
-  lightboxImages.forEach(function (img) {
-    img.style.cursor = 'zoom-in';
-
-    img.addEventListener('click', function () {
-      // Get the image source and caption
-      const src = this.getAttribute('src');
-      let caption = this.getAttribute('alt') || '';
-
-      // If image is inside a figure with figcaption, use that caption
-      const figure = this.closest('figure');
-      if (figure) {
-        const figcaption = figure.querySelector('figcaption');
-        if (figcaption) {
-          caption = figcaption.textContent;
-        }
-      }
-
-      // Set the lightbox content
-      lightboxImg.setAttribute('src', src);
-      lightboxCaption.textContent = caption;
-
-      // Show the lightbox
-      lightbox.style.display = 'flex';
-      document.body.style.overflow = 'hidden'; // Prevent scrolling
-    });
-  });
-
-  // Close lightbox when clicking the close button or outside the image
-  lightboxClose.addEventListener('click', closeLightbox);
-  lightbox.addEventListener('click', function (e) {
-    if (e.target === lightbox) {
-      closeLightbox();
-    }
-  });
-
-  // Close lightbox when pressing Escape key
-  document.addEventListener('keydown', function (e) {
-    if (e.key === 'Escape' && lightbox.style.display === 'flex') {
-      closeLightbox();
-    }
-  });
-
-  function closeLightbox() {
-    lightbox.style.display = 'none';
-    document.body.style.overflow = ''; // Restore scrolling
-  }
-});