@Body @@ -70,55 +66,4 @@ .top-row a:hover { color: #667eea; } - - .content { - flex: 1; - padding: 24px; - overflow-y: auto; - background: #f5f5f5; /* Optional: for contrast */ - } - - * { - box-sizing: border-box; - } - - /* Responsive tweaks */ - @@media (max-width: 768px) { - .sidebar - - { - width: 200px; - } - - .top-row { - padding: 0 16px; - height: 3rem; - } - - .content { - padding: 16px; - } - - } - - @@media (max-width: 480px) { - .sidebar - - { - width: 180px; - } - - .top-row { - padding: 0 12px; - } - - .top-row a { - font-size: 13px; - } - - .content { - padding: 12px; - } - - } diff --git a/MovieActorLookup/Components/Layout/MainLayout.razor.css b/MovieActorLookup/Components/Layout/MainLayout.razor.css index 038baf1..45d97f6 100644 --- a/MovieActorLookup/Components/Layout/MainLayout.razor.css +++ b/MovieActorLookup/Components/Layout/MainLayout.razor.css @@ -69,11 +69,6 @@ main { text-align: right; width: 0; } - - .top-row, article { - padding-left: 2rem !important; - padding-right: 1.5rem !important; - } } #blazor-error-ui { diff --git a/MovieActorLookup/Components/Layout/NavMenu.razor b/MovieActorLookup/Components/Layout/NavMenu.razor deleted file mode 100644 index b27deaa..0000000 --- a/MovieActorLookup/Components/Layout/NavMenu.razor +++ /dev/null @@ -1,106 +0,0 @@ -@* NavMenu.razor *@ -
- - -
🎬
-
I Know Them!
- - - - -
- - diff --git a/MovieActorLookup/Components/Layout/NavMenu.razor.css b/MovieActorLookup/Components/Layout/NavMenu.razor.css deleted file mode 100644 index 4e15395..0000000 --- a/MovieActorLookup/Components/Layout/NavMenu.razor.css +++ /dev/null @@ -1,105 +0,0 @@ -.navbar-toggler { - appearance: none; - cursor: pointer; - width: 3.5rem; - height: 2.5rem; - color: white; - position: absolute; - top: 0.5rem; - right: 1rem; - border: 1px solid rgba(255, 255, 255, 0.1); - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1); -} - -.navbar-toggler:checked { - background-color: rgba(255, 255, 255, 0.5); -} - -.top-row { - height: 3.5rem; - background-color: rgba(0,0,0,0.4); -} - -.navbar-brand { - font-size: 1.1rem; -} - -.bi { - display: inline-block; - position: relative; - width: 1.25rem; - height: 1.25rem; - margin-right: 0.75rem; - top: -1px; - background-size: cover; -} - -.bi-house-door-fill-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E"); -} - -.bi-plus-square-fill-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E"); -} - -.bi-list-nested-nav-menu { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E"); -} - -.nav-item { - font-size: 0.9rem; - padding-bottom: 0.5rem; -} - - .nav-item:first-of-type { - padding-top: 1rem; - } - - .nav-item:last-of-type { - padding-bottom: 1rem; - } - - .nav-item ::deep .nav-link { - color: #d7d7d7; - background: none; - border: none; - border-radius: 4px; - height: 3rem; - display: flex; - align-items: center; - line-height: 3rem; - width: 100%; - } - -.nav-item ::deep a.active { - background-color: rgba(255,255,255,0.37); - color: white; -} - -.nav-item ::deep .nav-link:hover { - background-color: rgba(255,255,255,0.1); - color: white; -} - -.nav-scrollable { - display: none; -} - -.navbar-toggler:checked ~ .nav-scrollable { - display: block; -} - -@media (min-width: 641px) { - .navbar-toggler { - display: none; - } - - .nav-scrollable { - /* Never collapse the sidebar for wide screens */ - display: block; - - /* Allow sidebar to scroll for tall menus */ - height: calc(100vh - 3.5rem); - overflow-y: auto; - } -} diff --git a/MovieActorLookup/Components/Pages/Home.razor b/MovieActorLookup/Components/Pages/Home.razor index 8c912fb..85d70ea 100644 --- a/MovieActorLookup/Components/Pages/Home.razor +++ b/MovieActorLookup/Components/Pages/Home.razor @@ -2,20 +2,7 @@ I Know Them!
-
-
🎬
-
📺
-
🎭
-
🌟
-
🎪
-
🎯
-
🎨
-
🎵
-
🎮
-
-
-

Welcome to I Know Them!

Ever watched a movie or show and thought, "I know that actor from somewhere..."?

This app helps you quickly identify actors, find out what else they've been in, and explore cast details for your favorite movies and TV shows.

@@ -45,91 +32,6 @@ overflow: hidden; } - @@keyframes gradientFlow { - 0% { - background-position: 0% 50%; - } - - 50% { - background-position: 100% 50%; - } - - 100% { - background-position: 0% 50%; - } - } - - .floating-elements { - position: absolute; - width: 100%; - height: 100%; - pointer-events: none; - overflow: hidden; - } - - .floating-icon { - position: absolute; - opacity: 0.1; - animation: float 20s infinite linear; - font-size: 2rem; - color: white; - } - - .floating-icon:nth-child(1) { - left: 10%; - animation-delay: 0s; - } - - .floating-icon:nth-child(2) { - left: 20%; - animation-delay: 4s; - } - - .floating-icon:nth-child(3) { - left: 30%; - animation-delay: 8s; - } - - .floating-icon:nth-child(4) { - left: 40%; - animation-delay: 12s; - } - - .floating-icon:nth-child(5) { - left: 50%; - animation-delay: 16s; - } - - .floating-icon:nth-child(6) { - left: 60%; - animation-delay: 3s; - } - - .floating-icon:nth-child(7) { - left: 70%; - animation-delay: 7s; - } - - .floating-icon:nth-child(8) { - left: 80%; - animation-delay: 11s; - } - - .floating-icon:nth-child(9) { - left: 90%; - animation-delay: 15s; - } - - @@keyframes float { - 0% { - transform: translateY(100vh) rotate(0deg); - } - - 100% { - transform: translateY(-100px) rotate(360deg); - } - } - .hero { max-width: 800px; text-align: center; @@ -175,15 +77,6 @@ } } - .highlight { - background: linear-gradient(45deg, #ffeaa7, #fdcb6e); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; - display: inline-block; - animation: shimmer 3s ease-in-out infinite; - } - @@keyframes shimmer { 0%, 100% { filter: brightness(1); @@ -311,34 +204,6 @@ box-shadow: 0 20px 40px rgba(255, 255, 255, 0.2); } - .pulse-dot { - position: absolute; - width: 8px; - height: 8px; - background: #ffeaa7; - border-radius: 50%; - top: 1rem; - right: 1rem; - animation: pulse 2s infinite; - } - - @@keyframes pulse { - 0% { - transform: scale(0.8); - opacity: 1; - } - - 50% { - transform: scale(1.2); - opacity: 0.7; - } - - 100% { - transform: scale(0.8); - opacity: 1; - } - } - @@media (max-width: 768px) { .hero { margin: 1rem; diff --git a/MovieActorLookup/wwwroot/app.css b/MovieActorLookup/wwwroot/app.css index 14c42a0..ec28840 100644 --- a/MovieActorLookup/wwwroot/app.css +++ b/MovieActorLookup/wwwroot/app.css @@ -18,10 +18,6 @@ a, .btn-link { box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; } -.content { - padding-top: 1.1rem; -} - h1:focus { outline: none; } @@ -52,12 +48,6 @@ h1:focus { border-color: #929292; } -.page .content { - padding-top: 24px !important; - margin: 0 auto !important; - max-width: 1200px !important; -} - /*movie card styling*/ .movie-poster {