jekyll-theme-zer0 0.10.6 → 0.15.0

data/_sass/notebooks.scss

@@ -0,0 +1,458 @@
+// ==============================================================================
+// NOTEBOOK STYLES - Jupyter Notebook Display Styling
+// ==============================================================================
+// 
+// File: _notebooks.scss
+// Path: _sass/notebooks.scss
+// Purpose: Styles for Jupyter notebook cells, outputs, and code blocks
+// 
+// Features:
+// - Code cell styling with execution counts
+// - Output area styling (text, images, tables)
+// - Responsive design for mobile and desktop
+// - Syntax highlighting integration with Rouge
+// - MathJax equation display
+// - Bootstrap 5 compatible
+// 
+// Dependencies:
+// - Bootstrap 5 variables and utilities
+// - Rouge syntax highlighter
+// - MathJax for mathematical notation
+// ==============================================================================
+
+// Notebook article container
+.notebook-article {
+  // Ensure proper spacing and readability
+  line-height: 1.6;
+  
+  .notebook-header {
+    border-bottom: 2px solid var(--bs-border-color);
+    padding-bottom: 1.5rem;
+  }
+  
+  .notebook-title {
+    color: var(--bs-heading-color);
+    font-weight: 700;
+    margin-bottom: 1rem;
+  }
+  
+  .notebook-meta {
+    font-size: 0.9rem;
+    
+    .bi {
+      font-size: 1rem;
+      vertical-align: text-bottom;
+    }
+  }
+  
+  .notebook-description {
+    color: var(--bs-secondary-color);
+    font-size: 1.1rem;
+    border-left: 4px solid var(--bs-primary);
+    padding-left: 1rem;
+    margin: 1.5rem 0;
+  }
+}
+
+// Notebook content area
+.notebook-content {
+  margin-top: 2rem;
+  
+  // Headings within notebook
+  h1, h2, h3, h4, h5, h6 {
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+    font-weight: 600;
+  }
+  
+  h1 { font-size: 2rem; }
+  h2 { font-size: 1.75rem; }
+  h3 { font-size: 1.5rem; }
+  h4 { font-size: 1.25rem; }
+  h5 { font-size: 1.1rem; }
+  h6 { font-size: 1rem; }
+  
+  // Paragraphs
+  p {
+    margin-bottom: 1rem;
+    line-height: 1.7;
+  }
+  
+  // Lists
+  ul, ol {
+    margin-bottom: 1rem;
+    padding-left: 2rem;
+    
+    li {
+      margin-bottom: 0.5rem;
+    }
+  }
+  
+  // Blockquotes
+  blockquote {
+    border-left: 4px solid var(--bs-secondary);
+    padding-left: 1rem;
+    margin: 1.5rem 0;
+    font-style: italic;
+    color: var(--bs-secondary-color);
+  }
+  
+  // Links
+  a {
+    color: var(--bs-link-color);
+    text-decoration: underline;
+    
+    &:hover {
+      color: var(--bs-link-hover-color);
+    }
+  }
+  
+  // Images
+  img {
+    max-width: 100%;
+    height: auto;
+    margin: 1rem 0;
+    border-radius: 0.375rem;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  }
+  
+  // Tables
+  table {
+    width: 100%;
+    margin: 1.5rem 0;
+    border-collapse: collapse;
+    font-size: 0.9rem;
+    
+    thead {
+      background-color: var(--bs-secondary-bg);
+      border-bottom: 2px solid var(--bs-border-color);
+      
+      th {
+        padding: 0.75rem;
+        text-align: left;
+        font-weight: 600;
+      }
+    }
+    
+    tbody {
+      tr {
+        border-bottom: 1px solid var(--bs-border-color);
+        
+        &:hover {
+          background-color: var(--bs-tertiary-bg);
+        }
+      }
+      
+      td {
+        padding: 0.75rem;
+      }
+    }
+  }
+  
+  // Horizontal rules
+  hr {
+    margin: 2rem 0;
+    opacity: 0.3;
+  }
+}
+
+// Code cells and code blocks
+.notebook-content {
+  // Inline code
+  code {
+    background-color: var(--bs-secondary-bg);
+    color: var(--bs-code-color);
+    padding: 0.2rem 0.4rem;
+    border-radius: 0.25rem;
+    font-size: 0.875em;
+    font-family: 'Monaco', 'Menlo', 'Consolas', monospace;
+  }
+  
+  // Code blocks
+  pre {
+    background-color: var(--bs-secondary-bg);
+    border: 1px solid var(--bs-border-color);
+    border-radius: 0.375rem;
+    padding: 1rem;
+    overflow-x: auto;
+    margin: 1.5rem 0;
+    
+    code {
+      background-color: transparent;
+      color: inherit;
+      padding: 0;
+      border-radius: 0;
+      font-size: 0.875rem;
+      line-height: 1.5;
+    }
+  }
+  
+  // Jupyter code cells with execution counts
+  .highlight {
+    position: relative;
+    background-color: var(--bs-secondary-bg);
+    border-radius: 0.375rem;
+    margin: 1.5rem 0;
+    
+    pre {
+      margin: 0;
+      border: none;
+      background-color: transparent;
+      border-radius: 0;
+    }
+  }
+  
+  // Input prompts (In [1]:)
+  .input-prompt {
+    color: var(--bs-primary);
+    font-weight: 600;
+    user-select: none;
+    padding-right: 0.5rem;
+    
+    &::before {
+      content: 'In [';
+    }
+    
+    &::after {
+      content: ']:';
+    }
+  }
+  
+  // Output prompts (Out [1]:)
+  .output-prompt {
+    color: var(--bs-danger);
+    font-weight: 600;
+    user-select: none;
+    padding-right: 0.5rem;
+    
+    &::before {
+      content: 'Out[';
+    }
+    
+    &::after {
+      content: ']:';
+    }
+  }
+}
+
+// Jupyter output areas
+.jp-OutputArea,
+.output-area,
+.cell-output {
+  margin: 1rem 0;
+  padding: 1rem;
+  background-color: var(--bs-light-bg-subtle);
+  border-left: 4px solid var(--bs-success);
+  border-radius: 0.375rem;
+  
+  // Text output
+  pre {
+    background-color: transparent;
+    border: none;
+    padding: 0;
+    margin: 0;
+    color: var(--bs-body-color);
+  }
+  
+  // Image output
+  img {
+    display: block;
+    max-width: 100%;
+    height: auto;
+    margin: 0 auto;
+  }
+  
+  // Table output (pandas DataFrames)
+  table {
+    margin: 0;
+    font-size: 0.85rem;
+  }
+  
+  // Error output
+  &.error {
+    border-left-color: var(--bs-danger);
+    background-color: var(--bs-danger-bg-subtle);
+    color: var(--bs-danger-text);
+    
+    pre {
+      color: var(--bs-danger-text);
+    }
+  }
+}
+
+// Jupyter cell containers
+.jp-Cell,
+.cell {
+  margin: 2rem 0;
+  
+  // Code cells
+  &.jp-CodeCell,
+  &.code-cell {
+    .jp-InputArea,
+    .input-area {
+      position: relative;
+    }
+  }
+  
+  // Markdown cells
+  &.jp-MarkdownCell,
+  &.markdown-cell {
+    // Inherits from .notebook-content styles
+  }
+}
+
+// MathJax equations
+.MathJax,
+.MathJax_Display {
+  font-size: 1.1em !important;
+  
+  // Inline math
+  &.MathJax_Inline {
+    margin: 0 0.2em;
+  }
+  
+  // Display math (centered)
+  &.MathJax_Display {
+    margin: 1.5rem 0;
+    text-align: center;
+  }
+}
+
+// LaTeX equations (before MathJax processes them)
+.tex,
+.latex {
+  font-family: 'Computer Modern', serif;
+}
+
+// Notebook footer
+.notebook-footer {
+  margin-top: 3rem;
+  padding-top: 2rem;
+  
+  .share-buttons {
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+  }
+  
+  .download-notebook {
+    .btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+  }
+  
+  .related-notebooks {
+    .card {
+      transition: transform 0.2s, box-shadow 0.2s;
+      
+      &:hover {
+        transform: translateY(-4px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      }
+    }
+  }
+}
+
+// Notebook navigation
+.notebook-navigation {
+  margin-top: 3rem;
+  
+  .pagination {
+    .page-link {
+      display: flex;
+      align-items: center;
+      padding: 0.75rem 1rem;
+      
+      &.disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+
+// Responsive adjustments
+@media (max-width: 768px) {
+  .notebook-content {
+    // Smaller font sizes on mobile
+    font-size: 0.95rem;
+    
+    h1 { font-size: 1.75rem; }
+    h2 { font-size: 1.5rem; }
+    h3 { font-size: 1.25rem; }
+    h4 { font-size: 1.1rem; }
+    
+    // Scrollable code blocks
+    pre {
+      font-size: 0.8rem;
+    }
+    
+    // Scrollable tables
+    table {
+      display: block;
+      overflow-x: auto;
+      white-space: nowrap;
+    }
+  }
+  
+  .notebook-footer {
+    .related-notebooks {
+      .col-md-4 {
+        margin-bottom: 1rem;
+      }
+    }
+  }
+  
+  .notebook-navigation {
+    .pagination {
+      flex-direction: column;
+      gap: 0.5rem;
+      
+      .page-item {
+        width: 100%;
+        
+        .page-link {
+          width: 100%;
+          text-align: center;
+        }
+      }
+    }
+  }
+}
+
+// Print styles
+@media print {
+  .notebook-article {
+    .notebook-footer,
+    .share-buttons,
+    .notebook-comments,
+    .notebook-navigation {
+      display: none;
+    }
+  }
+}
+
+// Dark mode support (if theme implements dark mode)
+@media (prefers-color-scheme: dark) {
+  .notebook-content {
+    .highlight,
+    pre {
+      background-color: var(--bs-dark-bg-subtle);
+      border-color: var(--bs-border-color-translucent);
+    }
+  }
+  
+  .jp-OutputArea,
+  .output-area,
+  .cell-output {
+    background-color: var(--bs-dark-bg-subtle);
+    
+    &.error {
+      background-color: rgba(220, 53, 69, 0.1);
+    }
+  }
+}