From 04efa107036a1a79d917c35e0bc03c9983ef06cd Mon Sep 17 00:00:00 2001
From: Daniel Wilkowski <wilkowski.kontakt@gmail.com>
Date: Tue, 15 Oct 2024 14:47:11 +0200
Subject: [PATCH] Update homepage, background and links

---
 resources/feature/theme/theme.scss  | 14 +++++++++
 resources/sass/pages/_homepage.scss | 48 ++++++++++++++++++++++++++---
 resources/views/home.twig           |  5 +--
 3 files changed, 60 insertions(+), 7 deletions(-)

diff --git a/resources/feature/theme/theme.scss b/resources/feature/theme/theme.scss
index 8028cdc3a..f85888a9a 100644
--- a/resources/feature/theme/theme.scss
+++ b/resources/feature/theme/theme.scss
@@ -9,3 +9,17 @@
     @content;
   }
 }
+
+@mixin theme {
+  /**
+   * The dark() and light() mixins increase selector specificity.
+   * In some cases, it's necessary to apply a common style to both
+   * themes, overriding a previously defined style. 
+   * To achieve this, we need to artificially elevate the specificity 
+   * of the style.
+   */
+  body.theme-light &,
+  body.theme-dark & {
+    @content;
+  }
+}
diff --git a/resources/sass/pages/_homepage.scss b/resources/sass/pages/_homepage.scss
index 99f2fdb9b..2abd733d5 100644
--- a/resources/sass/pages/_homepage.scss
+++ b/resources/sass/pages/_homepage.scss
@@ -2,11 +2,45 @@
 
 @import "../../feature/theme/theme";
 
+body.theme-dark {
+  background: #0f0f0f;
+}
+
+body.theme-light {
+  background: #f0f2f5;
+}
+
 .scope-homepage {
   h4.heading {
     border: none;
   }
 
+  a {
+    @include light {
+      color: #005b12;
+    }
+    @include dark {
+      color: #bdd5c3;
+    }
+  }
+
+  .nav-pills {
+    a {
+      @include theme {
+        color: inherit;
+      }
+    }
+
+    .nav-link.active {
+      @include light {
+        border-bottom-color: #00a538;
+      }
+      @include dark {
+        border-bottom-color: #78de13;
+      }
+    }
+  }
+
   @include light {
     .default-avatar {
       color: #00a538;
@@ -20,6 +54,14 @@
       background: #0a1203;
     }
   }
+
+  .card-tile {
+    border-radius: 6px;
+    @include light {
+      background: #eaecf1;
+      border: 1px solid #dde3ee;
+    }
+  }
 }
 
 .card-reputation {
@@ -55,7 +97,7 @@
       @include light {
         background: linear-gradient(270deg, #00a538 0%, #ffffff 100%);
       }
-      
+
       @include dark {
         background: linear-gradient(270deg, #80ff00 0%, #1a1a1a 100%);
       }
@@ -138,10 +180,6 @@
           font-size: 10px;
         }
       }
-
-      &:nth-child(even) {
-        background-color: #f8f8f8;
-      }
     }
 
     a.title {
diff --git a/resources/views/home.twig b/resources/views/home.twig
index 34e9ff97a..17c0f3654 100644
--- a/resources/views/home.twig
+++ b/resources/views/home.twig
@@ -15,7 +15,7 @@
           {{ icon('forumNews') }}
           Co nowego na forum?
         </h2>
-        <div class="card card-forum">
+        <div class="card card-tile">
           <div class="card-body">
             <div class="row">
               <div class="col-lg-6">
@@ -203,7 +203,8 @@
                           <strong>{{ user.reputation }}</strong> pkt
                         </span>
                         <div class="flex-grow-1 me-4 pe-2">
-                          <div class="ranking-percentage-ray" style="width:{{ user.percentage|round }}%;"></div>
+                          <div class="ranking-percentage-ray"
+                               style="width:{{ user.percentage|round }}%; max-width:100%;"></div>
                         </div>
                       </div>
                     </div>