update templates with new style ^^ #1

Merge aplicado
kio mesclou 4 commits from thermia/relay:main into main 2025-06-22 20:25:14 +00:00
5 arquivos alterados com 225 adições e 213 exclusões

Ver arquivo

@ -1,67 +1,95 @@
body { body {
padding: 0;
overflow-y: hidden;
margin: 0; margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
display: flex;
height: 100dvh; height: 100dvh;
width: 100dvw; width: 100dvw;
align-items: center;
justify-content: center;
}
.content {
align-items: center;
display: flex; display: flex;
flex-wrap: wrap; flex-direction: column;
gap: 30px;
} }
.content-box { .about, .instances {
margin: 0 32px; padding: 16px;
width: 420px; width: 480px;
min-width: 480px;
margin: 24px;
height: fit-content;
align-self: center;
section {
margin: 8px 0;
padding: 2px;
} }
.serverList {
position: absolute:
right: 0;
height: 100vh;
overflow-y: auto;
padding-top: 50vh;
box-sizing: border-box;
} }
h2, h3, .serverCard, .header-box { .node-list {
text-align: center; overflow-y: scroll;
max-height: 360px;
} }
.serverCard { h1, h2, h3 {
margin: 4px 0px;
}
.admin-line {
font-family: 'Times New Roman', Times, serif; font-family: 'Times New Roman', Times, serif;
margin: 10px; margin: 10px;
} }
.admin-photo {
border-radius: 50%;
}
h2, h3 {
margin: 0;
}
.subtitle { .subtitle {
color: darkgray; color: darkgray;
width: fit-content;
} }
#credits { i {
position: absolute; display: inline-block;
left: 30px;
bottom: 15px;
text-align: right;
} }
.spacing { .header {
display: flex; display: flex;
justify-content: space-around; justify-items: center;
align-content: center;
border-bottom: 1px solid #000;
width: 100%;
img {
flex-shrink: 1;
padding: 8px;
} }
.spacing-out { span {
flex-grow: 1;
text-align: center;
}
margin: 0 0 8px;
padding: 4px;
}
.content {
display: flex; display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
flex-grow: 1;
}
footer {
display: flex;
flex-direction: column;
padding: 24px;
flex-shrink: 1;
width: max-content;
sub {
font-size: 6pt;
}
}
.instance {
font-family: "Times New Roman", Times, serif;
text-align: center;
list-style: none;
margin: 4px;
padding: 4px;
}
.horizontal-list {
display: flex;
flex-grow: 1;
flex-direction: row;
justify-content: space-between; justify-content: space-between;
span {
width: 1px;
background-color: #000;
} }
#thermos {
color: gray;
font-size: 5px;
position: absolute;
top: 5px;
left: 30px;
} }

Ver arquivo

@ -4,24 +4,12 @@
@(contact: &Contact, base: &IriString) @(contact: &Contact, base: &IriString)
<div class="admin">
Admin:
<span class="profile">
@if !contact.avatar.is_empty() { @if !contact.avatar.is_empty() {
<img class="admin-photo" src="@contact.avatar" height="15px" onerror="this.style.display='none'"> <img class="admin-photo" src="@contact.avatar" height="15px" onerror="this.style.display='none'">
} }
<a href="@contact.url">@Html(Regex::new(r":([a-zA-Z0-9_]+):").unwrap().replace_all(&contact.display_name, &format!(r#"<img height='15px' loading='lazy' onerror='this.style.display=`none`' src='https://kitsunes.club/emoji/$1@{}.webp'>"#, contact.url.authority_components().unwrap().host())).to_string())</a> <a href="@contact.url">@Html(Regex::new(r":([a-zA-Z0-9_]+):").unwrap().replace_all(&contact.display_name, &format!(r#"<img height='15px' loading='lazy' onerror='this.style.display=`none`' src='https://kitsunes.club/emoji/$1@{}.webp'>"#, contact.url.authority_components().unwrap().host())).to_string())</a>
<!-- <a href="@contact.url">@@@contact.username@if let Some(authority) = base.authority_str() {@@@authority}</a> --> </span>
<!-- <div class="admin">
<div class="left">
<!-- <figure class="avatar">
<img loading="lazy" src="@contact.avatar" alt="@contact.display_name's avatar">
</figure>
</div> </div>
<div class="right">
<p class="display-name"><a href="@contact.url">@contact.display_name</a></p>
<p class="username">
@@@contact.username@if let Some(authority) = base.authority_str() {@@@authority}
</p>
</div>
</div>
-->

Ver arquivo

@ -6,7 +6,6 @@ templates::{info_html, instance_html, statics::index_css},
@(local: &[Node], nodes: &[Node], config: &Config) @(local: &[Node], nodes: &[Node], config: &Config)
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
@ -17,44 +16,47 @@ templates::{info_html, instance_html, statics::index_css},
</head> </head>
<body> <body>
<div class="content"> <div class="content">
<div class="content-box"> <div class="about">
<div class="header-box"> <div class="header">
<div class="spacing">
<img src="https://s3.kitsunes.club/storage/2899f08c-cf97-4346-a9d6-9652c7d287df.webp" height="50px" alt="A screaming, fluffy Neofox"> <img src="https://s3.kitsunes.club/storage/2899f08c-cf97-4346-a9d6-9652c7d287df.webp" height="50px" alt="A screaming, fluffy Neofox">
<span> <span>
<h2>KitsuRelay</h2> <h1>KitsuRelay</h1>
<span class="subtitle">Friendly Relay for Friendly Instances!</span> <span class="subtitle">Friendly Relay for Friendly Instances!</span>
</span> </span>
</div> </div>
<hr /> <section>
</div> Welcome to KitsuRelay! Fedi's favorite GenPur, Furry+ and Queer+ Relay! We cannot wait to see you on the fediverse!
Welcome to KitsuRelay! Fedi's favorite GenPur, Furry+ and Queer+ Relay! We cannot wait to see you on the fediverse!<br> </section>
<br> <section>
What's a Relay?<br> <h2>What's a Relay?</h2>
Have you ever seen those posts where someone asks for boosts to help them get visibility and get their server connected with others? Relays are an attempt to reduce some of the work needed to get a head start, and connect with a whole bunch of new friends! It grabs your posts, and shoots it out to other members, and we'll send their posts your way. Neat, huh?<br> Have you ever seen those posts where someone asks for boosts to help them get visibility and get their server connected with others? Relays are an attempt to reduce some of the work needed to get a head start, and connect with a whole bunch of new friends! It grabs your posts, and shoots it out to other members, and we'll send their posts your way. Neat, huh?
<br> </section>
Rules: <section>
<h2>Rules:</h2>
<ol> <ol>
<li>Instances must be primarily English-speaking</li> <li>Instances must be primarily English-speaking</li>
<li>You must have a reasonable Moderator:User ratio</li> <li>You must have a reasonable Moderator-to-User ratio</li>
<li>Moderation must be active</li> <li>Moderation must be active</li>
<li>You must moderate undesirable content<br>(hate speech, antisemetism, illegal content & spam)</li> <li>You must moderate undesirable content<br>(hate speech, antisemetism, illegal content & spam)</li>
<li>NSFW content must be appropriately flagged</li> <li>NSFW content must be appropriately flagged</li>
</ol> </ol>
Administrator:<br> <span class="admin-line">Administrator: <a href="https://kio.moe" class="serverCard">Kio</a> - KitsuClub & KitsuGay</span>
<a href="https://kio.moe" class="serverCard">Kio</a> - KitsuClub & KitsuGay<br> </section>
<br> <section>
Joining:<br> <h2>Joining</h2>
<b>Mastodon & *key</b>: <pre>@config.generate_url(UrlKind::Inbox)</pre> <b>Mastodon & *key</b>: <pre>@config.generate_url(UrlKind::Inbox)</pre>
<b>*oma</b>: <pre>@config.generate_url(UrlKind::Actor)</pre> <b>*oma</b>: <pre>@config.generate_url(UrlKind::Actor)</pre>
</section>
</div> </div>
<div class="content-box serverList"> <div class="instances">
<div class="header-box"> <div class="header">
<h3>Connected Instances</h3> <span>
<h2>Connected Instances</h2>
<span class="subtitle">Currently, we're sitting at <i>@nodes.len()</i> members!</span> <span class="subtitle">Currently, we're sitting at <i>@nodes.len()</i> members!</span>
<hr /> </span>
</div> </div>
<li> <section class="node-list">
<ul>
@for node in nodes { @for node in nodes {
@if let Some(inst) = node.instance.as_ref() { @if let Some(inst) = node.instance.as_ref() {
@:instance_html(inst, node.info.as_ref().map(|info| { info.software.as_ref() }), node.contact.as_ref(), &node.base) @:instance_html(inst, node.info.as_ref().map(|info| { info.software.as_ref() }), node.contact.as_ref(), &node.base)
@ -64,21 +66,27 @@ templates::{info_html, instance_html, statics::index_css},
} }
} }
} }
</li> </ul>
</section>
</div> </div>
</div> </div>
<div id="thermos"> <footer>
Thank you, Thermia, for your help! <div class="horizontal-list">
</div> <a href="https://kitsunes.club/@@kitsurelay">Fedi</a>
<div id="credits"> <span class="separator" aria-hidden="true" role="presentation"></span>
<div class="spacing-out">
<a href="https://kitsunes.club/@@kitsurelay">Fedi</a>|
<a href="https://kitsunes.club/@@kio">Admin</a> <a href="https://kitsunes.club/@@kio">Admin</a>
</div> </div>
Running @Config::software_name() @Config::software_version()-KMod<br> <p>Running @Config::software_name() @Config::software_version()-KMod</p>
<div class="spacing-out"> <section>
<a href="@config.source_code()">Source</a> | <a href="https://git.asonix.dog/asonix/relay">OG</a> | <a href="https://volpeon.ink/emojis/neofox">Neofox</a> <div class="horizontal-list">
</div> <a href="@config.source_code()">Source</a>
<span class="separator" aria-hidden="true" role="presentation"></span>
<a href="https://git.asonix.dog/asonix/relay">OG</a>
<span class="separator" aria-hidden="true" role="presentation"></span>
<a href="https://volpeon.ink/emojis/neofox">Neofox</a>
</div> </div>
</section>
<sub>a thermos wuz here &lt;3</sub>
</footer>
</body> </body>
</html> </html>

Ver arquivo

@ -3,27 +3,14 @@
@(info: &Info, base: &IriString) @(info: &Info, base: &IriString)
<div class="serverCard"> <li class="instance">
@if let Some(authority) = base.authority_str() { @if let Some(authority) = base.authority_str() {
<a class="serverName" href="@base">@authority</a> <a class="name" href="@base">@authority</a>
} }
&mdash; <div class="info">
running <span class="id">@info.software</span> running <span class="id">@info.software</span>
@if info.reg { @if info.reg {
registrations open , registrations open
} }
</div> <div class="info">
</li>
<!--
<section class="info">
@if let Some(authority) = base.authority_str() {
<h4 class="padded"><a href="@base">@authority</a></h4>
}
<p class="padded">
Running @info.software, version @info.version.
@if info.reg {
Registration is open
}
</p>
</section>
-->

Ver arquivo

@ -3,8 +3,10 @@
@(instance: &Instance, software: Option<&str>, contact: Option<&Contact>, base: &IriString) @(instance: &Instance, software: Option<&str>, contact: Option<&Contact>, base: &IriString)
<div class="serverCard"> <link rel="stylesheet" href="style.css">
<a href="@base" class="serverName">@instance.title</a><br> <li class="instance">
<a href="@base" class="name">@instance.title</a><br>
<div class="info">
@if let Some(software) = software { @if let Some(software) = software {
running <span class="id">@software</span>, running <span class="id">@software</span>,
} }
@ -14,11 +16,10 @@
} else { } else {
closed closed
} }
<br> </div>
@if let Some(contact) = contact { @if let Some(contact) = contact {
@if software.unwrap() != "Iceshrimp.NET" { @if software.unwrap() != "Iceshrimp.NET" {
Admin:
@:admin_html(contact,base) @:admin_html(contact,base)
} }
} }
</div> </li>