Update

pradoslaw · Nov 7, 2024 · 8158c01 · 8158c01
1 parent 75e499a
commit 8158c01
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 36 deletions.
diff --git a/database/seeders/BlocksTableSeeder.php b/database/seeders/BlocksTableSeeder.php
@@ -21,7 +21,7 @@ private function addFooterBlock(): void
 
         $content = <<<EOF
 <div class="row max-width">
-    <div class="col-md-2 col-sm-4">
+    <div class="col-md-2 col-sm-4 footer-column">
         <ul>
             <li><h6><a title="Zobacz nasze oferty pracy" href="/Praca">Praca dla programistów</a></h6></li>
             <li><a href="/Praca/Technologia/javascript">Praca JavaScript</a></li>
@@ -30,11 +30,10 @@ private function addFooterBlock(): void
             <li><a href="/Praca/Technologia/php">Praca PHP</a></li>
             <li><a href="/Praca/Technologia/python">Praca Python</a></li>
             <li><a href="/Praca/Technologia/c%2B%2B">Praca C++</a></li>
-
         </ul>
     </div>
 
-    <div class="col-md-2 col-sm-4">
+    <div class="col-md-2 col-sm-4 footer-column">
         <ul>
             <li><h6><a title="Forum dla programistów" href="/Forum">Forum dyskusyjne</a></h6></li>
             <li><a title="Forum dla początkujących programistów" href="/Forum/Newbie">Newbie</a></li>
@@ -46,7 +45,7 @@ private function addFooterBlock(): void
         </ul>
     </div>
 
-    <div class="col-md-2 col-sm-4">
+    <div class="col-md-2 col-sm-4 footer-column">
         <ul>
             <li><h6>Sprawy administracyjne</h6></li>
             <li><a title="Jeżeli znalazłeś błąd w oprogramowaniu, tu jest odpowiednie miejsce, aby to zgłosić" href="https://github.com/adam-boduch/coyote/issues">Zgłoś błąd w oprogramowaniu</a></li>
@@ -58,7 +57,7 @@ private function addFooterBlock(): void
         </ul>
     </div>
 
-    <div class="col-md-2 col-sm-4">
+    <div class="col-md-2 col-sm-4 footer-column">
         <ul>
             <li><h6>O nas</h6></li>
             <li><a title="Kontakt z serwisem 4programmers.net" href="/Kontakt">Kontakt</a></li>
@@ -70,10 +69,9 @@ private function addFooterBlock(): void
         </ul>
     </div>
 
-    <div class=" col-sm-4">
+    <div class="col-sm-4">
         <div class="footer-bubble">
             <h6>Skontaktuj się z nami</h6>
-
             <ol>
                 <li>
                     <a title="Skontaktuj się poprzez email" href="/Kontakt">

diff --git a/resources/sass/core/_dark_topic.scss b/resources/sass/core/_dark_topic.scss
@@ -16,8 +16,6 @@ body.theme-dark {
 
   header {
     nav.navbar {
-      border-bottom-color: #2f2f2f;
-
       .nav-search { // TODO remove this after new homepage
         .search-bar {
           background-color: #2a2a2a;

diff --git a/resources/sass/pages/_homepage.scss b/resources/sass/pages/_homepage.scss
@@ -44,6 +44,12 @@ body.lookAndFeelModern {
   $body-background-light: #f0f2f5;
   $body-background-dark: #121314;
 
+  $border-color-primary-light: #dddddd;
+  $border-color-secondary-light: #dddddd;
+
+  $border-color-primary-dark: #2f2f2f;
+  $border-color-secondary-dark: #181818;
+
   @include light {
     color: #646466;
     background: $body-background-light;
@@ -98,6 +104,13 @@ body.lookAndFeelModern {
   header nav.navbar {
     @include color-theme(#777777, #eeeeee);
 
+    @include light {
+
+    }
+    @include dark {
+      border-bottom-color: $border-color-secondary-dark;
+    }
+
     .nav-link,
     .btn-toggle-theme,
     {
@@ -207,7 +220,12 @@ body.lookAndFeelModern {
       background: squiggle(#ffffff), linear-gradient(45deg, $card-background-light, $card-background-light, #bbe7ca);
     }
     @include dark {
-      background: squiggle(#04ae41), linear-gradient(45deg, $card-background-dark, $card-background-dark, #0d5c28);
+      background: $card-background-dark;
+    }
+    @include size(md) {
+      @include dark {
+        background: squiggle(#04ae41), linear-gradient(45deg, $card-background-dark, $card-background-dark, #0d5c28);
+      }
     }
     @include theme {
       background-repeat: no-repeat, no-repeat;
@@ -223,12 +241,7 @@ body.lookAndFeelModern {
     }
 
     .members-banner-border-right {
-      @include light {
-        border-right: 1px solid #bbcad8;
-      }
-      @include dark {
-        border-right: 1px solid #464849;
-      }
+      border-right: 1px solid var(--tile-border-color);
     }
 
     .online-indicator {
@@ -272,7 +285,29 @@ body.lookAndFeelModern {
     @include color-theme($secondary-color-light, $secondary-color-dark);
   }
 
+  .tile-palette-primary {
+    @include light {
+      --tile-border-color: #{$border-color-primary-light};
+    }
+    @include dark {
+      --tile-border-color: #{$border-color-primary-dark};
+    }
+  }
+
+  .tile-palette-secondary {
+    @include light {
+      --tile-border-color: #{$border-color-secondary-light};
+    }
+    @include dark {
+      --tile-border-color: #{$border-color-secondary-dark};
+    }
+  }
+
   .nav-pills {
+    @include theme {
+      border-bottom-color: var(--tile-border-color);
+    }
+
     .nav-link {
       transition: none;
 
@@ -524,7 +559,7 @@ body.lookAndFeelModern {
               margin: 10px 0 0 1px;
               font-family: "Open Sans", sans-serif;
               @include light {
-                border-left: 1px solid $border-color-light;
+                border-left: 1px solid $border-color-primary-light;
               }
               @include dark {
                 border-left: 1px solid #2f2f2f;
@@ -550,14 +585,7 @@ body.lookAndFeelModern {
       .row {
         padding: 4px 0 4px 0;
         margin: 0;
-
-        @include light {
-          border-bottom: 1px solid #e6e6e6;
-        }
-
-        @include dark {
-          border-bottom: 1px solid #181818;
-        }
+        border-bottom: 1px solid var(--tile-border-color);
 
         .display-count {
           strong {
@@ -597,13 +625,7 @@ body.lookAndFeelModern {
     .recent-activity {
       margin: 10px 0 0 10px;
       font-size: 0.8em;
-
-      @include light {
-        border-left: 1px solid $border-color-light;
-      }
-      @include dark {
-        border-left: 1px solid $border-color-dark;
-      }
+      border-left: 1px solid var(--tile-border-color);
 
       @include media-breakpoint-down(md) {
         border-left: none;
@@ -639,6 +661,17 @@ body.lookAndFeelModern {
       @include color-theme($primary-color-light, $primary-color-dark);
       @include background-theme($primary-background-light, $primary-background-dark);
     }
+
+    .footer-inner {
+      .footer-column {
+        @include light {
+          border-color: $border-color-secondary-dark;
+        }
+        @include dark {
+          border-color: $border-color-secondary-dark;
+        }
+      }
+    }
   }
 
   pre, code {

diff --git a/resources/views/home.twig b/resources/views/home.twig
@@ -17,7 +17,7 @@
       </div>
     </div>
     <div class="col-lg-4 mt-2 mt-lg-0">
-      <div class="d-flex members-banner py-4 px-2 px-xl-4">
+      <div class="d-flex members-banner py-4 px-2 px-xl-4 tile-palette-primary">
         <div class="members-banner-border-right col-4 px-4">
           <span class="members-banner-title">Członkowie</span>
           <br>
@@ -46,7 +46,7 @@
         <h2 class="mb-3">
           Co nowego na forum?
         </h2>
-        <div class="card card-tile">
+        <div class="card card-tile tile-palette-secondary">
           <div class="card-body">
             <div class="row">
               <div class="col-lg-6">
@@ -119,7 +119,7 @@
                             <a href="{{ route('forum.category', [topic.forum_slug]) }}" class="category">
                               {{ topic.forum }}
                             </a>
-                            <small class="float-end">
+                            <small class="float-end topic-created">
                               {{ topic.last_post_created_at|format_date }}
                             </small>
                           </div>
@@ -202,7 +202,7 @@
 
         <section class="box mt-4">
           <h2 class="mb-3">Reputacja użytkowników</h2>
-          <div class="card card-default card-reputation tab-content">
+          <div class="card card-default card-reputation tab-content tile-palette-primary">
             <div class="pt-2 px-3">
               <div id="reputation-tabs" class="nav nav-pills">
                 <span data-bs-toggle="tab" data-bs-target="#week" class="nav-link {{ settings.reputationMode == 'week' ? 'active' }}">