saulteafarmer/bitcoin-treasury
1
0
Fork 0
mirror of https://github.com/block/bitcoin-treasury.git synced 2025-04-19 14:41:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

mobile tweaks and font fix (#9)

Browse Source
This commit is contained in:
Nahiyan Khan 2025-04-10 10:18:48 -04:00 committed by GitHub
commit 5936eb301f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 19 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
app/assets/fonts/CashSansMono-Regular.woff2 Normal file
View File

Binary file not shown.

14
app/components/layout/footer.tsx
View File

@ -3,7 +3,7 @@ import { Goose } from "../icons/goose";
const Footer = () => {
return (
<footer className="w-full fixed bottom-0 border-t border-[#1e1e1e] text-white h-[54px]">
<footer className="w-full fixed bottom-0 border-t border-[#1e1e1e] text-white py-2 text-sm sm:text-base">
<div className="flex justify-center items-center h-full">
<div className="flex flex-rows">
Made with{" "}
@ -14,12 +14,12 @@ const Footer = () => {
>
<Goose className="mx-1" /> codename goose
</a>
</div>
<div className="mx-4">|</div>
<div>
<a href="https://github.com/block/bitcoin-treasury/blob/main/DISCLAIMER.md" target="_blank" className="hover:underline">
<span className="mx-2 sm:mx-4">|</span>
<a
href="https://github.com/block/bitcoin-treasury/blob/main/DISCLAIMER.md"
target="_blank"
className="hover:underline"
>
Disclaimer
</a>
</div>

8
app/components/solari/Flap.tsx
View File

@ -69,7 +69,7 @@ export const Flap = React.memo<FlapProps>(
}, [isHovered, animating, bottom, half, hoverDuration]);
// Base flap classes
const flapBaseClasses = `absolute h-full w-full origin-center z-20 rounded-sm`;
const flapBaseClasses = `absolute h-full w-full origin-center z-20 rounded-sm leading-[0.9]`;
// Top flap classes
const topClasses = classNames(
@ -103,12 +103,12 @@ export const Flap = React.memo<FlapProps>(
// Hinge classes
const hingeClasses = classNames(
"w-full absolute left-0 top-1/2 -translate-y-1/2 z-30 h-[0.02em] bg-black",
"before:content-[''] before:absolute before:left-[20%] before:bg-black before:shadow-[0.5px_0_1px_rgba(0,0,0,0.15)]",
"after:content-[''] after:absolute after:left-[80%] after:bg-black after:shadow-[0.5px_0_1px_rgba(0,0,0,0.15)]",
"before:content-[''] before:absolute before:left-[20%] before:bg-black",
"after:content-[''] after:absolute after:left-[80%] after:bg-black",
{
"sm:before:w-[2px] sm:before:h-[16px] sm:after:w-[2px] sm:after:h-[16px] sm:before:top-[-6px] sm:after:top-[-6px]":
true, // Default size for larger screens
"before:w-[1px] before:h-[8px] after:w-[1px] after:h-[8px] after:top-[-3px] before:top-[-3px]":
"before:w-[0.5px] before:h-[4px] after:w-[0.5px] after:h-[4px] after:top-[-1.5px] before:top-[-1.5px] before:shadow-none after:shadow-none":
true, // Smaller size for mobile view
}
);

2
app/components/solari/FlapDigit.tsx
View File

@ -37,7 +37,7 @@ export const FlapDigit = React.memo<FlapDigitProps>(
return (
<div
className={`text-[#e1e1e1] bg-[#1a1a1a] relative inline-block h-[1em] font-mono text-3xl xs:text-4xl sm:text-5xl md:text-6xl lg:text-7xl lg:leading-[66px] border border-black leading-none text-center w-[1.3ch] rounded-sm ${
className={`text-[#e1e1e1] bg-[#1a1a1a] relative inline-block h-[1em] font-mono text-xl xs:text-2xl sm:text-3xl md:text-4xl lg:text-5xl xl:text-6xl border border-black text-center w-[1.3ch] min-w-[1ch] rounded-sm ${
className || ""
}`}
style={containerStyle}

2
app/components/solari/FlapDisplay.tsx
View File

@ -132,7 +132,7 @@ export const FlapDisplay = memo<FlapDisplayProps>(
return (
<div
id={id}
className={`${containerClassName} flex relative w-full overflow-hidden justify-center gap-1`}
className={`${containerClassName} flex relative w-full overflow-x-auto overflow-y-hidden justify-start md:justify-center gap-[2px] sm:gap-1 px-2`}
style={{
...css,
transform: "perspective(1000px)",

6
app/layout.tsx
View File

@ -13,12 +13,12 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="en" suppressHydrationWarning>
<html lang="en" suppressHydrationWarning className="h-full">
<body
className={`font-mono bg-black text-textStandard relative antialiased`}
className={`h-full font-mono bg-black text-textStandard relative antialiased`}
>
<ThemeProvider attribute="data-theme">
<div className="h-[calc(100vh-54px)] flex justify-center items-center">
<div className="h-full flex justify-center items-center">
<main className="h-full">{children}</main>
</div>
<Footer />

2
app/page.tsx
View File

@ -195,7 +195,7 @@ function HomeContent() {
<SolariBoard rows={currentBoardRows} className="relative" />
</div>
<div className="flex flex-rows w-full justify-between opacity-0 transition-opacity duration-300 animate-fadeIn">
<div className="flex flex-rows w-full justify-center opacity-0 transition-opacity duration-300 animate-fadeIn">
{/* Status indicator */}
<div className="flex items-center justify-center gap-2 text-zinc-400 mt-2 sm:mt-4">
<div

9
app/styles/main.css
View File

@ -84,19 +84,14 @@
@font-face {
font-family: "Cash Sans";
src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSans-Regular.woff2)
format("woff2"),
url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSans-Regular.woff)
format("woff");
format("woff2");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Cash Sans Mono";
src: url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff2/CashSansMono-Regular.woff2)
format("woff2"),
url(https://cash-f.squarecdn.com/static/fonts/cashsans/woff/CashSansMono-Regular.woff)
format("woff");
src: url(../assets/fonts/CashSansMono-Regular.woff2) format("woff2");
font-weight: 400;
font-style: normal;
}