mirror of
https://github.com/Such-Software/such.software.git
synced 2026-10-17 05:32:05 +02:00
feat(icons): new Bauhaus Echo and Suchoice icons, and one radius everywhere
New store icons from bauhaus-echo/assets/store/app_icon_512.png and suchoice/assets/icon_1024.png, both resampled to 512 and both square and fully opaque. Bauhaus drops 320KB -> 72KB, Suchoice 259KB -> 142KB. The corner artifact had a measurable cause. Five icons bake their own rounded corners as transparency (suchoice 20.5%, smirk-wallet 20.1%, vegan-iq 19.3%, mushroom-capital 17.0%, such-moon-launch 15.2% of their width); the rest are square. CSS then rounded them again, at a radius that differed per page: 21.4% on /apps at 56px, 25% at 64px, and 20% at 80px. 20% is BELOW suchoice's 20.5% baked corner, so on /products/suchoice the CSS clip fell inside the transparent corner and a wedge of card background showed through at each corner. That is the "different coloured stuff next to the rounded corners": not a rendering bug, an arithmetic one. Every square app icon now uses one percentage radius, rounded-[22%]. It is above every baked radius in the set, so no transparent corner can ever be exposed, and being a percentage it stays identical at 56, 64 and 80px instead of drifting with the pixel size. The two new icons are square, so they cannot produce the artifact at any radius. The non-square occupy-wallets banner keeps a fixed radius: a percentage on a non-square box goes elliptical.
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 313 KiB After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 253 KiB After Width: | Height: | Size: 139 KiB |
@@ -99,7 +99,7 @@ export default function LinksPage() {
|
||||
alt={`${app.name} icon`}
|
||||
width={56}
|
||||
height={56}
|
||||
className="rounded-xl"
|
||||
className="rounded-[22%]"
|
||||
/>
|
||||
<div>
|
||||
<Link href={app.href}>
|
||||
|
||||
@@ -74,7 +74,7 @@ export default function AlphaDocPage() {
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-4 mb-2">
|
||||
<Image src="/images/products/alpha-doc.svg" alt="Alpha Doc icon" width={64} height={64} className="rounded-2xl" />
|
||||
<Image src="/images/products/alpha-doc.svg" alt="Alpha Doc icon" width={64} height={64} className="rounded-[22%]" />
|
||||
<div>
|
||||
<span className="inline-flex items-center rounded-full bg-orange-400/15 px-2.5 py-0.5 font-mono text-[10px] uppercase tracking-[0.2em] text-orange-600 dark:text-orange-400 mb-1">
|
||||
In Development
|
||||
|
||||
@@ -75,7 +75,7 @@ export default function BarnsAndNeutronsPage() {
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-4 mb-2">
|
||||
<Image src="/images/products/barns-and-neutrons.svg" alt="Barns & Neutrons icon" width={64} height={64} className="rounded-2xl" />
|
||||
<Image src="/images/products/barns-and-neutrons.svg" alt="Barns & Neutrons icon" width={64} height={64} className="rounded-[22%]" />
|
||||
<div>
|
||||
<span className="inline-flex items-center rounded-full bg-yellow-400/15 px-2.5 py-0.5 font-mono text-[10px] uppercase tracking-[0.2em] text-yellow-600 dark:text-yellow-400 mb-1">
|
||||
In Development
|
||||
|
||||
@@ -59,7 +59,7 @@ export default function BauhausEchoPage() {
|
||||
alt="Bauhaus Echo icon"
|
||||
width={80}
|
||||
height={80}
|
||||
className="rounded-2xl"
|
||||
className="rounded-[22%]"
|
||||
/>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-blue-600 dark:text-blue-400">
|
||||
Bauhaus Echo
|
||||
|
||||
@@ -78,7 +78,7 @@ export default function BloomwordPage() {
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-4 mb-2">
|
||||
<Image src="/images/products/bloomword.png" alt="Bloomword icon" width={64} height={64} className="rounded-2xl" />
|
||||
<Image src="/images/products/bloomword.png" alt="Bloomword icon" width={64} height={64} className="rounded-[22%]" />
|
||||
<div>
|
||||
<span className="inline-flex items-center rounded-full bg-green-400/15 px-2.5 py-0.5 font-mono text-[10px] uppercase tracking-[0.2em] text-green-600 dark:text-green-400 mb-1">
|
||||
Now Live
|
||||
|
||||
@@ -75,7 +75,7 @@ export default function DecayTheoryPage() {
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-4 mb-2">
|
||||
<Image src="/images/products/decay-theory.svg" alt="Decay Theory icon" width={64} height={64} className="rounded-2xl" />
|
||||
<Image src="/images/products/decay-theory.svg" alt="Decay Theory icon" width={64} height={64} className="rounded-[22%]" />
|
||||
<div>
|
||||
<span className="inline-flex items-center rounded-full bg-cyan-400/15 px-2.5 py-0.5 font-mono text-[10px] uppercase tracking-[0.2em] text-cyan-600 dark:text-cyan-400 mb-1">
|
||||
In Development
|
||||
|
||||
@@ -76,7 +76,7 @@ export default function MeatspacePage() {
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-4 mb-2">
|
||||
<Image src="/images/products/meatspace.svg" alt="Meatspace icon" width={64} height={64} className="rounded-2xl" />
|
||||
<Image src="/images/products/meatspace.svg" alt="Meatspace icon" width={64} height={64} className="rounded-[22%]" />
|
||||
<div>
|
||||
<span className="inline-flex items-center rounded-full bg-pink-400/15 px-2.5 py-0.5 font-mono text-[10px] uppercase tracking-[0.2em] text-pink-600 dark:text-pink-400 mb-1">
|
||||
In Development
|
||||
|
||||
@@ -76,7 +76,7 @@ export default function MushroomCapitalPage() {
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-4 mb-2">
|
||||
<Image src="/images/products/mushroom-capital.png" alt="Mushroom Capital icon" width={64} height={64} className="rounded-2xl" />
|
||||
<Image src="/images/products/mushroom-capital.png" alt="Mushroom Capital icon" width={64} height={64} className="rounded-[22%]" />
|
||||
<div>
|
||||
<span className="inline-flex items-center rounded-full bg-orange-400/15 px-2.5 py-0.5 font-mono text-[10px] uppercase tracking-[0.2em] text-orange-600 dark:text-orange-400 mb-1">
|
||||
Coming Soon
|
||||
|
||||
@@ -60,7 +60,7 @@ export default function SuchoicePage() {
|
||||
alt="Suchoice icon"
|
||||
width={80}
|
||||
height={80}
|
||||
className="rounded-2xl"
|
||||
className="rounded-[22%]"
|
||||
/>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-pink-600 dark:text-pink-400">
|
||||
Suchoice
|
||||
|
||||
@@ -62,7 +62,7 @@ export default function VeganIqPage() {
|
||||
alt="Vegan IQ icon"
|
||||
width={80}
|
||||
height={80}
|
||||
className="rounded-2xl"
|
||||
className="rounded-[22%]"
|
||||
/>
|
||||
<h1 className="text-4xl md:text-5xl font-bold text-green-600 dark:text-green-400">
|
||||
Vegan IQ
|
||||
|
||||
@@ -87,7 +87,7 @@ export default function ServicesPage() {
|
||||
alt="Occupy Wallets"
|
||||
width={72}
|
||||
height={72}
|
||||
className="rounded-xl flex-shrink-0"
|
||||
className="rounded-[22%] flex-shrink-0"
|
||||
/>
|
||||
<div>
|
||||
<h3 className="text-xl font-bold mb-1">Occupy Wallets</h3>
|
||||
|
||||
@@ -69,7 +69,7 @@ function ProductIcon({ product }: { product: Product }) {
|
||||
alt={`${product.title} icon`}
|
||||
width={56}
|
||||
height={56}
|
||||
className="rounded-xl flex-shrink-0"
|
||||
className="rounded-[22%] flex-shrink-0"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user