Style

pradoslaw · Oct 21, 2024 · 4d426eb · 4d426eb
1 parent 5d6713a
commit 4d426eb
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 8 deletions.
diff --git a/public/img/logo-dark.svg b/public/img/logo-dark.svg
diff --git a/public/img/logo-light.svg b/public/img/logo-light.svg
diff --git a/resources/sass/pages/_homepage.scss b/resources/sass/pages/_homepage.scss
@@ -3,7 +3,56 @@
 @import "../../feature/theme/theme";
 @import "bootstrap/scss/mixins/breakpoints";
 
+header nav.navbar {
+  .logo {
+    height: 30px;
+  }
+}
+
 body.lookAndFeelModern {
+  $primary-color-light: #00a538;
+  $primary-color-dark: #78de13;
+
+  .text-primary {
+    @include light {
+      color: $primary-color-light !important;
+    }
+    @include dark {
+      color: $primary-color-dark !important;
+    }
+  }
+
+  .is-online {
+    width: 13px;
+    height: 13px;
+    border: none;
+    @include light {
+      background-color: $primary-color-light;
+    }
+    @include dark {
+      background-color: $primary-color-dark;
+    }
+  }
+
+  header nav.navbar {
+    .logo {
+      width: 15px;
+      height: 20px;
+    }
+
+    .btn-register {
+      @include light {
+        background: $primary-color-light;
+        border-color: $primary-color-light;
+
+      }
+      @include dark {
+        background: $primary-color-dark;
+        border-color: $primary-color-dark;
+      }
+    }
+  }
+
   @mixin size($size) {
     @if ($size == 'intermediate') {
       @include media-breakpoint-only(sm) {
@@ -77,10 +126,10 @@ body.lookAndFeelModern {
 
       .nav-link.active {
         @include light {
-          border-bottom-color: #00a538;
+          border-bottom-color: $primary-color-light;
         }
         @include dark {
-          border-bottom-color: #78de13;
+          border-bottom-color: $primary-color-dark;
         }
       }
     }
@@ -112,11 +161,11 @@ body.lookAndFeelModern {
 
     .default-avatar {
       @include light {
-        color: #00a538;
+        color: $primary-color-light;
         background: #e7f7e6;
       }
       @include dark {
-        color: #78de13;
+        color: $primary-color-dark;
         background: #0a1203;
       }
     }
@@ -188,7 +237,7 @@ body.lookAndFeelModern {
         height: 3px;
         border-radius: 3px;
         @include light {
-          background: linear-gradient(270deg, #00a538 0%, #ffffff 100%);
+          background: linear-gradient(270deg, $primary-color-light 0%, #ffffff 100%);
         }
 
         @include dark {

diff --git a/resources/views/layout.twig b/resources/views/layout.twig
@@ -70,7 +70,6 @@
           <img
               class="logo"
               alt="4programmers.net"
-              style="height:30px;"
               data-src-light="{{ cdn('img/logo-light.svg') }}"
               data-src-dark="{{ cdn('img/logo-dark.svg') }}"
               src="{{ __dark_theme ? cdn('img/logo-dark.svg') : cdn('img/logo-light.svg') }}"