mirror of https://github.com/urlysses/1991.git
Mainly finalize the landing page, I guess.
This commit is contained in:
urlysses
parent
609d3e5a5b
commit
98093bd6f2
194
1991.css
194
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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue