Testing shadows

src/components/Applications/AppItem.tsx

@@ -86,7 +86,6 @@ export function AppItem({
 				</svg>
 			)}
 			<Stack
-				// align={isMobile ? 'center' : undefined}
 				justify={isMobile ? 'center' : undefined}
 				style={{
 					marginRight: scale * 16,
@@ -94,7 +93,16 @@ export function AppItem({
 					paddingTop: isMobile ? scale : scale * 16,
 				}}
 			>
-				{Icon && <Icon style={{ height: scale * 32, width: scale * 32 }} />}
+				{Icon && (
+					<Icon
+						style={{
+							height: scale * 32,
+							width: scale * 32,
+							filter:
+								'drop-shadow(2px 2px 1px color-mix(in srgb, var(--mantine-color-primary-0), transparent 50%))',
+						}}
+					/>
+				)}
 			</Stack>
 			{width / height > 2 && (
 				<Stack

src/pages/homepage/components/Header/Header.tsx

@@ -73,8 +73,9 @@ function Header({
 			style={{
 				flexDirection: isMobile ? 'column' : 'row',
 			}}
+			justify='space-between'
 		>
-			<Stack w={'100%'}>
+			<Stack w={'fit-content'} pos={'relative'}>
 				<Text
 					className={textClasses.greeting}
 					classNames={textClasses}

src/styles/Text.module.css

@@ -1,13 +1,10 @@
 .greeting {
 	&.root {
-		margin: 0;
 		margin-left: .5rem;
-		margin-right: .5rem;
-		padding: 0;
-		text-align: left;
 		font-size: 3.5rem;
 		width: max-content;
 		color: var(--mantine-color-accent-0);
+		text-shadow: 3px 3px 1px color-mix(in srgb, var(--mantine-color-primary-0), transparent 50%);
 	}
 }
 
@@ -23,6 +20,7 @@
 		text-transform: uppercase;
 		font-weight: 300;
 		color: var(--mantine-color-primary-0);
+		text-shadow: 1px 1px 1px color-mix(in srgb, var(--mantine-color-accent-0), transparent 50%);
 	}
 }