Move to Mastodon post #21
@ -116,6 +116,49 @@
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.quote {
|
||||
position: relative;
|
||||
|
||||
margin: 0 0 1.5em;
|
||||
padding: 0 1.5em;
|
||||
min-width: 100%;
|
||||
|
||||
font-style: italic;
|
||||
color: $color-mid-grey;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
|
||||
top: 16px;
|
||||
left: -20px;
|
||||
|
||||
display: block;
|
||||
content: "\201C";
|
||||
font-size: 8rem;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 1em 0;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
font-style: italic;
|
||||
line-height: inherit;
|
||||
|
||||
&:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
cite {
|
||||
font-family: $body-font-family;
|
||||
font-size: 1.8rem;
|
||||
|
||||
&:before {
|
||||
content: "\2014 \2009";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.codeCard {
|
||||
width: 100%;
|
||||
margin: 0.8em 0 2.3em;
|
||||
@ -192,6 +235,10 @@
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
}
|
||||
|
||||
.quote {
|
||||
color: lighten($color-mid-grey, 30%);
|
||||
}
|
||||
|
||||
.codeCardWithCaption,
|
||||
.imageCard {
|
||||
figcaption {
|
||||
@ -231,6 +278,10 @@
|
||||
border-radius: 3px 3px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.quote {
|
||||
padding: 0 1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 1170px) {
|
||||
|
@ -2,6 +2,7 @@ import React, {
|
||||
DetailedHTMLProps,
|
||||
FC,
|
||||
HTMLAttributes,
|
||||
PropsWithChildren,
|
||||
useContext,
|
||||
useEffect,
|
||||
useState,
|
||||
@ -269,6 +270,34 @@ const Bookmark: (props: BookmarkProps) => JSX.Element = ({
|
||||
);
|
||||
};
|
||||
|
||||
interface QuoteProps {
|
||||
url?: string;
|
||||
author?: string;
|
||||
}
|
||||
|
||||
const Quote: (props: PropsWithChildren<QuoteProps>) => JSX.Element = ({
|
||||
url,
|
||||
author,
|
||||
children,
|
||||
}) => {
|
||||
return (
|
||||
<div className={styles.quote}>
|
||||
{children}
|
||||
{author && (
|
||||
<cite className={styles.quoteAuthor}>
|
||||
{url ? (
|
||||
<a href={url} target="_blank" rel="noreferrer">
|
||||
{author}
|
||||
</a>
|
||||
) : (
|
||||
author
|
||||
)}
|
||||
</cite>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
interface HighlightRow {
|
||||
properties: any;
|
||||
type: "text" | "element";
|
||||
@ -444,6 +473,7 @@ export const Render: FC<{
|
||||
h6: createHeading(6),
|
||||
|
||||
Bookmark: Bookmark,
|
||||
Quote: Quote,
|
||||
AnalyticsInformation: AnalyticsInformation,
|
||||
};
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user