adding css, resources

Selector.MAUI/Selector.MAUI.csproj

@@ -37,8 +37,15 @@
     <PropertyGroup Condition="'$(Configuration)|$(TargetFramework)|$(Platform)'=='Release|net7.0-ios|AnyCPU'">
       <CreatePackage>false</CreatePackage>
     </PropertyGroup>
-    <PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst' and '$(Configuration)' == 'Debug'">
+    <!-- <PropertyGroup Condition="$([MSBuild]::GetTargetPlatformIdentifier('$(TargetFramework)')) == 'maccatalyst' and '$(Configuration)' == 'Debug'">
         <CodeSignEntitlements>Platforms/MacCatalyst/Entitlements.Debug.plist</CodeSignEntitlements>
+    </PropertyGroup> -->
+    <PropertyGroup Condition="'$(Configuration)|$(TargetFramework)|$(Platform)'=='Debug|net7.0-maccatalyst|AnyCPU'">
+      <CreatePackage>false</CreatePackage>
+      <CodesignKey>Mac Developer</CodesignKey>
+      <PackageSigningKey>3rd Party Mac Developer Installer</PackageSigningKey>
+      <EnableCodeSigning>True</EnableCodeSigning>
+      <CodesignEntitlements>Platforms/MacCatalyst/Entitlements.Debug.plist</CodesignEntitlements>
     </PropertyGroup>
     <ItemGroup>
         <!-- App Icon -->
@@ -74,7 +81,6 @@
       <None Remove="Models\" />
       <None Remove="Microsoft.AspNetCore.SignalR.Client" />
       <None Remove="Microsoft.AspNetCore.Components.Forms" />
-      <None Remove="Platforms\iOS\Entitlements.plist" />
     </ItemGroup>
     <ItemGroup>
       <Folder Include="Services\" />
@@ -92,4 +98,22 @@
         <CopyToOutputDirectory>PreserveNewest</CopyToOutputDirectory>
       </None> -->
     </ItemGroup>
+    <ItemGroup>
+      <BundleResource Include="wwwroot\andy.png">
+        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+      </BundleResource>
+      <BundleResource Include="wwwroot\last_fm.png">
+        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+      </BundleResource>
+      <BundleResource Include="wwwroot\live.gif">
+        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+      </BundleResource>
+      <BundleResource Include="wwwroot\spotify_icon.png">
+        <ExcludeFromSingleFile>true</ExcludeFromSingleFile>
+        <CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
+      </BundleResource>
+    </ItemGroup>
 </Project>

Selector.MAUI/Shared/MainLayout.razor

@@ -12,7 +12,7 @@
     }
     <main>
         <div class="top-row px-4">
-            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
+            <a href="https://sarsoo.xyz/posts/selector/" class="dash-underline-lg link-dark" target="_blank">About</a>
         </div>
 
         <article class="content px-4">
@@ -21,3 +21,20 @@
     </main>
 </div>
 
+@*<footer class="footer text-muted">
+    <div class="container">
+        &copy; 2023 - Selector.MAUI - <a href="https://selector.sarsoo.xyz/privacy/">Privacy</a>
+    </div>
+    <div style="text-align: center">
+        <a href="https://sarsoo.xyz/about/" style="display: inline-block">
+            <img src="/andy.png"
+                 alt="AP"
+                 width="120px"
+                 style="display: block;
+                    margin-left: auto;
+                    margin-right: auto;
+                    padding: 8px">
+        </a>
+    </div>
+</footer>*@
+

Selector.MAUI/Shared/MainLayout.razor.css

@@ -9,11 +9,12 @@ main {
 }
 
 .sidebar {
-    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+    /* background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%); */
+    background-color: #232323;
 }
 
 .top-row {
-    background-color: #f7f7f7;
+    background-color: #232323;
     border-bottom: 1px solid #d6d5d5;
     justify-content: flex-end;
     height: 3.5rem;
@@ -21,20 +22,20 @@ main {
     align-items: center;
 }
 
-    .top-row ::deep a, .top-row ::deep .btn-link {
-        white-space: nowrap;
-        margin-left: 1.5rem;
-        text-decoration: none;
-    }
+.top-row ::deep a, .top-row ::deep .btn-link {
+    white-space: nowrap;
+    margin-left: 1.5rem;
+    text-decoration: none;
+}
 
-    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
-        text-decoration: underline;
-    }
+.top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
+    text-decoration: underline;
+}
 
-    .top-row ::deep a:first-child {
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
+.top-row ::deep a:first-child {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
 
 @media (max-width: 640.98px) {
     .top-row:not(.auth) {

Selector.MAUI/wwwroot/css/app.css

@@ -4,13 +4,18 @@ html, body {
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 
+body {
+    background-color: #2b2b2b;
+    color: #efefef;
+}
+
 h1:focus {
     outline: none;
 }
 
-a, .btn-link {
+/*a, .btn-link {
     color: #0071c1;
-}
+}*/
 
 .btn-primary {
     color: #fff;

Selector.MAUI/wwwroot/css/card.css

@@ -0,0 +1,72 @@
+.card {
+    background-color: #3c3c3c;
+    color: white;
+    margin: 5px;
+    padding: 15px;
+    box-shadow: 5px 5px 0px #0f0f0f;
+    transition: box-shadow 0.5s;
+    border-style: solid;
+    border-color: black;
+    border-width: 5px;
+}
+
+.card:hover {
+    box-shadow: none;
+    offset: 4px 4px;
+}
+
+@media only screen and (min-width: 768px) {
+    .now-playing-card {
+        position: fixed;
+        z-index: 10;
+        right: 20px;
+        bottom: 20px;
+        width: 250px;
+    }
+}
+
+@media only screen and (min-width: 768px) {
+    .info-card {
+        min-width: 200px;
+        max-width: 500px;
+    }
+        
+    .chart-card {
+        width: 500px;
+    }
+}
+
+.now-playing-card {
+    text-shadow: 2px 2px 2px #0f0f0f;
+}
+
+.now-playing-card .cover-art {
+    box-shadow: 4px 4px 2px #0f0f0f;
+    margin-bottom: 15px;
+}
+
+.info-card {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.chart-card {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.spotify-logo {
+    width: 21px;
+}
+
+.spotify-logo img {
+    width: 21px;
+}
+
+.lastfm-logo {
+  width: 24px;
+}
+
+.lastfm-logo img {
+  width: 24px;
+}

Selector.MAUI/wwwroot/css/input.css

@@ -0,0 +1,9 @@
+input[type=text], input[type=email], input[type=tel], input[type=password] {
+    background-color: #444444 !important;
+    border-color: #545454;
+    color: white;
+}
+
+input[type=text]:focus, input[type=email]:focus, input[type=tel]:focus, input[type=password]:focus {
+    color: white;
+}

Selector.MAUI/wwwroot/css/link.css

@@ -0,0 +1,33 @@
+.dash-underline {
+    text-decoration: dotted;
+    text-decoration-line: underline;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 5px;
+}
+
+.dash-underline:hover {
+    text-decoration: solid;
+    text-decoration-line: underline;
+    text-decoration-thickness: 1.5px;
+}
+
+.dash-underline-lg {
+    font-size: 24px;
+    text-decoration: dotted;
+    text-decoration-line: underline;
+    text-decoration-thickness: 4px;
+    text-underline-offset: 5px;
+}
+
+.dash-underline-lg:hover {
+    text-decoration: solid;
+    text-decoration-line: underline;
+    text-decoration-thickness: 3.4px;
+}
+
+.link-dark {
+    color: #a3a3a3;
+}
+.link-dark:hover {
+    color: #a3a3a3;
+}

Selector.MAUI/wwwroot/index.html

@@ -7,6 +7,9 @@
     <base href="/" />
     <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
     <link href="css/app.css" rel="stylesheet" />
+    <link href="css/card.css" rel="stylesheet" />
+    <link href="css/link.css" rel="stylesheet" />
+    <link href="css/input.css" rel="stylesheet" />
     <link href="Selector.MAUI.styles.css" rel="stylesheet" />
 </head>