diff --git a/src/App.css b/src/App.css index bba585f..b912c3a 100644 --- a/src/App.css +++ b/src/App.css @@ -9,4 +9,4 @@ .custom-emoji { width: 1.25em; -} \ No newline at end of file +} diff --git a/src/accounts/MastodonOAuth2Callback.tsx b/src/accounts/MastodonOAuth2Callback.tsx index 2b34af9..249c58f 100644 --- a/src/accounts/MastodonOAuth2Callback.tsx +++ b/src/accounts/MastodonOAuth2Callback.tsx @@ -44,12 +44,12 @@ const MastodonOAuth2Callback: Component = () => { setDocumentTitle(`Back from ${ins.title}...`); setSiteTitle(ins.title); - const srcset = [] + const srcset = []; if (ins.thumbnail.versions["@1x"]) { - srcset.push(`${ins.thumbnail.versions["@1x"]} 1x`) + srcset.push(`${ins.thumbnail.versions["@1x"]} 1x`); } if (ins.thumbnail.versions["@2x"]) { - srcset.push(`${ins.thumbnail.versions["@2x"]} 2x`) + srcset.push(`${ins.thumbnail.versions["@2x"]} 2x`); } setSiteImg({ @@ -66,8 +66,8 @@ const MastodonOAuth2Callback: Component = () => { onGoingOAuth2Process, params.code, ); - $settings.setKey('onGoingOAuth2Process', undefined) - navigate('/', {replace: true}) + $settings.setKey("onGoingOAuth2Process", undefined); + navigate("/", { replace: true }); return; } @@ -95,18 +95,27 @@ const MastodonOAuth2Callback: Component = () => {
- }> + + } + > {`Banner @@ -114,7 +123,8 @@ const MastodonOAuth2Callback: Component = () => { Contracting {siteTitle}...

- If this page stays too long, you can close this page and sign in again. + If this page stays too long, you can close this page and sign in + again.

diff --git a/src/accounts/SignIn.tsx b/src/accounts/SignIn.tsx index 0d0cf94..bd6c95b 100644 --- a/src/accounts/SignIn.tsx +++ b/src/accounts/SignIn.tsx @@ -69,8 +69,8 @@ const SignIn: Component = () => { }); onMount(() => { - $settings.setKey('onGoingOAuth2Process', undefined) - }) + $settings.setKey("onGoingOAuth2Process", undefined); + }); const onStartOAuth2 = async (e: Event) => { e.preventDefault(); @@ -107,7 +107,7 @@ const SignIn: Component = () => { for (const [k, v] of Object.entries(args)) { searches.set(k, v); } - $settings.setKey("onGoingOAuth2Process", url) + $settings.setKey("onGoingOAuth2Process", url); window.location.href = authStart.toString(); } catch (e) { setServerUrlHelperText( diff --git a/src/accounts/stores.ts b/src/accounts/stores.ts index 9668d2a..d34a420 100644 --- a/src/accounts/stores.ts +++ b/src/accounts/stores.ts @@ -95,9 +95,13 @@ export const updateAcctInf = action( }, ); -export const signOut = action($accounts, "signOut", ($store, predicate: (acct: Account) => boolean) => { - $store.set($store.get().filter(a => !predicate(a))); -}); +export const signOut = action( + $accounts, + "signOut", + ($store, predicate: (acct: Account) => boolean) => { + $store.set($store.get().filter((a) => !predicate(a))); + }, +); export type RegisteredApp = { site: string; diff --git a/src/index.tsx b/src/index.tsx index 9430fe8..0b9e3a9 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,5 +1,5 @@ -import {render} from 'solid-js/web' -import App from './App.js' -import "./material/theme.css" +import { render } from "solid-js/web"; +import App from "./App.js"; +import "./material/theme.css"; -render(() => , document.getElementById("root")!) +render(() => , document.getElementById("root")!); diff --git a/src/masto/timelines.ts b/src/masto/timelines.ts index a2e7b21..91e1d84 100644 --- a/src/masto/timelines.ts +++ b/src/masto/timelines.ts @@ -12,9 +12,7 @@ type Timeline = { }): mastodon.Paginator; }; -export function useTimeline( - timeline: Accessor, -) { +export function useTimeline(timeline: Accessor) { let minId: string | undefined; let maxId: string | undefined; let otl: Timeline | undefined; diff --git a/src/material/BottomSheet.module.css b/src/material/BottomSheet.module.css index 1a15849..1f428c8 100644 --- a/src/material/BottomSheet.module.css +++ b/src/material/BottomSheet.module.css @@ -1,5 +1,5 @@ .bottomSheet { - composes: surface from 'material.module.css'; + composes: surface from "material.module.css"; border: none; position: absolute; left: 50%; @@ -29,4 +29,4 @@ height: 100dvh; } } -} \ No newline at end of file +} diff --git a/src/material/BottomSheet.tsx b/src/material/BottomSheet.tsx index 112a17e..eeefcc5 100644 --- a/src/material/BottomSheet.tsx +++ b/src/material/BottomSheet.tsx @@ -1,5 +1,5 @@ import { createEffect, type ParentComponent } from "solid-js"; -import styles from './BottomSheet.module.css' +import styles from "./BottomSheet.module.css"; export type BottomSheetProps = { open?: boolean; @@ -20,7 +20,11 @@ const BottomSheet: ParentComponent = (props) => { } }); - return {props.children}; + return ( + + {props.children} + + ); }; export default BottomSheet; diff --git a/src/material/Button.tsx b/src/material/Button.tsx index 7b0051d..1e08e41 100644 --- a/src/material/Button.tsx +++ b/src/material/Button.tsx @@ -9,12 +9,12 @@ import materialStyles from "./material.module.css"; const Button: Component> = ( props, ) => { - const [managed, passthough] = splitProps(props, ["class", 'type']); + const [managed, passthough] = splitProps(props, ["class", "type"]); const classes = () => managed.class ? [materialStyles.button, managed.class].join(" ") : materialStyles.button; - const type = () => managed.type ?? 'button' + const type = () => managed.type ?? "button"; return ; }; diff --git a/src/material/cards.module.css b/src/material/cards.module.css index b5966e3..2b1cc41 100644 --- a/src/material/cards.module.css +++ b/src/material/cards.module.css @@ -1,5 +1,5 @@ .card { - composes: surface from 'material.module.css'; + composes: surface from "material.module.css"; border-radius: 2px; box-shadow: var(--tutu-shadow-e2); transition: var(--tutu-transition-shadow); @@ -12,7 +12,7 @@ } &:not(.manualMargin) { - &>:not(.cardNoPad) { + & > :not(.cardNoPad) { margin-inline: var(--card-pad, 20px); } @@ -20,7 +20,7 @@ margin-top: var(--card-gut, 20px); } - >.cardGutSkip+*:not(.cardGutSkip) { + > .cardGutSkip + *:not(.cardGutSkip) { margin-top: var(--card-gut, 20px); } @@ -28,7 +28,6 @@ margin-bottom: var(--card-gut, 20px); } } - } .layoutCentered { @@ -52,4 +51,4 @@ overflow: auto; } } -} \ No newline at end of file +} diff --git a/src/material/form.module.css b/src/material/form.module.css index 5e7dfb7..1fde099 100644 --- a/src/material/form.module.css +++ b/src/material/form.module.css @@ -1,5 +1,5 @@ .textfield { - composes: touchTarget from 'material.module.css'; + composes: touchTarget from "material.module.css"; --border-color: var(--tutu-color-inactive-on-surface); --active-border-color: var(--tutu-color-primary); @@ -7,74 +7,78 @@ --active-label-color: var(--tutu-color-primary); --helper-text-color: var(--tutu-color-inactive-on-surface); - &>* { - width: 100%; + & > * { + width: 100%; } - &.error, &:has(>input[aria-invalid="true"]) { - &:not(:focus-within) { - --border-color: var(--tutu-color-error-on-surface); - --label-color: var(--tutu-color-error-on-surface); - --helper-text-color: var(--tutu-color-error-on-surface); - } + &.error, + &:has(> input[aria-invalid="true"]) { + &:not(:focus-within) { + --border-color: var(--tutu-color-error-on-surface); + --label-color: var(--tutu-color-error-on-surface); + --helper-text-color: var(--tutu-color-error-on-surface); + } - &:focus-within { - --helper-text-color: var(--tutu-color-error-on-surface); - } + &:focus-within { + --helper-text-color: var(--tutu-color-error-on-surface); + } } - position: relative; - &>label { - position: absolute; - left: 0; - bottom: calc(10px + var(--bottom-height, 0px)); - color: var(--label-color); - transition: bottom .2s ease-in-out, font-size .2s ease-in-out, color .2s ease-in-out; - cursor: text; - font-size: 0.8125rem; + & > label { + position: absolute; + left: 0; + bottom: calc(10px + var(--bottom-height, 0px)); + color: var(--label-color); + transition: + bottom 0.2s ease-in-out, + font-size 0.2s ease-in-out, + color 0.2s ease-in-out; + cursor: text; + font-size: 0.8125rem; } - &>label:has(+ input:not(:placeholder-shown)) { - bottom: calc(100% - 0.8125rem); + & > label:has(+ input:not(:placeholder-shown)) { + bottom: calc(100% - 0.8125rem); } - &:focus-within>label, &.float-label>label { - bottom: calc(100% - 0.8125rem); - color: var(--active-label-color); + &:focus-within > label, + &.float-label > label { + bottom: calc(100% - 0.8125rem); + color: var(--active-label-color); } - &>input[type='text'], - &>input[type='password'] { - border: none; - outline: none; - border-bottom: 1px solid var(--border-color); - background-color: transparent; - padding-top: 16px; - padding-bottom: 8px; - margin-bottom: 1px; - transition: border-color .2s ease-in-out; + & > input[type="text"], + & > input[type="password"] { + border: none; + outline: none; + border-bottom: 1px solid var(--border-color); + background-color: transparent; + padding-top: 16px; + padding-bottom: 8px; + margin-bottom: 1px; + transition: border-color 0.2s ease-in-out; - &:focus { - border-bottom: 2px solid var(--active-border-color); - margin-bottom: 0; - } + &:focus { + border-bottom: 2px solid var(--active-border-color); + margin-bottom: 0; + } } &.withHelperText { - --bottom-height: 0.8125rem; + --bottom-height: 0.8125rem; } & .helperText { - color: var(--helper-text-color); - font-size: 0.8125rem; - line-height: 100%; - -webkit-line-clamp: 1; - line-clamp: 1; - display: flex; - justify-content: space-between; - min-height: 0.8125rem; - cursor: auto; + color: var(--helper-text-color); + font-size: 0.8125rem; + line-height: 100%; + -webkit-line-clamp: 1; + line-clamp: 1; + display: flex; + justify-content: space-between; + min-height: 0.8125rem; + cursor: auto; } -} \ No newline at end of file +} diff --git a/src/material/material.module.css b/src/material/material.module.css index d51a179..3443756 100644 --- a/src/material/material.module.css +++ b/src/material/material.module.css @@ -10,7 +10,7 @@ } .button { - composes: buttonText from './typography.module.css'; + composes: buttonText from "./typography.module.css"; composes: touchTarget; border: none; @@ -18,28 +18,34 @@ color: var(--tutu-color-primary); font-family: inherit; - &:focus,&:hover,&:focus-visible { - background-color: var(--tutu-color-surface-dd); + &:focus, + &:hover, + &:focus-visible { + background-color: var(--tutu-color-surface-dd); } &.pressed { - background-color: var(--tutu-color-surface-d); + background-color: var(--tutu-color-surface-d); } &.raised { - background-color: var(--tutu-color-primary); - color: var(--tutu-color-on-primary); + background-color: var(--tutu-color-primary); + color: var(--tutu-color-on-primary); } - &:disabled, &[aria-disabled]:not([aria-disabled="false"]) { - color: #9e9e9e; + &:disabled, + &[aria-disabled]:not([aria-disabled="false"]) { + color: #9e9e9e; - &:focus,&:hover,&:focus-visible { - background-color: transparent; - } + &:focus, + &:hover, + &:focus-visible { + background-color: transparent; + } } - .toolbar &, .appbar & { + .toolbar &, + .appbar & { height: 100%; margin-block: 0; padding-block: 0; @@ -49,7 +55,9 @@ .appbar & { color: var(--tutu-color-on-primary); - &:focus,&:hover,&:focus-visible { + &:focus, + &:hover, + &:focus-visible { background-color: var(--tutu-color-primary-ll); } @@ -62,4 +70,3 @@ color: var(--tutu-color-on-surface); } } - diff --git a/src/material/mui.ts b/src/material/mui.ts index 15511ac..6527cc4 100644 --- a/src/material/mui.ts +++ b/src/material/mui.ts @@ -2,15 +2,16 @@ import { Theme, createTheme } from "@suid/material/styles"; import { deepPurple, amber } from "@suid/material/colors"; import { Accessor } from "solid-js"; -export function useRootTheme() : Accessor { - return () => createTheme({ - palette: { - primary: { - main: deepPurple[500] +export function useRootTheme(): Accessor { + return () => + createTheme({ + palette: { + primary: { + main: deepPurple[500], + }, + secondary: { + main: amber.A200, + }, }, - secondary: { - main: amber.A200 - } - } - }) + }); } diff --git a/src/material/theme.css b/src/material/theme.css index 5d26879..76bfab4 100644 --- a/src/material/theme.css +++ b/src/material/theme.css @@ -1,5 +1,6 @@ :root, -[lang^="en"], [lang="en"] { +[lang^="en"], +[lang="en"] { --md-typography-type: "regular"; --title-size: 1.25rem; --title-weight: 500; @@ -19,9 +20,12 @@ } } -[lang^="zh"], [lang="zh"], -[lang^="kr"], [lang="kr"], -[lang^="ja"], [lang="ja"] { +[lang^="zh"], +[lang="zh"], +[lang^="kr"], +[lang="kr"], +[lang^="ja"], +[lang="ja"] { --md-typography-type: "dense"; --title-size: 1.4375rem; --subheading-size: 1.1875rem; @@ -95,7 +99,6 @@ --tutu-anim-curve-sharp: cubic-bezier(0.4, 0, 0.6, 1); @media (max-width: 300px) { - /* XS screen, like wearables */ & { --tutu-transition-shadow: box-shadow 157.5ms var(--tutu-anim-curve-std); @@ -103,7 +106,6 @@ } @media (max-width: 600px) { - /* Mobile */ & { --tutu-transition-shadow: box-shadow 225ms var(--tutu-anim-curve-std); @@ -111,7 +113,6 @@ } @media (max-width: 1200px) { - /* Tablet */ & { --tutu-transition-shadow: box-shadow 292.5ms var(--tutu-anim-curve-std); @@ -125,11 +126,17 @@ } * { - font-family: Roboto, "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, sans-serif; + font-family: + Roboto, + "Noto Sans", + system-ui, + -apple-system, + BlinkMacSystemFont, + sans-serif; box-sizing: border-box; margin: 0; } body { font-size: var(--body-size, 1rem); -} \ No newline at end of file +} diff --git a/src/material/typography.tsx b/src/material/typography.tsx index 2121266..2ea0fd3 100644 --- a/src/material/typography.tsx +++ b/src/material/typography.tsx @@ -3,7 +3,7 @@ import { Dynamic } from "solid-js/web"; import typography from "./typography.module.css"; import { mergeClass } from "../utils"; -type AnyElement = keyof JSX.IntrinsicElements | ParentComponent +type AnyElement = keyof JSX.IntrinsicElements | ParentComponent; type PropsOf = E extends ParentComponent @@ -12,9 +12,7 @@ type PropsOf = ? JSX.IntrinsicElements[E] : JSX.HTMLAttributes; -export type TypographyProps< - E extends AnyElement, -> = { +export type TypographyProps = { ref?: Ref; component?: E; class?: string; @@ -33,7 +31,9 @@ type TypographyKind = | "caption" | "buttonText"; -export function Typography(props: {typography: TypographyKind } & TypographyProps) { +export function Typography( + props: { typography: TypographyKind } & TypographyProps, +) { const [managed, passthough] = splitProps(props, [ "ref", "component", @@ -50,38 +50,38 @@ export function Typography(props: {typography: TypographyK {...passthough} > ); -}; +} export function Display4(props: TypographyProps) { - return + return ; } export function Display3(props: TypographyProps) { - return + return ; } export function Display2(props: TypographyProps) { - return + return ; } export function Display1(props: TypographyProps) { - return + return ; } export function Headline(props: TypographyProps) { - return + return ; } export function Title(props: TypographyProps) { - return + return ; } export function Subheading(props: TypographyProps) { - return + return ; } export function Body1(props: TypographyProps) { - return + return ; } export function Body2(props: TypographyProps) { - return + return ; } export function Caption(props: TypographyProps) { - return + return ; } export function ButtonText(props: TypographyProps) { - return + return ; } diff --git a/src/platform/anim.ts b/src/platform/anim.ts index eead57a..75446ef 100644 --- a/src/platform/anim.ts +++ b/src/platform/anim.ts @@ -1,11 +1,13 @@ import { createContext, useContext, type Accessor } from "solid-js"; -export type HeroSource = {[key: string | symbol | number]: HTMLElement | undefined} +export type HeroSource = { + [key: string | symbol | number]: HTMLElement | undefined; +}; -const HeroSourceContext = createContext>(() => ({})) +const HeroSourceContext = createContext>(() => ({})); -export const HeroSourceProvider = HeroSourceContext.Provider +export const HeroSourceProvider = HeroSourceContext.Provider; export function useHeroSource() { - return useContext(HeroSourceContext) + return useContext(HeroSourceContext); } diff --git a/src/settings/stores.ts b/src/settings/stores.ts index d3ddc24..25f6484 100644 --- a/src/settings/stores.ts +++ b/src/settings/stores.ts @@ -1,11 +1,15 @@ import { persistentMap } from "@nanostores/persistent"; type Settings = { - onGoingOAuth2Process?: string - prefetchTootsDisabled?: boolean -} + onGoingOAuth2Process?: string; + prefetchTootsDisabled?: boolean; +}; -export const $settings = persistentMap("settings::", {}, { - encode: JSON.stringify, - decode: JSON.parse -}) +export const $settings = persistentMap( + "settings::", + {}, + { + encode: JSON.stringify, + decode: JSON.parse, + }, +); diff --git a/src/timelines/CompactToot.tsx b/src/timelines/CompactToot.tsx index b8db733..0d58b3d 100644 --- a/src/timelines/CompactToot.tsx +++ b/src/timelines/CompactToot.tsx @@ -18,16 +18,14 @@ const CompactToot: Component = (props) => { const toot = () => props.status; return (
-
+
{ appliedCustomEmoji( @@ -48,7 +46,7 @@ const CompactToot: Component = (props) => { ref={(e: { innerHTML: string }) => { appliedCustomEmoji(e, toot().content, toot().emojis); }} - class={[tootStyle.compactTootContent].join(' ')} + class={[tootStyle.compactTootContent].join(" ")} >
); diff --git a/src/timelines/Home.tsx b/src/timelines/Home.tsx index 509a2f1..44682e1 100644 --- a/src/timelines/Home.tsx +++ b/src/timelines/Home.tsx @@ -155,20 +155,20 @@ const Home: ParentComponent = (props) => { useDocumentTitle("Timelines"); const now = createTimeSource(); - const settings$ = useStore($settings) + const settings$ = useStore($settings); const sessions = useSessions(); const client = () => sessions()[0].client; const [profile] = useAcctProfile(client); const [panelOffset, setPanelOffset] = createSignal(0); - const prefetching = () => !settings$().prefetchTootsDisabled + const prefetching = () => !settings$().prefetchTootsDisabled; const [currentFocusOn, setCurrentFocusOn] = createSignal([]); const [focusRange, setFocusRange] = createSignal([0, 0] as readonly [ number, number, ]); - const child = children(() => props.children) + const child = children(() => props.children); let scrollEventLockReleased = true; @@ -269,7 +269,11 @@ const Home: ParentComponent = (props) => { - + Home @@ -282,7 +286,14 @@ const Home: ParentComponent = (props) => { - $settings.setKey("prefetchTootsDisabled", !$settings.get().prefetchTootsDisabled)}> + + $settings.setKey( + "prefetchTootsDisabled", + !$settings.get().prefetchTootsDisabled, + ) + } + > Prefetch Toots diff --git a/src/timelines/MediaAttachmentGrid.tsx b/src/timelines/MediaAttachmentGrid.tsx index f98df53..198de31 100644 --- a/src/timelines/MediaAttachmentGrid.tsx +++ b/src/timelines/MediaAttachmentGrid.tsx @@ -11,7 +11,7 @@ const MediaAttachmentGrid: Component<{ }> = (props) => { let rootRef: HTMLElement; const [viewerIndex, setViewerIndex] = createSignal(); - const viewerOpened = () => typeof viewerIndex() !== "undefined" + const viewerOpened = () => typeof viewerIndex() !== "undefined"; const gridTemplateColumns = () => { const l = props.attachments.length; if (l < 2) { diff --git a/src/timelines/MediaViewer.tsx b/src/timelines/MediaViewer.tsx index 5e73f4c..577dd12 100644 --- a/src/timelines/MediaViewer.tsx +++ b/src/timelines/MediaViewer.tsx @@ -36,7 +36,7 @@ function within(n: number, target: number, range: number) { } function clamp(input: number, min: number, max: number) { - return Math.min(Math.max(input, min), max) + return Math.min(Math.max(input, min), max); } const MediaViewer: ParentComponent = (props) => { @@ -207,7 +207,13 @@ const MediaViewer: ParentComponent = (props) => { move: number, idx: number, ) => { - const { ref, top: otop, left: oleft, scale: oscale, osize: [owidth, oheight] } = state[idx]; + const { + ref, + top: otop, + left: oleft, + scale: oscale, + osize: [owidth, oheight], + } = state[idx]; const [cx, cy] = center; const iy = clamp(cy - otop, 0, oheight), ix = clamp(cx - oleft, 0, owidth); // in image coordinate system diff --git a/src/timelines/ProfileMenuButton.tsx b/src/timelines/ProfileMenuButton.tsx index b997041..4fe8f04 100644 --- a/src/timelines/ProfileMenuButton.tsx +++ b/src/timelines/ProfileMenuButton.tsx @@ -8,7 +8,13 @@ import { Menu, MenuItem, } from "@suid/material"; -import { Show, createSignal, createUniqueId, type ParentComponent } from "solid-js"; +import { + ErrorBoundary, + Show, + createSignal, + createUniqueId, + type ParentComponent, +} from "solid-js"; import { Settings as SettingsIcon, Bookmark as BookmarkIcon, @@ -42,79 +48,79 @@ const ProfileMenuButton: ParentComponent<{ return ( <> - - - - - - - - - - + + + + + + + + + + - - - - - Bookmarks - - - - - - Likes - - - - - - Lists - - - - {props.children} + + + + + Bookmarks + + + + + + Likes + + + + + + Lists + - - - - - - Settings - - + + {props.children} + + + + + + + Settings + + ); }; diff --git a/src/timelines/RegularToot.tsx b/src/timelines/RegularToot.tsx index 7d9b694..28bc4d8 100644 --- a/src/timelines/RegularToot.tsx +++ b/src/timelines/RegularToot.tsx @@ -211,7 +211,7 @@ const RegularToot: Component = (props) => { classList={{ [tootStyle.toot]: true, [tootStyle.expanded]: managed.evaluated, - [managed.class || ""]: true + [managed.class || ""]: true, }} ref={rootRef!} lang={toot().language || managed.lang} diff --git a/src/timelines/TootBottomSheet.tsx b/src/timelines/TootBottomSheet.tsx index 0b40aa0..eb11704 100644 --- a/src/timelines/TootBottomSheet.tsx +++ b/src/timelines/TootBottomSheet.tsx @@ -1,8 +1,7 @@ import type { Component } from "solid-js"; - const TootBottomSheet: Component = (props) => { - return <> -} + return <>; +}; -export default TootBottomSheet +export default TootBottomSheet; diff --git a/src/timelines/TootThread.tsx b/src/timelines/TootThread.tsx index cf4c226..c23b8f4 100644 --- a/src/timelines/TootThread.tsx +++ b/src/timelines/TootThread.tsx @@ -38,7 +38,9 @@ const TootThread: Component = (props) => { css` article { - transition: margin 90ms var(--tutu-anim-curve-sharp), var(--tutu-transition-shadow); + transition: + margin 90ms var(--tutu-anim-curve-sharp), + var(--tutu-transition-shadow); user-select: none; cursor: pointer; } @@ -64,7 +66,10 @@ const TootThread: Component = (props) => { `; return ( -
setExpanded((x) => !x)}> +
setExpanded((x) => !x)} + > .toot { + & > .toot { box-shadow: none; } @@ -46,11 +47,11 @@ display: grid; grid-template-columns: 1fr auto; - >* { + > * { color: var(--tutu-color-secondary-text-on-surface); } - >:last-child { + > :last-child { grid-column: 1 /3; } @@ -80,7 +81,7 @@ } .tootContent { - composes: cardNoPad from '../material/cards.module.css'; + composes: cardNoPad from "../material/cards.module.css"; margin-left: calc(var(--card-pad, 0) + var(--toot-avatar-size, 0) + 8px); margin-right: var(--card-pad, 0); line-height: 1.5; @@ -150,14 +151,14 @@ } .tootAttachmentGrp { - composes: cardNoPad from '../material/cards.module.css'; + composes: cardNoPad from "../material/cards.module.css"; margin-top: 1em; margin-left: calc(var(--card-pad, 0) + var(--toot-avatar-size, 0) + 8px); margin-right: var(--card-pad, 0); display: grid; gap: 4px; - >:where(img) { + > :where(img) { max-height: 35vh; min-height: 40px; object-fit: none; @@ -168,7 +169,7 @@ } .tootBottomActionGrp { - composes: cardGutSkip from '../material/cards.module.css'; + composes: cardGutSkip from "../material/cards.module.css"; padding-block: calc((var(--card-gut) - 10px) / 2); animation: 225ms var(--tutu-anim-curve-std) tootBottomExpanding; @@ -176,7 +177,7 @@ flex-flow: row wrap; justify-content: space-evenly; - > button{ + > button { color: var(--tutu-color-on-surface); padding: 10px 8px; @@ -206,4 +207,4 @@ 100% { opacity: 1; } -} \ No newline at end of file +} diff --git a/src/utils.tsx b/src/utils.tsx index 51091ca..9ca5052 100644 --- a/src/utils.tsx +++ b/src/utils.tsx @@ -1,26 +1,26 @@ import { createRenderEffect, createSignal, onCleanup } from "solid-js"; export function useDocumentTitle(newTitle?: string) { - const capturedTitle = document.title - const [title, setTitle] = createSignal(newTitle ?? capturedTitle) + const capturedTitle = document.title; + const [title, setTitle] = createSignal(newTitle ?? capturedTitle); createRenderEffect(() => { - document.title = title() - }) + document.title = title(); + }); onCleanup(() => { - document.title = capturedTitle - }) + document.title = capturedTitle; + }); - return setTitle + return setTitle; } export function mergeClass(c1: string | undefined, c2: string | undefined) { if (!c1) { - return c2 + return c2; } if (!c2) { - return c1 + return c1; } - return [c1, c2].join(' ') + return [c1, c2].join(" "); }