@mgks/docmd 0.1.4 → 0.2.0

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

@@ -1,651 +1,652 @@
 /* theme-sky.css - Sky theme for 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;
-  }
-  
-  /* 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;
+  /* 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;
+}
+
+/* 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);
-  }
-  
-  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;
+
+}
+
+/* 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;
-    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 {
+    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 > *: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;
+
+}
+
+.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;
-    margin-left: 1rem;
-  }
-  
-  /* The vertical line connecting steps */
-  .steps::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: .5rem;
-      width: 2px;
-      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(step-counter);
+    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.5rem;
-    top: 0;
+    left: -2.55rem;
+    top: .5rem;
     width: 2rem;
     height: 2rem;
     background-color: var(--sky-primary);
-    color: white;
+    color: #fff !important;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
-    font-size: 0.9rem;
-    font-weight: 600;
+    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 {
+
+}
+
+/* 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;
-    font-weight: 600;
+
+}
+
+/* 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;
   }
   
-  /* 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;
+  h1 {
+    font-size: 1.75rem;
   }
   
-  .theme-toggle-button:hover {
-    background-color: var(--sky-primary-light);
+  h2 {
+    font-size: 1.5rem;
   }
   
-  /* 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);
+  h3 {
+    font-size: 1.25rem;
   }
+}  
 
-  /* Enhanced borders and shadows */
-  img.with-border {
-    border: 1px solid var(--image-border-color);
-    padding: 8px;
-    background-color: var(--bg-color);
-  }
+/* Enhanced image styling for Sky theme */
+img {
+  border-radius: var(--image-border-radius);
+  transition: var(--image-transition);
+}
 
-  img.with-shadow {
-    box-shadow: var(--image-shadow);
-  }
+/* Enhanced borders and shadows */
+img.with-border {
+  border: 1px solid var(--image-border-color);
+  padding: 8px;
+  background-color: var(--bg-color);
+}
 
-  img.with-shadow:hover {
-    box-shadow: var(--image-hover-shadow);
-  }
+img.with-shadow {
+  box-shadow: var(--image-shadow);
+}
 
-  /* Beautiful figure styling */
-  figure {
-    border-radius: var(--image-border-radius);
-    overflow: hidden;
-    transition: var(--image-transition);
-    box-shadow: var(--shadow-sm);
-  }
+img.with-shadow:hover {
+  box-shadow: var(--image-hover-shadow);
+}
 
-  figure:hover {
-    box-shadow: var(--shadow-md);
-  }
+/* Beautiful figure styling */
+figure {
+  border-radius: var(--image-border-radius);
+  overflow: hidden;
+  transition: var(--image-transition);
+  box-shadow: var(--shadow-sm);
+}
 
-  figure img {
-    margin-bottom: 0;
-    border-radius: var(--image-border-radius) var(--image-border-radius) 0 0;
-  }
+figure:hover {
+  box-shadow: var(--shadow-md);
+}
 
-  figcaption {
-    background-color: var(--image-caption-bg);
-    color: var(--image-caption-text);
-    padding: 0.75rem 1rem;
-    font-size: 0.9rem;
-    font-weight: 500;
-  }
+figure img {
+  margin-bottom: 0;
+  border-radius: var(--image-border-radius) var(--image-border-radius) 0 0;
+}
 
-  /* Advanced image gallery */
-  .image-gallery {
-    display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-    gap: 1.5rem;
-    margin: 2rem 0;
-  }
+figcaption {
+  background-color: var(--image-caption-bg);
+  color: var(--image-caption-text);
+  padding: 0.75rem 1rem;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
 
-  .image-gallery figure {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    margin: 0;
-    transition: var(--image-transition);
-  }
+/* 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:hover {
-    transform: var(--image-hover-transform);
-  }
+.image-gallery figure {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  transition: var(--image-transition);
+}
 
-  .image-gallery img {
-    height: 200px;
-    width: 100%;
-    object-fit: cover;
-    margin: 0;
-  }
+.image-gallery figure:hover {
+  transform: var(--image-hover-transform);
+}
 
-  .image-gallery figcaption {
-    flex: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    text-align: center;
-  }
+.image-gallery img {
+  height: 200px;
+  width: 100%;
+  object-fit: cover;
+  margin: 0;
+}
 
-  /* Zoom effect on gallery images */
-  .image-gallery.zoom img {
-    transition: transform 0.5s ease;
-  }
+.image-gallery figcaption {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
 
-  .image-gallery.zoom figure:hover img {
-    transform: scale(1.05);
-  }
+/* Zoom effect on gallery images */
+.image-gallery.zoom img {
+  transition: transform 0.5s ease;
+}
 
-  /* Lightbox effect - requires JavaScript implementation */
-  img.lightbox {
-    cursor: zoom-in;
-  }
+.image-gallery.zoom figure:hover img {
+  transform: scale(1.05);
+}
 
-  /* 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;
-  }
+/* Lightbox effect - requires JavaScript implementation */
+img.lightbox {
+  cursor: zoom-in;
+}
 
-  /* Polaroid style */
-  figure.polaroid {
-    background: white;
-    padding: 10px 10px 30px 10px;
-    box-shadow: var(--shadow-md);
-  }
+/* 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;
+}
 
-  figure.polaroid img {
-    border-radius: 0;
-    box-shadow: none;
-  }
+/* Polaroid style */
+figure.polaroid {
+  background: white;
+  padding: 10px 10px 30px 10px;
+  box-shadow: var(--shadow-md);
+}
 
-  figure.polaroid figcaption {
-    background: white;
-    color: var(--sky-text);
-    font-family: 'Caveat', cursive, var(--font-family-sans);
-    font-size: 1.1rem;
-  }
+figure.polaroid img {
+  border-radius: 0;
+  box-shadow: none;
+}
 
-  /* Responsive adjustments */
-  @media (max-width: 768px) {
-    .image-gallery {
-      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-    }
-    
-    .image-gallery img {
-      height: 150px;
-    }
-  }  
+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;
+  }
+}