Styling tweaks.

This commit is contained in:
David Anson 2015-05-06 09:16:24 -07:00
parent ebcd2de8ed
commit 8aa3ee66e4
3 changed files with 20 additions and 9 deletions

View file

@ -8,10 +8,14 @@ body {
} }
header { header {
font-size: 140%; font-size: 140%;
font-weight: bold;
} }
footer { footer {
font-size: 90%; font-size: 90%;
text-align: right; }
form {
margin-top: auto;
margin-bottom: auto;
} }
textarea { textarea {
padding: 0; padding: 0;
@ -36,11 +40,16 @@ textarea {
} }
.inset { .inset {
box-sizing: border-box; box-sizing: border-box;
padding: 2px; padding: 4px;
}
.inset-side {
box-sizing: border-box;
padding-left: 2px;
padding-right: 2px;
} }
.outlined { .outlined {
border: 1px solid black; border: 1px solid black;
margin: 1px; margin: 2px;
} }
.overflow-auto-scroll { .overflow-auto-scroll {
overflow-x: auto; overflow-x: auto;

View file

@ -8,23 +8,25 @@
<title>markdownlint demo</title> <title>markdownlint demo</title>
</head> </head>
<body> <body>
<div class="flex-rows inset"> <div class="flex-rows">
<div class="flex-columns"> <div class="flex-columns inset">
<header>markdownlint demo</header> <header>markdownlint demo</header>
<div class="flex-fill"></div> <div class="flex-fill"></div>
<form> <form>
<input id="openFile" type="file"/> <input id="openFile" type="file"/>
</form> </form>
</div> </div>
<div class="flex-fill flex-columns"> <div class="flex-fill flex-columns inset-side">
<textarea id="markdown" class="flex-fill outlined" autofocus="autofocus"></textarea> <textarea id="markdown" class="flex-fill outlined" autofocus="autofocus"></textarea>
<div id="markup" class="flex-fill outlined overflow-auto-scroll"></div> <div id="markup" class="flex-fill outlined overflow-auto-scroll"></div>
</div> </div>
<div class="flex-fill flex-columns"> <div class="flex-fill flex-columns inset-side">
<pre id="numbered" class="flex-fill outlined overflow-auto-scroll"></pre> <pre id="numbered" class="flex-fill outlined overflow-auto-scroll"></pre>
<div id="violations" class="flex-fill outlined overflow-auto-scroll"></div> <div id="violations" class="flex-fill outlined overflow-auto-scroll"></div>
</div> </div>
<div> <div class="flex-columns inset">
<footer><a href="https://github.com/DavidAnson/markdownlint">markdownlint project on GitHub</a></footer>
<div class="flex-fill"></div>
<footer>Copyright &copy; 2015 by <a href="//dlaa.me/">David Anson</a></footer> <footer>Copyright &copy; 2015 by <a href="//dlaa.me/">David Anson</a></footer>
</div> </div>
</div> </div>

View file

@ -44,7 +44,7 @@
function replacer(match, p1, p2, p3) { function replacer(match, p1, p2, p3) {
var ruleRef = rulesMd + "#" + p2.toLowerCase() + "---" + var ruleRef = rulesMd + "#" + p2.toLowerCase() + "---" +
p3.toLowerCase().replace(/ /g, "-"); p3.toLowerCase().replace(/ /g, "-");
return "<a href='#" + p1 + "'><em>" + p1 + "</em></a> - " + return "&nbsp;<a href='#" + p1 + "'><em>" + p1 + "</em></a> - " +
"<a href='" + ruleRef + "' target='_blank'>" + p2 + "</a> " + p3; "<a href='" + ruleRef + "' target='_blank'>" + p2 + "</a> " + p3;
}); });
}).join("<br/>"); }).join("<br/>");