update templates with new style ^^ #1
5 arquivos alterados com 225 adições e 213 exclusões
156
scss/index.scss
156
scss/index.scss
|
|
@ -1,67 +1,95 @@
|
||||||
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 {
|
.node-list {
|
||||||
text-align: center;
|
overflow-y: scroll;
|
||||||
}
|
max-height: 360px;
|
||||||
.serverCard {
|
}
|
||||||
font-family: 'Times New Roman', Times, serif;
|
h1, h2, h3 {
|
||||||
margin: 10px;
|
margin: 4px 0px;
|
||||||
}
|
}
|
||||||
.admin-photo {
|
.admin-line {
|
||||||
border-radius: 50%;
|
font-family: 'Times New Roman', Times, serif;
|
||||||
}
|
margin: 10px;
|
||||||
h2, h3 {
|
}
|
||||||
margin: 0;
|
|
||||||
}
|
.subtitle {
|
||||||
.subtitle {
|
color: darkgray;
|
||||||
color: darkgray;
|
width: fit-content;
|
||||||
}
|
}
|
||||||
#credits {
|
i {
|
||||||
position: absolute;
|
display: inline-block;
|
||||||
left: 30px;
|
}
|
||||||
bottom: 15px;
|
.header {
|
||||||
text-align: right;
|
display: flex;
|
||||||
}
|
justify-items: center;
|
||||||
.spacing {
|
align-content: center;
|
||||||
display: flex;
|
border-bottom: 1px solid #000;
|
||||||
justify-content: space-around;
|
width: 100%;
|
||||||
}
|
img {
|
||||||
.spacing-out {
|
flex-shrink: 1;
|
||||||
display: flex;
|
padding: 8px;
|
||||||
justify-content: space-between;
|
}
|
||||||
}
|
span {
|
||||||
#thermos {
|
flex-grow: 1;
|
||||||
color: gray;
|
text-align: center;
|
||||||
font-size: 5px;
|
}
|
||||||
position: absolute;
|
margin: 0 0 8px;
|
||||||
top: 5px;
|
padding: 4px;
|
||||||
left: 30px;
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
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;
|
||||||
|
span {
|
||||||
|
width: 1px;
|
||||||
|
background-color: #000;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -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>
|
||||||
-->
|
|
||||||
|
|
|
||||||
|
|
@ -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,68 +16,77 @@ 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>
|
<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 class="node-list">
|
||||||
@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 <3</sub>
|
||||||
|
</footer>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
@ -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>
|
||||||
}
|
|
||||||
—
|
|
||||||
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>
|
||||||
|
|
@ -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>
|
||||||
Carregando…
Adicionar tabela
Adicionar um link
Referência em uma nova issue