@@ -108,6 +108,11 @@ h2 { | |||
margin-top: 5%; | |||
} | |||
h1, h2, h3, h4, h5 { | |||
text-align: left; | |||
line-height: 2em; | |||
} | |||
strong { | |||
font-weight: inherit; | |||
color: #2637dd; | |||
@@ -139,6 +144,7 @@ pre { | |||
font-family: inherit; | |||
line-height: 1.5em; | |||
overflow: hidden; | |||
text-align: left; | |||
} | |||
::selection { | |||
@@ -181,3 +187,191 @@ footer .l1991 .l9:after { | |||
-moz-border-radius-bottomright: 8px; | |||
border-bottom-right-radius: 8px; | |||
} | |||
footer nav { | |||
margin-top: 3%; | |||
border: 4px ridge; | |||
background: #e9e9e9; | |||
width: auto; | |||
display: inline-block; | |||
font-size: 0; | |||
} | |||
footer nav a { | |||
width: 60px; | |||
height: 60px; | |||
padding: 10px; | |||
box-sizing: border-box; | |||
display: inline-block; | |||
background: #e9e9e9; | |||
border: 2px outset; | |||
vertical-align: top; | |||
} | |||
footer nav a:active { | |||
border-style: inset; | |||
} | |||
footer nav a.url { | |||
position: relative; | |||
} | |||
footer nav a.url:after { | |||
content: ""; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
bottom: 0; | |||
margin: auto; | |||
width: 20px; | |||
height: 20px; | |||
background: url("http://www.urlysses.com/img/smile.gif"); | |||
} | |||
.fork { | |||
position: fixed; | |||
top: 0; | |||
right: 0; | |||
z-index: 1; | |||
text-align: center; | |||
text-shadow: 1px 1px 0px #fff; | |||
width: 300px; | |||
height: 30px; | |||
line-height: 30px; | |||
color: #000; | |||
text-decoration: none !important; | |||
background: #e9e9e9; | |||
border: 3px inset #fff; | |||
font-weight: 900; | |||
-webkit-transform: rotate(45deg) translate(30%, -75%); | |||
-moz-transform: rotate(45deg) translate(30%, -75%); | |||
-ms-transform: rotate(45deg) translate(30%, -75%); | |||
transform: rotate(45deg) translate(30%, -75%); | |||
} | |||
/* "browser" */ | |||
.browser { | |||
background: #e9e9e9; | |||
border: solid 1px #000; | |||
box-shadow: 6px 6px 0px #000; | |||
position: relative; | |||
box-sizing: border-box; | |||
color: #000; | |||
margin: 0; | |||
padding: 0; | |||
} | |||
.browser:before { | |||
content: ""; | |||
pointer-events: none; | |||
position: absolute; | |||
border: solid 1px #000; | |||
top: 2px; | |||
left: 2px; | |||
right: 2px; | |||
bottom: 2px; | |||
} | |||
.browser:after { | |||
content: "EXAMPLE FILES"; | |||
position: absolute; | |||
top: 10px; | |||
left: 1%; | |||
right: 1%; | |||
height: 20px; | |||
background: #2637dd; | |||
color: #fff; | |||
line-height: 20px; | |||
text-align: center; | |||
border: solid 1px #000; | |||
box-sizing: border-box; | |||
font-size: 0.5em; | |||
letter-spacing: 1px; | |||
} | |||
.browser .tabs { | |||
position: absolute; | |||
box-sizing: border-box; | |||
border: solid 1px #000; | |||
top: 40px; | |||
left: 1%; | |||
width: 98%; | |||
height: 30px; | |||
display: table; | |||
padding: 0; | |||
margin: 0; | |||
background: none; | |||
} | |||
.browser .tabs div { | |||
color: #aaa; | |||
text-shadow: 1px 1px 0px #fff; | |||
font-size: 0.8em; | |||
line-height: 30px; | |||
display: table-cell; | |||
vertical-align: middle; | |||
border: 3px outset; | |||
box-sizing: border-box; | |||
cursor: pointer; | |||
padding: 0px 10px; | |||
-webkit-user-select: none; | |||
-moz-user-select: none; | |||
-ms-user-select: none; | |||
user-select: none; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
white-space: nowrap; | |||
max-width: 100px; | |||
} | |||
.browser .tabs div:hover { | |||
color: #777; | |||
} | |||
.browser .tabs div:active { | |||
border-style: inset; | |||
} | |||
.browser .tabs div.selected { | |||
color: #000; | |||
} | |||
.browser pre { | |||
background: #fff; | |||
position: relative; | |||
border: solid 1px #000; | |||
box-sizing: border-box; | |||
margin-left: 1%; | |||
margin-top: 90px; | |||
width: 98%; | |||
display: none; | |||
} | |||
.browser pre.selected { | |||
display: block; | |||
} | |||
.browser .keyword-wrapper { | |||
color: #1FAAAA; | |||
} | |||
.browser .keyword { | |||
color: #FF0086; | |||
} | |||
.browser .number { | |||
color: #FD8900; | |||
} | |||
.browser .string { | |||
color: #3777E6; | |||
} | |||
.browser .comment, | |||
.browser .comment * { | |||
color: #989898; | |||
} | |||
.browser *::selection { | |||
background: #dedede; | |||
} | |||
.browser *::-moz-selection { | |||
background: #dedede; | |||
} | |||
/* media queries */ | |||
@media all and (max-width: 600px) { | |||
article { | |||
width: 90%; | |||
margin-left: 5%; | |||
} | |||
.fork { | |||
font-size: 10px; | |||
width: 200px; | |||
height: 20px; | |||
line-height: 20px; | |||
} | |||
} |
@@ -0,0 +1,129 @@ | |||
/*jslint browser: true*/ | |||
(function () { | |||
// Used for giving the page a bit more contrast / interest / edge. | |||
var pretags = Array.prototype.slice.call(document.querySelectorAll("pre")); | |||
function createTab (pre, tabs) { | |||
var lines = pre.innerHTML.split("\n"); | |||
var tabname = lines[0].replace(/\\\s+?/, ""); | |||
pre.innerHTML = lines.slice(1).join("\n"); | |||
pre.setAttribute("data-tab-name", tabname); | |||
var tab = document.createElement("div"); | |||
tab.innerHTML = tabname; | |||
tab.onclick = function () { | |||
var browser = this.parentElement.parentElement; | |||
var selected = browser.querySelectorAll(".selected"); | |||
selected[0].className = selected[1].className = ""; | |||
var file = browser.querySelector("[data-tab-name='" + tabname + "']"); | |||
file.className = this.className = "selected"; | |||
}; | |||
tabs.appendChild(tab); | |||
} | |||
function syntactify (type, content) { | |||
return "<span class='" + type + "'>" + content + "</span>"; | |||
} | |||
function parseForth (pre) { | |||
var content = pre.innerHTML; | |||
// Keywords: | |||
content = content.replace(/( (;|1991:)(\s+?|$))|(\/1991 )|(include )|(s\+|\$type|loop|do)/g, function (match) { | |||
return syntactify("keyword", match); | |||
}).replace(/(\n|>)(: \S+)/g, function (match, p1, p2) { | |||
// Special case of word definitions. | |||
return p1 + syntactify("keyword", p2); | |||
}); | |||
// Strings: | |||
content = content.replace(/s" .*"/g, function (match) { | |||
return syntactify("string", match); | |||
}); | |||
// Numbers: | |||
content = content.replace(/(>|\s+)(\d+)(<|\s+)/g, function (match, p1, p2, p3) { | |||
return p1 + syntactify("number", p2) + p3; | |||
}).replace(/(>|\s+)(\d+)(<|\s+)/g, function (match, p1, p2, p3) { | |||
return p1 + syntactify("number", p2) + p3; | |||
}).replace(/<# #s #>/g, function (match) { | |||
return syntactify("number", match); | |||
}); | |||
// Comments: | |||
content = content.replace(/\\\ .*/g, function (match) { | |||
return syntactify("comment", match); | |||
}).replace(/\( .* \)/g, function (match) { | |||
return syntactify("comment", match); | |||
}); | |||
pre.innerHTML = content; | |||
} | |||
function parseHTML (pre) { | |||
var content = pre.innerHTML; | |||
// Replace html closing brace. | |||
content = content.replace(/>/g, ">"); | |||
// DOCTYPE | |||
content = content.replace(/<!DOCTYPE html>/, function (match) { | |||
return syntactify("comment", match); | |||
}); | |||
// Keyword wrappers | |||
content = content.replace(/\$?(&(lt|gt);(\/|\$)?)/g, function (match) { | |||
return syntactify("keyword-wrapper", match); | |||
}); | |||
// Keywords | |||
content = content.replace(/(>)(html|head|body|code|title)(<)/g, function (match, p1, p2, p3) { | |||
return p1 + syntactify("keyword", p2) + p3; | |||
}).replace(/(>)(meta)( )/g, function (match, p1, p2, p3) { | |||
return p1 + syntactify("keyword", p2) + p3; | |||
}); | |||
pre.innerHTML = content; | |||
} | |||
function parseSyntax (pre) { | |||
var ft = pre.getAttribute("data-tab-name").split(".").slice(-1)[0]; | |||
if (ft === "fs") { | |||
parseForth(pre); | |||
} else if (ft === "html") { | |||
parseHTML(pre); | |||
} | |||
} | |||
function convertToBrowser (div) { | |||
div.className = "browser"; | |||
var tabs = document.createElement("div"); | |||
tabs.className = "tabs"; | |||
Array.prototype.forEach.call(div.children, function (pre) { | |||
createTab(pre, tabs); | |||
parseSyntax(pre); | |||
}); | |||
div.children[0].className = tabs.children[0].className = "selected"; | |||
div.insertBefore(tabs, div.children[0]); | |||
} | |||
function collectPre (siblings) { | |||
var sibling = siblings.slice(-1)[0]; | |||
while (sibling) { | |||
sibling = sibling.nextSibling; | |||
if (sibling && sibling.nodeType === 1) { | |||
if (sibling.nodeName.toLowerCase() !== "pre") { | |||
sibling = null; | |||
} else { | |||
break; | |||
} | |||
} | |||
} | |||
if (sibling) { | |||
sibling.parsed = true; | |||
siblings.push(sibling); | |||
return collectPre(siblings); | |||
} | |||
return siblings; | |||
} | |||
pretags.forEach(function (pre) { | |||
if (!pre.parsed) { | |||
var div = document.createElement("div"); | |||
pre.parentElement.insertBefore(div, pre); | |||
var allPre = collectPre([pre]); | |||
allPre.forEach(function (p) { | |||
div.appendChild(p); | |||
}); | |||
pre.parsed = true; | |||
convertToBrowser(div); | |||
} | |||
}); | |||
}()); |
@@ -186,6 +186,13 @@ It's possible to import view files from within other view files. This is from &l | |||
--><span class="l l9">9</span><!-- | |||
--><span class="l l1">1</span> | |||
</h1> | |||
<br> | |||
<nav> | |||
<a class="gh" href="https://www.github.com/urlysses/1991"><svg width="100%" height="100%" viewBox="0 0 33 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><rect x="0" y="0" width="32.579" height="31.775" style="fill:none;"/><><path d="M16.288,0c-8.995,0 -16.288,7.293 -16.288,16.29c0,7.197 4.667,13.302 11.14,15.457c0.815,0.149 1.112,-0.354 1.112,-0.786c0,-0.386 -0.014,-1.411 -0.022,-2.77c-4.531,0.984 -5.487,-2.184 -5.487,-2.184c-0.741,-1.881 -1.809,-2.382 -1.809,-2.382c-1.479,-1.011 0.112,-0.991 0.112,-0.991c1.635,0.116 2.495,1.679 2.495,1.679c1.453,2.489 3.813,1.77 4.741,1.354c0.148,-1.053 0.568,-1.771 1.034,-2.178c-3.617,-0.411 -7.42,-1.809 -7.42,-8.051c0,-1.778 0.635,-3.232 1.677,-4.371c-0.168,-0.412 -0.727,-2.068 0.159,-4.311c0,0 1.368,-0.438 4.48,1.67c1.299,-0.361 2.693,-0.542 4.078,-0.548c1.383,0.006 2.777,0.187 4.078,0.548c3.11,-2.108 4.475,-1.67 4.475,-1.67c0.889,2.243 0.33,3.899 0.162,4.311c1.044,1.139 1.675,2.593 1.675,4.371c0,6.258 -3.809,7.635 -7.438,8.038c0.585,0.503 1.106,1.497 1.106,3.017c0,2.177 -0.02,3.934 -0.02,4.468c0,0.436 0.293,0.943 1.12,0.784c6.468,-2.159 11.131,-8.26 11.131,-15.455c0,-8.997 -7.294,-16.29 -16.291,-16.29"/></g></svg></a> | |||
<a class="url" href="http://www.urlysses.com"></a> | |||
</nav> | |||
</footer> | |||
<a class="fork" href="https://www.github.com/urlysses/1991">GET THE CODE</a> | |||
<script type="text/javascript" src="1991.js"></script> | |||
</body> | |||
</html> |