navbar glowHEADmaster

3 files changed, 131 insertions, 8 deletions

diff --git a/resources/views/about.blade.php b/resources/views/about.blade.php
index 4d5e2fb..2b699e9 100644
--- a/resources/views/about.blade.php
+++ b/resources/views/about.blade.php
@@ -41,7 +41,8 @@ If you have feedback, want to report a bug, or just say hello, hit me up by e-ma
 <br>
 You can now also follow on Mastodon <a title="Follow on Mastodon {{ env('MASTODON_HANDLE') }}" href="{{ env('MASTODON_URL') }}" target=_blank>{!! file_get_contents(public_path() . "/img/mastodon.svg") !!} @MostDiscussed</a> to stay up to date.
 
-<h2>📈 Meanwhile: <strong>Stats!</strong></h2>
+<h2 class="text-cinema-muted">📈 Meanwhile: <strong>Stats!</strong></h2>
+<div class="card-text">
 
 Indexed articles: <strong>{{ $count_articles }}</strong>
 <br>
@@ -53,6 +54,7 @@ Sum of all upvotes:  <strong>{{ $count_upvotes }} </strong> (...soo much interne
 <br>
 <br>
 Keep reading!
+</div>
 
 
 <!--
diff --git a/resources/views/layouts/app.blade.php b/resources/views/layouts/app.blade.php
index e185e25..95eede7 100644
--- a/resources/views/layouts/app.blade.php
+++ b/resources/views/layouts/app.blade.php
@@ -187,6 +187,127 @@
         .nav-bar-divider { display: none; }
     }
 
+	.text-cinema-muted {
+		color: var(--cinema-text-muted);
+	}
+
+/**
+ * navbar glow
+ */
+.navbar {
+  background-color: rgba(26, 30, 35, 0.95) !important;
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid #2f363f;
+  position: relative;
+}
+
+.navbar-brand {
+  color: var(--cinema-cyan) !important;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+}
+
+.navbar-dark .nav-link {
+  color: #94a3b8 !important;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 0.5rem 1rem;
+  transition: color 0.2s;
+  position: relative;
+}
+
+.navbar-dark .nav-link:hover {
+  color: var(--cinema-cyan) !important;
+  text-decoration: none !important;
+}
+
+/* .active */
+
+.navbar-dark .nav-link.active,
+.navbar-dark .nav-link:active,
+.nav-item.active .nav-link
+{
+  color: var(--cinema-cyan) !important;
+}
+
+/* the cyan bar */
+.navbar-dark .nav-link.active::after,
+.nav-item.active .nav-link::after
+{
+  content: '';
+  position: absolute;
+  bottom: -1px;
+  transform: translateX(-50%);
+  height: 3px;
+  background-color: var(--cinema-cyan);
+  border-radius: 2px 2px 0 0;
+}
+
+/* glow effect */
+.navbar-dark .nav-link.active::before,
+.navbar-dark .nav-link:active::before,
+.nav-item.active .nav-link::before {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  transform: translateX(-50%);
+  background: radial-gradient(
+    ellipse at center,
+    rgba(0, 229, 212, 0.15) 0%,
+    rgba(0, 229, 212, 0.05) 40%,
+    transparent 70%
+  );
+  pointer-events: none;
+  z-index: -1;
+  background: radial-gradient(
+    ellipse at center bottom,
+    rgba(0, 229, 212, 0.2) 0%,
+    rgba(0, 229, 212, 0.08) 30%,
+    rgba(0, 229, 212, 0.02) 50%,
+    transparent 70%
+  );
+  filter: blur(8px);
+}
+
+@media (min-width: 768px) {
+	/* the cyan bar */
+	.navbar-dark .nav-link.active::after,
+	.nav-item.active .nav-link::after
+	{
+	  left: 50%;
+	  width: 80%; /* Etwas kürzer als der volle Link, wie im Bild */
+	}
+
+	/* glow effect */
+	.navbar-dark .nav-link.active::before,
+	.navbar-dark .nav-link:active::before,
+	.nav-item.active .nav-link::before {
+	  height: 60px;
+	  width: 80%;
+	  left: 50%;
+	}
+
+}
+@media (max-width: 767.99px) {
+	/* the cyan bar on mobile */
+	.navbar-dark .nav-link.active::after,
+	.nav-item.active .nav-link::after
+	{
+	  left: 10%;
+	  width: 10%; /* Etwas kürzer als der volle Link, wie im Bild */
+	}
+
+	/* glow effect on mobile */
+	.navbar-dark .nav-link.active::before,
+	.navbar-dark .nav-link:active::before,
+	.nav-item.active .nav-link::before {
+	  height: 40px;
+	  width: 40%;
+	  left: 10%;
+	}
+}
+
     /* Form inputs */
     .form-control {
         background-color: var(--cinema-surface-light);
@@ -279,25 +400,25 @@
                                 </li>
                             @endif
                                 <li class="nav-item">
-                                    <a class="nav-link" href="{{ route('new') }}">{{ __('New') }}</a>
+                                    <a class="nav-link {{ Route::currentRouteNamed('new') ? 'active' : '' }}" href="{{ route('new') }}">{{ __('New') }}</a>
                                 </li>
                                 <li class="nav-item">
-                                    <a class="nav-link" href="{{ route('popular') }}">{{ __('Popular') }}</a>
+                                    <a class="nav-link {{ Route::currentRouteNamed('popular') ? 'active' : '' }}" href="{{ route('popular') }}">{{ __('Popular') }}</a>
                                 </li>
                                 <li class="nav-item">
-                                    <a class="nav-link" href="{{ route('popular_topics') }}">{{ __('Topics') }}</a>
+                                    <a class="nav-link {{ Route::currentRouteNamed('popular_topics') ? 'active' : '' }}" href="{{ route('popular_topics') }}">{{ __('Topics') }}</a>
                                 </li>
                                 <li class="nav-item">
-                                    <a class="nav-link" href="{{ route('random') }}">{{ __('Random') }}</a>
+                                    <a class="nav-link {{ Route::currentRouteNamed('random') ? 'active' : '' }}" href="{{ route('random') }}">{{ __('Random') }}</a>
                                 </li>
                                 <li class="nav-item nav-bar-divider">
                                     <span class="nav-link" style="pointer-events: none;">|</span>
                                 </li>
                                 <li class="nav-item">
-                                    <a class="nav-link" href="{{ route('cinema.index') }}">{{ __('Movies') }}</a>
+                                    <a class="nav-link {{ Route::currentRouteNamed('cinema.index') ? 'active' : '' }}" href="{{ route('cinema.index') }}">{{ __('Movies') }}</a>
                                 </li>
                                 <li class="nav-item">
-                                    <a class="nav-link" href="{{ route('cinema.genres') }}">{{ __('Genres') }}</a>
+                                    <a class="nav-link {{ Route::currentRouteNamed('cinema.genres') ? 'active' : '' }}" href="{{ route('cinema.genres') }}">{{ __('Genres') }}</a>
                                 </li>
                         @else
                             <li class="nav-item dropdown">
diff --git a/resources/views/layouts/footer.blade.php b/resources/views/layouts/footer.blade.php
index b58ec88..2b1f2db 100644
--- a/resources/views/layouts/footer.blade.php
+++ b/resources/views/layouts/footer.blade.php
@@ -6,7 +6,7 @@
 
 <footer class="footer">
 	<div class="container">
-		<h3 class="text-white">
+		<h3 class="text-cinema-muted">
 			Helpful Links
 		</h3>
 		<strong>