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>
fix-md-font
Aditya Thakral 1 year ago
parent 6f24b266eb
commit 41fdadb229
  1. 68
      components/Bubble.module.css
  2. 15
      components/Bubble.tsx
  3. 2
      pages/about/index.module.css
  4. 5
      public/images/bubble-decoration.svg

@ -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);
}
}

@ -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>
);
}

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

@ -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>

After

Width:  |  Height:  |  Size: 906 B

Loading…
Cancel
Save