markopress 0.0.7 → 0.0.9

package/src/theme/default/styles-base.css

@@ -1,757 +0,0 @@
-/* ============================================
-   RESET & BASE STYLES
-   ============================================ */
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-html {
-  font-size: 16px;
-  scroll-behavior: smooth;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-body {
-  font-family: var(--font-sans);
-  font-size: var(--font-size-base);
-  line-height: var(--leading-normal);
-  color: var(--text-1);
-  background-color: var(--bg-default);
-  transition: background-color var(--transition-base), color var(--transition-base);
-}
-
-/* Focus visible for accessibility - Updated to use primary-2 (Indigo) */
-*:focus-visible {
-  outline: 2px solid var(--color-primary-2, #3a5ccc);
-  outline-offset: 2px;
-}
-
-/* Links */
-a {
-  color: var(--color-primary-3);
-  text-decoration: none;
-  transition: color var(--transition-fast);
-}
-
-a:hover {
-  color: var(--color-primary-1);
-}
-
-/* External link indicator */
-a[href*='://']::after {
-  content: '↗';
-  margin-left: 4px;
-  font-size: 0.8em;
-  opacity: 0.6;
-  transition: opacity var(--transition-fast);
-}
-
-a[href*='://']:hover::after {
-  opacity: 1;
-}
-
-/* Skip to content (accessibility) */
-.skip-to-content {
-  position: absolute;
-  top: -40px;
-  left: 0;
-  padding: var(--space-sm) var(--space-md);
-  background: var(--color-primary-3);
-  color: var(--text-inverse);
-  text-decoration: none;
-  z-index: 9999;
-}
-
-.skip-to-content:focus {
-  top: 0;
-}
-
-/* ============================================
-   LAYOUT COMPONENTS
-   ============================================ */
-
-.app-container {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.background-pattern {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  opacity: 0.03;
-  background-image: radial-gradient(var(--text-1) 1px, transparent 1px);
-  background-size: 24px 24px;
-  pointer-events: none;
-  z-index: -1;
-}
-
-.layout-container {
-  display: flex;
-  flex: 1;
-  margin-top: var(--navbar-height);
-}
-
-/* Main wrapper - contains sidebar and content */
-.main-wrapper {
-  display: flex;
-  flex: 1;
-  margin-top: var(--navbar-height, 64px);
-  min-height: calc(100vh - var(--navbar-height, 64px));
-}
-
-/* ============================================
-   NAVBAR
-   ============================================ */
-
-.navbar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: var(--navbar-height);
-  background: var(--bg-default);
-  border-bottom: 1px solid var(--border-default);
-  z-index: 50;
-  transition: background-color var(--transition-base), border-color var(--transition-base);
-}
-
-.navbar-container {
-  max-width: var(--container-max-width);
-  margin: 0 auto;
-  height: 100%;
-  padding: 0 var(--space-lg);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-lg);
-}
-
-.navbar-brand {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-  font-weight: var(--font-weight-semibold);
-  font-size: var(--font-size-lg);
-  color: var(--text-1);
-}
-
-.navbar-logo {
-  width: 32px;
-  height: 32px;
-}
-
-.navbar-title {
-  white-space: nowrap;
-}
-
-.navbar-nav {
-  display: none;
-  gap: var(--space-md);
-  align-items: center;
-}
-
-.nav-link {
-  color: var(--text-2);
-  padding: var(--space-xs, 0.25rem) var(--space-sm, 0.5rem);
-  border-radius: var(--radius-sm, 4px);
-  transition: all var(--transition-fast, 150ms);
-  font-size: var(--font-size-sm, 0.875rem);
-  font-weight: var(--font-weight-medium, 500);
-}
-
-.nav-link:hover {
-  color: var(--color-primary-3, #3b82f6);
-  background: var(--bg-soft, rgba(0, 0, 0, 0.05));
-}
-
-.nav-link.active {
-  color: var(--color-primary-3, #3b82f6);
-  background: var(--color-primary-soft, rgba(59, 130, 246, 0.1));
-}
-
-@media (min-width: 768px) {
-  .navbar-nav {
-    display: flex;
-  }
-}
-
-.navbar-actions {
-  display: flex;
-  align-items: center;
-  gap: var(--space-sm);
-}
-
-.btn-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 40px;
-  height: 40px;
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: var(--text-2);
-  cursor: pointer;
-  border-radius: var(--radius-md);
-  transition: background-color var(--transition-fast), color var(--transition-fast);
-}
-
-.btn-icon:hover {
-  background: var(--bg-soft);
-  color: var(--text-1);
-}
-
-.mobile-menu-toggle {
-  display: flex;
-}
-
-@media (min-width: 768px) {
-  .mobile-menu-toggle {
-    display: none;
-  }
-}
-
-.navbar-mobile-menu {
-  display: flex;
-  flex-direction: column;
-  padding: var(--space-md);
-  background: var(--bg-default);
-  border-top: 1px solid var(--border-default);
-}
-
-@media (min-width: 768px) {
-  .navbar-mobile-menu {
-    display: none;
-  }
-}
-
-/* ============================================
-   SIDEBAR
-   ============================================ */
-
-.sidebar {
-  width: var(--sidebar-width, 280px);
-  background: var(--sidebar-background, var(--bg-alt));
-  border-right: 1px solid var(--sidebar-border, var(--border-default));
-  overflow-y: auto;
-  overflow-x: hidden;
-  transition: transform var(--transition-base);
-  flex-shrink: 0;
-  padding: var(--sidebar-padding, var(--space-xl) var(--space-md));
-}
-
-@media (max-width: 1024px) {
-  .sidebar {
-    position: fixed;
-    top: var(--navbar-height, 64px);
-    left: 0;
-    bottom: 0;
-    z-index: 40;
-    transform: translateX(-100%);
-  }
-
-  .sidebar:not(.collapsed) {
-    transform: translateX(0);
-    box-shadow: var(--shadow-xl);
-  }
-}
-
-.sidebar.collapsed {
-  transform: translateX(-100%);
-}
-
-.sidebar-container {
-  padding: var(--sidebar-padding, var(--space-lg));
-}
-
-.sidebar-nav {
-  display: flex;
-  flex-direction: column;
-  gap: var(--sidebar-item-gap, var(--space-xs, 0.25rem));
-  padding: var(--sidebar-padding, var(--space-md, 1rem));
-}
-
-.sidebar-link {
-  display: block;
-  padding: var(--sidebar-item-padding, var(--space-sm, 0.5rem) var(--space-md, 1rem));
-  color: var(--text-2, #6b7280);
-  text-decoration: none;
-  border-radius: var(--sidebar-item-border-radius, var(--radius-md, 6px));
-  transition: all var(--transition-fast, 150ms);
-  font-size: var(--sidebar-item-font-size, var(--font-size-sm, 0.875rem));
-  font-weight: var(--sidebar-item-font-weight, 400);
-  line-height: var(--sidebar-item-height, 1.4);
-  height: var(--sidebar-item-height, auto);
-}
-
-.sidebar-link:hover {
-  color: var(--text-1, #1f2937);
-  background: var(--sidebar-hover-background, var(--bg-soft, rgba(0, 0, 0, 0.05)));
-}
-
-.sidebar-link.active {
-  color: var(--color-primary-1, #3b82f6);
-  background: var(--sidebar-active-background, var(--color-primary-soft, rgba(59, 130, 246, 0.1)));
-  font-weight: var(--sidebar-item-font-weight, var(--font-weight-semibold, 600));
-  border-left: var(--sidebar-active-border, none);
-}
-
-.sidebar-toggle-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  margin-bottom: var(--space-md);
-  padding: 0;
-  border: 1px solid var(--border-default);
-  background: var(--bg-default);
-  color: var(--text-2);
-  cursor: pointer;
-  border-radius: var(--radius-md);
-  transition: all var(--transition-fast);
-}
-
-.sidebar-toggle-btn:hover {
-  border-color: var(--color-primary-3);
-  color: var(--color-primary-3);
-}
-
-/* ============================================
-   MAIN CONTENT
-   ============================================ */
-
-.main-content {
-  flex: 1;
-  min-width: 0;
-  padding: var(--space-xl) var(--space-lg);
-  max-width: 100%;
-}
-
-@media (min-width: 1024px) {
-  .main-content {
-    max-width: var(--content-max-width, 1200px);
-    margin: 0 auto;
-  }
-}
-
-@media (max-width: 768px) {
-  .main-content {
-    padding: var(--space-lg) var(--space-md);
-  }
-}
-
-/* Container */
-.container {
-  max-width: var(--content-max-width);
-  margin: 0 auto;
-}
-
-/* H2 dividers (VitePress-inspired) */
-.main-content h2 {
-  margin: 48px 0 16px;
-  border-top: 1px solid var(--border-divider);
-  padding-top: 24px;
-}
-
-/* Breadcrumbs */
-.breadcrumbs {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--space-xs);
-  margin-bottom: var(--space-lg);
-  font-size: var(--font-size-sm);
-  color: var(--text-2);
-}
-
-.breadcrumb-item {
-  display: flex;
-  align-items: center;
-  gap: var(--space-xs);
-}
-
-.breadcrumb-item:not(:last-child)::after {
-  content: '/';
-  opacity: 0.5;
-}
-
-.breadcrumb-link {
-  color: var(--text-2);
-}
-
-.breadcrumb-link:hover {
-  color: var(--color-primary-3);
-}
-
-.breadcrumb-current {
-  color: var(--text-1);
-  font-weight: var(--font-weight-medium);
-}
-
-/* Prev/Next Navigation */
-.page-nav {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--space-md);
-  margin-top: var(--space-3xl);
-  padding-top: var(--space-xl);
-  border-top: 1px solid var(--border-default);
-}
-
-.page-nav-prev,
-.page-nav-next {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-xs);
-  padding: var(--space-md);
-  background: var(--bg-alt);
-  border: 1px solid var(--border-default);
-  border-radius: var(--radius-lg);
-  text-decoration: none;
-  color: var(--text-1);
-  transition: all var(--transition-fast);
-}
-
-.page-nav-prev:hover,
-.page-nav-next:hover {
-  border-color: var(--color-primary-3);
-  background: var(--bg-soft);
-}
-
-.page-nav-prev {
-  grid-column: 1;
-  text-align: left;
-}
-
-.page-nav-next {
-  grid-column: 2;
-  text-align: right;
-}
-
-.page-nav-label {
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-semibold);
-  text-transform: uppercase;
-  color: var(--text-2);
-}
-
-.page-nav-title {
-  font-size: var(--font-size-base);
-  font-weight: var(--font-weight-medium);
-}
-
-/* ============================================
-   TABLE OF CONTENTS
-   ============================================ */
-
-.toc-aside {
-  display: none;
-  position: fixed;
-  top: calc(var(--navbar-height) + var(--space-xl));
-  right: var(--space-lg);
-  width: var(--toc-width);
-  max-height: calc(100vh - var(--navbar-height) - var(--space-2xl));
-  overflow-y: auto;
-}
-
-@media (min-width: 1440px) {
-  .toc-aside {
-    display: block;
-  }
-}
-
-.toc-container {
-  padding: var(--space-md);
-  background: var(--bg-alt);
-  border: 1px solid var(--border-default);
-  border-radius: var(--radius-lg);
-}
-
-.toc-title {
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
-  margin-bottom: var(--space-md);
-  color: var(--text-2);
-  text-transform: uppercase;
-}
-
-/* ============================================
-   FOOTER
-   ============================================ */
-
-.footer {
-  padding: var(--space-3xl) var(--space-lg);
-  background: var(--bg-alt);
-  border-top: 1px solid var(--border-default);
-  margin-top: auto;
-}
-
-.footer-content {
-  max-width: var(--container-max-width);
-  margin: 0 auto;
-  text-align: center;
-  color: var(--text-2);
-  font-size: var(--font-size-sm);
-}
-
-/* ============================================
-   CUSTOM CONTAINERS
-   ============================================ */
-
-.custom-container {
-  margin: var(--space-lg) 0;
-  padding: var(--space-md) var(--space-lg);
-  border-left: 4px solid;
-  border-radius: var(--radius-md);
-  background: var(--bg-alt);
-}
-
-.custom-container.tip {
-  border-color: var(--c-success);
-  background: rgba(16, 185, 129, 0.05);
-}
-
-.custom-container.warning {
-  border-color: var(--c-warning);
-  background: rgba(245, 158, 11, 0.05);
-}
-
-.custom-container.danger {
-  border-color: var(--c-danger);
-  background: rgba(239, 68, 68, 0.05);
-}
-
-.custom-container.info,
-.custom-container.note {
-  border-color: var(--c-info);
-  background: rgba(6, 182, 212, 0.05);
-}
-
-.custom-container-title {
-  font-weight: var(--font-weight-semibold);
-  margin-bottom: var(--space-sm);
-}
-
-/* ============================================
-   CODE BLOCKS
-   ============================================ */
-
-/* Inline code - VitePress style */
-:not(pre) > code {
-  padding: 3px 6px;
-  background: rgba(142, 150, 170, 0.14);
-  color: var(--color-primary-3);
-  font-family: var(--font-mono);
-  font-size: 0.875em;
-  border-radius: 4px;
-  transition: color 0.25s, background-color 0.5s;
-}
-
-/* Code blocks - VitePress style */
-pre {
-  position: relative;
-  margin: 16px 0;
-  padding: 20px 24px;
-  background: var(--bg-alt);
-  color: var(--text-2);
-  font-family: var(--font-mono);
-  font-size: 0.875em;
-  line-height: 1.7;
-  overflow-x: auto;
-  border-radius: 8px;
-}
-
-/* Code block copy button placeholder */
-pre::after {
-  content: 'Copy';
-  position: absolute;
-  top: 12px;
-  right: 12px;
-  padding: 4px 8px;
-  font-size: 12px;
-  color: var(--text-2);
-  background: var(--bg-default);
-  border: 1px solid var(--border-default);
-  border-radius: var(--radius-sm);
-  opacity: 0;
-  transition: opacity 0.25s;
-  pointer-events: none;
-}
-
-pre:hover::after {
-  opacity: 1;
-}
-
-pre.line-numbers {
-  padding-left: calc(24px + 3rem);
-}
-
-/* Code title */
-.code-block {
-  margin: 16px 0;
-}
-
-.code-title {
-  padding: 0.25rem 0.5rem;
-  background: var(--bg-alt);
-  color: var(--text-2);
-  font-size: 12px;
-  font-family: var(--font-mono);
-  border: 1px solid var(--border-default);
-  border-bottom: none;
-  border-radius: 8px 8px 0 0;
-}
-
-.code-block pre {
-  margin: 0;
-  border-radius: 0 0 8px 8px;
-}
-
-/* ============================================
-   RESPONSIVE DESIGN
-   ============================================ */
-
-@media (max-width: 768px) {
-  :root {
-    --navbar-height: 56px;
-  }
-
-  .navbar-container {
-    padding: 0 var(--space-md);
-  }
-
-  .page-nav {
-    grid-template-columns: 1fr;
-  }
-
-  .page-nav-next {
-    grid-column: 1;
-  }
-}
-
-/* ============================================
-   UTILITY CLASSES
-   ============================================ */
-
-.sr-only {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-.text-center { text-align: center; }
-.text-left { text-align: left; }
-.text-right { text-align: right; }
-
-.font-bold { font-weight: var(--font-weight-bold); }
-.font-semibold { font-weight: var(--font-weight-semibold); }
-.font-medium { font-weight: var(--font-weight-medium); }
-
-.text-xs { font-size: var(--font-size-xs); }
-.text-sm { font-size: var(--font-size-sm); }
-.text-lg { font-size: var(--font-size-lg); }
-.text-xl { font-size: var(--font-size-xl); }
-.text-2xl { font-size: var(--font-size-2xl); }
-
-.mt-sm { margin-top: var(--space-sm); }
-.mt-md { margin-top: var(--space-md); }
-.mt-lg { margin-top: var(--space-lg); }
-.mt-xl { margin-top: var(--space-xl); }
-
-.mb-sm { margin-bottom: var(--space-sm); }
-.mb-md { margin-bottom: var(--space-md); }
-.mb-lg { margin-bottom: var(--space-lg); }
-.mb-xl { margin-bottom: var(--space-xl); }
-
-/* ============================================
-   DESIGN SYSTEM ACCENTS
-   Make primary color more visible throughout UI
-   ============================================ */
-
-/* Links use primary color */
-a {
-  color: var(--color-primary-3, #3b82f6);
-}
-
-/* Active nav link highlight */
-.nav-link.active,
-.nav-link[href*="/docs/"] {
-  color: var(--color-primary-3, #3b82f6);
-  font-weight: var(--font-weight-semibold, 600);
-}
-
-/* Buttons */
-.btn-primary {
-  background: var(--color-primary-3, #3b82f6);
-  color: var(--bg-default, #ffffff);
-  border: none;
-  padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
-  border-radius: var(--radius-md, 6px);
-  font-weight: var(--font-weight-medium, 500);
-  cursor: pointer;
-  transition: background var(--transition-fast, 150ms);
-}
-
-.btn-primary:hover {
-  background: var(--color-primary-2, #2563eb);
-}
-
-/* Code blocks get primary tint */
-/* pre { border-left: none; } */
-
-/* Blockquotes */
-blockquote {
-  border-left: 4px solid var(--color-primary-3, #3b82f6);
-  padding-left: var(--spacing-md, 1rem);
-  color: var(--text-2, #6b7280);
-  margin: var(--spacing-md, 1rem) 0;
-}
-
-/* Header anchors */
-a.header-anchor {
-  color: var(--color-primary-3, #3b82f6);
-  opacity: 0;
-  transition: opacity var(--transition-fast, 150ms);
-}
-
-h1:hover a.header-anchor,
-h2:hover a.header-anchor,
-h3:hover a.header-anchor,
-h4:hover a.header-anchor {
-  opacity: 1;
-}
-
-/* Tables */
-table th {
-  background: var(--color-primary-soft, rgba(59, 130, 246, 0.1));
-  color: var(--text-1, #111827);
-  font-weight: var(--font-weight-semibold, 600);
-}
-
-/* Focus rings */
-*:focus-visible {
-  outline: 2px solid var(--color-primary-3, #3b82f6);
-  outline-offset: 2px;
-}
-
-/* Selected text */
-::selection {
-  background: var(--color-primary-soft, rgba(59, 130, 246, 0.2));
-  color: var(--text-1, #111827);
-}