<!doctype html>
<html
  lang="en-US"
  data-theme="sunset">
  <head>
	<meta name="generator" content="Hugo 0.150.0"><script src="/livereload.js?mindelay=10&amp;v=2&amp;port=1313&amp;path=livereload" data-no-instant defer></script>
    <meta charset="utf-8" />
<meta
  name="viewport"
  content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<title>8oclocktrain</title>

<meta name="description" content="A modern, clean, and minimal Hugo theme built with Tailwind CSS 4.0. Support custom themes, dark mode, and responsive design." />
<meta name="keywords" content="Marxism, Islam, Philosophy, Politics, Blog" />
<meta name="author" content="8oclocktrain" />
<meta name="language" content="en-US" />

<meta name="robots" content="index, follow" />
<link rel="canonical" href="http://localhost:1313/index.html" />



  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />



<link rel="manifest" href="/site.webmanifest" />
<meta property="og:url" content="http://localhost:1313/index.html">
  <meta property="og:site_name" content="8oclocktrain">
  <meta property="og:title" content="Home">
  <meta property="og:description" content="A modern, clean, and minimal Hugo theme built with Tailwind CSS 4.0. Support custom themes, dark mode, and responsive design.">
  <meta property="og:locale" content="en_US">
  <meta property="og:type" content="website">
    <meta property="og:image" content="http://localhost:1313/images/og-default.avif">


  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:image" content="http://localhost:1313/images/og-default.avif">
  <meta name="twitter:title" content="Home">
  <meta name="twitter:description" content="A modern, clean, and minimal Hugo theme built with Tailwind CSS 4.0. Support custom themes, dark mode, and responsive design.">


  <meta itemprop="name" content="Home">
  <meta itemprop="description" content="A modern, clean, and minimal Hugo theme built with Tailwind CSS 4.0. Support custom themes, dark mode, and responsive design.">
  <meta itemprop="datePublished" content="2023-01-01T08:00:00-07:00">
  <meta itemprop="dateModified" content="2023-01-01T08:00:00-07:00">
  <meta itemprop="image" content="http://localhost:1313/images/og-default.avif">



  <link
    rel="alternate"
    type="application/rss+xml"
    title="8oclocktrain"
    href="http://localhost:1313/index.xml" />





<script>
  window.HUGO_SEARCH_CONFIG = {
    searchIndexURL: "\"/index.htmlindex.json\""
  };
</script>























  
    
  

  

  
    
  

  
    
  

  
    
  

  
    
  

  
    
  

  
    
  

  
    
  




  
    
  

  
    
  

  

  
    
  

  
    
  

  
    
  

  
    
  

  
    
  

  
    
  









<script>

  window.HUGO_GALLERY_CONFIG = {
    justified_gallery:  false ,
    lightbox:  false ,
    justified: "{\"calculateitemsheight\":false,\"gutter\":30,\"lastrow\":\"center\",\"maxrowscount\":999999,\"resizedebounce\":100,\"rowheight\":300,\"rowheighttolerance\":0.25,\"transitionduration\":\"0.3s\"}",
    lightbox_options: "{\"descposition\":\"bottom\",\"draggable\":true,\"height\":\"80vh\",\"loop\":true,\"preload\":true,\"touchnavigation\":true,\"width\":\"80vw\",\"zoomable\":true}"
  };
</script>




  
    <link rel="stylesheet" href="/css/compiled.css" />
  





  
    <link rel="stylesheet" href="/css/chroma.css" />
  












      <script src="/js/main.js"></script>









      <script src="/js/search.js" defer></script>



      <script src="/js/dock.js" defer></script>




















  

  

  <script
  defer
  src="https://cloud.umami.is/script.js"
  data-website-id="18e3ebda-acb6-40d5-9751-49a140e502a6"
  data-domains="8oclocktrain.com"></script>




    <script>
      
      (function() {
        const theme = localStorage.getItem('theme') || 'system';
        const colorScheme = localStorage.getItem('colorScheme') || 'sunset';

        
        document.documentElement.setAttribute('data-theme', colorScheme);

        
        function applyTheme() {
          if (theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
          } else {
            document.documentElement.classList.remove('dark');
          }
        }

        applyTheme();

        
        if (theme === 'system') {
          window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', applyTheme);
        }
      })();
    </script>
  </head>

  <body class="bg-background text-foreground min-h-screen antialiased">
    
    

    <header class="sticky top-0 z-50 mx-auto max-w-4xl px-4 py-6">
  <div
    class="border-border bg-card/80 flex items-center rounded-xl border px-6 py-4 shadow-sm backdrop-blur-sm">
    
    <div class="hidden w-full items-center md:flex">
      
      <div class="flex items-center">
        
          <a
            href="/"
            class="flex h-10 w-10 items-center justify-center overflow-hidden rounded-full transition-transform duration-200 hover:scale-105"
            aria-label="8oclocktrain">
            <img
              src="/images/logo.svg"
              alt="8oclocktrain"
              class="h-full w-full object-cover" />
          </a>
        
      </div>

      
      <nav class="mx-8 flex flex-1 items-center justify-center">
        <div class="flex items-center space-x-1">
          
          
            
            
            
              
                
              
            
            
            <a
              href="/"
              class="nav-link 
                text-muted-foreground hover:text-primary hover:bg-primary/10
               focus:ring-primary/20 relative flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all duration-300 ease-out hover:-translate-y-0.5 hover:scale-105 focus:ring-2 focus:outline-none">
              
                
  <svg class="h-5 w-5"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24" aria-label="nav.posts">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />

</svg>
              
              <span
                >
                  Posts
                </span
              >
            </a>
          
            
            
            
              
                
              
            
            
            <a
              href="/categories/index.html"
              class="nav-link 
                text-muted-foreground hover:text-primary hover:bg-primary/10
               focus:ring-primary/20 relative flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all duration-300 ease-out hover:-translate-y-0.5 hover:scale-105 focus:ring-2 focus:outline-none">
              
                
  <svg class="h-5 w-5"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24" aria-label="nav.categories">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />

</svg>
              
              <span
                >
                  Categories
                </span
              >
            </a>
          
            
            
            
              
                
              
            
            
            <a
              href="/tags/index.html"
              class="nav-link 
                text-muted-foreground hover:text-primary hover:bg-primary/10
               focus:ring-primary/20 relative flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all duration-300 ease-out hover:-translate-y-0.5 hover:scale-105 focus:ring-2 focus:outline-none">
              
                
  <svg class="h-5 w-5"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24" aria-label="nav.tags">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />

</svg>
              
              <span
                >
                  Tags
                </span
              >
            </a>
          
            
            
            
              
                
              
            
            
            <a
              href="/"
              class="nav-link 
                text-muted-foreground hover:text-primary hover:bg-primary/10
               focus:ring-primary/20 relative flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all duration-300 ease-out hover:-translate-y-0.5 hover:scale-105 focus:ring-2 focus:outline-none">
              
                
  <svg class="h-5 w-5"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24" aria-label="nav.archives">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />

</svg>
              
              <span
                >
                  Archives
                </span
              >
            </a>
          
        </div>
      </nav>

      
      <div class="flex items-center space-x-2">
        
        

        
        
<div class="relative">
  <button id="color-scheme-toggle"
    class="dropdown-toggle border-border bg-background text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 flex h-10 w-10 items-center justify-center rounded-lg border transition-all duration-300 ease-out hover:scale-105 focus:ring-2 focus:outline-none active:scale-95"
    data-dropdown-type="color-scheme"
    aria-label="Toggle theme"
    aria-expanded="false"
    aria-haspopup="true">
      
  <svg class="h-5 w-5 relative z-10"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24" aria-label="Toggle theme">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v6a2 2 0 002 2h4a2 2 0 002-2V5z" />

</svg></button>

  
  <div id="color-scheme-dropdown"
    class="dropdown-menu border-border bg-popover/95 absolute top-12 right-0 z-[60] hidden w-44 rounded-lg border p-1 shadow-lg backdrop-blur-sm transition-all duration-200 ease-out"
    data-dropdown-type="color-scheme"><button data-color-scheme="default" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none"><span>Default</span></button><button data-color-scheme="claude" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none"><span>Claude</span></button><button data-color-scheme="bumblebee" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none"><span>Bumblebee</span></button><button data-color-scheme="emerald" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none"><span>Emerald</span></button><button data-color-scheme="nord" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none"><span>Nord</span></button><button data-color-scheme="sunset" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none"><span>Sunset</span></button><button data-color-scheme="abyss" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none"><span>Abyss</span></button><button data-color-scheme="dracula" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none"><span>Dracula</span></button><button data-color-scheme="amethyst" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none"><span>Amethyst</span></button><button data-color-scheme="slate" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none"><span>Slate</span></button><button data-color-scheme="twitter" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none"><span>Twitter</span></button></div>
</div>

        
        
<div class="relative">
  <button id="theme-toggle"
    class="dropdown-toggle border-border bg-background text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 flex h-10 w-10 items-center justify-center rounded-lg border transition-all duration-300 ease-out hover:scale-105 focus:ring-2 focus:outline-none active:scale-95"
    data-dropdown-type="theme"
    aria-label="Toggle theme"
    aria-expanded="false"
    aria-haspopup="true">
      
      
  <svg class="h-5 w-5 sun-icon hidden relative z-10"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24" aria-label="Light">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />

</svg>
      
      
  <svg class="h-5 w-5 moon-icon hidden relative z-10"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24" aria-label="Dark">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />

</svg>
      
      
  <svg class="h-5 w-5 system-icon hidden relative z-10"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24" aria-label="System">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />

</svg></button>

  
  <div id="theme-dropdown"
    class="dropdown-menu border-border bg-popover/95 absolute top-12 right-0 z-[60] hidden w-40 rounded-lg border p-1 shadow-lg backdrop-blur-sm transition-all duration-200 ease-out"
    data-dropdown-type="theme"><button data-theme="light" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none">
  <svg class="h-5 w-5 mr-3 h-4 w-4"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24" aria-label="Light">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />

</svg><span>Light</span></button><button data-theme="dark" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none">
  <svg class="h-5 w-5 mr-3 h-4 w-4"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24" aria-label="Dark">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />

</svg><span>Dark</span></button><button data-theme="system" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none">
  <svg class="h-5 w-5 mr-3 h-4 w-4"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24" aria-label="System">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />

</svg><span>System</span></button></div>
</div>
      </div>
    </div>

    
    <div class="flex w-full items-center justify-between md:hidden">
      
      
<div class="relative">
  <button
    id="mobile-menu-toggle"
    class="dropdown-toggle border-border bg-background text-muted-foreground hover:bg-accent hover:text-foreground flex h-10 w-10 items-center justify-center rounded-lg border transition-colors duration-200"
    data-dropdown-type="mobile-menu"
    aria-label="Menu"
    aria-expanded="false"
    aria-haspopup="true">
    
  <svg class="h-5 w-5"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24" aria-label="Menu">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />

</svg>
  </button>

  
  <div
    id="mobile-menu"
    class="mobile-menu dropdown-menu border-border bg-popover/95 absolute top-12 left-0 z-[60] hidden w-80 max-w-[calc(100vw-2rem)] rounded-lg border p-1 shadow-lg backdrop-blur-sm transition-all duration-200 ease-out md:hidden"
    data-dropdown-type="mobile-menu"
    role="menu"
    aria-labelledby="mobile-menu-toggle">
    <nav class="flex flex-col">
      
      
        
        
        
          
            
          
        
        
        <a
          href="/"
          class="nav-link 
            text-muted-foreground hover:text-primary hover:bg-primary/10
           focus:ring-primary/20 relative flex items-center gap-3 rounded-md px-4 py-3 text-sm font-medium transition-all duration-200 ease-out hover:translate-x-1 focus:ring-2 focus:outline-none"
          role="menuitem"
          >
          
            
  <svg class="h-5 w-5"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24" aria-label="nav.posts">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z" />

</svg>
          
          <span
            >
              Posts
            </span
          >
        </a>
      
        
        
        
          
            
          
        
        
        <a
          href="/categories/index.html"
          class="nav-link 
            text-muted-foreground hover:text-primary hover:bg-primary/10
           focus:ring-primary/20 relative flex items-center gap-3 rounded-md px-4 py-3 text-sm font-medium transition-all duration-200 ease-out hover:translate-x-1 focus:ring-2 focus:outline-none"
          role="menuitem"
          >
          
            
  <svg class="h-5 w-5"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24" aria-label="nav.categories">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />

</svg>
          
          <span
            >
              Categories
            </span
          >
        </a>
      
        
        
        
          
            
          
        
        
        <a
          href="/tags/index.html"
          class="nav-link 
            text-muted-foreground hover:text-primary hover:bg-primary/10
           focus:ring-primary/20 relative flex items-center gap-3 rounded-md px-4 py-3 text-sm font-medium transition-all duration-200 ease-out hover:translate-x-1 focus:ring-2 focus:outline-none"
          role="menuitem"
          >
          
            
  <svg class="h-5 w-5"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24" aria-label="nav.tags">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />

</svg>
          
          <span
            >
              Tags
            </span
          >
        </a>
      
        
        
        
          
            
          
        
        
        <a
          href="/"
          class="nav-link 
            text-muted-foreground hover:text-primary hover:bg-primary/10
           focus:ring-primary/20 relative flex items-center gap-3 rounded-md px-4 py-3 text-sm font-medium transition-all duration-200 ease-out hover:translate-x-1 focus:ring-2 focus:outline-none"
          role="menuitem"
          >
          
            
  <svg class="h-5 w-5"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24" aria-label="nav.archives">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 8h14M5 8a2 2 0 110-4h14a2 2 0 110 4M5 8v10a2 2 0 002 2h10a2 2 0 002-2V8m-9 4h4" />

</svg>
          
          <span
            >
              Archives
            </span
          >
        </a>
      
    </nav>
  </div>
</div>


      
      <div class="flex items-center space-x-2">
        
        

        
        
<div class="relative">
  <button id="color-scheme-toggle"
    class="dropdown-toggle border-border bg-background text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 flex h-10 w-10 items-center justify-center rounded-lg border transition-all duration-300 ease-out hover:scale-105 focus:ring-2 focus:outline-none active:scale-95"
    data-dropdown-type="color-scheme"
    aria-label="Toggle theme"
    aria-expanded="false"
    aria-haspopup="true">
      
  <svg class="h-5 w-5 relative z-10"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24" aria-label="Toggle theme">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zM21 5a2 2 0 00-2-2h-4a2 2 0 00-2 2v6a2 2 0 002 2h4a2 2 0 002-2V5z" />

</svg></button>

  
  <div id="color-scheme-dropdown"
    class="dropdown-menu border-border bg-popover/95 absolute top-12 right-0 z-[60] hidden w-44 rounded-lg border p-1 shadow-lg backdrop-blur-sm transition-all duration-200 ease-out"
    data-dropdown-type="color-scheme"><button data-color-scheme="default" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none"><span>Default</span></button><button data-color-scheme="claude" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none"><span>Claude</span></button><button data-color-scheme="bumblebee" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none"><span>Bumblebee</span></button><button data-color-scheme="emerald" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none"><span>Emerald</span></button><button data-color-scheme="nord" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none"><span>Nord</span></button><button data-color-scheme="sunset" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none"><span>Sunset</span></button><button data-color-scheme="abyss" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none"><span>Abyss</span></button><button data-color-scheme="dracula" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none"><span>Dracula</span></button><button data-color-scheme="amethyst" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none"><span>Amethyst</span></button><button data-color-scheme="slate" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none"><span>Slate</span></button><button data-color-scheme="twitter" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none"><span>Twitter</span></button></div>
</div>

        
        
<div class="relative">
  <button id="theme-toggle"
    class="dropdown-toggle border-border bg-background text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 flex h-10 w-10 items-center justify-center rounded-lg border transition-all duration-300 ease-out hover:scale-105 focus:ring-2 focus:outline-none active:scale-95"
    data-dropdown-type="theme"
    aria-label="Toggle theme"
    aria-expanded="false"
    aria-haspopup="true">
      
      
  <svg class="h-5 w-5 sun-icon hidden relative z-10"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24" aria-label="Light">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />

</svg>
      
      
  <svg class="h-5 w-5 moon-icon hidden relative z-10"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24" aria-label="Dark">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />

</svg>
      
      
  <svg class="h-5 w-5 system-icon hidden relative z-10"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24" aria-label="System">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />

</svg></button>

  
  <div id="theme-dropdown"
    class="dropdown-menu border-border bg-popover/95 absolute top-12 right-0 z-[60] hidden w-40 rounded-lg border p-1 shadow-lg backdrop-blur-sm transition-all duration-200 ease-out"
    data-dropdown-type="theme"><button data-theme="light" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none">
  <svg class="h-5 w-5 mr-3 h-4 w-4"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24" aria-label="Light">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />

</svg><span>Light</span></button><button data-theme="dark" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none">
  <svg class="h-5 w-5 mr-3 h-4 w-4"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24" aria-label="Dark">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />

</svg><span>Dark</span></button><button data-theme="system" class="text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground flex w-full items-center rounded-md px-4 py-2 text-sm transition-all duration-200 ease-out focus:outline-none">
  <svg class="h-5 w-5 mr-3 h-4 w-4"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24" aria-label="System">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />

</svg><span>System</span></button></div>
</div>
      </div>
    </div>
  </div>
</header>


    <main class="mx-auto max-w-4xl px-4 py-6">
      
  <div class="mx-auto max-w-4xl">
    
    
      <section class="author-section mb-12">
        <div class="bg-card border-border rounded-xl border p-8 shadow-sm">
          <div
            class="flex flex-col items-center gap-6 text-center md:flex-row md:items-start md:text-left">
            
            <div class="flex-shrink-0">
              
                <img
                  src="/images/avatar.svg"
                  alt="8oclocktrian"
                  class="border-primary/20 h-24 w-24 rounded-full border-4 object-cover shadow-lg" />
              
            </div>

            
            <div class="min-w-0 flex-1">
              <h1 class="text-foreground mb-2 text-3xl font-bold">
                8oclocktrian
              </h1>

              
                <p class="text-muted-foreground mb-3 text-lg">
                  Muslims Marxist
                </p>
              

              
                <p class="text-foreground mb-4 leading-relaxed">
                  Here you will find essay I write to cement my ideas as I go about my learning journes. I will also write about personal experience and media.
                </p>
              


              
              
                <div
                  class="flex flex-wrap justify-center gap-3 md:justify-start">
                  
                    <a href="/cdn-cgi/l/email-protection#774f18141b18141c0305161e1937070518031819591a12" target="_blank" rel="noopener noreferrer" class="bg-muted text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 inline-flex items-center gap-2 rounded-lg px-3 py-2 transition-all duration-300 ease-out hover:-translate-y-0.5 hover:scale-105 focus:ring-2 focus:outline-none" title="Email">
                      
                        
  <svg class="h-4 w-4"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24" aria-label="Email">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />

</svg>
                      
                      <span class="text-sm font-medium">Email</span>
                    </a>
                  
                </div>
              
            </div>
          </div>
        </div>
      </section>
    


    
    
    

    








  
  <div class="py-12 text-center">
    <div
      class="bg-muted/50 mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full">
      
  <svg class="h-6 w-6"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
</svg>
    </div>
    <h3 class="text-foreground mb-2 text-lg font-medium">
      No posts yet
    </h3>
    <p class="text-muted-foreground">
      No articles have been published yet. Please check back later.
    </p>
  </div>




    
    

  </div>

    </main>

    <footer class="mx-auto max-w-4xl px-4 py-8">
  <div class="px-6 py-6">
    
    
      <nav class="mb-6">
        <div class="flex flex-wrap items-center justify-center gap-1">
          
            
            
            
              
                
              
            
            <a
              href="/about.html"
              
              class="nav-link hover:text-primary hover:bg-primary/10 text-muted-foreground flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all duration-300 hover:scale-105">
              
                
  <svg class="h-5 w-5"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24" aria-label="About">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />

</svg>
              
              <span
                >
                  About
                </span
              >
            </a>
          
            
            
            
            <a href="/cdn-cgi/l/email-protection#dee6b1bdb2b1bdb5aaacbfb7b09eaeacb1aab1b0f0b3bb" class="nav-link hover:text-primary hover:bg-primary/10 text-muted-foreground flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all duration-300 hover:scale-105">
              
                
  <svg class="h-5 w-5"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24" aria-label="Contact">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />

</svg>
              
              <span
                >
                  Contact
                </span
              >
            </a>
          
            
            
            
            <a
              href="/index.xml"
              
              class="nav-link hover:text-primary hover:bg-primary/10 text-muted-foreground flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all duration-300 hover:scale-105">
              
                
  <svg class="h-5 w-5"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24" aria-label="RSS Feed">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 5c7.18 0 13 5.82 13 13M6 11a7 7 0 017 7m-6 0a1 1 0 11-2 0 1 1 0 012 0z" />

</svg>
              
              <span
                >
                  RSS Feed
                </span
              >
            </a>
          
        </div>
      </nav>
    


    
    


    
    <div class="flex flex-col items-center justify-between gap-4 md:flex-row">
      
      <div class="text-muted-foreground text-sm text-center md:text-left">
        <p class="mb-2">
          &copy; 2025 8oclocktrain.
          All rights reserved.
        </p>
        <p class="flex flex-wrap items-center justify-center gap-1 md:justify-start">
          <span>Powered by</span>
          <a 
            href="https://gohugo.io/" 
            target="_blank" 
            rel="noopener noreferrer"
            class="text-primary hover:text-primary/80 font-medium transition-colors duration-200 hover:underline"
          >
            Hugo
          </a>
          <span>&</span>
          <a 
            href="https://github.com/tom2almighty/hugo-narrow" 
            target="_blank" 
            rel="noopener noreferrer"
            class="text-primary hover:text-primary/80 font-medium transition-colors duration-200 hover:underline"
          >
            Narrow
          </a>
        </p>
      </div>

      
      

    </div>
  </div>
</footer>

    
    



<div
  id="dock"
  class="pointer-events-none fixed bottom-4 left-1/2 z-[9999] w-fit -translate-x-1/2 translate-y-24 opacity-0 transition-all duration-300 ease-out sm:right-0 sm:left-0 sm:mx-auto sm:translate-x-0"
  role="toolbar"
  aria-label="Quick action toolbar">
  <nav
    class="border-border bg-card/80 scrollbar-hide xs:px-3 xs:py-2 mx-auto flex max-w-[calc(100vw-2rem)] min-w-fit items-center justify-center overflow-x-auto rounded-2xl border px-4 py-3 shadow-lg backdrop-blur-sm sm:px-4 sm:py-3">
    
    


    
    


    
    <button
      id="dock-search"
      class="text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 xs:px-3 xs:py-1.5 flex flex-shrink-0 items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition-all duration-300 ease-out hover:-translate-y-0.5 hover:scale-105 focus:ring-2 focus:outline-none sm:px-4 sm:py-2"
      title="Search"
      aria-label="Search">
      
  <svg class="h-4 w-4"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />

</svg>
      <span class="hidden md:inline"
        >Search</span
      >
    </button>

    
    <div class="bg-border xs:mx-1 mx-2 h-6 w-px sm:mx-2"></div>

    
    
    


    
    <button
      id="dock-top"
      class="text-muted-foreground hover:text-primary hover:bg-primary/10 focus:ring-primary/20 xs:px-2 xs:py-1.5 flex flex-shrink-0 items-center gap-2 rounded-lg px-3 py-2 text-sm font-medium transition-all duration-300 ease-out hover:-translate-y-0.5 hover:scale-105 focus:ring-2 focus:outline-none sm:px-3 sm:py-2"
      title="Back to Top"
      aria-label="Back to Top">
      
  <svg class="h-4 w-4"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24">
  <path d="m18 15-6-6-6 6"/>

</svg>
      <span class="hidden sm:inline"
        >Top</span
      >
    </button>
  </nav>
</div>


    
    


    



    
    
<div
  id="search-overlay"
  class="pointer-events-none fixed inset-0 z-40 bg-black/50 opacity-0 transition-opacity duration-300"></div>


<div
  id="search-modal"
  class="bg-card border-border pointer-events-none fixed top-1/2 left-1/2 z-50 max-h-[80vh] w-full max-w-2xl -translate-x-1/2 -translate-y-1/2 scale-95 transform overflow-hidden rounded-xl border opacity-0 shadow-xl transition-all duration-300">
  
  <div class="border-border flex items-center gap-3 border-b p-4">
    
    <div class="text-muted-foreground h-5 w-5 flex-shrink-0">
      
  <svg class="h-4 w-4"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />

</svg>
    </div>

    
    <div class="relative flex-1">
      
      <button
        id="search-clear"
        class="text-muted-foreground hover:text-foreground hover:bg-muted/50 pointer-events-none absolute top-1/2 left-0 z-10 h-5 w-5 -translate-y-1/2 rounded opacity-0 transition-all duration-200"
        title="Clear"
        aria-label="Clear">
        
  <svg class="h-4 w-4"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />

</svg>
      </button>

      
      <input
        id="search-input"
        type="text"
        placeholder="Search posts..."
        class="text-foreground placeholder:text-muted-foreground w-full border-none bg-transparent pl-8 text-lg outline-none"
        autocomplete="off"
        spellcheck="false" />
    </div>

    
    <button
      id="search-close"
      class="text-muted-foreground hover:text-foreground hover:bg-muted/50 flex h-6 w-6 items-center justify-center rounded-md p-0.5 transition-all duration-200"
      title="Close"
      aria-label="Close">
      
  <svg class="h-4 w-4"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />

</svg>
    </button>
  </div>

  
  <div id="search-results" class="max-h-96 overflow-y-auto">
    
    <div
      id="search-empty"
      class="flex flex-col items-center justify-center py-12 text-center">
      <div
        class="bg-muted/50 mb-4 flex h-16 w-16 items-center justify-center rounded-full">
        
  <svg class="h-6 w-6"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24">
  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m21 21-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />

</svg>
      </div>
      <h3 class="text-foreground mb-2 text-lg font-semibold">
        Start searching
      </h3>
      <p class="text-muted-foreground text-sm">
        Enter keywords to search articles
      </p>
    </div>

    
    <div
      id="search-loading"
      class="flex hidden items-center justify-center py-8">
      <div
        class="mr-3 h-6 w-6 animate-spin rounded-full border-2 border-current border-t-transparent"></div>
      <span class="text-muted-foreground"
        >Searching...</span
      >
    </div>

    
    <div
      id="search-no-results"
      class="flex hidden flex-col items-center justify-center py-12 text-center">
      <div
        class="bg-muted/50 mb-4 flex h-16 w-16 items-center justify-center rounded-full">
        
  <svg class="h-6 w-6"
    fill="none"
    stroke="currentColor"
    viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
</svg>
      </div>
      <h3 class="text-foreground mb-2 text-lg font-semibold">
        No results found
      </h3>
      <p class="text-muted-foreground text-sm">
        Try using different keywords
      </p>
    </div>

    
    <div id="search-results-list" class="hidden">
      
      <div
        id="search-stats"
        class="text-muted-foreground border-border border-b px-4 py-3 text-sm"
        data-template="Found %d results">
      </div>

      
      <div id="search-items" class="divide-border divide-y">
        
      </div>
    </div>
  </div>

  
  <div class="border-border bg-muted/20 border-t px-4 py-3">
    <div
      class="text-muted-foreground flex items-center justify-between text-xs">
      <div class="flex items-center gap-2 md:gap-4">
        <div class="flex items-center gap-1">
          <kbd
            class="bg-muted border-border rounded border px-1.5 py-0.5 text-xs"
            >↑↓</kbd
          >
          <span class="hidden sm:inline"
            >Navigate</span
          >
        </div>
        <div class="flex items-center gap-1">
          <kbd
            class="bg-muted border-border rounded border px-1.5 py-0.5 text-xs"
            >↵</kbd
          >
          <span class="hidden sm:inline"
            >Select</span
          >
        </div>
        <div class="flex items-center gap-1">
          <kbd
            class="bg-muted border-border rounded border px-1.5 py-0.5 text-xs"
            >ESC</kbd
          >
          <span class="hidden sm:inline"
            >Close</span
          >
        </div>
      </div>
      <div class="search-hint-desktop flex items-center gap-1">
        <kbd class="bg-muted border-border rounded border px-1.5 py-0.5 text-xs"
          >⌘K</kbd
        >
        <span>Shortcut</span>
      </div>
    </div>
  </div>
</div>

  <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script></body>
</html>
