Merge branch 'web-example-deploy' into 'main'

Deploy updated web example

See merge request Wacton/Unicolour!100

Author: waacton

Example.Web/App.razor

@@ -4,7 +4,7 @@
         <img class="icon unicolour-icon" src="icon-192.png" alt="Unicolour icon"/>
     </a>
 
-    <label class="title-text">Unicolour Picker</label>
+    <label class="title-text colour-text">Unicolour Picker</label>
 
     <a href="https://github.com/waacton/Unicolour" target="_blank" rel="noopener noreferrer" aria-label="Unicolour GitHub">
         @* https://github.com/logos - 98x96 size is from the original SVG *@
@@ -36,16 +36,17 @@
  the css here is for elements that adapt to the current colour selected on a child page
 *@
 <style>
-    body {
+    body, .colour-background {
         background: linear-gradient(to bottom, @cssInsideGamut, @cssOutsideGamut), var(--light-stripes) no-repeat;
     }
     
-    .title-text {
+    .colour-text {
         color: @(conversionError ? light.Hex : cssInsideGamut);
     }
     
     .text-on-colour {
         color: @(useLightText ? light.Hex : dark.Hex);
         filter: drop-shadow(0 0 0.075rem @(useLightText ? dark.Hex : light.Hex));
+        opacity: 0.9;
     }
 </style>

Example.Web/Example.Web.csproj

@@ -9,8 +9,8 @@
     </PropertyGroup>
 
     <ItemGroup>
-        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.15" />
-        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.15" PrivateAssets="all" />
+        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="8.0.21" />
+        <PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="8.0.21" PrivateAssets="all" />
     </ItemGroup>
 
     <ItemGroup>

Example.Web/Pages/Light.razor

@@ -1,15 +1,13 @@
-@* @page "/Light" TODO: decide if want to route via layout *@
-
-<div class="column gap-large dark-background power-button-reference-point">
+<div class="column gap-large dark-background power-button-reference-point">
     <LightSpaces />
 
     @if (powerMode)
     {
         <LightSpaces />
     }
 
-    <button class="power-button monospace" @onclick="TogglePower">
-        <span>&#x23FB;</span> @* ⏻ *@
+    <button class="power-button monospace @(powerMode ?  "colour-background" : "")" @onclick="TogglePower">
+        <span class=@(powerMode ?  "text-on-colour" : "")>🗲</span>
     </button>
 </div>
 

Example.Web/wwwroot/css/app.css

@@ -150,7 +150,6 @@ body {
 }
 
 .title-text {
-    /* color: this attribute is set by app */
     font-variant: all-small-caps;
     font-size: 2rem;
     letter-spacing: 0.25rem;
@@ -284,13 +283,6 @@ input[type=range]::-moz-range-thumb {
     color: var(--light);
 }
 
-.text-on-colour {
-    /* color: this attribute is set by app */
-    /* filter: this attribute is set by app, because it requires dynamic colour */
-    text-align: center;
-    opacity: 0.9;
-}
-
 .monospace {
     font-family: monospace;
     font-size: 1rem;