refactor: remove top margin of headlines

src/components/ColorSwatch.tsx

@@ -65,9 +65,7 @@ export const ColorSwatch: FunctionalComponent<Props> = ({
 					></div>
 					<div class="h-full min-h-[6rem] pbe-7 pbs-6 pie-6 pis-6">
 						{title && (
-							<Subheadline class="!text-[20px] !mbs-0 !mbe-[8px]">
-								{title}
-							</Subheadline>
+							<Subheadline class="!text-[20px] !mbe-[8px]">{title}</Subheadline>
 						)}
 						<Text class="m-0 font-mono text-[16px] text-black/40 dark:text-white/40">
 							{color}

src/components/Headline.tsx

@@ -16,7 +16,7 @@ export const Headline: FunctionalComponent<Props> = ({
 }) => {
 	const Tag = as;
 	const classes = cx(
-		'text-5 font-black tracking-tight mbe-10 mbs-12 dark:font-extrabold [text-wrap:balance]',
+		'text-5 font-black tracking-tight mbe-10 dark:font-extrabold [text-wrap:balance]',
 		className
 	);
 

src/components/Picture.astro

@@ -13,7 +13,7 @@ interface Props extends PictureConfigOptions {
 const { class: className, noMargin, src, ...props } = Astro.props;
 
 const classes = cx(
-	'image-shadow block h-auto w-full rounded-1 border-1 border-solid border-black/[0.1] bg-black/[0.1] shadow shadow-black/10 mbe-10 mbs-0 dark:border-white/[0.1] dark:opacity-[0.87] dark:shadow-white/10',
+	'image-shadow block h-auto w-full rounded-1 border-1 border-solid border-black/[0.1] bg-black/[0.1] shadow shadow-black/10 mbe-10 mbs-0 dark:border-white/[0.1] dark:opacity-[0.87] dark:shadow-white/5 border-x-0',
 	{ 'mbe-0': noMargin },
 	className
 );

src/components/RSSLink.astro

@@ -5,9 +5,9 @@ import { Link, Subsubheadline } from '.';
 ---
 
 <div class="grow mbe-5 sm:mbe-0">
-	<Subsubheadline class="!mbs-0">Stay up to date.</Subsubheadline>
+	<Subsubheadline>Stay up to date.</Subsubheadline>
 	<p>
-		<Sprite name="ri:rss-fill" class="h-icon w-icon inline" />
+		<Sprite name="ri:rss-fill" class="inline h-icon w-icon" />
 		<Link
 			class="font-light decoration-4 underline-offset-auto hover:underline hover:decoration-shibui-900/20 dark:hover:decoration-shibui-100/20"
 			href="/rss.xml"

src/components/Subheadline.tsx

@@ -16,7 +16,7 @@ export const Subheadline: FunctionalComponent<Props> = ({
 }) => {
 	const Tag = as;
 	const classes = cx(
-		'text-4 font-black tracking-tight mbe-8 mbs-12 dark:font-extrabold [text-wrap:balance]',
+		'text-4 font-black tracking-tight mbe-8 dark:font-extrabold [text-wrap:balance]',
 		className
 	);
 

src/components/Subsubheadline.tsx

@@ -16,7 +16,7 @@ export const Subsubheadline: FunctionalComponent<Props> = ({
 }) => {
 	const Tag = as;
 	const classes = cx(
-		'text-3 font-black tracking-tight mbe-5 mbs-12 dark:font-extrabold [text-wrap:balance]',
+		'text-3 font-black tracking-tight mbe-5 dark:font-extrabold [text-wrap:balance]',
 		className
 	);
 

src/components/Title.tsx

@@ -15,7 +15,10 @@ export const Title: FunctionalComponent<Props> = ({
 	...props
 }) => {
 	const Tag = as;
-	const classes = cx('text-7 font-black tracking-tight mbe-13 dark:font-extrabold [text-wrap:balance]', className);
+	const classes = cx(
+		'text-7 font-black tracking-tight mbe-13 dark:font-extrabold [text-wrap:balance]',
+		className
+	);
 
 	return (
 		<Tag class={classes} {...props}>

src/pages/[...slug].astro

@@ -137,25 +137,6 @@ const description = '…';
 
 <style is:global>
 	.journal-post {
-		& > h2 {
-			@apply text-4 mbe-9 mbs-14;
-		}
-
-		& > h3,
-		& > h4,
-		& > h5,
-		& > h6 {
-			@apply text-3 !mbs-14;
-		}
-
-		& > h2:first-of-type,
-		& > h3:first-of-type,
-		& > h4:first-of-type,
-		& > h5:first-of-type,
-		& > h6:first-of-type {
-			@apply mbs-0;
-		}
-
 		& h2 + h3,
 		& p + h2,
 		& p + h3,
@@ -165,10 +146,6 @@ const description = '…';
 			@apply !mbs-12;
 		}
 
-		& > *:first-child {
-			@apply mbs-0;
-		}
-
 		& > pre {
 			@apply md:-mie-[5.55vw] md:-mis-[5.55vw];
 		}

src/pages/cv.astro

@@ -28,13 +28,13 @@ const description = '';
 	<PageTitle grid="wide" innerGrid>Curriculum Vitae</PageTitle>
 
 	<article class="col-span-full md:col-start-1 md:col-end-9">
-		<Headline class="!mbs-0">{cv.summary.headline}</Headline>
+		<Headline>{cv.summary.headline}</Headline>
 		<Intro components={mapping} />
 	</article>
 
 	<article class="col-span-full md:col-start-10 md:col-end-18">
-		<Headline class="!mbs-0">Personal Information</Headline>
-		<Subheadline class="font-semibold !mbs-0">{cv.personal.name}</Subheadline>
+		<Headline>Personal Information</Headline>
+		<Subheadline class="font-semibold">{cv.personal.name}</Subheadline>
 		<Text class="!mbe-0">{cv.personal.tagline}</Text>
 		<TextLink href="https://www.stefanimhoff.de">Website</TextLink> •
 		<EmailLink data-domain="stefanimhoff" data-name="cv" data-tld="de" icon={false} /> •
@@ -45,7 +45,7 @@ const description = '';
 	<Divider class="col-span-full w-[90] !mbe-0 !mbs-0" />
 
 	<article class="col-span-full md:col-start-1 md:col-end-9">
-		<Headline class="!mbs-0">{cv.experience.headline}</Headline>
+		<Headline>{cv.experience.headline}</Headline>
 		{
 			cv.experience.items.map((item) => (
 				<div>
@@ -74,7 +74,7 @@ const description = '';
 			))
 		}
 
-		<Headline class="!mbs-0">{cv.education.headline}</Headline>
+		<Headline>{cv.education.headline}</Headline>
 		{
 			cv.education.items.map((item) => (
 				<div class="mbe-12">
@@ -97,7 +97,7 @@ const description = '';
 
 	<aside class="col-span-full md:col-start-10 md:col-end-18">
 		<article>
-			<Headline class="!mbs-0">{cv.skills.headline}</Headline>
+			<Headline>{cv.skills.headline}</Headline>
 			{
 				cv.skills.items.map((item) => (
 					<div>
@@ -117,7 +117,7 @@ const description = '';
 		</article>
 
 		<article>
-			<Headline class="!mbs-0">{cv.languages.headline}</Headline>
+			<Headline>{cv.languages.headline}</Headline>
 			<UnorderedList>
 				{
 					cv.languages.items.map((item) => (
@@ -129,7 +129,7 @@ const description = '';
 			</UnorderedList>
 
 			<article>
-				<Headline class="!mbs-0">{cv.awards.headline}</Headline>
+				<Headline>{cv.awards.headline}</Headline>
 				<UnorderedList>
 					{cv.awards.items.map((item) => <ListItem>{item}</ListItem>)}
 				</UnorderedList>
@@ -139,7 +139,7 @@ const description = '';
 	<Divider class="col-span-full w-[90] !mbe-0 !mbs-0" />
 
 	<article class="col-span-full">
-		<Headline class="!mbs-0">{cv.interests.headline}</Headline>
+		<Headline>{cv.interests.headline}</Headline>
 		<ul class="columns-1 gap-gap md:columns-2">
 			<InterestsHobbies components={mapping} />
 		</ul>