Add base home page contents and fix navbar
This commit is contained in:
parent
f26b72c406
commit
fc670aff4d
SSH key fingerprint:
SHA256:yrp4c4hhaPoPG07fb4QyQIgAdlbUdsJvUAydJEWnfTw
6 changed files with 237 additions and 20 deletions
|
|
@ -1,7 +1,80 @@
|
|||
@page "/"
|
||||
@using PancakesWeb.Data
|
||||
|
||||
<PageTitle>Home</PageTitle>
|
||||
|
||||
<h1>Hello, world!</h1>
|
||||
<main class="container">
|
||||
<h1 id="pancakes">pancakes</h1>
|
||||
<p>I'm a cat <abbr title="non-binary">enby</abbr> (<abbr
|
||||
title="they/them/their/theirs/themself or it/it/its/its/itself in English">they/it</abbr>) from Australia
|
||||
that likes cats, Linux, and programming. You can find my links, projects, and other pages here.</p>
|
||||
|
||||
Welcome to your new app.
|
||||
<h2 id="accounts">Accounts</h2>
|
||||
<p>Other places you can find me</p>
|
||||
|
||||
<ul class="accounts">
|
||||
@foreach (var link in Links.Accounts)
|
||||
{
|
||||
<li class="account card">
|
||||
<img src="@Assets[$"imgs/icons/{link.Icon}"]" alt="" aria-hidden="true"
|
||||
class="@(link.IconInvert ? "account-img img-invert" : "account-img")">
|
||||
<span class="account-details">
|
||||
@if (link.Href != null)
|
||||
{
|
||||
<a href="@link.Href" target="_blank">@link.Name</a>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span>@link.Name</span>
|
||||
}
|
||||
<span class="account-username">@link.Description</span>
|
||||
</span>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
|
||||
<h2 id="blog-posts">Blog Posts</h2>
|
||||
<p>Things I've written. Licensing can be found in the appropriate page footers</p>
|
||||
|
||||
@* TODO: Add blog index *@
|
||||
|
||||
<h2 id="projects">Projects</h2>
|
||||
<p>Projects that I have created</p>
|
||||
|
||||
<ul class="links">
|
||||
@foreach (var link in Links.Projects)
|
||||
{
|
||||
<li class="link card">
|
||||
@if (link.Href != null)
|
||||
{
|
||||
<a href="@link.Href" target="_blank" class="link-heading">@link.Name</a>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span class="link-heading">@link.Name</span>
|
||||
}
|
||||
<p>@link.Description</p>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
|
||||
<h2 id="contributions">Contributions</h2>
|
||||
<p>Projects that I do not maintain but have contributed to</p>
|
||||
|
||||
<ul class="links">
|
||||
@foreach (var link in Links.Contributions)
|
||||
{
|
||||
<li class="link card">
|
||||
@if (link.Href != null)
|
||||
{
|
||||
<a href="@link.Href" target="_blank" class="link-heading">@link.Name</a>
|
||||
}
|
||||
else
|
||||
{
|
||||
<span class="link-heading">@link.Name</span>
|
||||
}
|
||||
<p>@link.Description</p>
|
||||
</li>
|
||||
}
|
||||
</ul>
|
||||
</main>
|
||||
61
PancakesWeb/Components/Pages/Home.razor.css
Normal file
61
PancakesWeb/Components/Pages/Home.razor.css
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
.accounts {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 1rem;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.account {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.account-img {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.account-details {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
text-wrap: wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.account-username {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.link :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.link-heading {
|
||||
font-size: large;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.accounts {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.account-username {
|
||||
font-size: inherit;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
@using PancakesWeb.Data
|
||||
|
||||
<nav class="container">
|
||||
<nav>
|
||||
<ul class="nav-content">
|
||||
<li class="nav-item brand">
|
||||
<a class="nav-link" href="/">
|
||||
|
|
@ -12,8 +12,8 @@
|
|||
@foreach (var link in Links.Accounts.Where(p => p is { Href: not null, HomePageOnly: false }))
|
||||
{
|
||||
<li class="nav-item">
|
||||
<a class="nav-link can-hide-label" href="@link.Href">
|
||||
<img class="@(link.IconInvert ? "nav-img invert-icon" : "nav-img")"
|
||||
<a class="nav-link can-hide-label" href="@link.Href" target="_blank">
|
||||
<img class="@(link.IconInvert ? "nav-img img-invert" : "nav-img")"
|
||||
src="@Assets[$"imgs/icons/{link.Icon}"]" alt="@link.Name icon" aria-hidden="true">
|
||||
<span class="nav-label">@link.Name</span>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,8 @@
|
|||
a::after {
|
||||
display: none;
|
||||
content: none;
|
||||
}
|
||||
|
||||
.nav-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
@ -45,10 +50,6 @@
|
|||
object-fit: contain;
|
||||
}
|
||||
|
||||
.nav-img.invert-icon {
|
||||
filter: invert() hue-rotate(180deg);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
/* Hide labels while still being accessible by screen readers */
|
||||
.nav-link.can-hide-label {
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@ public class Link
|
|||
{
|
||||
public required string Name { get; set; }
|
||||
public required string? Href { get; set; }
|
||||
public required string Username { get; set; }
|
||||
public required string Icon { get; set; }
|
||||
public required string Description { get; set; }
|
||||
public string? Icon { get; set; }
|
||||
public bool IconInvert { get; set; }
|
||||
public bool HomePageOnly { get; set; } = true;
|
||||
}
|
||||
|
|
@ -18,28 +18,28 @@ public static class Links
|
|||
{
|
||||
Name = "Bluesky",
|
||||
Href = "https://bsky.app/profile/pancakes.gay",
|
||||
Username = "@pancakes.gay",
|
||||
Description = "@pancakes.gay",
|
||||
Icon = "bluesky.webp"
|
||||
},
|
||||
new Link
|
||||
{
|
||||
Name = "Codeberg",
|
||||
Href = "https://codeberg.org/pancakes",
|
||||
Username = "pancakes",
|
||||
Description = "pancakes",
|
||||
Icon = "codeberg.webp"
|
||||
},
|
||||
new Link
|
||||
{
|
||||
Name = "Discord",
|
||||
Href = null,
|
||||
Username = "pancakesmeow",
|
||||
Description = "pancakesmeow",
|
||||
Icon = "discord.webp"
|
||||
},
|
||||
new Link
|
||||
{
|
||||
Name = "Fediverse",
|
||||
Href = "https://shrimp.meow.company/@pancakes",
|
||||
Username = "@pancakes@meow.company",
|
||||
Description = "@pancakes@meow.company",
|
||||
Icon = "iceshrimp.webp",
|
||||
IconInvert = true,
|
||||
HomePageOnly = false
|
||||
|
|
@ -48,7 +48,7 @@ public static class Links
|
|||
{
|
||||
Name = "Forgejo",
|
||||
Href = "https://git.meow.company/pancakes",
|
||||
Username = "pancakes",
|
||||
Description = "pancakes",
|
||||
Icon = "forgejo.webp",
|
||||
HomePageOnly = false
|
||||
},
|
||||
|
|
@ -56,7 +56,7 @@ public static class Links
|
|||
{
|
||||
Name = "GitHub",
|
||||
Href = "https://github.com/pancakesmeow",
|
||||
Username = "pancakesmeow",
|
||||
Description = "pancakesmeow",
|
||||
Icon = "github.webp",
|
||||
IconInvert = true
|
||||
},
|
||||
|
|
@ -64,14 +64,14 @@ public static class Links
|
|||
{
|
||||
Name = "pronouns.cc",
|
||||
Href = "https://pronouns.cc/@pancakes",
|
||||
Username = "@pancakes",
|
||||
Description = "@pancakes",
|
||||
Icon = "pronouns_cc.webp"
|
||||
},
|
||||
new Link
|
||||
{
|
||||
Name = "Signal",
|
||||
Href = null,
|
||||
Username = "pancakes.80",
|
||||
Description = "pancakes.80",
|
||||
Icon = "signal.webp",
|
||||
IconInvert = true
|
||||
},
|
||||
|
|
@ -79,9 +79,43 @@ public static class Links
|
|||
{
|
||||
Name = "YouTube",
|
||||
Href = "https://youtube.com/@trypancakes",
|
||||
Username = "@trypancakes",
|
||||
Description = "@trypancakes",
|
||||
Icon = "youtube.webp",
|
||||
HomePageOnly = false
|
||||
}
|
||||
];
|
||||
|
||||
public static readonly List<Link> Projects =
|
||||
[
|
||||
new Link
|
||||
{
|
||||
Name = "fedifeeds",
|
||||
Href = "https://git.meow.company/pancakes/fedifeeds",
|
||||
Description =
|
||||
"RSS feeds to Mastodon API. Supports multiple feeds per account, Markdown, and automatic threading (split into multiple notes to fit character limit)."
|
||||
},
|
||||
new Link
|
||||
{
|
||||
Name = "Iceshrimp Updates Bot",
|
||||
Href = "https://shrimp.meow.company/@iceshrimp_updates",
|
||||
Description =
|
||||
"This bot automatically checks for Iceshrimp-js and Iceshrimp.NET releases and posts them. Based on fedifeeds."
|
||||
},
|
||||
new Link
|
||||
{
|
||||
Name = "SCP Wiki Pages Bot",
|
||||
Href = "https://shrimp.meow.company/@scp_pages",
|
||||
Description = "Posts random pages from the SCP Foundation wiki on the Fediverse."
|
||||
}
|
||||
];
|
||||
|
||||
public static readonly List<Link> Contributions =
|
||||
[
|
||||
new Link
|
||||
{
|
||||
Name = "Iceshrimp.NET",
|
||||
Href = "https://iceshrimp.dev/iceshrimp/Iceshrimp.NET",
|
||||
Description = "The .NET rewrite of the Iceshrimp server software for the Fediverse."
|
||||
}
|
||||
];
|
||||
}
|
||||
|
|
@ -20,6 +20,7 @@
|
|||
--background: light-dark(#f3dffc, #16051d);
|
||||
--foreground: light-dark(#faf0ff, #08020b);
|
||||
--text: light-dark(#0f0f0f, #efefef);
|
||||
--border-color: color-mix(in srgb, var(--background) 70%, var(--text));
|
||||
|
||||
--success: #9ece6a;
|
||||
--warn: #e0af68;
|
||||
|
|
@ -60,8 +61,55 @@ a:visited {
|
|||
color: var(--accent);
|
||||
}
|
||||
|
||||
a[target="_blank"]:not(:has(>img))::after {
|
||||
display: inline-block;
|
||||
margin-left: 0.25em;
|
||||
content: "↗";
|
||||
}
|
||||
|
||||
abbr {
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.container {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 1rem;
|
||||
max-width: var(--container-width);
|
||||
}
|
||||
|
||||
.card {
|
||||
display: block;
|
||||
padding: 1rem;
|
||||
|
||||
background-color: var(--foreground);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
|
||||
.img-invert {
|
||||
filter: invert() hue-rotate(180deg);
|
||||
}
|
||||
|
||||
@keyframes title-fade-in {
|
||||
0% {
|
||||
margin-top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media (pointer: coarse), (hover: none) {
|
||||
[title]:hover::after, [title]:focus::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: max-content;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
content: attr(title);
|
||||
z-index: +10;
|
||||
|
||||
background-color: var(--foreground);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--radius);
|
||||
animation: 0.3s ease-out title-fade-in;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue