diff --git a/1991.css b/1991.css index 3a3f085..7a3f39b 100644 --- a/1991.css +++ b/1991.css @@ -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; + } +} diff --git a/1991.js b/1991.js new file mode 100644 index 0000000..731f7ea --- /dev/null +++ b/1991.js @@ -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 "" + content + ""; + } + 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); + } + }); +}()); diff --git a/index.html b/index.html index 9c00ee1..c67170f 100644 --- a/index.html +++ b/index.html @@ -186,6 +186,13 @@ It's possible to import view files from within other view files. This is from &l -->91 +
+ + GET THE CODE +