Downscale navigation on very small screens

This commit is contained in:
Jip Fr 2023-12-16 13:46:04 +01:00
parent 8bacc7a117
commit 00e57a932f
3 changed files with 23 additions and 12 deletions

View File

@ -66,7 +66,9 @@ export function UserAvatar(props: {
<>
<Avatar
profile={auth.account.profile}
sizeClass={props.sizeClass ?? "w-[2rem] h-[2rem]"}
sizeClass={
props.sizeClass ?? "w-[1.5rem] h-[1.5rem] ssm:w-[2rem] ssm:h-[2rem]"
}
iconClass={props.iconClass}
bottom={props.bottom}
/>

View File

@ -79,8 +79,11 @@ export function Navigation(props: NavigationProps) {
>
<div className={classNames("fixed left-0 right-0 flex items-center")}>
<div className="px-7 py-5 relative z-[60] flex flex-1 items-center justify-between">
<div className="flex items-center space-x-3 pointer-events-auto">
<Link className="block tabbable rounded-full" to="/">
<div className="flex items-center space-x-1.5 ssm:space-x-3 pointer-events-auto">
<Link
className="block tabbable rounded-full text-xs ssm:text-base"
to="/"
>
<BrandPill clickable />
</Link>
<a

View File

@ -1,5 +1,5 @@
import { allThemes, defaultTheme, safeThemeList } from "./themes";
import type { Config } from "tailwindcss"
import type { Config } from "tailwindcss";
const themer = require("tailwindcss-themer");
@ -8,20 +8,25 @@ const config: Config = {
safelist: safeThemeList,
theme: {
extend: {
/* breakpoints */
screens: {
ssm: "400px",
},
/* fonts */
fontFamily: {
"open-sans": "'Open Sans'"
"open-sans": "'Open Sans'",
},
/* animations */
keyframes: {
"loading-pin": {
"0%, 40%, 100%": { height: "0.5em", "background-color": "#282336" },
"20%": { height: "1em", "background-color": "white" }
}
"20%": { height: "1em", "background-color": "white" },
},
},
animation: { "loading-pin": "loading-pin 1.8s ease-in-out infinite" }
}
animation: { "loading-pin": "loading-pin 1.8s ease-in-out infinite" },
},
},
plugins: [
require("tailwind-scrollbar"),
@ -33,9 +38,10 @@ const config: Config = {
selectors: [".theme-default"],
...defaultTheme,
},
...allThemes]
})
]
...allThemes,
],
}),
],
};
export default config;