Temp Finish (Lesson 01)

00-Lesson-Site/frontend/src/components/Post/Blockquotes/Homework.astro

@@ -0,0 +1,21 @@
+---
+// Path: frontend/src/components/Post/Blockquotes/Homework.astro
+
+import styles from "./Homework.module.scss";
+
+interface Props {
+	toc?: string;
+	tocLevel?: string;
+	imageAlt?: string;
+}
+
+const { toc = "Homework", tocLevel = "1", imageAlt = "MangoPig Homework" } = Astro.props;
+---
+
+<blockquote class={styles.homework} data-toc={toc} data-toc-level={tocLevel}>
+	<slot />
+
+	<picture>
+		<img src="https://pic.mangopig.tech/i/ce28cb80-5190-4fb3-b193-8b082cb326d8.webp" alt={imageAlt} />
+	</picture>
+</blockquote>

00-Lesson-Site/frontend/src/components/Post/Blockquotes/Homework.module.scss

@@ -0,0 +1,41 @@
+/* Path: frontend/src/components/Post/Blockquotes/Homework.module.scss */
+
+.homework {
+    background-color: #a95eff1a;
+    padding: 30px;
+    border-radius: 10px;
+    position: relative;
+    min-height: 100px;
+
+    picture {
+        position: absolute;
+        bottom: -10px;
+        right: -10px;
+
+        margin: 0;
+
+        width: 200px;
+        max-width: 30%;
+
+        transform: rotate(10deg);
+
+        img {
+            width: 100%;
+            height: auto;
+            box-shadow: none;
+        }
+    }
+
+    ul {
+        list-style-type: disc;
+        padding-left: 20px;
+        margin-right: 220px;
+    }
+
+    span {
+        position: absolute;
+        top: 50%;
+        left: 30px;
+        transform: translateY(-50%);
+    }
+}