[RZA-250097]: Refactor the minor changes

Author: 1046prt

src/assets/styles/blogs/blog.css

@@ -26,7 +26,7 @@
   --shadow-dark: rgba(0, 0, 0, 0.3);
   --gradient-dark: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
   --primary-light: #764ba2;
-  --text: #1a1a1a;
+  --text_color: #1a1a1a;
   --secondary: var(--text-secondary-light);
 }
 
@@ -42,7 +42,7 @@
   box-sizing: border-box;
   position: relative;
   overflow-x: hidden;
-  counter-reset: main-counter;
+  counter-reset: section-counter;
 }
 
 .container__blog::before {
@@ -131,71 +131,69 @@
   color: light-dark(var(--text-primary-light), var(--text-primary-dark));
   animation: fadeIn 1s ease-out 0.3s both;
   text-align: left;
+  counter-reset: section-counter;
 }
 
-.markdown-content h2 {
-  counter-increment: main-counter;
-  counter-reset: sub-counter;
-}
-
-.markdown-content h2::before {
-  content: counter(main-counter) ". ";
-  color: var(--primary);
-  font-weight: 700;
-  margin-right: 0.75rem;
-}
-
-.markdown-content h2+ul {
-  counter-reset: sub-counter;
-}
-
-.markdown-content h2+ul>li,
-.markdown-content h2+*+ul>li {
-  counter-increment: sub-counter;
-  list-style: none;
+.markdown-content h2:first-of-type {
+  font-size: 2.25rem;
+  margin-top: 2.5rem;
+  margin-left: 0px;
+  color: light-dark(var(--text-primary-light), var(--text-primary-dark));
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: -0.02em;
   position: relative;
-  padding-left: 0;
+  transition: all 0.3s ease;
+  text-align: left;
 }
 
-.markdown-content h2+ul>li::before,
-.markdown-content h2+*+ul>li::before {
-  content: counter(main-counter) "." counter(sub-counter) " ";
-  color: var(--primary);
+.markdown-content h2:not(:first-of-type) {
+  font-size: 2.25rem;
+  margin-top: 2.5rem;
+  margin-left: 0px;
+  color: light-dark(var(--text-primary-light), var(--text-primary-dark));
   font-weight: 600;
-  position: absolute;
-  left: -3rem;
-  width: 2.5rem;
+  line-height: 1.3;
+  letter-spacing: -0.02em;
+  position: relative;
+  transition: all 0.3s ease;
   text-align: left;
+  counter-increment: section-counter;
+  counter-reset: subsection-counter;
 }
 
-.markdown-content h3 {
-  counter-reset: example-counter;
-}
-
-.markdown-content h3::before {
-  content: counter(main-counter) "." counter(sub-counter, lower-alpha) " ";
-  color: light-dark(var(--accent-light), var(--accent-dark));
-  font-weight: 600;
+.markdown-content h2:not(:first-of-type)::before {
+  content: counter(section-counter) ". ";
+  color: var(--primary);
+  font-weight: 700;
   margin-right: 0.75rem;
 }
 
-.markdown-content h3+*+h3 {
-  counter-increment: example-counter;
+.markdown-content h3 {
+  font-size: 1.85rem;
+  margin-top: 2.25rem;
+  margin-left: 0px;
+  color: light-dark(var(--text-primary-light), var(--text-primary-dark));
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: -0.02em;
+  position: relative;
+  transition: all 0.3s ease;
+  text-align: left;
+  counter-increment: subsection-counter;
 }
 
-.markdown-content h3+*+h3::before {
-  content: "Example " counter(example-counter) ": ";
-  color: light-dark(var(--accent-light), var(--accent-dark));
+.markdown-content h3::before {
+  content: counter(section-counter) "." counter(subsection-counter) " ";
+  color: var(--primary);
   font-weight: 600;
   margin-right: 0.75rem;
 }
 
-.markdown-content h1,
-.markdown-content h2,
-.markdown-content h3,
 .markdown-content h4 {
+  font-size: 1.55rem;
+  margin-top: 2rem;
   color: light-dark(var(--text-primary-light), var(--text-primary-dark));
-  margin: 1.75rem 0 0.75rem 0;
   font-weight: 600;
   line-height: 1.3;
   letter-spacing: -0.02em;
@@ -204,26 +202,16 @@
   text-align: left;
 }
 
-.markdown-content h1 {
-  font-size: 2.25rem;
-  margin-top: 2.5rem;
-  margin-left: 0px;
-}
-
-.markdown-content h2 {
-  font-size: 1.85rem;
-  margin-top: 2.25rem;
-  margin-left: -15px;
-}
-
-.markdown-content h3 {
-  font-size: 1.55rem;
-  margin-top: 2rem;
-}
-
-.markdown-content h4 {
+.markdown-content h5 {
   font-size: 1em;
   margin-top: 1.75rem;
+  color: light-dark(var(--text-primary-light), var(--text-primary-dark));
+  font-weight: 600;
+  line-height: 1.3;
+  letter-spacing: -0.02em;
+  position: relative;
+  transition: all 0.3s ease;
+  text-align: left;
 }
 
 .markdown-content p {
@@ -252,7 +240,7 @@
   border-bottom: 1px solid transparent;
 }
 
-.markdown-content a::after {
+.markdown-content a::before {
   content: '';
   position: absolute;
   width: 0;
@@ -268,7 +256,7 @@
   transform: translateY(-1px);
 }
 
-.markdown-content a:hover::after {
+.markdown-content a:hover::before {
   width: 100%;
 }
 
@@ -311,7 +299,7 @@
   font-size: 1.05rem;
   line-height: 1.6;
   color: light-dark(var(--text-primary-light), var(--text-primary-dark));
-  font-family: 'Dancing Script', cursive;
+  font-family: 'Fira Code', monospace;
   position: relative;
   transition: all 0.3s ease;
   text-align: left;
@@ -328,7 +316,7 @@
   padding: 0.1rem 0.4rem;
   border-radius: 6px;
   font-size: 0.95em;
-  font-family: 'Dancing Script', cursive;
+  font-family: 'Fira Code', monospace;
   font-weight: 500;
   border: 1px solid light-dark(var(--border-light), var(--border-dark));
 }
@@ -351,14 +339,30 @@
   text-align: left;
 }
 
-.markdown-content ul ul {
+.markdown-content ul {
   list-style: disc;
 }
 
+.markdown-content ul ul {
+  list-style: circle;
+}
+
+.markdown-content ul ul ul {
+  list-style: square;
+}
+
 .markdown-content ol {
   list-style: decimal;
 }
 
+.markdown-content ol ol {
+  list-style: lower-alpha;
+}
+
+.markdown-content ol ol ol {
+  list-style: lower-roman;
+}
+
 .markdown-content li {
   margin-bottom: 0.5rem;
   line-height: inherit;
@@ -367,16 +371,19 @@
   text-align: left;
 }
 
+.markdown-content li::before {
+  content: none;
+}
+
 .markdown-content hr {
   display: none !important;
 }
 
-@keyfr ames fadeInUp {
+@keyframes fadeInUp {
   from {
     opacity: 0;
     transform: translateY(20px);
   }
-
   to {
     opacity: 1;
     transform: translateY(0);
@@ -387,7 +394,6 @@
   from {
     opacity: 0;
   }
-
   to {
     opacity: 1;
   }
@@ -423,6 +429,22 @@
     padding: 0 0.75rem;
   }
 
+  .markdown-content h2:not(:first-of-type) {
+    font-size: 1.8rem;
+  }
+
+  .markdown-content h3 {
+    font-size: 1.5rem;
+  }
+
+  .markdown-content h4 {
+    font-size: 1.3rem;
+  }
+
+  .markdown-content h5 {
+    font-size: 1.1rem;
+  }
+
   .markdown-content blockquote {
     padding: 0.65rem 1.25rem;
   }
@@ -436,11 +458,6 @@
   .markdown-content ol {
     padding-left: 1.5rem;
   }
-
-  .markdown-content h2+ul>li::before,
-  .markdown-content h2+*+ul>li::before {
-    left: -2.5rem;
-  }
 }
 
 @media (max-width: 480px) {
@@ -452,29 +469,24 @@
     font-size: 1.85rem;
   }
 
-  .markdown-content h1 {
+  .markdown-content h2:not(:first-of-type) {
     font-size: 1.55rem;
   }
 
-  .markdown-content h2 {
+  .markdown-content h3 {
     font-size: 1.35rem;
   }
 
-  .markdown-content h3 {
+  .markdown-content h4 {
     font-size: 1.2rem;
   }
 
-  .markdown-content h4 {
+  .markdown-content h5 {
     font-size: 1.05rem;
   }
 
   .markdown-content ul,
   .markdown-content ol {
     padding-left: 1rem;
   }
-
-  .markdown-content h2+ul>li::before,
-  .markdown-content h2+*+ul>li::before {
-    left: -2rem;
-  }
-}
+}

src/content/blog/style-guide.md

@@ -5,7 +5,7 @@ image: "/assets/images/blog/blog-2.png"
 publishDate: "26 December 2024" 
 ---
 
-# **Style Guide Documentation**
+## **Style Guide Documentation**
 
 This document outlines the style guide we follow to maintain consistency and readability in our codebase. These principles apply to both CSS and JavaScript/TypeScript components.