Skip to content

Instantly share code, notes, and snippets.

@whatsrtos
Created April 19, 2021 05:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save whatsrtos/e56075ca489d60b114ce61f9e2f8588b to your computer and use it in GitHub Desktop.
Save whatsrtos/e56075ca489d60b114ce61f9e2f8588b to your computer and use it in GitHub Desktop.
Markdown preview theme for Editorial(iOS)
<!DOCTYPE html>
<html>
<!-- Golden Verses: Markdown theme for iOS Editorial app-->
<!-- You can change the look of the Markdown preview by editing the CSS below, for example to match your blog/website or just your personal preferences. Things between double curly braces are template variables that are replaced automatically depending on your editor settings. -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Preview</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-size: {{TEXT_FONT_SIZE}}px;
font-family: "{{TEXT_FONT}}", sans-serif;
line-height: 140%;
overflow: hidden;
}
a {
text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
font-family: "{{H_FONT}}", serif;
font-weight: {{H_FONT_WEIGHT}};
font-style: {{H_FONT_STYLE}};
margin-top: 32px;
margin-bottom: 12px;
}
h1 {
font-size: {{H1_FONT_SIZE}}px;
}
h2 {
font-size: {{H2_FONT_SIZE}}px;
}
h3, h4, h5, h6 {
font-size: {{H3_FONT_SIZE}}px;
}
p {
margin-bottom: 12px;
}
p:last-child {
margin-bottom: 0;
}
/* List style */
ul ul {
position: relative;
}
ul ul::before {
content: "";
border-left: 1px solid Silver;
position: absolute;
}
ul ul::before {
left: -1.2em;
top: -0.6em;
bottom: -0.6em;
}
ul ul{
margin-left:4px;
}
ul ul ul{
margin-left:8px;
}
ul ul ul ul{
margin-left:12px;
}
/* List style */
ol ol {
position: relative;
}
ol ol::before {
content: "";
border-left: 1px solid Silver;
position: absolute;
}
ol ol::before {
left: -2.1em;
top: -0.4em;
bottom: -0.4em;
}
ol ol{
margin-left:4px;
}
ol ol ol{
margin-left:8px;
}
ol ol ol ol{
margin-left:12px;
}
/*
ol {
list-style: outside decimal;
}
ul {
list-style: outside disc;
}*/
li > p {
margin-bottom: 12px;
}
li > ol, li > ul {
margin-top: 12px !important;
padding-left: 12px;
}
ol:last-child, ul:last-child {
margin-bottom: 12px;
}
pre {
white-space: pre-wrap;
margin-bottom: 24px;
overflow: hidden;
padding: 3px;
border-radius: 2px;
border: 0.5px solid;
}
code {
font-family: "{{CODE_FONT}}", monospace;
font-size: 1.0em;
white-space: pre;
word-wrap: break-word;
padding: 2px;
border-radius: 4px;
}
pre code {
font-size: {{CODE_FONT_SIZE}}px;
white-space: pre;
word-wrap: break-word;
}
blockquote {
border-left: 2px solid Silver;
margin-left: 0;
margin-right: auto;
width: 95%;
padding: 0 10px;
}
table {
margin-left: auto;
margin-right: auto;
margin-bottom: 24px;
border-bottom: 1px solid Silver;
border-right: 1px solid Silver;
border-spacing: 0;
}
table th {
padding: 3px 10px;
border-top: 1px solid Silver;
border-left: 1px solid Silver;
}
table td {
padding: 3px 10px;
border-top: 1px solid Silver;
border-left: 1px solid Silver;
}
img {
border: none;
display: block;
margin: 0 auto;
max-width: 100%;
}
hr {
border: 0;
height: 1px;
background-color: Silver;
}
.footnote {
font-size: 0.8em;
vertical-align: super;
}
.footnotes ol {
font-weight: bold;
}
.footnotes ol li p {
font-weight: normal;
}
#content-wrapper {
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
width: 100%;
}
/* Device-specific styles: */
@media only screen and (min-device-width : 768px) {
#content {
width: auto;
padding: 40px;
}
}
@media only screen and (max-device-width : 767px) {
#content {
width: auto;
padding: 12px;
}
}
/* Theme-specific styles */
body.theme-default {
background-color: #fafafa;
color: #333;
}
.theme-default a {
color: #045591;
}
.theme-default pre {
background-color: #f2f2f2;
border-color: #d9d9d9;
}
.theme-default code {
background-color: #f2f2f2;
}
body.theme-dark {
background-color: #262B30;
color: #ccc;
}
.theme-dark a {
color: PaleGoldenRod;
font-style:oblique;
text-decoration: underline;
}
.theme-dark pre {
background-color: #333940;
border-color: #4c565f;
color: PaleGoldenRod;
}
.theme-dark code {
background-color: #333940;
color: PaleGoldenRod;
}
/* Header Style */
.theme-dark h1, .theme-dark h2, .theme-dark h3, .theme-dark h4, .theme-dark h5, .theme-dark h6 {
color: GoldenRod;
border-bottom: 1px solid rgba(255, 194, 102, 0.2);
}
.theme-default h1, .theme-default h2, .theme-default h3, .theme-default h4, .theme-default h5, .theme-default h6 {
color: GoldenRod;
border-bottom: 1px solid rgba(51, 37, 15, 0.2);
}
/* CriticMarkup styles: */
.theme-dark ins {
background-color: rgba(132, 235, 124, 0.2);
color: #86e873;
border-radius: 3px;
text-decoration: none;
}
.theme-dark del.cm {
background-color: rgba(253, 124, 113, 0.2);
color: #ff4043;
border-radius: 3px;
}
.theme-dark span.comment {
color: #56e4ff;
}
.theme-dark span.substitution {
background-color: rgba(255, 136, 0, 0.2);
color: #ffbb00;
border-radius: 3px;
}
.theme-dark mark {
background-color: rgba(182, 108, 251, 0.2);
color: #c680ff;
border-radius: 3px;
}
.theme-default ins {
background-color: rgba(132, 235, 124, 0.2);
color: #4f7a28;
border-radius: 3px;
text-decoration: none;
}
.theme-default del.cm {
background-color: rgba(253, 124, 113, 0.2);
color: #831000;
border-radius: 3px;
}
.theme-default span.comment {
color: #10b3cc;
}
.theme-default span.substitution {
background-color: rgba(255, 136, 0, 0.2);
color: #e66e12;
border-radius: 3px;
}
.theme-default mark {
background-color: rgba(182, 108, 251, 0.2);
color: #5d2b8c;
border-radius: 3px;
}
/* Fountain styles: */
.scene-heading, .transition, .new-act, .end-of-act, .character {
text-transform: uppercase;
}
.transition {
text-align: right;
}
.new-act, .end-of-act {
text-align: center;
}
.character {
margin: 1.3em auto 0;
width: 180px;
}
.dialogue {
margin: 0 auto;
width: 310px;
}
.parenthetical {
margin: 0 auto;
width: 250px;
}
.scene-heading {
margin-top: 2.6em;
font-weight: bold;
position: relative;
padding-right: 40px;
}
.scene-number-left {
float: left;
margin-left: -50px;
}
.scene-number-right {
position: absolute;
right: 0;
top: 0;
}
#script-title {
overflow: hidden;
display: block;
padding-bottom: 2.6em;
margin-bottom: 2.6em;
}
#script-title .title {
text-align: center;
margin: 1.3em 0;
text-decoration: underline;
font-weight: bold;
text-transform: uppercase;
}
#script-title .credit {
text-align: center;
}
#script-title .authors {
text-align: center;
}
#script-title .source {
text-align: center;
padding-top: 1.3em;
}
#script-title .notes {
padding-top: 2.6em;
}
#script-title .notes {
white-space: pre-line !important;shape-rendering
}
.center {
text-align: center !important;
}
.dual-dialogue {
overflow: hidden;
}
.dual-dialogue .dual-dialogue-left,
.dual-dialogue .dual-dialogue-right {
width: 228px;
float: left;
}
.dual-dialogue p {
width: auto;
}
.dual-dialogue .character {
text-align: center;
padding-left: 40px;
}
.dual-dialogue .parenthetical {
padding-left: 40px;
}
p.page-break {
text-align: right;
border-top: 1px solid #ccc;
padding-top: 20px;
margin-top: 20px;
}
</style>
</head>
<body class="{{THEME}}">
<div id="content-wrapper">
<div id="content">
<!-- Important: Don't remove the content placeholder below, or you won't see the document text! -->
{{CONTENT}}
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment