feat(web): font, emojis, better spacing
This commit is contained in:
parent
64bbb20659
commit
784557eecf
GPG key ID:
A4895B84D311642C
3 changed files with 55 additions and 10 deletions
|
|
@ -12,14 +12,38 @@
|
|||
<meta property="og:url" content="https://feditest.alemi.dev/web" />
|
||||
<meta property="og:site_name" content="upub" />
|
||||
|
||||
<link rel="preload" href="https://cdn.alemi.dev/web/font/FiraCode-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">
|
||||
<link rel="preload" href="https://cdn.alemi.dev/web/font/FiraCode-Bold.woff2" as="font" type="font/woff2" crossorigin="anonymous">
|
||||
|
||||
<link crossorigin rel="stylesheet" href="https://cdn.alemi.dev/web/alemi.css">
|
||||
<style>
|
||||
:root {
|
||||
--main-col-percentage: 70%;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Fira Code';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-display: swap;
|
||||
src: url("assets/fonts/FiraCode-Regular.woff2") format("woff2"), url("assets/fonts/FiraCode-Regular.woff") format("woff");
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Fira Code';
|
||||
font-style: normal;
|
||||
font-weight: 800;
|
||||
font-display: swap;
|
||||
src: url("assets/fonts/FiraCode-Bold.woff2") format("woff2"), url("assets/fonts/FiraCode-Bold.woff") format("woff");
|
||||
}
|
||||
|
||||
* {
|
||||
font-family: 'Fira Code', Menlo, DejaVu Sans Mono, Monaco, Consolas, Ubuntu Mono, monospace;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
padding-bottom: 1.2em;
|
||||
font-size: 11pt;
|
||||
}
|
||||
nav {
|
||||
top: 0;
|
||||
|
|
@ -103,6 +127,27 @@
|
|||
color: var(--background);
|
||||
cursor: pointer;
|
||||
}
|
||||
main {
|
||||
margin: 1em;
|
||||
}
|
||||
@media screen and (max-width: 786px) {
|
||||
.hidden-on-mobile {
|
||||
display: none;
|
||||
}
|
||||
main {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 400px) {
|
||||
.hidden-on-tiny {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
span.emoji {
|
||||
color: transparent;
|
||||
text-shadow: 0 0 0 var(--secondary);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
|
|
|||
|
|
@ -248,7 +248,7 @@ pub fn UserPage() -> impl IntoView {
|
|||
}
|
||||
});
|
||||
view! {
|
||||
<div class="ml-1">
|
||||
<div>
|
||||
<div class="tl-header w-100 center mb-s" >view::user</div>
|
||||
<div class="boxscroll" >
|
||||
{move || match actor.get() {
|
||||
|
|
@ -304,7 +304,7 @@ pub fn ObjectPage() -> impl IntoView {
|
|||
}
|
||||
});
|
||||
view! {
|
||||
<div class="ml-1">
|
||||
<div>
|
||||
<div class="tl-header w-100 center mb-s" >view::object</div>
|
||||
<div class="boxscroll ma-2" >
|
||||
{move || match object.get() {
|
||||
|
|
@ -375,11 +375,11 @@ pub fn InlineActivity(activity: serde_json::Value) -> impl IntoView {
|
|||
None => serde_json::Value::String(actor_id.clone()),
|
||||
};
|
||||
let privacy = if addressed.iter().any(|x| x == apb::target::PUBLIC) {
|
||||
"[public]"
|
||||
"🌐"
|
||||
} else if addressed.iter().any(|x| x.ends_with("/followers")) {
|
||||
"[followers]"
|
||||
"👥"
|
||||
} else {
|
||||
"[private]"
|
||||
"🔒"
|
||||
};
|
||||
let date = object.published().map(|x| x.format("%Y/%m/%d %H:%M:%S").to_string()).unwrap_or_else(||
|
||||
activity.published().map(|x| x.format("%Y/%m/%d %H:%M:%S").to_string()).unwrap_or_default()
|
||||
|
|
@ -393,8 +393,8 @@ pub fn InlineActivity(activity: serde_json::Value) -> impl IntoView {
|
|||
<ActorBanner object=actor />
|
||||
</td>
|
||||
<td class="rev" >
|
||||
<small><u class="moreinfo" title={audience} >{privacy}</u></small>
|
||||
<code class="color ml-1 moreinfo" title={object_id.clone()} >{kind.as_ref().to_string()}</code>
|
||||
<code class="color moreinfo" title={object_id.clone()} >{kind.as_ref().to_string()}</code>
|
||||
<span class="emoji ml-s moreinfo" title={audience} >{privacy}</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
|
|
@ -417,7 +417,7 @@ pub fn InlineActivity(activity: serde_json::Value) -> impl IntoView {
|
|||
#[component]
|
||||
pub fn About() -> impl IntoView {
|
||||
view! {
|
||||
<div class="ml-1">
|
||||
<div>
|
||||
<div class="tl-header w-100 center mb-s" >landing</div>
|
||||
<div class="boxscroll mt-s mb-s" >
|
||||
nothing to see here! pick a timeline to start browsing
|
||||
|
|
@ -433,7 +433,7 @@ struct OmgReqwestErrorIsNotClonable(String);
|
|||
#[component]
|
||||
pub fn TimelinePage(name: &'static str, tl: Timeline) -> impl IntoView {
|
||||
view! {
|
||||
<div class="ml-1">
|
||||
<div>
|
||||
<div class="tl-header w-100 center mb-s" >{name}</div>
|
||||
<div class="boxscroll mt-s mb-s" >
|
||||
<TimelineFeed tl=tl />
|
||||
|
|
|
|||
|
|
@ -37,7 +37,7 @@ fn main() {
|
|||
move || view! {
|
||||
<nav class="w-100 mt-1 mb-1 pb-s">
|
||||
<code class="color ml-3" ><a class="upub-title" href=move || if cookie.get().present() { "/web/home" } else { "/web/server" } >μpub</a></code>
|
||||
<small class="ml-1 mr-1" ><a class="clean" href="/web/server" >micro social network, federated</a></small>
|
||||
<small class="ml-1 mr-1 hidden-on-tiny" ><a class="clean" href="/web/server" >micro social network, federated</a></small>
|
||||
/* TODO kinda jank with the float but whatever, will do for now */
|
||||
<input type="submit" class="mr-2 rev" on:click=move |_| set_menu.set(!menu.get()) value="menu" style="float: right" />
|
||||
</nav>
|
||||
|
|
|
|||
Loading…
Reference in a new issue