const layouts = {
default: {
style: (template) => {
return ` * {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.container {
font-family:customFont,Arial,Helvetica,sans-serif;
padding: 40px 20px;
min-width: 600px;
background: ${template.theme.bg_color};
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 5px;
${template.animation.animation};
}
${template.animation.keyframes}
.container h3 {
font-size: 19px;
margin-bottom: 5px;
font-weight: 500;
font-style: oblique;
color: ${template.theme.quote_color};
}
.container h3::before {
content: open-quote;
font-size: 25px;
}
.container h3::after {
content: close-quote;
vertical-align: sub;
font-size: 25px;
}
.container p {
/* float: right; */
/* margin-right: 20px; */
font-style: italic;
padding: 5px;
text-align: right;
color: ${template.theme.author_color};
}`;
},
structure: (template) => {
return `
${
template.author === "Unknown"
? "Anonymous"
: template.author
}
`;
},
},
samuel: {
style: (template) => {
return `.main {
position: relative;
display: inline-block;
margin: 1em;
min-width:600px;
font-family:customFont,Arial,Helvetica,sans-serif;
position: relative;
${template.animation.animation};
}
${template.animation.keyframes}
.quote {
background: ${template.theme.bg_color};
font-size:16px;
}
.quote::before {
content: "";
position: absolute;
top: -6px;
left: -6px;
z-index: -1;
width: calc(100% + 12px);
height: calc(100% + 12px);
background: ${template.theme.author_color};
--border-size: 6px;
clip-path: polygon(0% 0%, 96% 0, 97% var(--border-size), calc(100% - var(--border-size)) var(--border-size), calc(100% - var(--border-size)) 18%, 100% 25%, 100% 100%, 87% 100%, 0 100%, 0 75%, var(--border-size) 82%, var(--border-size) calc(100% - var(--border-size)), 3% calc(100% - var(--border-size)), 4% 100%, 60% 100%, 63% calc(100% - var(--border-size)), calc(100% - var(--border-size)) calc(100% - var(--border-size)), calc(100% - var(--border-size)) 52%, 100% 50%, 100% 14%, 100% 0, 40% 0, 37% var(--border-size), var(--border-size) var(--border-size), var(--border-size) 48%, 0 50%);
}
blockquote {
margin: 0;
font-size:16px;
padding: 1em;
color: ${template.theme.quote_color};
}
cite {
display: block;
font-style: italic;
text-align: right;
color: ${template.theme.author_color};
}
cite::before {
content: "- ";
}
`;
},
structure: (template) => {
return `