Add decoration to the bubble component
continuous-integration/drone/push Build is passing
Details
continuous-integration/drone/push Build is passing
Details
This commit is contained in:
parent
8b9389885c
commit
ba274c262e
|
@ -1,7 +1,71 @@
|
||||||
.bubble {
|
.container {
|
||||||
|
position: relative;
|
||||||
padding: calc(36rem / 16) 0;
|
padding: calc(36rem / 16) 0;
|
||||||
|
overflow-x: clip;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bubble:nth-child(odd) {
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
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 React from "react";
|
||||||
|
|
||||||
|
import { Image } from "@/components/Image";
|
||||||
|
|
||||||
import { DefaultLayout } from "./DefaultLayout";
|
import { DefaultLayout } from "./DefaultLayout";
|
||||||
|
|
||||||
import styles from "./Bubble.module.css";
|
import styles from "./Bubble.module.css";
|
||||||
|
|
||||||
export default function Bubble(props: { children: React.ReactNode }) {
|
export default function Bubble(props: { children: React.ReactNode }) {
|
||||||
return (
|
return (
|
||||||
<div className={styles.bubble}>
|
<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>
|
<DefaultLayout>{props.children}</DefaultLayout>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -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…
Reference in New Issue