Add decoration to the bubble component (#152)

Closes #87

Co-authored-by: l42luo <l42luo@localhost>
Co-authored-by: Linna Luo <linnaluo18@gmail.com>
Reviewed-on: www/www-new#152
Reviewed-by: l42luo <l42luo@localhost>
Co-authored-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>
Co-committed-by: Aditya Thakral <a3thakra@csclub.uwaterloo.ca>

components/Bubble.module.css

@@ -1,7 +1,71 @@
-.bubble {
+.container {
+  position: relative;
   padding: calc(36rem / 16) 0;
+  overflow-x: clip;
+}
+
+.bubble {
+  --border-radius: calc(5000rem / 16);
+
+  display: flex;
+  flex-direction: row;
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 100%;
+  justify-content: center;
+  align-items: flex-start;
 }
 
-.bubble:nth-child(odd) {
+.bar {
+  height: 100%;
+  width: 100%;
+}
+
+.decoration {
+  display: none;
+  width: calc(128rem / 16);
+}
+
+.margin {
+  display: none;
+}
+
+.content {
+  position: relative;
+  z-index: 1;
+}
+
+.container:nth-child(odd) .bar {
   background-color: var(--primary-accent-light);
 }
+
+@media only screen and (min-width: calc(1350rem / 16)) {
+  .container:nth-child(odd) .decoration {
+    display: block;
+    position: absolute;
+  }
+
+  .container:nth-child(4n + 1) .bar {
+    border-top-right-radius: var(--border-radius);
+    border-bottom-right-radius: var(--border-radius);
+    transform: translateX(-12.5vw);
+  }
+
+  .container:nth-child(4n + 1) .decoration {
+    top: calc(-50rem / 16);
+    right: 8vw;
+  }
+
+  .container:nth-child(4n + 3) .bar {
+    border-top-left-radius: var(--border-radius);
+    border-bottom-left-radius: var(--border-radius);
+    transform: translateX(12.5vw);
+  }
+
+  .container:nth-child(4n + 3) .decoration {
+    top: calc(-50rem / 16);
+    left: 8vw;
+    transform: rotateY(180deg);
+  }
+}

components/Bubble.tsx

@@ -1,13 +1,24 @@
 import React from "react";
 
+import { Image } from "@/components/Image";
+
 import { DefaultLayout } from "./DefaultLayout";
 
 import styles from "./Bubble.module.css";
 
 export default function Bubble(props: { children: React.ReactNode }) {
   return (
-    <div className={styles.bubble}>
-      <DefaultLayout>{props.children}</DefaultLayout>
+    <div className={styles.container}>
+      <div className={styles.bubble} aria-hidden>
+        <div className={styles.bar} />
+        <Image
+          className={styles.decoration}
+          src="/images/bubble-decoration.svg"
+        />
+      </div>
+      <div className={styles.content}>
+        <DefaultLayout>{props.children}</DefaultLayout>
+      </div>
     </div>
   );
 }

pages/about/index.module.css

@@ -1,5 +1,5 @@
 .page {
-  margin-bottom: calc(20rem / 16);
+  margin-bottom: calc(60rem / 16);
 }
 
 .title {

public/images/bubble-decoration.svg

@@ -0,0 +1,5 @@
+<svg width="136" height="119" viewBox="0 0 136 119" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M100.633 70.4629L62.6378 89.7796C61.16 90.5309 60.5525 92.3076 61.2489 93.8417C61.9204 95.321 63.5892 96.0941 65.1289 95.6392L106.18 83.5105C110.497 82.2349 112.41 77.2853 110.111 73.3418C108.178 70.027 103.991 68.7553 100.633 70.4629Z" fill="#4ED4B2"/>
+<path d="M69.9891 34.2566L48.8912 70.4297C48.0553 71.8629 48.4831 73.6881 49.8763 74.6322C51.2564 75.5674 53.1323 75.3313 54.2147 74.0862L81.7904 42.3626C84.7415 38.9676 83.7557 33.7673 79.7502 31.6005C76.2877 29.7275 71.9409 30.9103 69.9891 34.2566Z" fill="#4ED4B2"/>
+<path d="M27.5418 21.2602L26.2398 63.2351C26.1879 64.9074 27.4166 66.346 29.075 66.5545C30.7312 66.7628 32.2719 65.6758 32.6325 64.0449L41.6944 23.0529C42.6692 18.6432 39.3768 14.4344 34.8658 14.3238C30.9335 14.2274 27.6639 17.3239 27.5418 21.2602Z" fill="#4ED4B2"/>
+</svg>