fix: update notes cards to support dark theme using Docusaurus variables

docs/notes/blockchain.md

@@ -9,81 +9,87 @@ sidebar_position: 5
 <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>⛓️ Module 1</h3>
-    <p>Introduction to Blockchain</p>
-    <a href="/pdfs/blockchain/Module1 Introduction to Blockchain.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>⛓️ Module 1</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Introduction to Blockchain</p>
+    <a href="/pdfs/blockchain/Module1 Introduction to Blockchain.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>⛓️ Module 2</h3>
-    <p>Blockchain Technologies</p>
-    <a href="/pdfs/blockchain/Module2 Blockchain Technologies.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>⛓️ Module 2</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Blockchain Technologies</p>
+    <a href="/pdfs/blockchain/Module2 Blockchain Technologies.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>⛓️ Module 3</h3>
-    <p> Programing in Blockchain</p>
-    <a href="/pdfs/blockchain/Module3 Programing in Blockchain.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>⛓️ Module 3</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Programing in Blockchain</p>
+    <a href="/pdfs/blockchain/Module3 Programing in Blockchain.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>⛓️ Module 4</h3>
-    <p>Public Blockchain</p>
-    <a href="/pdfs/blockchain/Module4 Public Blockchain.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>⛓️ Module 4</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Public Blockchain</p>
+    <a href="/pdfs/blockchain/Module4 Public Blockchain.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>⛓️ Module 5</h3>
-    <p>Private Blockchain</p>
-    <a href="/pdfs/blockchain/Module5 Private Blockchain.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>⛓️ Module 5</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Private Blockchain</p>
+    <a href="/pdfs/blockchain/Module5 Private Blockchain.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>⛓️ Module 6</h3>
-    <p>Applications of Blockchain</p>
-    <a href="/pdfs/blockchain/Module6 Applications of Blockchain.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>⛓️ Module 6</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Applications of Blockchain</p>
+    <a href="/pdfs/blockchain/Module6 Applications of Blockchain.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
 </div>

docs/notes/devops.md

@@ -9,16 +9,17 @@ sidebar_position: 6
 <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>⚙️ Devops</h3>
-    <p>Handwritten notes</p>
-    <a href="/pdfs/devops/devops handwritten notes.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>⚙️ Devops</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Handwritten notes</p>
+    <a href="/pdfs/devops/devops handwritten notes.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   </div>

docs/notes/dsa.md

@@ -9,159 +9,171 @@ sidebar_position: 3
 <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1rem' }}>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>📘 Chapter 1</h3>
-    <p>Introduction & Recursion</p>
-    <a href="/pdfs/dsa/1.Intro +Recursion.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>📘 Chapter 1</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Introduction & Recursion</p>
+    <a href="/pdfs/dsa/1.Intro +Recursion.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-    <h3>📘 Chapter 2</h3>
-    <p>Arrays & Searching</p>
-    <a href="/pdfs/dsa/2. Array+Searching.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>📘 Chapter 2</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Arrays & Searching</p>
+    <a href="/pdfs/dsa/2. Array+Searching.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-  <h3>📘 Chapter 3</h3>
-    <p>Sorting</p>
-    <a href="/pdfs/dsa/3. Sorting.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>📘 Chapter 3</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Sorting</p>
+    <a href="/pdfs/dsa/3. Sorting.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
+
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-  <h3>📘 Chapter 4</h3>
-    <p>Hashing</p>
-    <a href="\pdfs\dsa\4. Hashing.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>📘 Chapter 4</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Hashing</p>
+    <a href="\pdfs\dsa\4. Hashing.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-  <h3>📘 Chapter 5</h3>
-    <p>Strings</p>
-    <a href="/pdfs/dsa/5. Strings.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>📘 Chapter 5</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Strings</p>
+    <a href="/pdfs/dsa/5. Strings.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-  <h3>📘 Chapter 6</h3>
-    <p>Linked List</p>
-    <a href="/pdfs/dsa/6. LinkedList.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>📘 Chapter 6</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Linked List</p>
+    <a href="/pdfs/dsa/6. LinkedList.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-  <h3>📘 Chapter 7</h3>
-    <p>Stacks</p>
-    <a href="/pdfs/dsa/7. Stacks (1).pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>📘 Chapter 7</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Stacks</p>
+    <a href="/pdfs/dsa/7. Stacks (1).pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-  <h3>📘 Chapter 8</h3>
-    <p>Queues</p>
-    <a href="/pdfs/dsa/8. Queues.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>📘 Chapter 8</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Queues</p>
+    <a href="/pdfs/dsa/8. Queues.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-  <h3>📘 Chapter 9</h3>
-    <p>Trees</p>
-    <a href="/pdfs/dsa/9. Trees.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>📘 Chapter 9</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Trees</p>
+    <a href="/pdfs/dsa/9. Trees.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-  <h3>📘 Chapter 10</h3>
-    <p>Binary Search Trees</p>
-    <a href="/pdfs/dsa/10. binarySearchTrees.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>📘 Chapter 10</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Binary Search Trees</p>
+    <a href="/pdfs/dsa/10. binarySearchTrees.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-  <h3>📘 Chapter 11</h3>
-    <p>Greedy+Backtracking</p>
-    <a href="/pdfs/dsa/11. Greedy+Backtracking.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>📘 Chapter 11</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Greedy+Backtracking</p>
+    <a href="/pdfs/dsa/11. Greedy+Backtracking.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
   <div style={{
-    border: '1px solid #ccc',
+    border: '1px solid var(--ifm-color-emphasis-300)',
     borderRadius: '10px',
     padding: '1rem',
     width: '250px',
-    background: '#f9f9f9',
-    boxShadow: '2px 2px 8px rgba(0,0,0,0.1)'
+    background: 'var(--ifm-card-background-color)',
+    boxShadow: '0 2px 8px var(--ifm-color-emphasis-200)',
+    color: 'var(--ifm-font-color-base)'
   }}>
-
-    <h3>📘 Chapter 12</h3>
-    <p>Dynamic Programming</p>
-    <a href="/pdfs/dsa/12. DynamicProgramming.pdf" download>📥 Download PDF</a>
+    <h3 style={{ color: 'var(--ifm-heading-color)' }}>📘 Chapter 12</h3>
+    <p style={{ color: 'var(--ifm-font-color-base)' }}>Dynamic Programming</p>
+    <a href="/pdfs/dsa/12. DynamicProgramming.pdf" download style={{ color: 'var(--ifm-link-color)' }}>📥 Download PDF</a>
   </div>
 
 </div>