trypandoc html: new look, do without bootstrap.

This commit is contained in:
John MacFarlane 2022-08-17 19:58:47 -07:00
parent 6534caf7cb
commit 3e74458143

View file

@ -9,33 +9,43 @@
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]--> <![endif]-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<style> <style>
h1 { margin-bottom: 1em; } body { margin: auto; font-family: sans-serif; font-size: 10pt; color: #555; }
body { margin: auto; } #command { min-width: 26em; background-color: #555; color: #eee; border-radius: 9pt; margin: 6pt; padding: 6pt; }
textarea { height: auto; width: 100%; font-family: monospace; margin-top: 15px; } h1 { margin-bottom: 1em; font-size: 166%; margin: 0; padding: 6pt; }
h1 a { text-decoration: none; color: inherit; }
label { font-weight: 600; }
textarea { height: auto; font-family: monospace; font-size: 10pt; margin-top: 15px; min-height: 65vh; width: 44vw; }
div.alert { margin: 1em; } div.alert { margin: 1em; }
h3 { margin-top: 0; margin-bottom: 0; padding: 0; font-size: 100%; } pre#results { width: 100%; margin-top: 15px; min-height: 65vh; width: 44vw; }
pre#results { width: 100%; margin-top: 15px; }
footer { color: #555; text-align: center; margin: 1em; } footer { color: #555; text-align: center; margin: 1em; }
p.version { color: #555; } p.version { color: #555; }
.container { margin: 12px; }
.row { display: flex; flex-wrap: nowrap; justify-content: space-between; }
#frompane { flex: 1; padding: 1em; }
#topane { flex: 1; padding: 1em; }
#command { font-family: monospace; padding: 1em; }
button#convert { vertical-align: bottom; } button#convert { vertical-align: bottom; }
pre#command { margin-top: 1em; background-color: transparent; border: none; } pre#command { margin-top: 1em; background-color: transparent; border: none; }
</style> </style>
</head> </head>
<body> <body>
<div class="container-fluid"> <div class="container">
<div class="row"> <div class="row">
<div class="col-md-6"> <div id="title">
<h1>Try pandoc!</h1> <h1>Try <a href="https://pandoc.org">pandoc</a>!</h1>
</div> </div>
<div class="col-md-6"> <div id="versioninfo">
<p class="version">v<span id="version"></span></p>
</footer>
</div>
<div id="command">
<pre id="command"></pre> <pre id="command"></pre>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-md-6"> <div id="frompane">
<button class="btn btn-primary btn-xs" id="convert">Convert</button> <button id="convert">Convert</button>
&nbsp; &nbsp;
<label for="from"> <label for="from">
from from
@ -73,7 +83,7 @@
<br/> <br/>
<textarea id="text" maxlength="3000" rows="15"></textarea> <textarea id="text" maxlength="3000" rows="15"></textarea>
</div> </div>
<div class="col-md-6"> <div id="topane">
<label for="to"> <label for="to">
to to
</label> </label>
@ -130,10 +140,6 @@
</div> </div>
</div> </div>
</div> </div>
<footer>
<p class="version">pandoc <span id="version"></span></p>
<p><a href="https://pandoc.org">https://pandoc.org</a></p>
</footer>
<script> <script>
"use strict"; "use strict";