trial outfit/funnel display fonts

Author: jay3332

src/App.tsx

@@ -82,7 +82,7 @@ function SidebarNavButton(props: {
       <Show when={props.pings}>
         <span
           class="indicator-item indicator-bottom bg-red-600 inline-flex text-xs font-medium items-center rounded-full
-               min-w-[18px] h-[18px] m-1.5 ring-bg-0/80 ring-[3px]"
+               min-w-[18px] h-[18px] m-1.5"
         >
           <span class="min-w-[18px] text-center text-white px-1.5 py-2">
             {humanizePings(props.pings!)}

src/client/themes.tsx

@@ -226,6 +226,13 @@ function applyTheme(theme: Theme) {
   set('link', theme.link.default)
   set('link-hover', theme.link.hover)
   set('link-visited', theme.link.visited)
+
+  // For PWA theme color
+  const [r, g, b] = theme.bg[2];
+  const hex = '#' + r.toString(16).padStart(2, '0') 
+    + g.toString(16).padStart(2, '0')
+    + b.toString(16).padStart(2, '0');
+  document.querySelector('meta[name="theme-color"]')?.setAttribute('content', hex);
 }
 
 type ExtendedSetter = <U extends Theme>(prev: Theme | ((prev: Theme) => U), saveNow?: boolean) => U

src/components/messaging/Chat.tsx

@@ -2039,7 +2039,7 @@ export default function Chat(props: {
                         )}
                       </div>
                       <div class="break-words flex-grow p-2 bg-1">
-                        <h2 class="text-sm font-title font-medium justify-self-center">
+                        <h2 class="text-sm font-title font-medium">
                           {attachment.filename}
                         </h2>
                         <div class="text-xs text-fg/60">

src/index.css

@@ -1,4 +1,5 @@
-@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');
+/* @import url('https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Funnel+Display:wght@300..800&display=swap'); */
+@import url('https://fonts.googleapis.com/css2?family=Funnel+Display:wght@300..800&family=Outfit:wght@100..900&display=swap');
 
 @import "./styles/button.css";
 @import "./styles/checkbox.css";
@@ -8,13 +9,6 @@
 @tailwind components;
 @tailwind utilities;
 
-@font-face {
-  font-family: 'Geist';
-  src: url('/fonts/GeistVariableVF.woff2') format('woff2');
-  font-weight: 100 900;
-  font-display: swap;
-}
-
 @font-face {
   font-family: 'Geist Mono';
   src: url('/fonts/GeistMonoVariableVF.woff2') format('woff2');
@@ -48,6 +42,8 @@ html {
 
 body {
   @apply hide-scrollbar;
+  margin: 0;
+  background-color: rgb(var(--c-bg-2));
   touch-action: none;
 }
 
@@ -99,6 +95,10 @@ details > summary::-webkit-details-marker { display: none }
   }
 }
 
+#root {
+  position: fixed;
+}
+
 main {
   background-color: rgb(var(--c-bg-2));
   background-image:

src/pages/guilds/GuildHome.tsx

@@ -48,6 +48,7 @@ export default function GuildHome() {
             "background-size": "cover",
             "background-position": "center",
             "mask-image": "linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0))",
+            "-webkit-mask-image": "linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0))",
           }}
         />
         <div class="absolute flex items-start top-[calc(100%-2rem)] left-4 gap-x-3">

tailwind.config.js

@@ -58,8 +58,8 @@ module.exports = {
       },
     },
     fontFamily: {
-      title: ['"Plus Jakarta Sans"', "Geist", ...defaultTheme.fontFamily.sans],
-      sans: ["Geist", ...defaultTheme.fontFamily.sans],
+      title: ["'Funnel Display'", "Outfit", ...defaultTheme.fontFamily.sans],
+      sans: ["Outfit", ...defaultTheme.fontFamily.sans],
       mono: [
         '"Geist Mono"', 'Menlo', 'Monaco', 'Lucida Console', 'Liberation Mono',
         'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Courier New', 'monospace',