@okaryo/gatsby-remark-link-card
Version:
Gatsby Remark plugin to embed link card
9 lines (8 loc) • 2.37 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
export var onRenderBody = function (_a) {
var setHeadComponents = _a.setHeadComponents;
var styles = "\n.gatsby-remark-link-card__container {\n border: 1px solid #0000001f;\n border-radius: 8px;\n overflow: hidden;\n transition: 0.4s;\n background: #fff;\n}\n\n.gatsby-remark-link-card__container:hover {\n background: #f3f4f6;\n}\n\n.gatsby-remark-link-card__link {\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: 16.5px;\n line-height: 1.5;\n text-decoration: none;\n}\n\n.gatsby-remark-link-card__main {\n display: flex;\n flex-direction: column;\n height: 128px;\n justify-content: space-between;\n line-height: 1.5;\n padding: 16px;\n width: 100%;\n flex-shrink: 0;\n}\n\n.gatsby-remark-link-card__main:has(+ .gatsby-remark-link-card__thumbnail) {\n width: 60%;\n}\n\n@media (min-width: 768px) {\n .gatsby-remark-link-card__main:has(+ .gatsby-remark-link-card__thumbnail) {\n width: 70%;\n }\n}\n\n.gatsby-remark-link-card__content {}\n\n.gatsby-remark-link-card__title {\n color: #000000dd;\n margin: 0;\n font-size: 16px;\n font-weight: bold;\n -webkit-line-clamp: 2;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n word-break: break-word;\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n}\n\n.gatsby-remark-link-card__description {\n margin-top: 4px;\n color: #77838c;\n font-size: 14px;\n -webkit-line-clamp: 1;\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n}\n\n.gatsby-remark-link-card__meta {\n margin-top: 8px;\n display: flex;\n align-items: center;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n}\n\n.gatsby-remark-link-card__favicon {\n height: 14px !important;\n width: 14px !important;\n margin-right: 6px;\n flex-shrink: 0;\n}\n\n.gatsby-remark-link-card__url {\n font-size: 12px;\n color: #000000dd;\n}\n\n.gatsby-remark-link-card__thumbnail {\n height: 128px;\n}\n\n.gatsby-remark-link-card__image {\n margin: 0 !important;\n height: 100% !important;\n width: 100% !important;\n object-fit: cover;\n}\n";
var id = "gatsby-remark-link-card-style";
var style = (_jsx("style", { id: id, type: "text/css", children: styles }, id));
return setHeadComponents([style]);
};