Merge branch 'develop'

Nilesh2000 · Jan 17, 2025 · 0e43405 · 0e43405
2 parents 55a66cb + ae56e62
commit 0e43405
Showing 1 changed file with 102 additions and 82 deletions.
diff --git a/themes/minimal/assets/css/main.css b/themes/minimal/assets/css/main.css
@@ -1,145 +1,161 @@
 :root {
   --bg-color: #ffffff;
-  --text-color: #333;
-  --link-color: #00e;
   --border-color: #222;
-  --strong-bg: #f0f0f0;
   --heading-border: #ccc;
-  --social-icon-bg: linear-gradient(145deg, #ffffff, #f5f5f5);
-  --social-icon-color: #111;
+  --link-color: #00e;
   --post-border: #ddd;
   --post-meta-color: #666;
+  --social-icon-bg: linear-gradient(145deg, #ffffff, #f5f5f5);
+  --social-icon-color: #111;
+  --strong-bg: #f0f0f0;
+  --text-color: #333;
+  --heart-color: #d64545;
+  --github-color: #24292e;
+  --linkedin-color: #0077b5;
+  --x-twitter-color: #000000;
 }
 
 [data-theme="dark"] {
   --bg-color: #1a1a1a;
-  --text-color: #e0e0e0;
-  --link-color: #66b3ff;
   --border-color: #444;
-  --strong-bg: #2d2d2d;
   --heading-border: #444;
-  --social-icon-bg: linear-gradient(145deg, #222, #1a1a1a);
-  --social-icon-color: #e0e0e0;
+  --link-color: #66b3ff;
   --post-border: #333;
   --post-meta-color: #999;
+  --social-icon-bg: linear-gradient(145deg, #222, #1a1a1a);
+  --social-icon-color: #e0e0e0;
+  --strong-bg: #2d2d2d;
+  --text-color: #e0e0e0;
+  --heart-color: #e06c6c;
+  --github-color: #f0f6fc;
+  --linkedin-color: #0077b5;
+  --x-twitter-color: #ffffff;
 }
 
 body {
-  color: var(--text-color);
   background-color: var(--bg-color);
+  color: var(--text-color);
+  display: flex;
+  flex-direction: column;
   font-family: "IBM Plex Sans", serif;
-  line-height: 1.45;
   font-size: 1.1rem;
+  line-height: 1.45;
   margin: 0 auto;
-  padding: 1rem;
-  text-align: justify;
   max-width: 768px;
-  display: flex;
-  flex-direction: column;
   min-height: 100vh;
+  padding: 1rem;
+  text-align: justify;
   transition: background-color 0.3s ease, color 0.3s ease;
 }
 
-header {
-  margin-bottom: 1rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+a {
+  color: var(--link-color);
+  text-decoration: none;
 }
 
-.header-title {
-  margin: 0;
-  font-size: 3rem;
-  font-weight: 600;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: "Roboto Slab", serif;
+  font-weight: 400;
 }
 
-.header-title a {
-  color: inherit;
+h1:not(.header-title):not(.post-title) {
+  border-bottom: 2px solid var(--heading-border);
 }
 
-nav ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  display: flex;
-  gap: 1rem;
-  align-items: center;
+strong {
+  background-color: var(--strong-bg);
+  border-radius: 3px;
+  font-weight: 500;
+  padding: 1px 4px;
 }
 
-nav a {
-  color: var(--link-color);
-  font-weight: 400;
-  padding: 0.5rem 0;
-  position: relative;
+header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
 }
 
 main {
   flex: 1;
 }
 
-strong {
-  font-weight: 500;
-  background-color: var(--strong-bg);
-  padding: 1px 4px;
-  border-radius: 3px;
-}
-
 footer {
   border-top: 1px solid var(--border-color);
-  text-align: center;
-  padding-bottom: 1rem;
   font-size: 0.9rem;
+  padding-bottom: 1rem;
+  text-align: center;
 }
 
-.fa-heart {
-  color: #ff0000;
+nav ul {
+  align-items: center;
+  display: flex;
+  gap: 2.5rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
 }
 
-h1:not(.header-title):not(.post-title) {
-  border-bottom: 2px solid var(--heading-border);
+nav a {
+  color: var(--link-color);
+  font-weight: 400;
+  padding: 0.5rem 0;
+  position: relative;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-family: "Roboto Slab", serif;
-  font-weight: 400;
+.header-title {
+  font-size: 3rem;
+  font-weight: 600;
+  margin: 0;
 }
 
-a {
-  color: var(--link-color);
-  text-decoration: none;
+.header-title a {
+  color: inherit;
 }
 
 .social-icons {
   display: flex;
-  gap: 1rem;
+  gap: 1.25rem;
   justify-content: center;
-  margin: 2rem 0;
+  margin: 2.5rem 0;
 }
 
 .social-icons a {
+  align-items: center;
+  background: var(--social-icon-bg);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 10px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
   color: var(--social-icon-color);
+  display: flex;
   font-size: 1.4rem;
-  width: 3.2rem;
   height: 3.2rem;
-  display: flex;
-  align-items: center;
   justify-content: center;
-  border-radius: 8px;
-  background: var(--social-icon-bg);
-  border: 1px solid rgba(0, 0, 0, 0.05);
-  transition: all 0.2s ease-in-out;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  width: 3.2rem;
 }
 
 .social-icons a:hover {
-  color: #000;
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
-  border-color: rgba(0, 0, 0, 0.08);
+  border-color: transparent;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
+  transform: translateY(-3px);
+}
+
+.social-icons a:hover .fa-github {
+  color: var(--github-color);
+}
+
+.social-icons a:hover .fa-linkedin-in {
+  color: var(--linkedin-color);
+}
+
+.social-icons a:hover .fa-x-twitter {
+  color: var(--x-twitter-color);
 }
 
 .post-header {
@@ -154,38 +170,42 @@ a {
 }
 
 .post-meta {
+  align-items: center;
   color: var(--post-meta-color);
-  font-size: 0.95rem;
   display: flex;
+  font-size: 0.95rem;
   justify-content: space-between;
-  align-items: center;
 }
 
 .post-meta small {
   margin-left: auto;
 }
 
+.fa-heart {
+  color: var(--heart-color);
+}
+
 #theme-toggle {
   background: none;
   border: none;
-  cursor: pointer;
-  padding: 0.5rem;
   color: var(--text-color);
+  cursor: pointer;
   font-size: 1.2rem;
+  padding: 0.5rem;
   transition: transform 0.3s ease;
 }
 
 @media screen and (max-width: 768px) {
   header {
-    flex-direction: column;
     align-items: flex-start;
+    flex-direction: column;
     gap: 0.5rem;
     padding-top: 0.5rem;
   }
 
   nav ul {
-    width: 100%;
     flex-wrap: wrap;
     gap: 2rem;
+    width: 100%;
   }
 }