82 lines
1.8 KiB
TypeScript
82 lines
1.8 KiB
TypeScript
|
import { sanitizeHtml } from './sanitizer'
|
||
|
|
|
||
|
|
export function getTemplateCss(theme: string, fontSize: string) {
|
||
|
|
let background = 'white'
|
||
|
|
let foreground = 'black'
|
||
|
|
let radial = 'lightgray'
|
||
|
|
|
||
|
|
if (theme === 'dark') {
|
||
|
|
background = 'black'
|
||
|
|
foreground = 'white'
|
||
|
|
radial = 'dimgray'
|
||
|
|
}
|
||
|
|
// To use Readex Pro: `font-family: 'Readex Pro', sans-serif;`
|
||
|
|
return `
|
||
|
|
@import url('https://fonts.googleapis.com/css2?family=Major+Mono+Display&family=Readex+Pro:wght@400;700&display=swap');
|
||
|
|
|
||
|
|
body {
|
||
|
|
background: ${background};
|
||
|
|
background-image: radial-gradient(circle at 25px 25px, ${radial} 2%, transparent 0%), radial-gradient(circle at 75px 75px, ${radial} 2%, transparent 0%);
|
||
|
|
background-size: 100px 100px;
|
||
|
|
height: 100vh;
|
||
|
|
font-family: "Readex Pro", sans-serif;
|
||
|
|
}
|
||
|
|
|
||
|
|
code {
|
||
|
|
color: #D400FF;
|
||
|
|
font-family: 'Vera';
|
||
|
|
white-space: pre-wrap;
|
||
|
|
letter-spacing: -5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
code:before, code:after {
|
||
|
|
content: '\`';
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo-wrapper {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
align-content: center;
|
||
|
|
justify-content: center;
|
||
|
|
justify-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.logo {
|
||
|
|
margin: 0 75px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.plus {
|
||
|
|
color: #BBB;
|
||
|
|
font-family: Times New Roman, Verdana;
|
||
|
|
font-size: 100px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.spacer {
|
||
|
|
margin: 150px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.emoji {
|
||
|
|
height: 1em;
|
||
|
|
width: 1em;
|
||
|
|
margin: 0 .05em 0 .1em;
|
||
|
|
vertical-align: -0.1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
.heading {
|
||
|
|
font-family: 'Major Mono Display', monospace;
|
||
|
|
font-size: ${sanitizeHtml(fontSize)};
|
||
|
|
font-style: normal;
|
||
|
|
color: ${foreground};
|
||
|
|
line-height: 1.8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.font-major-mono {
|
||
|
|
font-family: "Major Mono Display", monospace;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text-primary {
|
||
|
|
color: #11b981;
|
||
|
|
}
|
||
|
|
`
|
||
|
|
}
|