Add sponsor note

Author: CosmeValera

sass/_layout.scss

@@ -29,6 +29,10 @@ footer {
     text-align: center;
     a {
         color: $color-fg-secondary;
+
+        &:hover {
+            text-decoration: underline;
+        }
     }
 
     @media screen and (max-width: $break-large) {

sass/_responsive.scss

@@ -69,5 +69,35 @@ main {
             }
         }
     }
-    
+
+    @media (min-width: $break-extra-large) {
+        #sponsor #section-tiers .tier-cards {
+            flex-direction: row;
+            .tier-card {
+                .tier-card-header {
+                    h1 {
+                        font-size: 1.0rem;
+                        margin-bottom: 0.65rem;
+                    }
+                    small {
+                        font-size: 0.75rem;
+                    }
+                    .tier-card-content {
+                        p {
+                            font-size: 1.35rem;
+                        }
+                        li {
+                            font-size: 0.85rem;
+                        }
+                    }
+                }
+            }
+        }
+        #sponsor #section-contribution .contribution {
+            .donation-options {
+                flex-direction: row;
+                gap: 10px;
+            }
+        }
+    }
 }

sass/sponsor.scss

@@ -123,30 +123,7 @@
         }
       }
     }
-    @media (min-width: 1280px) {
-      .tier-cards {
-        flex-direction: row;
-        .tier-card {
-          .tier-card-header {
-            h1 {
-              font-size: 1.0rem;
-              margin-bottom: 0.65rem;
-            }
-            small {
-              font-size: 0.75rem;
-            }
-          }
-          .tier-card-content {
-            p {
-              font-size: 1.35rem;
-            }
-            li {
-              font-size: 0.85rem;
-            }
-          }
-        }
-      }
-    }
+
   }
 
   .common-hr {
@@ -246,16 +223,28 @@
         opacity: 1;
         margin-bottom: 20px;
       }
-    }
-    
-    @media (min-width: 1280px) {
-      .contribution {
-        .donation-options {
-          flex-direction: row;
-          gap: 10px;
+
+      .sponsor-note {
+        margin-top: 20px;
+        padding: 10px;
+        background-color: $color-bg; /* Light background to stand out */
+        border-left: 4px solid #ffcc00; /* Accent border to draw attention */
+        font-size: 0.9rem; /* Slightly smaller than body text */
+        color: #ccc; /* Darker text for readability */
+        line-height: 1.6;
+      
+        strong {
+          color: #f7931a; /* Highlight the word "Note" in a bolder color */
+        }
+        
+        a {
+          color: $color-fg-secondary;
+        
+          &:hover {
+            text-decoration: underline;
+          }
         }
       }
     }
   }
-
 }

templates/sponsor.html

@@ -152,6 +152,9 @@ <h2 class="contribution-title">
                     <i class="fa fa-github"></i> Sponsor on GitHub
                     </a>
                 </div>
+                <p class="sponsor-note">
+                    <strong>Note:</strong> The current sponsorship link directs to my brother, <a href="https://github.com/Chemaclass" target="_blank">Jose María Valera Reales (Chemaclass)</a>. You will be supporting his amazing work until I set up my own sponsorship pages.
+                </p>
             </div>
 
             <!-- One-Time Contribution Section -->
@@ -191,6 +194,9 @@ <h2 class="contribution-title">
                         <i class="fa-solid fa-bolt"></i> Lightning
                     </a>
                 </div>
+                <p class="sponsor-note">
+                    <strong>Note:</strong> The current sponsorship links direct to my brother, <a href="https://github.com/Chemaclass" target="_blank">Jose María Valera Reales (Chemaclass)</a>. You will be supporting his amazing work until I set up my own sponsorship pages.
+                </p>
             </div>
         </section>
     </div>