Making things a little more colourful

Components/PageHeading.razor

@@ -1,6 +1,9 @@
 <div class="row center-align">
-  <h3>
+  <h1><i class="@icon page-heading-icon"></i></h1>
-    <i class="@icon extra"></i> @title
+</div>
+<div class="row center-align">
+  <h3 class="page-heading">
+    @title
   </h3>
 </div>
 <div class="row center-align">

Components/Pages/Now.razor

@@ -12,7 +12,7 @@
       <article class="now">
         <nav>
           <a class="author" href="/person/@now.Address#now">
-            <i class="fa-duotone fa-seedling"></i> @now.Address
+            <h6><i class="fa-duotone fa-seedling"></i> @now.Address</h6>
           </a>
         </nav>
         <nav>

Components/Pages/Person.razor

@@ -5,7 +5,7 @@
 
 
 <div class="row center-align">
-  <h3><i class="fa-solid fa-fw fa-at"></i>@Address</h3>
+  <h3 class="page-heading"><i class="fa-solid fa-fw fa-at"></i>@Address</h3>
 </div>
 <div class="row center-align">
   <img class="profile avatar" src="https://profiles.cache.lol/@Address/picture" alt="@Address" />

Components/StatusCard.razor

@@ -1,4 +1,4 @@
-<article class="status">
+<article class="status gray-9-fg" style="background-color:@status.Background">
   <div class="row">
     <div class="emoji" data-emoji="@status.EmojiOrDefault">@status.EmojiOrDefault</div>
     <div class="max">

Models/State.cs

@@ -157,16 +157,20 @@ namespace Neighbourhood.omg.lol.Models {
     public async Task RefreshNow() => await GetNowGarden(forceRefresh: true);
 
     public static string RelativeTimeFromUnix(long unix) {
-        DateTimeOffset createdTime = DateTimeOffset.UnixEpoch.AddSeconds(unix);
+      DateTimeOffset createdTime = DateTimeOffset.UnixEpoch.AddSeconds(unix);
-        TimeSpan offset = DateTimeOffset.UtcNow - createdTime;
+      TimeSpan offset = DateTimeOffset.UtcNow - createdTime;
 
-        var offsetString = string.Empty;
+      var offsetString = string.Empty;
-        if (offset.TotalDays >= 1) offsetString = $"{Math.Floor(offset.TotalDays)} days ago";
+      if (Math.Floor(offset.TotalDays) == 1) offsetString = $"{Math.Floor(offset.TotalDays)} day ago";
-        else if (offset.TotalHours >= 1) offsetString = $"{Math.Floor(offset.TotalHours)} hours, {offset.Minutes} minutes ago";
+      else if (offset.TotalDays > 1) offsetString = $"{Math.Floor(offset.TotalDays)} days ago";
-        else if (offset.TotalMinutes >= 1) offsetString = $"{Math.Floor(offset.TotalMinutes)} minutes ago";
+      else if (Math.Floor(offset.TotalHours) == 1) offsetString = $"{Math.Floor(offset.TotalHours)} hour ago";
-        else offsetString = $"{Math.Floor(offset.TotalSeconds)} seconds ago";
+      else if (offset.TotalHours > 1) offsetString = $"{Math.Floor(offset.TotalHours)} hours ago";
+      else if (Math.Floor(offset.TotalMinutes) == 1) offsetString = $"{Math.Floor(offset.TotalMinutes)} minute ago";
+      else if (offset.TotalMinutes > 1) offsetString = $"{Math.Floor(offset.TotalMinutes)} minutes ago";
+      else if (Math.Floor(offset.TotalSeconds) == 1) offsetString = $"{Math.Floor(offset.TotalSeconds)} second ago";
+      else offsetString = $"{Math.Floor(offset.TotalSeconds)} seconds ago";
 
-        return offsetString;
+      return offsetString;
     }
   }
 

wwwroot/css/style.css

@@ -1,5 +1,5 @@
-@import url(../vendor/color.css);
+@import url(../vendor/beer.min.css);
-@import url(../vendor/beer.min.css);
+@import url(../vendor/color.css);
 @import url(../vendor/type.css);
 @import url(../vendor/fluent-emoji/SegoeUIEmoji.css);
 /*@import url(../vendor/fluent-emoji/3d.css);*/
@@ -13,11 +13,35 @@
   --spacing: 1.5rem;
   --radius: .75em;
   --small-radius: .13em;
-/*  --color: var(--white);
+  --color: var(--gray-1);
   --background: var(--gray-8);
   --shadow: var(--black);
-  --button-shadow: var(--gray-7);*/
+  --button-shadow: var(--gray-7);
 }
+
+body.dark {
+  --background: var(--gray-8);
+  --on-background: var(--gray-1);
+  --surface: var(--gray-9);
+  --on-surface: var(--gray-4);
+ /* --surface-variant: #49454e;
+  --on-surface-variant: #cac4cf;
+  --outline: #948f99;
+  --outline-variant: #49454e;
+  --shadow: #000000;
+  --scrim: #000000;
+  --inverse-surface: #e6e1e6;
+  --inverse-on-surface: #313033;
+  --inverse-primary: #6750a4;
+  --surface-dim: #141316;
+  --surface-bright: #3a383c;
+  --surface-container-lowest: #0f0e11;
+  --surface-container-low: #1c1b1e;
+  --surface-container: #201f22;
+  --surface-container-high: #2b292d;
+  --surface-container-highest: #363438;*/
+}
+
 html, body {
   font-family: var(--font);
 }
@@ -43,7 +67,7 @@ p, li {
   line-height: 160%;
 }
 
-.author, .address {
+.author, .address, .page-heading {
   font-family: 'VC Honey Deck', var(--font);
 }
 .author {
@@ -64,7 +88,20 @@ img {
   block-size: 5.5rem;
   font-size: 5rem;
   line-height: 5.5rem;
-  text-indent: -6px;
+  text-indent: -10px;
+}
+
+:is(h1, h2, h3, h4, h5, h6) :is(i.fa-at, i:only-child){
+  margin-right: 0;
+  inline-size: auto;
+}
+
+h1 i:only-child {
+  margin-block-start: 1rem;
+}
+
+.chip i {
+  border-radius: 0;
 }
 
 .status nav .chip, .status nav {
@@ -267,6 +304,13 @@ article.ephemeral {
 
 }
 
+.now {
+  background-color: var(--green-2);
+  color: var(--black);
+}
+
+
+
 main, .page-container {
   flex-grow:1;
   display: flex;
@@ -287,4 +331,10 @@ main {
 
 #info :is(p, ul, ol) {
   margin-bottom: var(--spacing);
-}
+}
+
+.fa-seedling { color: var(--green-9) !important; }
+.fa-message-smile { color: var(--blue-4) !important; }
+.fa-images { color: var(--yellow-6) !important; }
+.fa-id-card { color: var(--pink-4) !important; }
+.fa-comment-dots { color: var(--gray-6) !important; }