@mgks/docmd 0.1.2 → 0.1.4

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

@@ -0,0 +1,606 @@
+/* docmd-theme-ruby.css - Ruby theme for docmd */
+
+/* Import Google Fonts for Ruby theme */
+@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Source+Sans+Pro:wght@300;400;600;700&display=swap');
+
+:root [data-theme="light"] {
+  /* Font family */
+  --ruby-font-family-sans: 'Source Sans Pro', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  --ruby-font-family-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
+  --ruby-font-family-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+  
+  /* Color palette - Light mode */
+  --ruby-primary: #b30000;         /* Deep ruby red */
+  --ruby-primary-light: #ffebee;   /* Very light red */
+  --ruby-primary-dark: #8e0000;    /* Darker ruby red */
+  --ruby-accent: #7b1fa2;          /* Complementary purple */
+  --ruby-accent-light: #f3e5f5;    /* Light purple */
+  --ruby-text: #2d2d2d;            /* Nearly black text */
+  --ruby-text-light: #5a5a5a;      /* Medium gray text */
+  --ruby-text-lightest: #757575;   /* Light gray text */
+  --ruby-background: #ffffff;      /* White background */
+  --ruby-background-alt: #fafafa;  /* Very light gray background */
+  --ruby-border: #e0e0e0;          /* Light gray border */
+  --ruby-border-light: #f0f0f0;    /* Very light gray border */
+  
+  /* Apply colors to CSS variables */
+  --bg-color: var(--ruby-background);
+  --text-color: var(--ruby-text);
+  --sidebar-bg: #f8f5f5;
+  --sidebar-text: var(--ruby-text-light);
+  --sidebar-link-active-bg: #f8e7e7;
+  --sidebar-link-active-text: var(--ruby-primary);
+  --link-color: var(--ruby-primary);
+  --border-color: var(--ruby-border);
+  --code-bg: var(--ruby-primary-light);
+  --code-text: var(--ruby-primary-dark);
+  --header-bg: var(--ruby-background);
+  --header-border: var(--ruby-border);
+  
+  /* Box shadows with ruby tint */
+  --shadow-sm: 0 2px 4px rgba(179, 0, 0, 0.05);
+  --shadow-md: 0 4px 8px rgba(179, 0, 0, 0.1);
+  --shadow-lg: 0 8px 16px rgba(179, 0, 0, 0.15);
+  
+  /* Image styling variables */
+  --image-border-color: var(--ruby-border);
+  --image-shadow: var(--shadow-md);
+  --image-caption-bg: var(--ruby-background-alt);
+  --image-caption-text: var(--ruby-text-light);
+  --image-hover-transform: translateY(-3px);
+  --image-hover-shadow: var(--shadow-lg);
+  --image-border-radius: 6px;
+  --image-transition: all 0.3s ease;
+}
+
+/* Dark mode */
+:root [data-theme="dark"] {
+  /* Color palette - Dark mode */
+  --ruby-primary: #ff5252;         /* Bright ruby red */
+  --ruby-primary-light: #3c1a1a;   /* Dark red background */
+  --ruby-primary-dark: #ff7b7b;    /* Lighter ruby red */
+  --ruby-accent: #ce93d8;          /* Light purple */
+  --ruby-accent-light: #2a1a2a;    /* Dark purple background */
+  --ruby-text: #f0f0f0;            /* Nearly white text */
+  --ruby-text-light: #c0c0c0;      /* Light gray text */
+  --ruby-text-lightest: #a0a0a0;   /* Medium gray text */
+  --ruby-background: #1a0a0a;      /* Very dark red-tinted background */
+  --ruby-background-alt: #2a1515;  /* Dark red-tinted background */
+  --ruby-border: #3a2020;          /* Dark red-tinted border */
+  --ruby-border-light: #2a1818;    /* Very dark red-tinted border */
+  
+  /* Apply colors to CSS variables */
+  --bg-color: var(--ruby-background);
+  --text-color: var(--ruby-text);
+  --sidebar-bg: #1a0a0a;
+  --sidebar-text: var(--ruby-text-light);
+  --sidebar-link-active-bg: #2a1515;
+  --sidebar-link-active-text: var(--ruby-primary);
+  --link-color: var(--ruby-primary);
+  --border-color: var(--ruby-border);
+  --code-bg: var(--ruby-primary-light);
+  --code-text: var(--ruby-text);
+  --header-bg: var(--ruby-background);
+  --header-border: var(--ruby-border);
+  
+  /* Box shadows for dark mode */
+  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3);
+  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4);
+  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.5);
+  
+  /* Image styling variables for dark mode */
+  --image-border-color: var(--ruby-border);
+  --image-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
+  --image-caption-bg: var(--ruby-background-alt);
+  --image-caption-text: var(--ruby-text-light);
+  --image-hover-transform: translateY(-3px);
+  --image-hover-shadow: 0 6px 12px rgba(0, 0, 0, 0.7);
+  --image-border-radius: 6px;
+  --image-transition: all 0.3s ease;
+}
+
+/* Apply theme styles */
+
+/* Typography improvements */
+body {
+  font-family: var(--ruby-font-family-sans);
+  line-height: 1.7;
+  letter-spacing: 0.01em;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--ruby-font-family-serif);
+  font-weight: 600;
+  line-height: 1.3;
+  margin-top: 2em;
+  margin-bottom: 0.7em;
+  color: var(--ruby-text);
+  letter-spacing: -0.01em;
+}
+
+h1 {
+  font-size: 2.5rem;
+  font-weight: 700;
+  margin-top: 0;
+  position: relative;
+  padding-bottom: 0.5rem;
+}
+
+h1::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 60px;
+  height: 3px;
+  background: linear-gradient(90deg, var(--ruby-primary), var(--ruby-accent));
+  border-radius: 3px;
+}
+
+h2 {
+  font-size: 1.9rem;
+  border-bottom: 1px solid var(--ruby-border-light);
+  padding-bottom: 0.5rem;
+}
+
+h3 {
+  font-size: 1.6rem;
+}
+
+h4 {
+  font-size: 1.3rem;
+}
+
+a {
+  color: var(--link-color);
+  text-decoration: none;
+  transition: color 0.2s ease;
+  position: relative;
+}
+
+a:hover {
+  color: var(--ruby-primary-dark);
+}
+
+/* Stylish underline effect for links in content */
+.content-area a:not(.button):not(.no-underline)::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 1px;
+  bottom: 0;
+  left: 0;
+  background: linear-gradient(90deg, var(--ruby-primary), var(--ruby-accent));
+  transform: scaleX(0);
+  transform-origin: bottom right;
+  transition: transform 0.3s ease;
+}
+
+.content-area a:not(.button):not(.no-underline):hover::after {
+  transform: scaleX(1);
+  transform-origin: bottom left;
+}
+
+p {
+  margin: 0.7em 0;
+  padding: 0.3em 0;
+  line-height: 1.8;
+}
+
+/* Sidebar refinements */
+.sidebar {
+  box-shadow: var(--shadow-sm);
+  border-right: 1px solid var(--ruby-border);
+}
+
+.sidebar-header {
+  border-bottom: 2px solid var(--ruby-border);
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+}
+
+.sidebar nav li a {
+  border-radius: 4px;
+  margin-bottom: 3px;
+  transition: all 0.3s ease;
+  padding: 0.6rem 0.8rem;
+  font-weight: 400;
+}
+
+.sidebar nav li a:hover {
+  background-color: var(--sidebar-link-active-bg);
+  color: var(--ruby-primary);
+  transform: translateX(3px);
+}
+
+.sidebar nav li a.active {
+  background-color: var(--sidebar-link-active-bg);
+  color: var(--sidebar-link-active-text);
+  font-weight: 600;
+  border-left: 3px solid var(--ruby-primary);
+}
+
+/* Content area */
+.content-area {
+  padding: 2.5rem 5%;
+}
+
+/* Code blocks */
+pre {
+  background-color: var(--code-bg);
+  border-radius: 6px;
+  margin: 1.5em 0;
+  padding: 1.25em;
+  box-shadow: var(--shadow-sm);
+  border-left: 3px solid var(--ruby-primary);
+}
+
+code {
+  font-family: var(--ruby-font-family-mono);
+  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: 6px;
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+}
+
+th {
+  background-color: var(--ruby-primary-light);
+  color: var(--ruby-primary-dark);
+  text-align: left;
+  font-weight: 600;
+  padding: 0.75rem 1rem;
+  border-bottom: 2px solid var(--ruby-border);
+}
+
+td {
+  padding: 0.75rem 1rem;
+  border-top: 1px solid var(--ruby-border-light);
+}
+
+tr:hover {
+  background-color: var(--ruby-background-alt);
+}
+
+/* Custom container styling for Ruby theme */
+.docmd-container {
+  padding: 1.2rem 1.5rem;
+  margin: 1.75rem 0;
+  border-radius: 6px;
+  border: 1px solid var(--ruby-border-light);
+  background-color: var(--ruby-background);
+  box-shadow: var(--shadow-sm);
+  position: relative;
+  overflow: hidden;
+}
+
+/* Add gem-like facet to containers */
+.docmd-container::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  background: linear-gradient(90deg, var(--ruby-primary), var(--ruby-accent));
+}
+
+/* Callouts */
+.callout {
+  position: relative;
+  border: none;
+  border-left: 4px solid;
+  background-color: var(--ruby-background-alt);
+}
+
+.callout-title {
+  font-family: var(--ruby-font-family-serif);
+  font-weight: 600;
+  margin-bottom: 0.75em;
+  display: flex;
+  align-items: center;
+  font-size: 1.1em;
+}
+
+.callout-title::before {
+  margin-right: 0.5rem;
+  font-size: 1.1em;
+}
+
+.callout-info {
+  border-left-color: var(--ruby-primary);
+}
+
+.callout-info .callout-title {
+  color: var(--ruby-primary);
+}
+
+.callout-warning {
+  border-left-color: #f39c12;
+}
+
+.callout-warning .callout-title {
+  color: #f39c12;
+}
+
+.callout-tip {
+  border-left-color: #2ecc71;
+}
+
+.callout-tip .callout-title {
+  color: #2ecc71;
+}
+
+.callout-danger {
+  border-left-color: #e74c3c;
+}
+
+.callout-danger .callout-title {
+  color: #e74c3c;
+}
+
+.callout-success {
+  border-left-color: #2ecc71;
+}
+
+.callout-success .callout-title {
+  color: #2ecc71;
+}
+
+/* Cards with gem-like styling */
+.card {
+  border: none;
+  border-radius: 6px;
+  background: linear-gradient(135deg, var(--ruby-background) 0%, var(--ruby-background-alt) 100%);
+  box-shadow: var(--shadow-md);
+  transition: all 0.3s ease;
+  overflow: hidden;
+}
+
+.card:hover {
+  transform: translateY(-5px);
+  box-shadow: var(--shadow-lg);
+}
+
+.card .card-title {
+  font-family: var(--ruby-font-family-serif);
+  font-weight: 600;
+  padding: 1rem 1.5rem;
+  margin: 0;
+  background: linear-gradient(90deg, var(--ruby-primary-light), var(--ruby-accent-light));
+  color: var(--ruby-primary-dark);
+  border-bottom: 1px solid var(--ruby-border);
+}
+
+.card .card-content {
+  padding: 1rem 1.5rem;
+}
+
+/* Steps styling */
+.steps {
+  counter-reset: step-counter;
+  position: relative;
+  padding-left: 1rem;
+}
+
+.steps h4 {
+  position: relative;
+  padding-left: 2.5rem;
+  margin-top: 2rem;
+  margin-bottom: 1rem;
+  font-family: var(--ruby-font-family-serif);
+}
+
+.steps h4::before {
+  content: counter(step-counter);
+  counter-increment: step-counter;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1.8rem;
+  height: 1.8rem;
+  background: linear-gradient(135deg, var(--ruby-primary) 0%, var(--ruby-accent) 100%);
+  color: white;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.9rem;
+  font-weight: 600;
+  box-shadow: var(--shadow-sm);
+}
+
+/* Buttons */
+button, .button {
+  background: linear-gradient(135deg, var(--ruby-primary) 0%, var(--ruby-accent) 100%);
+  color: white;
+  border: none;
+  padding: 0.6rem 1.2rem;
+  border-radius: 4px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  box-shadow: var(--shadow-sm);
+}
+
+button:hover, .button:hover {
+  box-shadow: var(--shadow-md);
+  transform: translateY(-2px);
+}
+
+.theme-toggle-button {
+  background: transparent;
+  color: var(--ruby-text-light);
+  box-shadow: none;
+}
+
+.theme-toggle-button:hover {
+  background: var(--ruby-background-alt);
+  color: var(--ruby-primary);
+  box-shadow: var(--shadow-sm);
+  transform: translateY(0);
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+  .content-area {
+    padding: 1.5rem 1rem;
+  }
+  
+  h1 {
+    font-size: 2rem;
+  }
+  
+  h2 {
+    font-size: 1.6rem;
+  }
+  
+  h3 {
+    font-size: 1.3rem;
+  }
+}
+
+/* Image styling */
+img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--image-border-radius);
+  transition: var(--image-transition);
+}
+
+img.with-border {
+  border: 1px solid var(--image-border-color);
+  padding: 4px;
+}
+
+img.with-shadow {
+  box-shadow: var(--image-shadow);
+}
+
+img.with-shadow:hover {
+  box-shadow: var(--image-hover-shadow);
+  transform: var(--image-hover-transform);
+}
+
+figure {
+  margin: 1.5em 0;
+  text-align: center;
+  transition: var(--image-transition);
+}
+
+figure:hover {
+  transform: var(--image-hover-transform);
+}
+
+figure img {
+  max-width: 100%;
+  border-radius: var(--image-border-radius);
+}
+
+figcaption {
+  background-color: var(--image-caption-bg);
+  color: var(--image-caption-text);
+  padding: 0.5em;
+  font-size: 0.9em;
+  border-radius: 0 0 var(--image-border-radius) var(--image-border-radius);
+  font-style: italic;
+}
+
+/* Image gallery */
+.image-gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 1rem;
+  margin: 1.5em 0;
+}
+
+.image-gallery figure {
+  margin: 0;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--image-border-radius);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+}
+
+.image-gallery figure:hover {
+  box-shadow: var(--shadow-md);
+}
+
+.image-gallery img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: var(--image-border-radius) var(--image-border-radius) 0 0;
+  transition: transform 0.3s ease;
+}
+
+.image-gallery figcaption {
+  padding: 0.5rem;
+  background-color: var(--image-caption-bg);
+  color: var(--image-caption-text);
+  font-size: 0.85rem;
+  border-radius: 0;
+}
+
+/* Zoom effect for gallery images */
+.image-gallery.zoom img {
+  transition: transform 0.3s ease;
+}
+
+.image-gallery.zoom figure:hover img {
+  transform: scale(1.05);
+}
+
+/* Lightbox image styling */
+img.lightbox {
+  cursor: zoom-in;
+}
+
+/* Framed image styling */
+img.framed {
+  border: 8px solid white;
+  box-shadow: 0 0 0 1px var(--ruby-border), var(--shadow-md);
+  border-radius: 3px;
+}
+
+/* Polaroid-style image */
+figure.polaroid {
+  background: white;
+  padding: 10px 10px 20px;
+  box-shadow: var(--shadow-md);
+  border-radius: 3px;
+}
+
+figure.polaroid img {
+  border-radius: 2px;
+}
+
+figure.polaroid figcaption {
+  background: white;
+  color: var(--ruby-text);
+  font-family: var(--ruby-font-family-serif);
+  font-style: italic;
+}
+
+/* Mobile responsiveness for images */
+@media (max-width: 768px) {
+  .image-gallery {
+    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+  }
+  
+  .image-gallery img {
+    height: 120px;
+  }
+}