death.au/Neighbourhood.omg.lol
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Making things a little more colourful

Browse source
This commit is contained in:
Gordon Pedersen 2024-06-13 16:35:40 +10:00
parent 0c3836b0c8
commit ed5ad5a7b1
6 changed files with 77 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
Components/PageHeading.razor
View file

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

2
Components/Pages/Now.razor
View file

@ -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>

2
Components/Pages/Person.razor
View file

@ -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" />

2
Components/StatusCard.razor
View file

@ -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">

10
Models/State.cs
View file

@ -161,9 +161,13 @@ namespace Neighbourhood.omg.lol.Models {
TimeSpan offset = DateTimeOffset.UtcNow - createdTime;
var offsetString = string.Empty;
if (offset.TotalDays >= 1) offsetString = $"{Math.Floor(offset.TotalDays)} days ago";
else if (offset.TotalHours >= 1) offsetString = $"{Math.Floor(offset.TotalHours)} hours, {offset.Minutes} minutes ago";
else if (offset.TotalMinutes >= 1) offsetString = $"{Math.Floor(offset.TotalMinutes)} minutes ago";
if (Math.Floor(offset.TotalDays) == 1) offsetString = $"{Math.Floor(offset.TotalDays)} day ago";
else if (offset.TotalDays > 1) offsetString = $"{Math.Floor(offset.TotalDays)} days ago";
else if (Math.Floor(offset.TotalHours) == 1) offsetString = $"{Math.Floor(offset.TotalHours)} hour 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;

62
wwwroot/css/style.css
View file

@ -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;
@ -288,3 +332,9 @@ 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; }