Move to Mastodon post #21
@ -116,6 +116,49 @@
|
|||||||
line-height: 1.5em;
|
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 {
|
.codeCard {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0.8em 0 2.3em;
|
margin: 0.8em 0 2.3em;
|
||||||
@ -192,6 +235,10 @@
|
|||||||
color: rgba(255, 255, 255, 0.75);
|
color: rgba(255, 255, 255, 0.75);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.quote {
|
||||||
|
color: lighten($color-mid-grey, 30%);
|
||||||
|
}
|
||||||
|
|
||||||
.codeCardWithCaption,
|
.codeCardWithCaption,
|
||||||
.imageCard {
|
.imageCard {
|
||||||
figcaption {
|
figcaption {
|
||||||
@ -231,6 +278,10 @@
|
|||||||
border-radius: 3px 3px 0 0;
|
border-radius: 3px 3px 0 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.quote {
|
||||||
|
padding: 0 1.3em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 1170px) {
|
@media (max-width: 1170px) {
|
||||||
|
@ -2,6 +2,7 @@ import React, {
|
|||||||
DetailedHTMLProps,
|
DetailedHTMLProps,
|
||||||
FC,
|
FC,
|
||||||
HTMLAttributes,
|
HTMLAttributes,
|
||||||
|
PropsWithChildren,
|
||||||
useContext,
|
useContext,
|
||||||
useEffect,
|
useEffect,
|
||||||
useState,
|
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 {
|
interface HighlightRow {
|
||||||
properties: any;
|
properties: any;
|
||||||
type: "text" | "element";
|
type: "text" | "element";
|
||||||
@ -444,6 +473,7 @@ export const Render: FC<{
|
|||||||
h6: createHeading(6),
|
h6: createHeading(6),
|
||||||
|
|
||||||
Bookmark: Bookmark,
|
Bookmark: Bookmark,
|
||||||
|
Quote: Quote,
|
||||||
AnalyticsInformation: AnalyticsInformation,
|
AnalyticsInformation: AnalyticsInformation,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user