Header/footer and general text size/space finetuning

components/collection/CollectionOverviewCard.tsx

@@ -20,7 +20,7 @@ export function CollectionOverviewCard(
       className={`flex flex-col w-full dark-gradient rounded-lg p-3 mobileMd:p-6 gap-3 mobileMd:gap-6 hover:border-stamp-purple-bright hover:shadow-stamp hover:border-solid border-2 border-transparent group`}
     >
       <div className="flex gap-6 w-full">
-        <div className="aspect-stamp min-w-[106px] min-h-[106px] max-w-[106px] max-h-[106px] mobileMd:min-w-[112px] mobileMd:min-h-[112px] mobileMd:max-w-[112px] mobileMd:max-h-[112px] mobileLg:min-w-[114px] mobileLg:min-h-[114px] mobileLg:max-w-[114px] mobileLg:max-h-[114px] desktop:min-w-[120px] desktop:min-h-[120px] desktop:max-w-[120px] desktop:max-h-[120px] overflow-hidden image-rendering-pixelated rounded">
+        <div className="aspect-stamp min-w-[106px] min-h-[106px] max-w-[106px] max-h-[106px] mobileMd:min-w-[112px] mobileMd:min-h-[112px] mobileMd:max-w-[112px] mobileMd:max-h-[112px] mobileLg:min-w-[114px] mobileLg:min-h-[114px] mobileLg:max-w-[114px] mobileLg:max-h-[114px] overflow-hidden image-rendering-pixelated rounded">
           <div className="center relative w-full h-full">
             <img
               src={collection.first_stamp_image}
@@ -31,7 +31,7 @@ export function CollectionOverviewCard(
         </div>
         <div className="w-full">
           <p>
-            <p className="inline-block text-2xl mobileMd:text-3xl mobileLg:text-4xl desktop:text-5xl font-black gray-gradient1 group-hover:[-webkit-text-fill-color:#AA00FF]">
+            <p className="inline-block text-2xl mobileMd:text-3xl mobileLg:text-4xl font-black gray-gradient1 group-hover:[-webkit-text-fill-color:#AA00FF]">
               <span className="min-[420px]:hidden">
                 {abbreviateCollectionName(collection.collection_name)
                   .toUpperCase()}

islands/Wallet/ConnectWallet.tsx

@@ -1,6 +1,6 @@
 // connectWallet.tsx
-import { WalletModal } from "./WalletModal.tsx";
-import { WalletConnector } from "./connectors/Wallet.connector.tsx";
+import { WalletModal } from "$islands/Wallet/WalletModal.tsx";
+import { WalletConnector } from "$islands/Wallet/connectors/Wallet.connector.tsx";
 import { WalletProviderKey } from "$lib/utils/constants.ts";
 
 export function ConnectWallet({ toggleModal }: { toggleModal: () => void }) {

islands/collection/ArtistCollection.tsx

@@ -1,7 +1,7 @@
 export function ArtistCollection() {
   return (
     <div>
-      <p className="text-2xl mobileMd:text-3xl mobileLg:text-4xl desktop:text-5xl font-extralight text-stamp-grey-light mb-1.5 mobileLg:mb-3 mb-9">
+      <p className="text-2xl mobileMd:text-3xl mobileLg:text-4xl font-extralight text-stamp-grey-light mb-1.5 mobileLg:mb-3">
         SELECTED STAMPS
       </p>
     </div>

islands/collection/CollectionDetailsContent.tsx

@@ -7,7 +7,7 @@ export const CollectionDetailsContent = ({ stamps = [] }: {
 }) => {
   return (
     <div name="stamps">
-      <div className="grid grid-cols-2 tablet:grid-cols-4 desktop:grid-cols-5 gap-3 mobileMd:gap-6 transition-opacity duration-700 ease-in-out">
+      <div className="grid grid-cols-2 mobileMd:grid-cols-3 tablet:grid-cols-4 desktop:grid-cols-5 gap-3 mobileMd:gap-6 transition-opacity duration-700 ease-in-out">
         {stamps.map((stamp: StampRow) => (
           <StampCard
             key={stamp.tx_hash}

islands/collection/CollectionDetailsHeader.tsx

@@ -8,7 +8,7 @@ export const CollectionDetailsHeader = (
   console.log("collection: ", collection);
 
   const titleGreyLD =
-    "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black gray-gradient1";
+    "inline-block text-3xl mobileMd:text-4xl mobileLg:text-5xl font-black gray-gradient1";
   const dataColumn = "flex flex-col -space-y-1";
   const dataLabelSm =
     "text-sm mobileLg:text-base font-light text-stamp-grey-darker uppercase";
@@ -33,7 +33,7 @@ export const CollectionDetailsHeader = (
               loading="lazy"
               onError={handleImageError}
               alt="Collection image"
-              className="h-[78px] w-[78px] mobileMd:h-[82px] mobileMd:w-[82px] mobileLg:h-[108px] mobileLg:w-[108px] desktop:h-[120px] desktop:w-[120px] object-contain items-center standalone:h-24 standalone:w-auto pixelart image-rendering-pixelated"
+              className="h-[78px] w-[78px] mobileMd:h-[82px] mobileMd:w-[82px] mobileLg:h-[108px] mobileLg:w-[108px] object-contain items-center standalone:h-24 standalone:w-auto pixelart image-rendering-pixelated"
             />
             <div className="flex flex-col pl-[18px] mobileMd:pl-6">
               <p className={`${titleGreyLD} pb-0.75 mobileLg:pb-1.5`}>

islands/collection/CollectionOverviewArtistContent.tsx

@@ -7,7 +7,7 @@ export function CollectionOverviewArtistContent(
   { collections }: CollectionOverviewArtistContentProps,
 ) {
   return (
-    <div class="flex flex-col gap-4">
+    <div class="flex flex-col gap-6">
       {/* <CollectionCreateButton /> */}
       <div className="flex flex-col gap-6">
         {collections.map((collection) => {

islands/layout/Footer.tsx

@@ -49,16 +49,16 @@ const socialLinks = [
   },
 ];
 
-const titleClassName =
-  "purple-gradient2 text-4xl leading-[43.2px] mobileLg:text-5xl mobileLg:leading-[57.6px] tablet:text-5xl tablet:leading-[57.6px] desktop:text-6xl desktop:leading-8xl italic font-black";
-const subTitleClassName =
-  "text-stamp-purple-bright text-sm leading-[16.8px] mobileLg:text-lg mobileLg:leading-[21.6px] desktop:text-xl desktop:leading-6 font-light mb-2 mobileLg:mb-3 tablet:mb-2";
-const navTitleClassName =
-  "text-stamp-primary-dark hidden tablet:block text-lg leading-[21.1px] desktop:text-xl desktop:leading-[23.4px] font-black";
-const navContentClassName =
-  "text-stamp-primary-dark text-xs leading-[14.4px] mobileLg:text-sm mobileLg:leading-[16.8px] desktop:text-base desktop:leading-[19.2px] font-medium hover:text-stamp-purple-bright";
-const copyrightClassName =
-  "text-xs leading-[14.4px] desktop:text-sm desktop:leading-[16.8px] font-medium text-[#440066]";
+const footerLogo =
+  "purple-gradient2 text-4xl leading-[43.2px] mobileLg:text-5xl mobileLg:leading-[57.6px] italic font-black";
+const footerTagline =
+  "text-stamp-purple-bright text-sm leading-[16.8px] mobileLg:text-lg mobileLg:leading-[21.6px] font-light mb-3 mobileLg:mb-[18px]";
+const footerNavTitle =
+  "text-stamp-purple-dark hidden tablet:block text-lg leading-[23.4px] font-black";
+const navContent =
+  "text-stamp-purple-dark text-xs leading-[14.4px] mobileLg:text-sm mobileLg:leading-[16.8px] tablet:text-base tablet:leading-[19.2px] font-medium hover:text-stamp-purple-bright";
+const copyright =
+  "text-xs leading-[14.4px] tablet:text-sm tablet:leading-[16.8px] font-medium text-stamp-purple-darker/75";
 
 export function Footer() {
   const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
@@ -69,11 +69,11 @@ export function Footer() {
       max-w-desktop w-full mx-auto flex flex-col tablet:flex-row justify-between gap-2 mobileLg:gap-3 tablet:gap-4
     ">
       <div className="w-full flex flex-col gap-1 items-center tablet:items-start">
-        <p className={titleClassName}>
+        <p className={footerLogo}>
           STAMPCHAIN
           <span className="font-extralight pr-1">.IO</span>
         </p>
-        <p className={subTitleClassName}>
+        <p className={footerTagline}>
           IMMORTALISED ART - STORED ON BITCOIN
         </p>
         <div className="flex flex-row tablet:hidden justify-center w-full gap-[18px] mobileLg:gap-6 leading-4 text-right mb-1 mobileLg:mb-2">
@@ -82,7 +82,7 @@ export function Footer() {
               key={index}
               href={link.href}
               f-partial={!link.isExternal ? link.href : undefined}
-              className={navContentClassName +
+              className={navContent +
                 (link?.hiddenOnMobile ? " hidden" : "")}
               target={link.isExternal ? "_blank" : undefined}
             >
@@ -95,7 +95,7 @@ export function Footer() {
             <a key={link.href} href={link.href} target="_blank">
               <img
                 src={hoveredIndex === index ? link.hoverIcon : link.icon}
-                className={`w-[31px] h-[31px] mobileLg:w-[39px] mobileLg:h-[39px] desktop:w-[46px] desktop:h-[46px] ${
+                className={`w-[31px] h-[31px] mobileLg:w-[39px] mobileLg:h-[39px] my-1.5 tablet:my-0 ${
                   index === 0
                     ? "mr-[13px]"
                     : index === 1
@@ -115,16 +115,16 @@ export function Footer() {
         </div>
       </div>
 
-      <div className="flex flex-col tablet:flex-row justify-end tablet:justify-between w-full">
-        <div className="flex flex-col items-center tablet:items-start gap-1 w-full tablet:w-auto">
-          <p className={navTitleClassName}>RESOURCES</p>
+      <div className="flex flex-col tablet:flex-row justify-end tablet:justify-between w-full tablet:pt-3">
+        <div className="flex flex-col items-center tablet:items-start w-full tablet:w-1/2 gap-1.5">
+          <p className={footerNavTitle}>RESOURCES</p>
           <div className="flex flex-row tablet:flex-col justify-center w-full gap-[18px] mobileLg:gap-6 tablet:gap-1 leading-4">
             {resourcesStampLinks.map((link, index) => (
               <a
                 key={index}
                 href={link.href}
                 f-partial={!link.isExternal ? link.href : undefined}
-                className={navContentClassName}
+                className={navContent}
                 target={link.isExternal ? "_blank" : undefined}
               >
                 {link.title}
@@ -133,37 +133,37 @@ export function Footer() {
             <a
               href="/termsofservice"
               f-partial="/termsofservice"
-              className={`${navContentClassName} block tablet:hidden`}
+              className={`${navContent} block tablet:hidden`}
             >
               TERMS
             </a>
           </div>
         </div>
 
-        <div className="hidden tablet:flex flex-col justify-center w-full gap-1 text-right">
-          <p className={navTitleClassName}>STAMPCHAIN</p>
+        <div className="hidden tablet:flex flex-col justify-center w-full tablet:w-1/2 gap-1.5 text-right">
+          <p className={footerNavTitle}>STAMPCHAIN</p>
           {stampChainLinks.map((link, index) => (
             <a
               key={index}
               href={link.href}
               f-partial={!link.isExternal ? link.href : undefined}
-              className={navContentClassName}
+              className={navContent}
               target={link.isExternal ? "_blank" : undefined}
             >
               {link.title}
             </a>
           ))}
           <p
-            className={`${copyrightClassName} hidden tablet:block mt-5 desktop:mt-2`}
+            className={`${copyright} hidden tablet:block mt-[9px]`}
           >
-            <span className="italic font-bold">STAMPCHAIN</span> @ 2024
+            <span className="italic font-bold">STAMPCHAIN</span> @ 2025
           </p>
         </div>
 
         <p
-          className={`${copyrightClassName} block tablet:hidden text-center mt-3 mobileLg:mt-6`}
+          className={`${copyright} block tablet:hidden text-center mt-[18px] mobileLg:mt-6`}
         >
-          <span className="italic font-bold">STAMPCHAIN</span> @ 2024
+          <span className="italic font-bold">STAMPCHAIN</span> @ 2025
         </p>
       </div>
     </footer>

islands/layout/Header.tsx

@@ -2,23 +2,33 @@ import { useEffect, useState } from "preact/hooks";
 import { ConnectWallet } from "$islands/Wallet/ConnectWallet.tsx";
 
 interface NavLink {
-  title: string;
+  title: string | {
+    default: string;
+    tablet: string;
+  };
   href?: string;
   subLinks?: NavLink[];
 }
 
 const desktopNavLinks: NavLink[] = [
   {
-    title: "ART STAMPS",
+    title: {
+      default: "ART STAMPS",
+      tablet: "STAMPS",
+    },
     href: "#",
     subLinks: [
       { title: "ALL", href: "/stamp?type=classic" },
       { title: "COLLECTIONS", href: "/collection" },
       { title: "STAMPING", href: "/stamping/stamp" },
+      { title: "TRANSFER", href: "/stamping/stamp/transfer" },
     ],
   },
   {
-    title: "SRC-20 TOKENS",
+    title: {
+      default: "SRC-20 TOKENS",
+      tablet: "TOKENS",
+    },
     href: "#",
     subLinks: [
       { title: "ALL", href: "/src20" },
@@ -28,6 +38,16 @@ const desktopNavLinks: NavLink[] = [
       { title: "TRANSFER", href: "/stamping/src20/transfer" },
     ],
   },
+  {
+    title: {
+      default: "BITNAME DOMAINS",
+      tablet: "BITNAME",
+    },
+    href: "#",
+    subLinks: [
+      { title: "REGISTER", href: "/stamping/src101/mint" },
+    ],
+  },
 ];
 
 const mobileNavLinks: NavLink[] = [
@@ -52,9 +72,11 @@ const mobileNavLinks: NavLink[] = [
     href: "#",
     subLinks: [
       { title: "STAMPING", href: "/stamping/stamp" },
-      { title: "DEPLOY", href: "/stamping/src20/deploy" },
-      { title: "MINT", href: "/stamping/src20/mint" },
-      { title: "TRANSFER", href: "/stamping/src20/transfer" },
+      { title: "TRANSFER STAMP", href: "/stamping/stamp/transfer" },
+      { title: "DEPLOY TOKEN", href: "/stamping/src20/deploy" },
+      { title: "MINT TOKEN", href: "/stamping/src20/mint" },
+      { title: "TRANSFER TOKEN", href: "/stamping/src20/transfer" },
+      { title: "REGISTER BITNAME", href: "/stamping/src101/mint" },
     ],
   },
 ];
@@ -69,8 +91,8 @@ const socialLinks = [
   },
 ];
 
-const logoClassName =
-  "purple-hover-gradient hover:purple-hover-gradient2 transtion-all duration-300 text-3xl mobileMd:text-4xl mobileLg:text-5xl desktop:text-6xl font-black italic pr-2";
+const headerLogo =
+  "text-3xl mobileMd:text-4xl mobileLg:text-5xl font-black italic purple-hover-gradient hover:purple-hover-gradient2 transtion-all duration-300 pr-2";
 
 export function Header() {
   const [open, setOpen] = useState(false);
@@ -138,7 +160,9 @@ export function Header() {
       <>
         {filteredNavLinks.map((link) => (
           <div
-            key={link.title}
+            key={typeof link.title === "string"
+              ? link.title
+              : link.title.default}
             className={`group relative cursor-pointer text-nowrap ${
               isMobile ? "flex flex-col gap-[6px] text-lg" : ""
             }`}
@@ -156,20 +180,29 @@ export function Header() {
                 isMobile
                   ? `text-xl mobileLg:text-2xl ${
                     link.subLinks
-                      ? "text-stamp-primary-dark"
-                      : "text-stamp-primary"
+                      ? "text-stamp-purple-dark"
+                      : "text-stamp-purple hover:text-stamp-purple-bright"
                   }`
-                  : "text-lg desktop:text-xl text-center group-hover:text-stamp-primary-hover"
+                  : "text-lg text-center group-hover:text-stamp-purple-bright"
               }`}
             >
-              {link.title}
+              <span className="hidden tablet:inline min-[1180px]:hidden">
+                {typeof link.title === "string"
+                  ? link.title
+                  : link.title.tablet}
+              </span>
+              <span className="tablet:hidden min-[1180px]:inline">
+                {typeof link.title === "string"
+                  ? link.title
+                  : link.title.default}
+              </span>
             </a>
             {link.subLinks && (
               <div
                 className={`${
                   isMobile
                     ? "hidden group-hover:flex flex-col z-90 w-full gap-1.5"
-                    : "hidden group-hover:flex flex-col absolute top-0 left-0 z-90 pt-[32px] pb-[15px] space-y-[3px] w-full"
+                    : "hidden group-hover:flex flex-col absolute top-[100%] left-0 z-90 pt-[3px] pb-[15px] space-y-[3px] w-full backdrop-blur-md bg-gradient-to-b from-transparent to-[#171717]/30 rounded-b-lg"
                 }`}
               >
                 {link.subLinks?.map((subLink) => (
@@ -181,9 +214,9 @@ export function Header() {
                       toggleMenu();
                       setCurrentPath(subLink?.href ? subLink?.href : null);
                     }}
-                    className={`hover:text-stamp-purple-highlight text-base mobileLg:text-lg tablet:text-base ${
+                    className={`hover:text-stamp-purple-bright text-base mobileLg:text-lg tablet:text-base ${
                       currentPath === subLink.href
-                        ? "text-stamp-purple-highlight"
+                        ? "text-stamp-purple-bright"
                         : ""
                     }`}
                   >
@@ -199,13 +232,13 @@ export function Header() {
   };
 
   return (
-    <header className="px-3 mobileMd:px-6 desktop:px-12 my-[18px] mobileMd:my-6 mobileLg:my-9 tablet:my-12 max-w-desktop w-full mx-auto tablet:flex justify-between items-center">
+    <header className="tablet:flex justify-between items-center max-w-desktop w-full mx-auto px-3 mobileMd:px-6 desktop:px-12 my-[18px] mobileMd:my-6 mobileLg:my-9 tablet:my-12">
       <div className="flex justify-between items-center w-full ">
         <a
           href="/home"
           f-partial="/home"
           onClick={() => setCurrentPath("home")}
-          className={logoClassName}
+          className={headerLogo}
         >
           STAMPCHAIN
         </a>
@@ -218,33 +251,33 @@ export function Header() {
             <img
               src="/img/header/menu-close.svg"
               alt="menu"
-              className="w-5 h-5 mr-1.5"
+              className="w-5 h-5 mobileLg:w-6 mobileLg:h-6 mr-1.5"
             />
           )}
           {!open && (
             <img
               src="/img/header/menu-open.svg"
               alt="menu"
-              className="w-5 h-5"
+              className="w-5 h-5 mobileLg:w-6 mobileLg:h-6"
             />
           )}
         </button>
       </div>
 
-      {/* Desktop Navbar */}
-      <div className="hidden tablet:flex justify-between items-center gap-9 desktop:gap-12 font-black text-stamp-primary">
+      {/* Tablet/Desktop Navbar */}
+      <div className="hidden tablet:flex justify-between items-center gap-9 desktop:gap-9 font-black text-stamp-purple">
         {renderNavLinks()}
         <ConnectWallet toggleModal={toggleWalletModal} />
       </div>
 
       {/* Mobile Navbar */}
       <div
-        className={`duration-500 flex tablet:hidden flex-col justify-between fixed left-0 top-0 w-full h-screen z-30 backdrop-blur-md bg-gradient-to-b from-[#171717]/40 to-[#171717]/80 scroll-none px-6 pb-[18px] mobileLg:pb-[49px] pt-[89px] mobileLg:pt-[126px] font-black text-stamp-primary ${
+        className={`flex tablet:hidden flex-col justify-between fixed left-0 top-0 w-full h-screen z-30 backdrop-blur-md bg-gradient-to-b from-[#000000]/70 to-[#000000]/90 scroll-none px-6 pb-[18px] mobileLg:pb-[49px] pt-[89px] mobileLg:pt-[126px] font-black text-stamp-purple duration-300 ${
           open ? "translate-x-0" : "translate-x-full"
         }`}
         id="navbar-collapse"
       >
-        <div className="font-black text-center flex flex-col items-center justify-between gap-3">
+        <div className="flex flex-col items-center justify-between font-black text-center gap-3">
           {renderNavLinks(true)}
           <ConnectWallet toggleModal={toggleWalletModal} />
         </div>

islands/src20/details/SRC20DetailsTab.tsx

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "preact/hooks";
-import { SRC20TX } from "./SRC20TX.tsx";
+import { SRC20TX } from "$islands/src20/details/SRC20TX.tsx";
 import { SRC20Row } from "$globals";
 
 interface SRC20DetailsTabProps {