Update homepage, background and links

pradoslaw · Oct 15, 2024 · ac7b274 · ac7b274
1 parent 427031f
commit ac7b274
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 7 deletions.
diff --git a/resources/feature/theme/theme.scss b/resources/feature/theme/theme.scss
@@ -21,3 +21,17 @@
     }
   }
 }
+
+@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
@@ -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
@@ -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>