python/_includes/head-custom.html

<!-- Custom CSS -->
<link rel="stylesheet" href="{{ '/assets/css/custom.css' | relative_url }}">
<style>

  /* Table of Contents Styles */
  .toc {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    padding: 1.5rem;
    margin: 2rem 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .toc h3 {
    margin-top: 0;
    color: #495057;
    font-size: 1.2rem;
    border-bottom: 2px solid #157878;
    padding-bottom: 0.5rem;
  }
  
  .toc ul {
    list-style: none;
    padding-left: 0;
  }
  
  .toc li {
    margin: 0.5rem 0;
  }
  
  .toc a {
    color: #157878;
    text-decoration: none;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    transition: all 0.2s ease;
    display: block;
  }
  
  .toc a:hover {
    background-color: #157878;
    color: white;
  }
  
  .toc-level-2 {
    padding-left: 1rem;
  }
  
  .toc-level-3 {
    padding-left: 2rem;
  }

  /* Enhanced Main Content */
  .main-content {
    line-height: 1.8;
  }
  
  .main-content h1,
  .main-content h2,
  .main-content h3,
  .main-content h4 {
    color: #2c3e50;
    margin-top: 2rem;
    margin-bottom: 1rem;
  }
  
  .main-content h2 {
    border-bottom: 2px solid #157878;
    padding-bottom: 0.5rem;
  }
  
  .main-content h3 {
    border-left: 4px solid #157878;
    padding-left: 1rem;
  }

  /* Code block enhancements */
  .main-content pre {
    background: #2d3748;
    border-radius: 0.5rem;
    padding: 1.5rem;
    overflow-x: auto;
  }
  
  .main-content code {
    background: #f1f3f4;
    color: #d73a49;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.9em;
  }
  
  .main-content pre code {
    background: none;
    color: #e2e8f0;
    padding: 0;
  }

  /* Link styles */
  .main-content a {
    color: #157878;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
  }
  
  .main-content a:hover {
    border-bottom-color: #157878;
  }

  /* List enhancements */
  .main-content ul li,
  .main-content ol li {
    margin: 0.5rem 0;
  }

  /* Footer enhancements */
  .site-footer {
    border-top: 2px solid #157878;
    margin-top: 3rem;
    padding-top: 2rem;
  }
  
  .footer-stats {
    text-align: center;
    margin-top: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.5rem;
  }
  
  .footer-stats p {
    margin: 0;
    color: #6c757d;
  }

  /* Responsive improvements */
  @media screen and (max-width: 768px) {
    .language-toggle {
      text-align: center;
    }
    
    .btn-lang {
      display: block;
      margin: 0.5rem auto;
      max-width: 200px;
    }
    
    .toc {
      margin: 1rem 0;
      padding: 1rem;
    }
  }

  /* Scroll to top button */
  .scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: #157878;
    color: white;
    border: none;
    border-radius: 50%;
    width: 3rem;
    height: 3rem;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1000;
  }
  
  .scroll-to-top.show {
    opacity: 1;
  }
</style>

<!-- Add scroll to top functionality -->
<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Create scroll to top button
    const scrollBtn = document.createElement('button');
    scrollBtn.innerHTML = '↑';
    scrollBtn.className = 'scroll-to-top';
    scrollBtn.title = 'Scroll to top';
    document.body.appendChild(scrollBtn);
    
    // Show/hide scroll button
    window.addEventListener('scroll', function() {
      if (window.pageYOffset > 300) {
        scrollBtn.classList.add('show');
      } else {
        scrollBtn.classList.remove('show');
      }
    });
    
    // Scroll to top functionality
    scrollBtn.addEventListener('click', function() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    });
  });
</script>

<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🐍</text></svg>">

<!-- Additional Meta Tags -->
<meta name="keywords" content="Python, tutorials, learning, programming, resources, books, courses, guides, development">
<meta name="robots" content="index, follow">
<meta property="og:type" content="website">
<meta property="og:image" content="{{ site.url }}/assets/images/og-image.png">
<meta name="twitter:card" content="summary_large_image">