Restyle homepage

app/Domain/Icon/FontAwesomeFree.php

@@ -29,9 +29,6 @@ public function icons(): array
             'loginGithub'                               => 'fab fa-github',
 
             // homepage
-            'microblogsPopular'                         => 'far fa-comments',
-            'reputationRanking'                         => 'fas fa-star',
-            'forumNews'                                 => 'fas fa-star',
             'viewersOnlineLocal'                        => 'fas fa-eye',
             'viewersOnlineGlobal'                       => 'fas fa-users',
             'homepageActivityMicroblog'                 => 'far fa-person',

app/Domain/Icon/FontAwesomePro.php

@@ -30,9 +30,6 @@ public function icons(): array
             'loginGithub'                               => 'fa-brand fa-github',
 
             // homepage
-            'microblogsPopular'                         => 'fa-light fa-fire-flame-curved',
-            'reputationRanking'                         => 'fa-light fa-trophy',
-            'forumNews'                                 => 'fa-light fa-inbox-in',
             'viewersOnlineLocal'                        => 'fa-light fa-eye',
             'viewersOnlineGlobal'                       => 'fa-light fa-users',
             'homepageActivityMicroblog'                 => 'fa-light fa-person',

app/Http/Controllers/HomeController.php

@@ -59,6 +59,7 @@ public function index(): View
             ),
 
             'globalViewers' => $this->globalViewers(),
+            'lookAndFeel'   => 'lookAndFeelModern',
         ])
             ->with('settings', $this->getSettings());
     }

app/Services/Session/Renderer.php

@@ -1,7 +1,7 @@
 <?php
 namespace Coyote\Services\Session;
 
-use Coyote\Domain\Online\SessionRepository;
+use Coyote\Domain\Online\FakeSessionRepository;
 use Coyote\Domain\Online\Viewers;
 use Coyote\Domain\Online\ViewersStore;
 use Coyote\Domain\Spacer;
@@ -13,9 +13,9 @@ class Renderer
     private Spacer $spacer;
 
     public function __construct(
-        private SessionRepository $session,
-        private ViewersStore      $store,
-        private Request           $request,
+        private FakeSessionRepository $session,
+        private ViewersStore          $store,
+        private Request               $request,
     )
     {
         $this->spacer = new Spacer(8);

resources/feature/theme/theme.scss

@@ -21,3 +21,36 @@
     }
   }
 }
+
+@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. 
+   * Thus, we need to artificially elevate the specificity 
+   * of the style, without actually changing any style.
+   */
+  html.theme-light &,
+  html.theme-dark &,
+  {
+    @content;
+  }
+}
+
+@mixin color-theme($light, $dark) {
+  @include light {
+    color: $light;
+  }
+  @include dark {
+    color: $dark;
+  }
+}
+
+@mixin background-theme($light, $dark) {
+  @include light {
+    background: $light;
+  }
+  @include dark {
+    background: $dark;
+  }
+}

resources/js/components/microblog/comment.vue

@@ -28,26 +28,25 @@
             </a>
           </li>
           <li class="list-inline-item">
-            <a
+            <span
               @click="checkAuth(vote, comment)"
               @mouseenter.once="loadVoters(comment)"
               :aria-label="commentVoters"
               :class="{'vote-active': comment.is_voted}"
-              href="javascript:"
               data-balloon-pos="up"
               data-balloon-break>
               {{ commentLabel }}
-            </a>
+            </span>
           </li>
           <li class="list-inline-item">
-            <a @click="checkAuth(reply)" href="javascript:">
+            <span @click="checkAuth(reply)">
               Odpowiedz
-            </a>
+            </span>
           </li>
           <li v-if="isAuthorized" class="list-inline-item">
-            <a href="javascript:" :data-metadata="comment.metadata" :data-url="comment.url">
+            <span :data-metadata="comment.metadata" :data-url="comment.url">
               Zgłoś
-            </a>
+            </span>
           </li>
         </ul>
 

resources/sass/core.scss

@@ -47,7 +47,6 @@
 @import "core/dark_flash";
 @import "core/dark_footer";
 @import "core/dark_header";
-@import "core/dark_homepage";
 @import "core/dark_input";
 @import "core/dark_job";
 @import "core/dark_job_offers";

resources/sass/core/_dark_topic.scss

@@ -15,7 +15,7 @@ body.theme-dark {
       border-bottom-color: #2f2f2f;
       border-bottom-width: 2px;
 
-      .nav-search {
+      .nav-search { // TODO remove this after new homepage
         .search-bar {
           background-color: #2a2a2a;
 

resources/sass/core/_navs.scss

@@ -24,16 +24,6 @@
   }
 }
 
-.nav-pills {
-  .nav-link {
-    &.nav-link-style-only {
-      // Style an element to look like a nav link, 
-      // without any functionality of nav link.
-      cursor: default;
-    }
-  }
-}
-
 .nav-tabs {
   .nav-link.active {
     border-top: 2px solid $alt-link-hover-color;

resources/sass/icons/_icons.scss

@@ -90,6 +90,12 @@ $icon-admin-table-sort: $fa-var-sort;
 $icon-admin-table-sort-asc: $fa-var-sort-down;
 $icon-admin-table-sort-desc: $fa-var-sort-up;
 
+@mixin icon {
+  i.fa-fw {
+    @content;
+  }
+}
+
 .fa-square-question:before {
   content: "\f2fd";
 }

resources/sass/layout/_footer.scss

@@ -114,7 +114,7 @@ footer {
     }
   }
 
-  #scroll-to-top {
+  .scroll-top {
     @include floater;
     box-sizing: content-box;
     font-size: 16px;