Add quotation marks
This commit is contained in:
parent
2244dd5995
commit
a18e87f5bc
|
@ -5,6 +5,7 @@
|
||||||
gap: calc(8rem / 16);
|
gap: calc(8rem / 16);
|
||||||
|
|
||||||
width: calc(600rem / 16);
|
width: calc(600rem / 16);
|
||||||
|
min-height: calc(100rem / 16);
|
||||||
}
|
}
|
||||||
|
|
||||||
.carouselButton {
|
.carouselButton {
|
||||||
|
@ -30,11 +31,15 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.card {
|
.card {
|
||||||
min-height: calc(100rem / 16);
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: stretch;
|
||||||
|
|
||||||
|
min-height: inherit;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: calc(30rem / 16);
|
padding: calc(30rem / 16);
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
background-color: var(--primary-accent);
|
background-color: var(--primary-accent);
|
||||||
border: calc(2rem / 16) solid var(--primary-accent-lighter);
|
border: calc(2rem / 16) solid var(--primary-accent-lighter);
|
||||||
|
@ -44,3 +49,26 @@
|
||||||
.card:not(.active) {
|
.card:not(.active) {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.card p {
|
||||||
|
margin: 0 calc(16rem / 16);
|
||||||
|
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.quotationMark {
|
||||||
|
display: flex;
|
||||||
|
justify-content: start;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
height: calc(50rem / 16);
|
||||||
|
|
||||||
|
font-size: calc(50rem / 16);
|
||||||
|
font-weight: bold;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right.quotationMark {
|
||||||
|
justify-content: end;
|
||||||
|
align-items: end;
|
||||||
|
}
|
||||||
|
|
|
@ -46,7 +46,14 @@ export function QuotationCarousel(props: QuotationCarouselProps) {
|
||||||
function QuotationCard({ quote, isActive }: QuotationCardProps) {
|
function QuotationCard({ quote, isActive }: QuotationCardProps) {
|
||||||
const className = isActive ? `${styles.active} ${styles.card}` : styles.card;
|
const className = isActive ? `${styles.active} ${styles.card}` : styles.card;
|
||||||
|
|
||||||
return <div className={className}>{quote}</div>;
|
return (
|
||||||
|
<div className={className}>
|
||||||
|
{/* TODO: improve quotation mark alignment - maybe use images? */}
|
||||||
|
<div className={styles.quotationMark}>“</div>
|
||||||
|
<p>{quote}</p>
|
||||||
|
<div className={`${styles.right} ${styles.quotationMark}`}>”</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
function CarouselButton({ isPrevious, onClick }: CarouselButtonProps) {
|
function CarouselButton({ isPrevious, onClick }: CarouselButtonProps) {
|
||||||
|
|
Loading…
Reference in New Issue