chore: css tweaks

Signed-off-by: Henry Gressmann <[email protected]>

Author: explodingcamera

Cargo.lock

@@ -11,15 +11,15 @@
 	"dependencies": {
 		"@astrojs/react": "^3.6.2",
 		"@explodingcamera/css": "^0.0.4",
-		"@fontsource-variable/figtree": "^5.0.22",
+		"@fontsource-variable/figtree": "^5.0.23",
 		"@icons-pack/react-simple-icons": "^10.0.0",
 		"@nivo/line": "^0.87.0",
 		"@picocss/pico": "^2.0.6",
 		"@radix-ui/react-accordion": "^1.2.0",
 		"@radix-ui/react-dialog": "^1.1.1",
 		"@radix-ui/react-tabs": "^1.1.0",
 		"@scaleway/use-query-params": "^5.0.5",
-		"@tanstack/react-query": "^5.55.0",
+		"@tanstack/react-query": "^5.55.2",
 		"@uidotdev/usehooks": "^2.4.1",
 		"date-fns": "^3.6.0",
 		"fets": "^0.8.3",
@@ -38,7 +38,7 @@
 		"@types/react-dom": "^18.3.0",
 		"@types/react-simple-maps": "^3.0.6",
 		"astro": "^4.15.4",
-		"bun-types": "^1.1.26",
+		"bun-types": "^1.1.27",
 		"rollup-plugin-license": "^3.5.2",
 		"typescript": "^5.5.4"
 	},

web/bun.lockb

@@ -8,13 +8,12 @@ a.card {
   z-index: 0;
   display: inline-flex;
   align-items: center;
-  gap: 0.4rem;
+  gap: 0.3rem;
 
   margin: 0;
-  padding: 0.3rem 0.4rem 0.3rem 0.5rem;
+  padding: 0.3rem 0.4rem 0.2rem 0.4rem;
 
   transition: background-color 0.2s ease;
-  border-radius: var(--pico-border-radius);
 
   &::before {
     content: "";
@@ -24,10 +23,10 @@ a.card {
     left: 0;
     right: 0;
     bottom: 0;
-    border-radius: var(--pico-border-radius);
+    border-radius: calc(var(--pico-border-radius) - 3px);
     background-color: var(--pico-card-background-color);
     box-shadow: var(--pico-card-box-shadow);
-    opacity: 0.8;
+    opacity: 0;
     transition: opacity 0.2s ease;
   }
 

web/package.json

@@ -40,7 +40,7 @@
   padding-bottom: 0.5rem;
   display: flex;
   align-items: center;
-  gap: 0.2rem;
+  gap: 0.4rem;
 
   &:hover {
     &::after {
@@ -58,7 +58,7 @@
     opacity: 0.09;
     z-index: -1;
     transition: width 0.3s ease-in-out, opacity 0.1s ease-in-out;
-    border-radius: 1rem;
+    border-radius: 10px;
   }
 }
 

web/src/components/card.module.css

@@ -123,14 +123,12 @@ const dimensionLabels: Record<Dimension, (value: DimensionTableRow) => React.Rea
 	platform: (value) => (
 		<>
 			<OSIcon os={value.dimensionValue} size={24} />
-			&nbsp;
 			{value.dimensionValue}
 		</>
 	),
 	browser: (value) => (
 		<>
 			<BrowserIcon browser={value.dimensionValue} size={24} />
-			&nbsp;
 			{value.dimensionValue}
 		</>
 	),
@@ -140,7 +138,6 @@ const dimensionLabels: Record<Dimension, (value: DimensionTableRow) => React.Rea
 		return (
 			<>
 				<LinkIcon size={16} />
-				&nbsp;
 				<a target="_blank" rel="noreferrer" href={getHref(url)}>
 					{formatFullUrl(url)}
 				</a>
@@ -152,7 +149,6 @@ const dimensionLabels: Record<Dimension, (value: DimensionTableRow) => React.Rea
 		return (
 			<>
 				<LinkIcon size={16} />
-				&nbsp;
 				<a target="_blank" rel="noreferrer" href={getHref(url)}>
 					{formatHost(url)}
 				</a>
@@ -162,32 +158,27 @@ const dimensionLabels: Record<Dimension, (value: DimensionTableRow) => React.Rea
 	mobile: (value) => (
 		<>
 			<MobileDeviceIcon isMobile={value.dimensionValue === "true"} size={24} />
-			&nbsp;
 			{value.dimensionValue === "true" ? "Mobile" : "Desktop"}
 		</>
 	),
 	country: (value) => (
 		<>
-			{countryCodeToFlag(value.dimensionValue)}
-			&nbsp;
+			<span>{countryCodeToFlag(value.dimensionValue)}</span>
 			{value.displayName || value.dimensionValue || "Unknown"}
 		</>
 	),
 	city: (value) => (
 		<>
-			{countryCodeToFlag(value.icon || "XX")}
-			&nbsp;
+			<span>{countryCodeToFlag(value.icon || "XX")}</span>
 			{value.displayName || "Unknown"}
 		</>
 	),
 	referrer: (value) => (
 		<>
 			<ReferrerIcon referrer={value.dimensionValue} icon={value.icon} size={24} />
-			&nbsp;
 			{value.displayName || value.dimensionValue || "Unknown"}
 			{value.dimensionValue && isValidFqdn(value.dimensionValue) && (
 				<>
-					&nbsp;
 					<a href={`https://${value.dimensionValue}`} target="_blank" rel="noreferrer" className={styles.external}>
 						<SquareArrowOutUpRightIcon size={16} />
 					</a>

web/src/components/dimensions/dimensions.module.css

@@ -1,14 +1,14 @@
 .project {
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.8rem;
 }
 
 .projectHeader {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-bottom: 0.2rem;
+  margin-bottom: 0.4rem;
   flex-wrap: wrap;
   gap: 1rem;
 
@@ -23,14 +23,10 @@
   }
 }
 
-.projectStats {
-}
-
 .tables {
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 1rem;
-  row-gap: 1rem;
+  gap: 0.8rem;
 
   @media (max-width: 40rem) {
     grid-template-columns: 1fr;
@@ -39,6 +35,7 @@
 
 .graphCard {
   height: 20rem;
+  margin-top: -0.2rem;
   padding: 1rem 0 1rem 0.5rem;
 }
 

web/src/components/dimensions/index.tsx

@@ -3,7 +3,6 @@
   z-index: 1;
   display: flex;
   gap: 0.7rem;
-  margin-bottom: -0.4rem;
 
   @media (max-width: 820px) {
     flex-wrap: wrap;

web/src/components/project.module.css

@@ -16,8 +16,8 @@ export const ProjectHeader = ({
 		<h1 className={styles.statsHeader}>
 			<span>
 				<CardLink href={`/p/${project.id}`}>
-					{project.displayName}
 					{project.public ? null : <LockIcon size={16} />}
+					{project.displayName}
 				</CardLink>
 				&nbsp;
 			</span>