rishi raj's blog

Customization Guide

This guide covers how to customize the Sobolev2 Jekyll theme to match your brand and preferences.

Table of Contents

Color Customization

Theme Colors

The theme uses CSS custom properties for easy color customization. Edit _sass/utilities/_theme.scss:

:root {
  // Primary colors
  --primary-color: #007acc;
  --primary-hover: #005a99;
  --primary-light: #4a9eff;
  
  // Secondary colors
  --secondary-color: #6c757d;
  --secondary-hover: #545b62;
  --secondary-light: #adb5bd;
  
  // Accent colors
  --accent-color: #28a745;
  --accent-hover: #1e7e34;
  --accent-light: #6fcf97;
  
  // Text colors
  --text-primary: #333333;
  --text-secondary: #6c757d;
  --text-muted: #adb5bd;
  
  // Background colors
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  
  // Border colors
  --border-color: #dee2e6;
  --border-light: #f1f3f4;
  
  // Link colors
  --link-color: var(--primary-color);
  --link-hover: var(--primary-hover);
  --link-visited: #6f42c1;
}

// Dark mode colors
[data-theme="dark"] {
  --text-primary: #e0e0e0;
  --text-secondary: #b0b0b0;
  --text-muted: #808080;
  
  --bg-primary: #1a1a1a;
  --bg-secondary: #2d2d2d;
  --bg-tertiary: #404040;
  
  --border-color: #404040;
  --border-light: #2d2d2d;
}

Color Schemes

Light Mode

:root {
  --primary-color: #007acc;
  --bg-primary: #ffffff;
  --text-primary: #333333;
}

Dark Mode

[data-theme="dark"] {
  --primary-color: #4a9eff;
  --bg-primary: #1a1a1a;
  --text-primary: #e0e0e0;
}

Custom Brand Colors

:root {
  --primary-color: #your-brand-color;
  --accent-color: #your-accent-color;
}

Typography

Font Customization

Edit _sass/utilities/_theme.scss to change fonts:

:root {
  // Font families
  --font-primary: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "Roboto Mono", "SF Mono", Monaco, "Cascadia Code", "Roboto Mono", Consolas, "Courier New", monospace;
  
  // Font sizes
  --font-size-xs: 0.75rem;    // 12px
  --font-size-sm: 0.875rem;   // 14px
  --font-size-base: 1rem;     // 16px
  --font-size-lg: 1.125rem;   // 18px
  --font-size-xl: 1.25rem;    // 20px
  --font-size-2xl: 1.5rem;    // 24px
  --font-size-3xl: 1.875rem;  // 30px
  --font-size-4xl: 2.25rem;   // 36px
  
  // Font weights
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  
  // Line heights
  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;
}

Custom Fonts

To use custom fonts:

  1. Add font files to assets/fonts/
  2. Update CSS in _sass/utilities/_theme.scss:
@font-face {
  font-family: "Your Custom Font";
  src: url("../assets/fonts/your-font.woff2") format("woff2"),
       url("../assets/fonts/your-font.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --font-primary: "Your Custom Font", sans-serif;
}

Layout Modifications

Container Widths

Adjust maximum container widths in _sass/utilities/_layout.scss:

.u-container {
  max-width: 1200px; // Default: 1200px
  margin: 0 auto;
  padding: 0 1rem;
}

// Responsive breakpoints
@media (max-width: 768px) {
  .u-container {
    padding: 0 0.5rem;
  }
}

Grid System

Customize the grid system:

// Grid columns
.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

// Card grid
.cards-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
}

Customize navigation in _config.yml:

theme:
  navigation:
    - title: "Home"
      url: "/"
    - title: "About"
      url: "/about"
    - title: "Blog"
      url: "/"
    - title: "Talks"
      url: "/talks"
    - title: "Activities"
      url: "/activities"
    - title: "Contact"
      url: "/contact"

Edit _sass/components/_header.scss:

.navigation {
  // Navigation container
  &__list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  &__item {
    margin-right: 2rem;
  }
  
  &__link {
    color: var(--text-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: color 0.2s ease;
    
    &:hover {
      color: var(--primary-color);
    }
  }
}

Components

Cards

Customize card components in _sass/components/_cards.scss:

.c-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  padding: 1.5rem;
  transition: all 0.2s ease;
  
  &:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
  }
  
  &__title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: 0.5rem;
  }
  
  &__content {
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
  }
}

Buttons

Create custom button styles:

.btn {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px;
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  
  &--primary {
    background: var(--primary-color);
    color: white;
    
    &:hover {
      background: var(--primary-hover);
    }
  }
  
  &--secondary {
    background: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    
    &:hover {
      background: var(--primary-color);
      color: white;
    }
  }
}

Advanced Customization

Custom Layouts

Create new layouts in _layouts/:

<!-- _layouts/custom.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="language" content="en">
  <meta name="geo.region" content="IN">
  <meta name="geo.placename" content="India">
  <meta name="distribution" content="global">
  <meta name="rating" content="general">
  <meta name="robots" content="index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1">
  <meta http-equiv="Cache-Control" content="public, max-age=3600">
  <meta name="format-detection" content="telephone=no">
  <meta http-equiv="Expires" content="3600">
  <meta name="theme-color" content="#00A36C">
  <meta name="msapplication-TileColor" content="#00A36C">
  <meta http-equiv="X-Content-Type-Options" content="nosniff">
  <meta http-equiv="X-Frame-Options" content="DENY">
  <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin">

  <!-- Favicon -->
  <!-- Essential favicons only for better performance -->
<link rel="icon" type="image/x-icon" href="/assets/images/favicons/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="/assets/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicons/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="/assets/images/favicons/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="/assets/images/favicons/android-icon-192x192.png">
<link rel="manifest" href="/assets/images/favicons/manifest.json">
<meta name="theme-color" content="#00A36C">


  <!-- Meta information -->
  <title>Customization Guide</title>
  <meta name="description"
        content="On marketing, tech, and building a services co.
">
  <link rel="canonical"
        href="https://rishiraj.blog/sobolev2-jekyll-theme/CUSTOMIZATION" />

  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://rishiraj.blog/sobolev2-jekyll-theme/CUSTOMIZATION">
  <meta property="og:title" content="Customization Guide">
  <meta property="og:description" content="On marketing, tech, and building a services co.
">
  <meta property="og:image" content="https://rishiraj.blog/assets/images/workspace-hero.jpg">
  <meta property="og:site_name" content="rishi raj's blog">
  <meta property="og:locale" content="en_US">

  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:url" content="https://rishiraj.blog/sobolev2-jekyll-theme/CUSTOMIZATION">
  <meta property="twitter:title" content="Customization Guide">
  <meta property="twitter:description" content="On marketing, tech, and building a services co.
">
  <meta property="twitter:image" content="https://rishiraj.blog/assets/images/workspace-hero.jpg">
  <meta property="twitter:creator" content="@rishiraj">

  <!-- Article specific meta tags -->
  

  <!-- Open search scheme -->
  <link rel="search"
        type="application/opensearchdescription+xml"
        title="rishi raj's blog"
        href="/opensearch.xml" />

  <!-- Feed -->
  <link rel="alternate" type="application/rss+xml" title="rishi raj's blog"
        href="/feed.xml" />

  <!-- Structured Data -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "WebSite",
    "name": "rishi raj's blog",
    "description": "On marketing, tech, and building a services co.
",
    "url": "https://rishiraj.blog",
    "author": {
      "@type": "Person",
      "name": "Rishi Raj",
      "email": "r@rishi.im",
      "url": "https://rishiraj.blog/rishi-raj/"
    },
    "publisher": {
      "@type": "Organization",
      "name": "rishi raj's blog",
      "logo": {
        "@type": "ImageObject",
        "url": "https://rishiraj.blog/assets/images/favicons/favicon-96x96.png"
      }
    },
    "potentialAction": {
      "@type": "SearchAction",
      "target": "https://rishiraj.blog/search?q={search_term_string}",
      "query-input": "required name=search_term_string"
    }
  }
  </script>

  <!-- Organization Schema -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "rishi raj's blog",
    "url": "https://rishiraj.blog",
    "logo": {
      "@type": "ImageObject",
      "url": "https://rishiraj.blog/assets/images/favicons/favicon-96x96.png",
      "width": 96,
      "height": 96
    },
    "description": "On marketing, tech, and building a services co.
",
    "foundingDate": "2025",
    "address": {
      "@type": "PostalAddress",
      "addressCountry": "IN",
      "addressLocality": "New Delhi",
      "addressRegion": "Delhi"
    },
    "contactPoint": {
      "@type": "ContactPoint",
      "contactType": "customer service",
      "email": "r@rishi.im"
    },
    "sameAs": [
      "https://hello.talkxo.com",
      "https://github.com/talkxo"
    ]
  }
  </script>

  <!-- Person Schema -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Person",
    "name": "Rishi Raj",
    "email": "r@rishi.im",
    "url": "https://rishiraj.blog/rishi-raj/",
    "image": "https://rishiraj.blog/assets/images/workspace-hero.jpg",
    "description": "Multi-disciplinary marketer from New Delhi, India. Expertise in strategic planning, content and communications, and creating effective team processes.",
    "jobTitle": "Multi-disciplinary Marketer",
    "worksFor": {
      "@type": "Organization",
      "name": "TalkXO",
      "url": "https://hello.talkxo.com"
    },
    "address": {
      "@type": "PostalAddress",
      "addressCountry": "IN",
      "addressLocality": "New Delhi",
      "addressRegion": "Delhi"
    },
    "alumniOf": {
      "@type": "Organization",
      "name": "Leading Independent Agency"
    },
    "knowsAbout": [
      "Marketing Strategy",
      "Content Marketing",
      "SEO",
      "Digital Marketing",
      "Team Leadership",
      "Marketing Automation",
      "Creative Content Solutions"
    ],
    "sameAs": [
      "https://hello.talkxo.com",
      "https://github.com/talkxo"
    ]
  }
  </script>

  <!-- Local Business Schema for TalkXO -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "LocalBusiness",
    "name": "TalkXO",
    "description": "Digital services company specializing in marketing automation and creative content solutions for businesses of all sizes.",
    "url": "https://hello.talkxo.com",
    "telephone": "+91-XXXXXXXXXX",
    "email": "r@rishi.im",
    "address": {
      "@type": "PostalAddress",
      "addressCountry": "IN",
      "addressLocality": "New Delhi",
      "addressRegion": "Delhi"
    },
    "geo": {
      "@type": "GeoCoordinates",
      "latitude": 28.6139,
      "longitude": 77.2090
    },
    "openingHours": "Mo-Fr 09:00-18:00",
    "priceRange": "$$",
    "currenciesAccepted": "INR, USD",
    "paymentAccepted": "Cash, Credit Card, Bank Transfer",
    "areaServed": "Worldwide",
    "serviceType": [
      "Marketing Automation",
      "Creative Content Solutions",
      "Digital Marketing",
      "SEO Services",
      "Content Strategy"
    ],
    "hasOfferCatalog": {
      "@type": "OfferCatalog",
      "name": "Digital Marketing Services",
      "itemListElement": [
        {
          "@type": "Offer",
          "itemOffered": {
            "@type": "Service",
            "name": "Marketing Automation",
            "description": "Automated marketing solutions for business growth"
          }
        },
        {
          "@type": "Offer",
          "itemOffered": {
            "@type": "Service",
            "name": "Creative Content Solutions",
            "description": "Strategic content creation and management"
          }
        }
      ]
    }
  }
  </script>

  

  <!-- FAQ Schema for Q&A Content -->
  

  <!-- HowTo Schema for Tutorial Content -->
  

  <!-- Article Series Schema -->
  

  <!-- Breadcrumb Structured Data -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Home",
        "item": "https://rishiraj.blog"
      }
      
    ]
  }
  </script>

  <!-- Resource hints for faster external resource loading -->
  
  <!-- Preload critical resources -->
  <link rel="preload" href="/css/main.css" as="style">
  <link rel="preload" href="/assets/images/workspace-hero.jpg" as="image">
  
  <!-- DNS prefetch for external domains -->
  
  <!-- Google Fonts - DM Sans -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="preload" href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,200;0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;0,9..40,900;1,9..40,200;1,9..40,300;1,9..40,400;1,9..40,500;1,9..40,600;1,9..40,700;1,9..40,800;1,9..40,900&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,200;0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;0,9..40,900;1,9..40,200;1,9..40,300;1,9..40,400;1,9..40,500;1,9..40,600;1,9..40,700;1,9..40,800;1,9..40,900&display=swap">
  </noscript>
  
  <style>
    /* Critical CSS for LCP/CLS optimization */
    :root {
      --color-bg: #ffffff;
      --color-text: #0f0f0f;
      --color-muted: #374151;
      --color-ink: #000000;
      --color-border: #e5e7eb;
      --color-accent: #00A36C;
      --code-bg: rgba(27,31,35,.05);
      --link-hover-text: #ffffff;
      --card-fixed-height: 180px;
    }
    html[data-theme="dark"] {
      --color-bg: #0b0f14;
      --color-text: #f9fafb;
      --color-muted: #d1d5db;
      --color-ink: #ffffff;
      --color-border: #273241;
      --color-accent: #00A36C;
      --code-bg: rgba(240,246,252,0.05);
      --link-hover-text: #ffffff;
    }
    
    /* DM Sans Font Import */
    @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,200;0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;0,9..40,800;0,9..40,900;1,9..40,200;1,9..40,300;1,9..40,400;1,9..40,500;1,9..40,600;1,9..40,700;1,9..40,800;1,9..40,900&display=swap');
    
    /* Font definitions with CLS prevention */
    body {
      font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-weight: 300; /* Light */
      margin: 0;
      padding: 0;
      background: var(--color-bg);
      color: var(--color-text);
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      contain: layout style;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
    }
    
    /* Headings with DM Sans Medium 500 */
    h1, h2, h3, h4, h5, h6 {
      font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-weight: 500; /* Medium */
    }
    
    /* Container with reserved space */
    .u-container {
      max-width: 38rem;
      margin: 0 auto;
      padding: 6rem 1rem 1rem;
      flex: 1;
      min-height: 0;
    }
    
    /* Critical content area */
    .c-archives__description {
      font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      font-weight: 300; /* Light */
      line-height: 1.6;
      color: var(--color-text);
      contain: layout style;
    }
    
    /* Code font - system monospace */
    code, pre {
      font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    }
    
    /* Critical CSS for LCP optimization */
    /* Prevent layout shifts with font loading */
    body, h1, h2, h3, h4, h5, h6, p, span, div {
      /* Font display controlled by @font-face declarations */
    }
    
    /* Ensure consistent line heights to prevent CLS */
    body {
      line-height: 1.6;
    }
    
    h1, h2, h3, h4, h5, h6 {
      line-height: 1.2;
    }
    
    /* Critical LCP element styling */
    .c-archives__description {
      min-height: 1.6em;
      font-size: 1rem;
      margin: 0;
      padding: 0;
      display: block;
      contain: layout style;
    }
    
    /* Critical header styling */
    .c-page__subtitle {
      font-size: 2.7rem;
      line-height: 1;
      margin-bottom: 2.5rem;
      max-width: 100%;
      word-break: break-word;
      font-weight: 700;
      color: var(--color-ink);
    }
    
    /* Critical navigation styling */
    nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      align-items: center;
      gap: 1rem;
    }
    
    nav li {
      margin: 0;
    }
    
    /* Critical link styling */
    a:not(.anchor) {
      color: var(--color-accent);
      background-color: transparent;
      text-decoration: none;
      transition: all 0.3s ease;
    }
    
    a:not(.anchor):hover {
      color: white;
      background-color: var(--color-accent);
      padding: 2px 4px;
      border-radius: 3px;
    }
    
    /* Critical grid styling */
    .c-grid {
      --cards-gap: 1.5rem;
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--cards-gap);
      align-items: stretch;
      grid-auto-flow: row;
    }
    
    @media screen and (min-width: 45rem) {
      .c-grid {
        grid-template-columns: 1fr 1fr;
      }
    }
    
    /* Critical card styling */
    .c-card {
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: 14px;
      padding: 1.2rem;
      box-shadow: 0 1px 2px rgba(0,0,0,0.04);
      transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
      min-height: var(--card-fixed-height);
      height: var(--card-fixed-height);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
    }
    
    .c-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 24px rgba(0,0,0,0.06);
      border-color: rgba(0,0,0,0.08);
    }
    
    .c-card h3 {
      font-size: 1.3rem;
      line-height: 1.2;
      margin: 0;
      color: var(--color-ink);
    }
    
    .c-card p {
      line-height: 30px;
      font-size: 1rem;
      color: var(--color-muted);
      margin: 0;
      margin-top: .25rem;
    }
  </style>

  <!-- Non-critical CSS loaded asynchronously -->
  <link rel="stylesheet" href="/css/main.css">
  
  <!-- Font loading detection -->
  <script>
    // DM Sans font loading detection
    (function() {
      if ('fonts' in document) {
        // Load DM Sans fonts
        var fontPromises = [
          document.fonts.load('300 16px "DM Sans"'),
          document.fonts.load('500 16px "DM Sans"')
        ];
        
        // Mark fonts as loaded when ready
        Promise.all(fontPromises).then(function() {
          document.documentElement.classList.add('fonts-loaded');
        }).catch(function() {
          // Fallback if fonts fail to load
          document.documentElement.classList.add('fonts-loaded');
        });
      } else {
        // Fallback for browsers without font loading API
        setTimeout(function() {
          document.documentElement.classList.add('fonts-loaded');
        }, 100);
      }
    })();
  </script>
  
  <!-- Analytics -->
  <script defer src="https://cloud.umami.is/script.js" data-website-id="68611632-aaf7-4a9a-8d24-e808927acf86"></script>
  <!-- End of head -->
</head>

  <body>
    <header class="custom-header">
      <!-- Custom header content -->
    </header>
    
    <main class="custom-main">
      <div class="c-page">
  <header class="c-page__header">
  <h1><code>rishi raj's blog</code></h1>

  

  <nav role="navigation" aria-label="Main navigation">
    <ul role="menubar" aria-label="Main navigation menu">
      <li role="none">
        <a href="/" 
           role="menuitem" 
           aria-current=""
           tabindex="0">
          Blog
        </a>
      </li>

      <li role="none">
        <a href="/rishi-raj/" 
           role="menuitem" 
           aria-current=""
           tabindex="0">
          About
        </a>
      </li>

      <li role="none">
        <a href="/stuff/" 
           role="menuitem" 
           aria-current=""
           tabindex="0">
          Stuff
        </a>
      </li>

      <li role="none">
        <a href="/colophon/" 
           role="menuitem" 
           aria-current=""
           tabindex="0">
          Colophon
        </a>
      </li>
    </ul>

    <button id="theme-toggle" 
            aria-label="Toggle dark and light theme" 
            aria-pressed="false"
            class="no-hov" 
            style="background:none;border:0;cursor:pointer;padding:5px;">
      <span aria-hidden="true">🌓</span>
      <span class="sr-only">Toggle theme</span>
    </button>
  </nav>
</header>

<script>
  (function() {
    try {
      var stored = localStorage.getItem('theme');
      var prefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
      if (!stored) {
        document.documentElement.dataset.theme = prefersDark ? 'dark' : 'light';
      } else {
        document.documentElement.dataset.theme = stored;
      }
    } catch (e) {}
  })();
  document.addEventListener('DOMContentLoaded', function() {
    var btn = document.getElementById('theme-toggle');
    if (!btn) return;
    
    // Update aria-pressed state
    function updateAriaPressed() {
      var isDark = document.documentElement.dataset.theme === 'dark';
      btn.setAttribute('aria-pressed', isDark);
    }
    
    // Initialize aria-pressed
    updateAriaPressed();
    
    btn.addEventListener('click', function() {
      var current = document.documentElement.dataset.theme === 'dark' ? 'dark' : 'light';
      var next = current === 'dark' ? 'light' : 'dark';
      document.documentElement.dataset.theme = next;
      updateAriaPressed();
      try { localStorage.setItem('theme', next); } catch (e) {}
    });
    
    // Handle keyboard navigation
    btn.addEventListener('keydown', function(e) {
      if (e.key === 'Enter' || e.key === ' ') {
        e.preventDefault();
        btn.click();
      }
    });
  });
</script>

  <div class="c-page__main">
    <h1 id="credits-and-licenses">Credits and Licenses</h1>

<p>This document provides attribution and license information for all assets, fonts, and dependencies used in the Sobolev2 Jekyll theme.</p>

<h2 id="fonts">Fonts</h2>

<h3 id="source-sans-3">Source Sans 3</h3>
<ul>
  <li><strong>Provider</strong>: Google Fonts</li>
  <li><strong>License</strong>: SIL Open Font License 1.1</li>
  <li><strong>URL</strong>: https://fonts.google.com/specimen/Source+Sans+3</li>
  <li><strong>Usage</strong>: Primary typeface for headings and body text</li>
  <li><strong>License Details</strong>:
    <ul>
      <li>Permits commercial and non-commercial use</li>
      <li>Allows modification and distribution</li>
      <li>Requires attribution in derivative works</li>
    </ul>
  </li>
</ul>

<h3 id="roboto-mono">Roboto Mono</h3>
<ul>
  <li><strong>Provider</strong>: Google Fonts</li>
  <li><strong>License</strong>: Apache License 2.0</li>
  <li><strong>URL</strong>: https://fonts.google.com/specimen/Roboto+Mono</li>
  <li><strong>Usage</strong>: Monospace font for code blocks and technical content</li>
  <li><strong>License Details</strong>:
    <ul>
      <li>Permits commercial and non-commercial use</li>
      <li>Allows modification and distribution</li>
      <li>Requires preservation of copyright notices</li>
    </ul>
  </li>
</ul>

<h2 id="jekyll-and-plugins">Jekyll and Plugins</h2>

<h3 id="jekyll">Jekyll</h3>
<ul>
  <li><strong>Version</strong>: 3.6+</li>
  <li><strong>License</strong>: MIT License</li>
  <li><strong>URL</strong>: https://jekyllrb.com/</li>
  <li><strong>Usage</strong>: Static site generator core</li>
  <li><strong>License Details</strong>: MIT License allows free use, modification, and distribution</li>
</ul>

<h3 id="jekyll-plugins">Jekyll Plugins</h3>

<h4 id="jekyll-sitemap">jekyll-sitemap</h4>
<ul>
  <li><strong>Version</strong>: ~&gt; 1.2.0</li>
  <li><strong>License</strong>: MIT License</li>
  <li><strong>URL</strong>: https://github.com/jekyll/jekyll-sitemap</li>
  <li><strong>Usage</strong>: Automatic sitemap generation</li>
</ul>

<h4 id="jemoji">jemoji</h4>
<ul>
  <li><strong>Version</strong>: ~&gt; 0.10.1</li>
  <li><strong>License</strong>: MIT License</li>
  <li><strong>URL</strong>: https://github.com/jekyll/jemoji</li>
  <li><strong>Usage</strong>: Emoji support in content</li>
</ul>

<h4 id="jekyll-feed">jekyll-feed</h4>
<ul>
  <li><strong>Version</strong>: ~&gt; 0.11.0</li>
  <li><strong>License</strong>: MIT License</li>
  <li><strong>URL</strong>: https://github.com/jekyll/jekyll-feed</li>
  <li><strong>Usage</strong>: RSS/Atom feed generation</li>
</ul>

<h4 id="kramdown-parser-gfm">kramdown-parser-gfm</h4>
<ul>
  <li><strong>Version</strong>: ~&gt; 1.0</li>
  <li><strong>License</strong>: MIT License</li>
  <li><strong>URL</strong>: https://github.com/kramdown/parser-gfm</li>
  <li><strong>Usage</strong>: GitHub Flavored Markdown support</li>
</ul>

<h2 id="css-and-styling">CSS and Styling</h2>

<h3 id="css-reset">CSS Reset</h3>
<ul>
  <li><strong>Source</strong>: Custom reset based on modern best practices</li>
  <li><strong>License</strong>: MIT License (included in theme)</li>
  <li><strong>Usage</strong>: Cross-browser compatibility and consistent styling</li>
</ul>

<h3 id="scss-architecture">SCSS Architecture</h3>
<ul>
  <li><strong>Source</strong>: Custom modular SCSS structure</li>
  <li><strong>License</strong>: MIT License (included in theme)</li>
  <li><strong>Usage</strong>: Organized stylesheet architecture with utilities, components, and base styles</li>
</ul>

<h2 id="icons-and-graphics">Icons and Graphics</h2>

<h3 id="svg-icons">SVG Icons</h3>
<ul>
  <li><strong>Source</strong>: Custom SVG icon system</li>
  <li><strong>License</strong>: MIT License (included in theme)</li>
  <li><strong>Usage</strong>: Scalable vector icons for navigation and UI elements</li>
  <li><strong>Creation</strong>: Hand-crafted SVG icons optimized for web use</li>
</ul>

<h3 id="favicon-set">Favicon Set</h3>
<ul>
  <li><strong>Source</strong>: Generated from custom design</li>
  <li><strong>License</strong>: MIT License (included in theme)</li>
  <li><strong>Usage</strong>: Site icons for various platforms and devices</li>
  <li><strong>Formats</strong>: ICO, PNG (multiple sizes), Apple touch icons, Android icons</li>
</ul>

<h2 id="performance-and-optimization">Performance and Optimization</h2>

<h3 id="core-web-vitals-optimization">Core Web Vitals Optimization</h3>
<ul>
  <li><strong>Source</strong>: Custom implementation</li>
  <li><strong>License</strong>: MIT License (included in theme)</li>
  <li><strong>Usage</strong>: Performance monitoring and optimization techniques</li>
  <li><strong>Features</strong>: LCP, FID, and CLS optimization</li>
</ul>

<h3 id="font-loading-strategy">Font Loading Strategy</h3>
<ul>
  <li><strong>Source</strong>: Custom implementation</li>
  <li><strong>License</strong>: MIT License (included in theme)</li>
  <li><strong>Usage</strong>: Optimized font loading with fallbacks and preloading</li>
</ul>

<h2 id="third-party-services-optional">Third-Party Services (Optional)</h2>

<h3 id="google-fonts">Google Fonts</h3>
<ul>
  <li><strong>Service</strong>: Font hosting and delivery</li>
  <li><strong>License</strong>: Free for web use</li>
  <li><strong>Usage</strong>: Font loading and optimization</li>
  <li><strong>Privacy</strong>: Google Fonts privacy policy applies</li>
</ul>

<h3 id="disqus-optional">Disqus (Optional)</h3>
<ul>
  <li><strong>Service</strong>: Comment system</li>
  <li><strong>License</strong>: Free tier available</li>
  <li><strong>Usage</strong>: Blog comments and discussions</li>
  <li><strong>Privacy</strong>: Disqus privacy policy applies</li>
</ul>

<h2 id="development-tools">Development Tools</h2>

<h3 id="bundler">Bundler</h3>
<ul>
  <li><strong>Version</strong>: ~&gt; 2.0</li>
  <li><strong>License</strong>: MIT License</li>
  <li><strong>URL</strong>: https://bundler.io/</li>
  <li><strong>Usage</strong>: Ruby dependency management</li>
</ul>

<h3 id="ruby">Ruby</h3>
<ul>
  <li><strong>Version</strong>: 2.4+</li>
  <li><strong>License</strong>: Ruby License (BSD-style)</li>
  <li><strong>URL</strong>: https://www.ruby-lang.org/</li>
  <li><strong>Usage</strong>: Programming language and runtime</li>
</ul>

<h2 id="inspiration-and-references">Inspiration and References</h2>

<h3 id="design-inspiration">Design Inspiration</h3>
<ul>
  <li><strong>Modern Minimalism</strong>: Clean, content-focused design principles</li>
  <li><strong>Material Design</strong>: Google’s design system for UI components</li>
  <li><strong>Web Standards</strong>: W3C guidelines for accessibility and performance</li>
</ul>

<h3 id="technical-references">Technical References</h3>
<ul>
  <li><strong>Jekyll Documentation</strong>: Official Jekyll documentation and best practices</li>
  <li><strong>CSS Grid</strong>: Modern CSS layout techniques</li>
  <li><strong>Web Accessibility</strong>: WCAG 2.1 guidelines for inclusive design</li>
</ul>

<h2 id="original-theme-author">Original Theme Author</h2>

<h3 id="rishi-raj">Rishi Raj</h3>
<ul>
  <li><strong>Website</strong>: https://rishiraj.blog</li>
  <li><strong>Email</strong>: r@rishi.im</li>
  <li><strong>GitHub</strong>: https://github.com/rishiraj</li>
  <li><strong>Role</strong>: Theme creator and maintainer</li>
  <li><strong>License</strong>: MIT License</li>
</ul>

<h2 id="license-summary">License Summary</h2>

<h3 id="mit-license">MIT License</h3>
<p>The Sobolev2 Jekyll theme is released under the MIT License, which means:</p>

<ul>
  <li>✅ <strong>Commercial Use</strong>: You can use the theme for commercial projects</li>
  <li>✅ <strong>Modification</strong>: You can modify the theme as needed</li>
  <li>✅ <strong>Distribution</strong>: You can distribute the theme</li>
  <li>✅ <strong>Private Use</strong>: You can use the theme privately</li>
  <li>❌ <strong>Liability</strong>: No warranty or liability protection</li>
  <li>❌ <strong>Trademark</strong>: No trademark use permission</li>
</ul>

<h3 id="full-mit-license-text">Full MIT License Text</h3>

<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>MIT License

Copyright (c) 2024 Rishi Raj

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
</code></pre></div></div>

<h2 id="attribution-requirements">Attribution Requirements</h2>

<h3 id="for-theme-users">For Theme Users</h3>
<ul>
  <li>No attribution required for basic use</li>
  <li>Attribution appreciated but not mandatory</li>
  <li>Consider linking back to the theme repository</li>
</ul>

<h3 id="for-theme-modifications">For Theme Modifications</h3>
<ul>
  <li>Preserve original copyright notices</li>
  <li>Document significant modifications</li>
  <li>Consider contributing improvements back to the community</li>
</ul>

<h2 id="contact-and-support">Contact and Support</h2>

<h3 id="theme-support">Theme Support</h3>
<ul>
  <li><strong>GitHub Issues</strong>: https://github.com/rishiraj/sobolev2-jekyll-theme/issues</li>
  <li><strong>Email</strong>: r@rishi.im</li>
  <li><strong>Website</strong>: https://rishiraj.blog</li>
</ul>

<h3 id="license-questions">License Questions</h3>
<p>For questions about licensing or attribution, please contact the theme author or consult the specific license texts for each component.</p>

<hr />

<p><strong>Last Updated</strong>: January 2024
<strong>Version</strong>: 1.0.0</p>


  </div>
  <footer class="c-page__footer">
  <div class="footer-content">
    <div class="footer-main">
      <span class="copyright">
        <a href="/rishi-raj/">Rishi Raj</a>
      </span>
      <span class="separator">•</span>
      <span class="license">
        Content licensed <a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener">CC BY-NC</a>
      </span>
      <span class="separator">•</span>
      <span class="source">
        <a href="https://github.com/talkxo/rishiraj-blog-machine" target="_blank" rel="noopener">Source code</a>
      </span>
      <span class="separator">•</span>
      <span class="location">
        Made in India <span class="heart">❤️</span>
      </span>
    </div>
  </div>
</footer>

</div>

    </main>
    
    <footer class="custom-footer">
      <!-- Custom footer content -->
    </footer>
  </body>
</html>

Custom Includes

Create reusable components in _includes/:

<!-- _includes/custom-component.html -->
<div class="custom-component">
  <h3></h3>
  <p></p>
  
</div>

SCSS Architecture

The theme follows a modular SCSS structure:

_sass/
├── base/
│   └── _reset.scss          # CSS reset
├── components/
│   ├── _cards.scss          # Card components
│   ├── _header.scss         # Header and navigation
│   └── _footer.scss         # Footer
├── helpers/
│   ├── _mixins.scss         # SCSS mixins
│   └── _variables.scss      # SCSS variables
└── utilities/
    ├── _layout.scss         # Layout utilities
    ├── _theme.scss          # Theme variables
    └── _separator.scss      # Separators and dividers

Adding New Components

  1. Create component file in _sass/components/
  2. Import in main.scss:
// css/main.scss
@import 'components/your-component';
  1. Use in HTML:
<div class="your-component">
  <!-- Component content -->
</div>

JavaScript Customization

Add custom JavaScript in _includes/head.html:

<script>
  // Custom theme functionality
  document.addEventListener('DOMContentLoaded', function() {
    // Your custom JavaScript here
  });
</script>

Performance Optimization

Critical CSS

Inline critical CSS in _includes/head.html:

<style>
  /* Critical above-the-fold styles */
  body { font-family: var(--font-primary); }
  .u-container { max-width: 1200px; margin: 0 auto; }
</style>

Image Optimization

Optimize images for performance:

img {
  max-width: 100%;
  height: auto;
  loading: lazy; // Native lazy loading
}

Font Loading

Optimize font loading:

<link rel="preload" href="/assets/fonts/your-font.woff2" as="font" type="font/woff2" crossorigin>

Testing Customizations

Local Testing

# Start development server
bundle exec jekyll serve --livereload

# Build for production
bundle exec jekyll build

# Check for errors
bundle exec jekyll doctor

Browser Testing

  • Test in multiple browsers (Chrome, Firefox, Safari, Edge)
  • Test responsive design on different screen sizes
  • Validate HTML and CSS
  • Check accessibility with screen readers

Best Practices

CSS Organization

  • Use semantic class names
  • Follow BEM methodology for complex components
  • Keep specificity low
  • Use CSS custom properties for consistency

Performance

  • Minimize custom CSS
  • Use efficient selectors
  • Optimize images and fonts
  • Test on slow connections

Accessibility

  • Maintain color contrast ratios
  • Use semantic HTML elements
  • Provide alternative text for images
  • Ensure keyboard navigation works

Maintenance

  • Document custom changes
  • Use version control
  • Test updates before deploying
  • Keep dependencies updated

Troubleshooting

Common Issues

Styles Not Loading

# Clear Jekyll cache
bundle exec jekyll clean
bundle exec jekyll build

SCSS Compilation Errors

  • Check syntax in SCSS files
  • Verify import paths
  • Ensure proper nesting

Layout Issues

  • Check CSS specificity
  • Verify HTML structure
  • Test responsive breakpoints

Getting Help

Happy customizing! 🎨