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 191 adições e 183 exclusões
Mostrando apenas as alterações do commit b53ed2e66a - Mostrar todos os commits

update templates with new style ^^
Algumas verificações falharam
/ tests (pull_request) Has been cancelled
/ check (aarch64-unknown-linux-musl) (pull_request) Has been cancelled
/ check (armv7-unknown-linux-musleabihf) (pull_request) Has been cancelled
/ check (x86_64-unknown-linux-musl) (pull_request) Has been cancelled
/ clippy (pull_request) Has been cancelled

thermia 2025-06-22 21:05:42 +02:00

Ver arquivo

@ -1,67 +1,91 @@
body { body {
padding: 0; margin: 0;
overflow-y: hidden; padding: 0;
margin: 0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; height: 100dvh;
display: flex; width: 100dvw;
height: 100dvh; display: flex;
width: 100dvw; flex-direction: column;
align-items: center; }
justify-content: center; .about, .instances {
} padding: 16px;
.content { width: 480px;
align-items: center; min-width: 480px;
display: flex; margin: 24px;
flex-wrap: wrap; height: fit-content;
gap: 30px; align-self: center;
}
.content-box {
margin: 0 32px;
width: 420px;
} section {
.serverList { margin: 8px 0;
position: absolute: padding: 2px;
right: 0; }
height: 100vh;
overflow-y: auto;
padding-top: 50vh;
box-sizing: border-box;
} }
h2, h3, .serverCard, .header-box { h1, h2, h3 {
text-align: center; margin: 4px 0px;
} }
.serverCard { .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%; .subtitle {
} color: darkgray;
h2, h3 { width: fit-content;
margin: 0; }
} i {
.subtitle { display: inline-block;
color: darkgray; }
} .header {
#credits { display: flex;
position: absolute; justify-items: center;
left: 30px; align-content: center;
bottom: 15px; border-bottom: 1px solid #000;
text-align: right; width: 100%;
} img {
.spacing { flex-shrink: 1;
display: flex; padding: 8px;
justify-content: space-around; }
} span {
.spacing-out { flex-grow: 1;
display: flex; text-align: center;
justify-content: space-between; }
} margin: 0 0 8px;
#thermos { padding: 4px;
color: gray; }
font-size: 5px;
position: absolute; .content {
top: 5px; display: flex;
left: 30px; 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;
span {
width: 1px;
background-color: #000;
}
} }

Ver arquivo

@ -4,24 +4,12 @@
@(contact: &Contact, base: &IriString) @(contact: &Contact, base: &IriString)
@if !contact.avatar.is_empty() { <div class="admin">
<img class="admin-photo" src="@contact.avatar" height="15px" onerror="this.style.display='none'"> Admin:
} <span class="profile">
<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> @if !contact.avatar.is_empty() {
<!-- <a href="@contact.url">@@@contact.username@if let Some(authority) = base.authority_str() {@@@authority}</a> --> <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>
<!-- <div class="admin"> </span>
<div class="left">
<!-- <figure class="avatar">
<img loading="lazy" src="@contact.avatar" alt="@contact.display_name's avatar">
</figure>
</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> </div>
-->

Ver arquivo

@ -6,79 +6,87 @@ 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>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/static/@index_css.name" type="text/css" /> <link rel="stylesheet" href="/style.css" type="text/css" />
<title>KitsuRelay</title> <title>KitsuRelay</title>
</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> <h1>KitsuRelay</h1>
<h2>KitsuRelay</h2> <span class="subtitle">Friendly Relay for Friendly Instances!</span>
<span class="subtitle">Friendly Relay for Friendly Instances!</span> </span>
</span>
</div>
<hr />
</div> </div>
Welcome to KitsuRelay! Fedi's favorite GenPur, Furry+ and Queer+ Relay! We cannot wait to see you on the fediverse!<br> <section>
<br> Welcome to KitsuRelay! Fedi's favorite GenPur, Furry+ and Queer+ Relay! We cannot wait to see you on the fediverse!
What's a Relay?<br> </section>
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>
<br> <h2>What's a Relay?</h2>
Rules: 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?
<ol> </section>
<li>Instances must be primarily English-speaking</li> <section>
<li>You must have a reasonable Moderator:User ratio</li> <h2>Rules:</h2>
<li>Moderation must be active</li> <ol>
<li>You must moderate undesirable content<br>(hate speech, antisemetism, illegal content & spam)</li> <li>Instances must be primarily English-speaking</li>
<li>NSFW content must be appropriately flagged</li> <li>You must have a reasonable Moderator-to-User ratio</li>
</ol> <li>Moderation must be active</li>
Administrator:<br> <li>You must moderate undesirable content<br>(hate speech, antisemetism, illegal content & spam)</li>
<a href="https://kio.moe" class="serverCard">Kio</a> - KitsuClub & KitsuGay<br> <li>NSFW content must be appropriately flagged</li>
<br> </ol>
Joining:<br> <span class="admin-line">Administrator: <a href="https://kio.moe" class="serverCard">Kio</a> - KitsuClub & KitsuGay</span>
<b>Mastodon & *key</b>: <pre>@config.generate_url(UrlKind::Inbox)</pre> </section>
<b>*oma</b>: <pre>@config.generate_url(UrlKind::Actor)</pre> <section>
<h2>Joining</h2>
<b>Mastodon & *key</b>: <pre>@config.generate_url(UrlKind::Inbox)</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>
<span class="subtitle">Currently, we're sitting at <i>@nodes.len()</i> members!</span> <h2>Connected Instances</h2>
<hr /> <span class="subtitle">Currently, we're sitting at <i>@nodes.len()</i> members!</span>
<span>
</div> </div>
<li> <section>
@for node in nodes { <ul>
@if let Some(inst) = node.instance.as_ref() { @for node in nodes {
@:instance_html(inst, node.info.as_ref().map(|info| { info.software.as_ref() }), node.contact.as_ref(), &node.base) @if let Some(inst) = node.instance.as_ref() {
} else { @:instance_html(inst, node.info.as_ref().map(|info| { info.software.as_ref() }), node.contact.as_ref(), &node.base)
@if let Some(inf) = node.info.as_ref() { } else {
@:info_html(inf, &node.base) @if let Some(inf) = node.info.as_ref() {
@:info_html(inf, &node.base)
}
} }
} }
} </ul>
</li> </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>
</div> <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>
</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;
running <span class="id">@info.software</span>
@if info.reg {
registrations open
}
</div>
<!--
<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> <div class="info">
</section> running <span class="id">@info.software</span>
--> @if info.reg {
, registrations open
}
<div class="info">
</li>

Ver arquivo

@ -3,22 +3,23 @@
@(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">
@if let Some(software) = software { <a href="@base" class="name">@instance.title</a><br>
running <span class="id">@software</span>, <div class="info">
} @if let Some(software) = software {
registrations running <span class="id">@software</span>,
@if instance.reg { }
open@if instance.requires_approval {, approval required } registrations
} else { @if instance.reg {
closed open@if instance.requires_approval {, approval required }
} } else {
<br> closed
@if let Some(contact) = contact { }
@if software.unwrap() != "Iceshrimp.NET" {
Admin:
@:admin_html(contact,base)
}
}
</div> </div>
@if let Some(contact) = contact {
@if software.unwrap() != "Iceshrimp.NET" {
@:admin_html(contact,base)
}
}
</li>