Page MenuHomeDevCentral
Files F3768145

No OneTemporary
Actions

View Options

diff --git a/css/app.css b/css/app.css
index 0ee73c5..226f8b8 100644
--- a/css/app.css
+++ b/css/app.css
@@ -1,283 +1,444 @@
@charset "utf-8";
/* -------------------------------------------------------------
Navigate to Nasqueron
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Author: Dereckson
Tags: Foundation, black, cold, stars, aurora
Filename: app.css
Version: 1.0
Created: 2014-01-08
Modified: 2014-01-09
Licence: Creative Commons BY 3.0
------------------------------------------------------------- */
/* -------------------------------------------------------------
Table of contents
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
:: Main styles
:: Backgrounds
:: Homepage content
:: Smartbar
+ :: Keyboard help
*/
/* -------------------------------------------------------------
Main styles
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
/* -------------------------------------------------------------
Background
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media screen and (max-width: 400px) {
body.deepspace {
background-color: black;
background-image: url(/images/bg/DeepSpace-400.jpg), url(/images/bg/DeepSpace-400-low.jpg);
background-position: bottom left;
background-attachment: fixed;
background-repeat: no-repeat;
background-size: cover;
}
}
@media screen and (min-width: 401px) and (max-width: 720px) {
body.deepspace {
background-color: black;
background-image: url(/images/bg/DeepSpace-720.jpg), url(/images/bg/DeepSpace-720-low.jpg);
background-position: bottom left;
background-attachment: fixed;
background-repeat: no-repeat;
}
}
@media screen and (min-width: 721px) and (max-width: 1280px) {
body.deepspace {
background-color: black;
background-image: url(/images/bg/DeepSpace-1280.jpg), url(/images/bg/DeepSpace-1280-low.jpg);
background-position: bottom left;
background-attachment: fixed;
background-repeat: no-repeat;
}
}
@media screen and (min-width: 1281px) and (max-width: 1440px) {
body.deepspace {
background-color: black;
background-image: url(/images/bg/DeepSpace-1440.jpg), url(/images/bg/DeepSpace-1440-low.jpg);
background-position: bottom left;
background-attachment: fixed;
background-repeat: no-repeat;
}
}
@media screen and (min-width: 1441px) and (max-width: 1920px) {
body.deepspace {
background-color: black;
background-image: url(/images/bg/DeepSpace-1920.jpg), url(/images/bg/DeepSpace-1920-low.jpg);
background-position: bottom left;
background-attachment: fixed;
background-repeat: no-repeat;
}
}
@media screen and (min-width: 1921px) {
body.deepspace {
background-color: black;
background-image: url(/images/bg/DeepSpace-2880.jpg), url(/images/bg/DeepSpace-2880-low.jpg);
background-position: bottom left;
background-attachment: fixed;
background-repeat: no-repeat;
}
}
@media screen and (max-width: 400px) {
body.auroraborealis {
background-image: url("/images/bg/AuroraBorealis-400.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: bottom left;
background-size: cover;
}
}
@media screen and (min-width: 401px) and (max-width: 720px) {
body.auroraborealis {
background-image: url("/images/bg/AuroraBorealis-720.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: bottom left;
}
}
@media screen and (min-width: 721px) and (max-width: 1280px) {
body.auroraborealis {
background-image: url("/images/bg/AuroraBorealis-1280.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: bottom left;
}
}
@media screen and (min-width: 1281px) and (max-width: 1440px) {
body.auroraborealis {
background-image: url("/images/bg/AuroraBorealis-1440.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: bottom left;
}
}
@media screen and (min-width: 1441px) and (max-width: 1920px) {
body.auroraborealis {
background-image: url("/images/bg/AuroraBorealis-1920.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: bottom left;
}
}
@media screen and (min-width: 1921px) {
body.auroraborealis {
background-image: url("/images/bg/AuroraBorealis-2880.jpg");
background-attachment: fixed;
background-repeat: no-repeat;
background-position: bottom left;
}
}
/* -------------------------------------------------------------
Homepage content
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media screen and (max-width: 834px) {
.homepanel {
width: 100%;
background-color: rgba(0, 0, 0, 0.38);
position: fixed;
bottom: 0;
color: white;
padding: 1em 1em;
text-align: center
}
.homepanel h1, .homepanel h2 {
color: white;
}
}
@media screen and (min-width: 835px) {
.homepanel {
background-color: rgba(255, 255, 255, 0.38);
color: white;
width: 746px;
position: fixed;
bottom: 88px;
left: 88px;
padding: 1em 1em;
}
.homepanel h1 {
font-size: 30pt;
color: white;
}
.homepanel h2 {
font-size: 20pt;
color: white;
}
.homepanel p {
font-family: "Open Sans", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
font-size: 16pt;
font-weight: 300;
color: white;
}
}
/* -------------------------------------------------------------
Smartbar
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
@media screen and (max-width: 720px) {
#logo {
margin: 5% auto;
width: 100%;
text-align: center;
}
#line {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
}
}
@media screen and (min-width: 721px) {
#logo {
display: none;
}
#line {
height: 117px;
background-image: url(/images/logo-white.png);
background-repeat: no-repeat;
background-position: top left;
position: fixed;
left: 0;
width: 100%;
}
#smartbar {
background-color: rgba(0, 0, 0, 0.28);
height: 117px;
margin-left: 133px;
}
#smartbar input {
height: 53px;
margin: 0 0 0 0;
}
}
@media screen and (min-width: 721px) and (max-width: 1280px) {
#line {
bottom: 76px;
}
#smartbar {
padding: 30px 2em 0 153px;
}
}
@media screen and (min-width: 1281px) and (max-width: 1440px) {
#line {
bottom: 154px;
}
#smartbar {
padding: 30px 2em 0 394px;
}
}
@media screen and (min-width: 1441px) and (max-width: 1980px) {
#line {
bottom: 250px;
}
#smartbar {
padding: 30px 2em 0 43px;
}
}
@media screen and (min-width: 1981px) {
#line {
bottom: 219px;
}
#smartbar {
padding: 30px 2em 0 43px;
}
}
+
+/* -------------------------------------------------------------
+ Keyboard help
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+
+.help-underlay * {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.help-underlay {
+ position: absolute;
+ background: #555;
+ background: rgba(0,0,0,0.5);
+ visibility: hidden;
+ opacity: 0;
+ -webkit-transition: opacity .2s linear;
+ -moz-transition: opacity .2s linear;
+ -o-transition: opacity .2s linear;
+ transition: opacity .2s linear;
+ left: 0; right: 0; top: 0; bottom: 0;
+}
+
+.ie8 .help-underlay {
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=95)"; /* for IE8 in IE7 mode */
+ filter: alpha(opacity=95); /* for IE8 */
+ visibility: hidden;
+}
+
+.help-modal {
+ position: fixed;
+ z-index: 99999;
+ left: 0; right: 0; top: 0; bottom: 0;
+ width: 80%;
+ margin: auto;
+ background: white;
+ color: #676767;
+ max-height: 80%;
+ overflow: auto;
+ font-family: Arial, sans-serif;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ -webkit-box-shadow: 0 4px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
+ box-shadow: 0 4px 12px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
+ -webkit-transition: width .2s linear;
+ -moz-transition: width .2s linear;
+ -o-transition: width .2s linear;
+ transition: width .2s linear;
+}
+
+ .help-modal-content {
+ padding: 0 20px;
+ }
+
+ .help-close {
+ position: absolute;
+ top: .4em;
+ right: .5em;
+ font-size: 1.8em;
+ cursor: pointer;
+ -webkit-transition: color .2s linear;
+ -moz-transition: color .2s linear;
+ -o-transition: color .2s linear;
+ transition: color .2s linear;
+ }
+
+ .help-close:hover {
+ color: #000;
+ }
+
+.help-modal h1 {
+ text-align: center;
+ margin: .5em;
+ font-size: 1.5em;
+ padding-bottom: .4em;
+ border-bottom: solid 2px #ccc;
+ font-weight: normal;
+}
+
+ .help-modal h1 .help-key {
+ float: none;
+ line-height: 1.5;
+ position: relative;
+ bottom: 4px;
+ }
+
+.help-isVisible {
+ opacity: 1;
+ visibility: visible;
+ height: auto;
+ z-index: 8888;
+}
+
+.ie8 .help-underlay.help-isVisible {
+ visibility: visible;
+}
+
+.help-list-wrap {
+ overflow: hidden;
+ margin: 0 auto;
+ -webkit-transition: width .2s linear;
+ -moz-transition: width .2s linear;
+ -o-transition: width .2s linear;
+ transition: width .2s linear;
+}
+
+.help-list {
+ list-style: none;
+ margin: 0;
+ padding: 0 0 10px 0;
+ overflow: hidden;
+ float: left;
+ width: 280px;
+}
+
+ .help-list li {
+ margin-right: 40px;
+ }
+
+.help-key-unit {
+ line-height: 1.8;
+ margin-right: 2em;
+ padding: 5px 0;
+}
+
+.help-key {
+ min-width: 60px;
+ float: left;
+ clear: left;
+ position: relative;
+ bottom: 2px;
+}
+
+.help-key span {
+ font-size: 15px;
+ color: #555;
+ display: inline-block;
+ padding: 0 8px;
+ text-align: center;
+ background-color: #eee;
+ background-repeat: repeat-x;
+ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#eee));
+ background-image: -webkit-linear-gradient(#f5f5f5 0%, #eee 100%);
+ background-image: -moz-linear-gradient(#f5f5f5 0%, #eee 100%);
+ background-image: -o-linear-gradient(#f5f5f5 0%, #eee 100%);
+ background-image: linear-gradient(#f5f5f5 0%, #eee 100%);
+ border: 1px solid #ccc;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ -webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 0 #ccc;
+ box-shadow: inset 0 1px 0 #fff, 0 1px 0 #ccc;
+}
+
+.help-key-def {
+ display: inline-block;
+ margin-left: 1em;
+}
diff --git a/go.html b/go.html
index bda4ca9..69bf122 100644
--- a/go.html
+++ b/go.html
@@ -1,19 +1,23 @@
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Nasqueron | Navigate to Nasqueron</title>
<link rel="stylesheet" href="/css/foundation.css" />
<link rel="stylesheet" href="/css/app.css" />
<script src="/js/modernizr.js"></script>
</head>
<body class="auroraborealis">
<header id="logo"><img src="/images/logo-white.png" alt="Nasqueron" /></header>
<div id="line">
<div id="smartbar">
<input type="text" id="entry" placeholder="Command line or search">
</div>
</div>
+ <script src="//cdnjs.cloudflare.com/ajax/libs/mousetrap/1.4.6/mousetrap.min.js"></script>
+ <script src="/js/question.mark.min.js"></script>
+ <script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.2/dojo/dojo.js"></script>
+ <script src="/js/app.js"></script>
</body>
</html>
diff --git a/js/app.js b/js/app.js
new file mode 100644
index 0000000..3082e85
--- /dev/null
+++ b/js/app.js
@@ -0,0 +1,46 @@
+/* -------------------------------------------------------------
+ Navigate to Nasqueron
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+ Author: Dereckson
+ Tags: Keyboard navigation
+ Dependencies: Mousetrap, dojo
+ Filename: app.js
+ Version: 1.0
+ Created: 2014-01-10
+ Modified: 2014-01-11
+ Licence: BSD
+ ------------------------------------------------------------- */
+
+/* -------------------------------------------------------------
+ Table of contents
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+ :: Keyboard events
+ */
+
+/* -------------------------------------------------------------
+ Keyboard events
+ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - */
+
+require(["dojo/request/xhr"], function (xhr) {
+ xhr("sites.json",
+ {
+ handleAs: "json"
+ }
+ ).then(
+ function (sites) {
+ for (var i = 0 ; i < sites.length ; i++) {
+ //Press g, <site.shorcutKey> to directly go to this site.
+ (function(site) {
+ Mousetrap.bind('g ' + site.shorcutKey, function() {
+ var url = "//" + site.id + ".nasqueron.org";
+ document.location.href = url;
+ });
+ })(sites[i]);
+ }
+ },
+ function (err) {
+ console.log("Error fetching Nasqueron sites map: ", err);
+ }
+ );
+});
diff --git a/js/question.mark.min.js b/js/question.mark.min.js
new file mode 100644
index 0000000..db76bc4
--- /dev/null
+++ b/js/question.mark.min.js
@@ -0,0 +1 @@
+(function(){"use strict";function e(e){e.className=e.className.replace(/help-isVisible*/g,"");e.className=e.className.trim()}function t(){var e=window,t=document,n=t.documentElement,r=t.getElementsByTagName("body")[0],i=e.innerWidth||n.clientWidth||r.clientWidth;return i}function n(){var e=document;return Math.max(e.body.scrollHeight,e.documentElement.scrollHeight,e.body.offsetHeight,e.documentElement.offsetHeight,e.body.clientHeight,e.documentElement.clientHeight)}function r(e){e.helpColsTotal=0;for(e.i=0;e.i<e.helpLists.length;e.i+=1){if(e.helpLists[e.i].className.indexOf("help-list")!==-1){e.helpColsTotal+=1}e.helpListsHeights[e.i]=e.helpLists[e.i].offsetHeight}e.maxHeight=Math.max.apply(Math,e.helpListsHeights);if(t()<=1180&&t()>630&&e.helpColsTotal>2){e.helpColsTotal=2;e.maxHeight=e.maxHeight*e.helpColsTotal}if(t()<=630){e.maxHeight=e.maxHeight*e.helpColsTotal;e.helpColsTotal=1}e.helpListWrap.style.offsetWidth=e.helpList.offsetWidth*e.helpColsTotal+"px";e.helpListWrap.style.height=e.maxHeight+"px";e.helpModal.style.width=e.helpList.offsetWidth*e.helpColsTotal+60+"px";e.helpModal.style.height=e.maxHeight+100+"px"}function i(e){e=e||window.event;var t=e.keyCode||e.which;return t}function s(){var t=document.getElementById("helpUnderlay"),s=document.getElementById("helpModal"),o=document.getElementById("helpClose"),u=null,a={i:null,maxHeight:null,helpListWrap:document.getElementById("helpListWrap"),helpList:document.querySelector(".help-list"),helpLists:document.querySelectorAll(".help-list"),helpModal:s,helpColsTotal:null,helpListsHeights:[]},f;r(a);document.addEventListener("keypress",function(e){if(i(e)===63){f=document.getElementById("helpUnderlay").className;if(f.indexOf("help-isVisible")===-1){document.getElementById("helpUnderlay").className+=" help-isVisible"}}t.style.height=n()+"px"},false);document.addEventListener("keyup",function(n){if(i(n)===27){e(t)}},false);t.addEventListener("click",function(){e(t)},false);s.addEventListener("click",function(e){e.stopPropagation()},false);o.addEventListener("click",function(){e(t)},false);window.onresize=function(){if(u!==null){clearTimeout(u)}u=setTimeout(function(){r(a)},100)}}function o(){var e=false;if(window.XMLHttpRequest){e=new XMLHttpRequest}return e}function u(e,t){if(!document.getElementById("helpUnderlay")){document.getElementsByTagName("body")[0].innerHTML+=e;t()}}function a(e){if(e.readyState===4){if(e.status===200||e.status===304){var t=e.responseText;u(t,function(){s()})}}}function f(){var e=o();if(e){e.onreadystatechange=function(){a(e)};e.open("GET","question.mark.html",true);e.setRequestHeader("Content-Type","application/x-www-form-urlencoded");e.send(null)}else{document.getElementsByTagName("body")[0].innerHTML+="Error: Your browser does not support Ajax"}}f()})()
\ No newline at end of file
diff --git a/question.mark.html b/question.mark.html
new file mode 100644
index 0000000..87b67c8
--- /dev/null
+++ b/question.mark.html
@@ -0,0 +1,37 @@
+<div id="helpUnderlay" class="help-underlay">
+ <div id="helpModal" class="help-modal">
+ <h1>Keyboard Shortcuts <kbd class="help-key"><span>?</span></kbd></h1>
+ <div id="helpClose" class="help-close">&times;</div>
+ <div id="helpModalContent" class="help-modal-content">
+ <div id="helpListWrap" class="help-list-wrap">
+ <!-- Go to column -->
+ <ul class="help-list">
+ <li class="help-key-unit">
+ <kbd class="help-key"><span>g</span>, <span>b</span></kbd>
+ <span class="help-key-def">Go to Blog</span>
+ </li>
+ <li class="help-key-unit">
+ <kbd class="help-key"><span>g</span>, <span>d</span></kbd>
+ <span class="help-key-def">Go to Databases</span>
+ </li>
+ <li class="help-key-unit">
+ <kbd class="help-key"><span>g</span>, <span>n</span></kbd>
+ <span class="help-key-def">Go to Notes</span>
+ </li>
+ <li class="help-key-unit">
+ <kbd class="help-key"><span>g</span>, <span>p</span></kbd>
+ <span class="help-key-def">Go to Planet</span>
+ </li>
+ <li class="help-key-unit">
+ <kbd class="help-key"><span>g</span>, <span>t</span></kbd>
+ <span class="help-key-def">Go to Tools</span>
+ </li>
+ <li class="help-key-unit">
+ <kbd class="help-key"><span>g</span>, <span>w</span></kbd>
+ <span class="help-key-def">Go to Wiki</span>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+</div>
\ No newline at end of file

File Metadata

Mime Type
text/x-diff
Expires
Mon, Nov 25, 06:48 (1 d, 10 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2259633
Default Alt Text
(18 KB)

Event Timeline

Nasqueron DevCentral · If it had been much bigger the moon would have had a core of ice. · Powered by Phabricator