# Publish CSS
### **1. General Layout**
- **Body:**
- [ ] Background color
- [ ] Text color
- [ ] Font family
- [ ] Font size
- [ ] Padding/margin
- [ ] **Container (published-container):**
- [ ] Maximum width
- [ ] Margins and padding
- [ ] Background
- [ ] Shadows
- [ ] Border radius
---
### **2. Typography**
- [ ] **Headers (h1–h6):**
- [ ] Font size
- [ ] Font family
- [ ] Font weight
- [ ] Text color
- [ ] Line height
- [ ] Letter spacing
- [ ] Border (e.g., underline or above)
- [ ] **Paragraphs (p):**
- [ ] Font size
- [ ] Font weight
- [ ] Text alignment
- [ ] Line height
- [ ] Color
- [ ] **Inline Text (span, strong, em):**
- [ ] Color (e.g., emphasis colors for `strong` or `em`)
- [ ] Bold/Italic/Underline styling
- [ ] Highlight or background color
---
### **3. Links and Buttons**
- [ ] **Links (a):**
- [ ] Text color
- [ ] Hover effects (e.g., underline, color change)
- [ ] Transition effects (smooth hover)
- [ ] **Buttons:**
- [ ] Background color
- [ ] Border styles
- [ ] Shadows
- [ ] Hover and active effects
- [ ] Font size and alignment
---
### **4. Lists**
- [ ] **Ordered Lists (ol):**
- [ ] Number style (e.g., decimal, Roman numerals)
- [ ] Margin and padding
- [ ] Line height
- [ ] **Unordered Lists (ul):**
- [ ] Bullet style (circle, square, custom icon)
- [ ] Indentation
---
### **5. Tables**
- [ ] **Table (table):**
- [ ] Border styles (e.g., solid, dashed)
- [ ] Alternating row colors
- [ ] Header background and text color
- [ ] Padding and alignment for cells
---
### **6. Code and Preformatted Blocks**
- [ ] **Inline Code (code):**
- [ ] Font family
- [ ] Background color
- [ ] Padding
- [ ] Border radius
- [ ] **Code Blocks (pre):**
- [ ] Background color
- [ ] Syntax highlighting colors
- [ ] Line numbers
- [ ] Scrollbar customization
---
### **7. Blockquotes**
- Background color
- Border styles (e.g., side border)
- Font style (italic, bold)
- Padding and margins
---
### **8. Images**
- Border styles and radius
- Shadows
- Caption positioning
- Max width and height
---
### **9. Navigation and Sidebars**
- Sidebar (e.g., tree navigation, graph view):
- Background color
- Link styling
- Highlight/active state
- Header bar:
- Background color
- Font size
- Shadows
---
### **10. Graph View**
- Node colors
- Link colors
- Hover effects
- Background styling
---
### **11. Light/Dark Theme Switch**
- Ensure all elements switch seamlessly between:
- Text colors
- Background colors
- Borders and shadows
---
### **12. Interactive Elements**
- **Search Bar:**
- Background and border styling
- Placeholder text color
- Focus state effects
- **Toggle Switches:**
- Size and shape
- Colors for on/off states
- Smooth animations
---
### **13. Miscellaneous Elements**
- Horizontal rules (`<hr>`):
- Line thickness, color, and style
- Icons (e.g., lucide icons):
- Color and hover effects
- Size adjustments
- Scrollbars:
- Track and thumb styling
- Width adjustments
- Hover or active effects
---
### **14. Media Queries**
- Adjust styles for:
- Mobile devices
- Tablets
- Large desktop screens
---
### **15. Animations and Transitions**
- Smooth transitions for hover effects
- Loading animations for graphs or sidebars
- Delayed transitions (e.g., fade-in text)