feat(web): font, emojis, better spacing

web/index.html

@@ -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>
 

web/src/lib.rs

@@ -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 moreinfo" title={object_id.clone()} >{kind.as_ref().to_string()}</code>
-				<code class="color ml-1 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 />

web/src/main.rs

@@ -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>