M src/layouts/Layout.astro → src/layouts/Layout.astro

@@ -87,8 +87,8 @@ }
 
 	.right {
 		.inner {
-			padding-bottom: 2rem;
 		}
+
 		.header-section {
 			h1 {
 				font-size: 2rem;
@@ -155,6 +155,69 @@ p.subtitle {
 			font-size: 1.25rem;
 			font-weight: 500;
 			color: hsl(var(--on-accent));
+		}
+	}
+
+	section {
+		&:first-of-type {
+			margin-top: calc(var(--padding) * -2);
+		}
+
+		header {
+			--bg-colour: hsla(var(--surface1) / 1);
+			position: relative;
+			background-color: var(--bg-colour);
+			padding: var(--padding) calc(var(--padding) * 2);
+
+			h2 {
+				font-size: 1.5rem;
+				font-weight: 700;
+			}
+			p.subtitle {
+				font-size: 1.25rem;
+				font-weight: 500;
+			}
+
+			z-index: 1;
+
+			&::before {
+				--height: 0.5rem;
+				content: "";
+				position: absolute;
+				bottom: calc(100%);
+				transform: scaleY(-1);
+				left: 0;
+				display: block;
+				width: 100%;
+				height: var(--height);
+
+				background-color: var(--bg-colour);
+
+				mask-image: url("../assets/line.svg");
+				mask-size: calc(var(--height) * 5) 100%;
+				mask-repeat: repeat-x;
+			}
+
+			&::after {
+				--height: 0.5rem;
+				content: "";
+				position: absolute;
+				top: calc(100%);
+				left: 0;
+				display: block;
+				width: 100%;
+				height: var(--height);
+
+				background-color: var(--bg-colour);
+
+				mask-image: url("../assets/line.svg");
+				mask-size: calc(var(--height) * 5) 100%;
+				mask-repeat: repeat-x;
+			}
+		}
+
+		.content {
+			padding: calc(var(--padding) * 2) calc(var(--padding) * 2);
 		}
 	}
 </style>

M src/pages/index.astro → src/pages/index.astro

@@ -19,5 +19,29 @@ <p class="subtitle">
 				demifem {"{rat,cat}"}girl frontend developer thing!
 			</p>
 		</header>
+		<section>
+			<header>
+				<h2>gdfgdfgdfgg</h2>
+				<p>gdfgdfgdgdfrtr5dy6j6rsjs6</p>
+			</header>
+			<div class="content">
+				<p>
+					lorem imsul wahdhasidsa hasj hjsahjd hjaskhd jasdjk had ghsgduy asdg
+					yuagyu gayusdg yuasgd yuag
+				</p>
+				<p>
+					lorem imsul wahdhasidsa hasj hjsahjd hjaskhd jasdjk had ghsgduy asdg
+					yuagyu gayusdg yuasgd yuag
+				</p>
+				<p>
+					lorem imsul wahdhasidsa hasj hjsahjd hjaskhd jasdjk had ghsgduy asdg
+					yuagyu gayusdg yuasgd yuag
+				</p>
+				<p>
+					lorem imsul wahdhasidsa hasj hjsahjd hjaskhd jasdjk had ghsgduy asdg
+					yuagyu gayusdg yuasgd yuag
+				</p>
+			</div>
+		</section>
 	</Fragment>
 </Layout>