Skip to content

Instantly share code, notes, and snippets.

@Ephellon
Last active February 4, 2016 04:13
Show Gist options
  • Save Ephellon/8b78258a8184c47a6460 to your computer and use it in GitHub Desktop.
Save Ephellon/8b78258a8184c47a6460 to your computer and use it in GitHub Desktop.
Blush

Blush

This was an apprx. emulator of the Windows 10 OS, but now I'm trying to make it as detailed as possible, while giving it a little personalization: including Aero, notifications, and other options. I also want to include a way to make apps for the OS emu., such as a browser (iframe) and other tools, like a MS-DOS emu. (which I also know btw).

A Pen by Mink CBOS - Ephellon Dantzler on CodePen.

License.

<!--
Note: If you want to edit Blush, first change the nm comment "no console mode" to "console mode", then copy|paste the code in another pen
Blush Pink: hotpink, rgb(255, 105, 180), #ff69b4
-->
<iframe id=blush-background class="fixed-to-top" src="//codepen.io/Ephellon/debug/yNmeLJ" sandbox="allow-scripts"></iframe>
<body class="background=black random:background fill--axis :1500ms">
<div id=cbos-toast-element class="fixed-to-top" segoe></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://codepen.io/Ephellon/pen/ByPOee.js"></script>
<script>
setUpdate(true, 1000);
followMe = "//twitter.com/minkcbos";
sayings = ['starting', 'gathering armies, on Clash of Clans &trade;', 'reading', 'eating TexMex', 'playing chess', 'playing Anrgy Birds &trade;', 'watching movies', 'downloading tacos', 'firing co-workers', 'baking cakes', 'being 100% cool', '#awesome', 'procrastinating', 'listening to music', 'liking posts', 'saving the world', 'getting up from a nap', 'grabbing a snack', 'sober driving', 'going to the gym', 'e-mailing the boss about that report', 'binge watching with the bae', 'calling "mom"', 'slowly backing away...', '... not even sure', 'finding the answer to life', 'promoting that new ad', 'dancing', 'finding &radic;2', 'finding (2<sup>74,207,281</sup>) -1'];
saying = sayings[Math.floor(Math.random() * sayings.length)];
greetings = ['Hello', 'Welcome', '\'Sup', 'How are you', 'Good day', 'Hi', 'Welcome back', 'Hello Gov\'ner', 'Pedestrian Xing ahead', 'Can I get a "whoot whoot"'];
greeting = greetings[Math.floor(Math.random() * greetings.length)];
suggestions = ['is', 'suggests', 'can help with', 'is thinking about', 'can\'t stop', 'saw you'];
suggestion = suggestions[Math.floor(Math.random() * suggestions.length)];
unv = [
'material-icons paper:flatten background=update-darker background:update-lighter color:update-lighter! border border=update-lighter! open- type-button',
'shrc material-icons paper-like paper:raise background=matte:off-black color=pastel:pink background:black color:hot-pink open- rounded-edges',
'allow-scripts allow-pointer-lock allow-same-origin allow-popups allow-forms',
'https://codepen.io/Ephellon/debug/qdzebY?url='
];
</script>
<node-mode class="background=inherit color=inherit fill--axis">
[- no console mode -]
%..cbos-start-up-animation ?no-display >
%h2..page text-center background=transparent color=white no-border text-to-none fill-x-axis >
=..color=hot-pink >Blush=/ %{suggestion}% %{saying}%
/h2/
@get cbos-loading-animation;
/div/
%..cbos-login-menu ?display no-display>
%h1..page text-center background=transparent color=black no-border text-to-none float-left material-icons -- style="font-size:400px" >
account_box
/h2/
%h2..page text-center background=transparent color=white no-border text-to-none float-left welcome >
%{greeting}%
/h2/
@get cbos-loading-animation;
/div/
%..cbos-home-screen fill--axis no-display >
%..cbos-task-bar page paper-like background=update color=update-lighter! text-to-none close- fill-x-axis fixed-to-top no-display opacity=3 opacity:10 :500ms .apply-:* $no-display: >
Blush+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Search &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; mini %..time ?no-display > /div/
%..fill--axis material-icons >
=..%{unv[0]}% stock -- id=blush title="Blush+" onclick="window.open(window.location + ( (/\\?/.test(window.location + '') )?'':'?') + 'full=true', '_blank', 'menu=no, status=no, titlebar=no, resizeable=no, top=250, left=500, width=400, height=400'); document.body.innerHTML='Close me: f11 | Ctrl+W'; document.body.setAttribute('style', 'color:#000;background:#fff;');">
panorama_horizontal =/
=..%{unv[0]}% stock -- id=search title="Search the inter-webs" onclick="Ask(frameBrowse,common.search);">
search =/
=..%{unv[0]}% stock :1500ms -- id=tasks title="Minimize" onclick="Background()">
call_received =/
/div/
/div/
[- OT under -]
%..cbos-desktop page background=transparent color=transparent no-border fill--axis open- no-display :1000ms .apply-:* >
%..page background=transparent color=transparent no-border fill-x-axis > /div/
=..%{unv[1]}% -- onclick="Toast('- Blush browser -'); App('browser', 'Blush Browser', 'chevron_left menu chevron_right star_border space_bar', 'back,menu,forward,favorite,URL', 'history.back();;return;;history.forward();;return;;Ask(frameBrowse,common.url)');" >
language =/
=..%{unv[1]}% -- onclick="Toast('- Gallery -'); App('gallery', 'Gallery', 'web', 'cabrera/debug/KFaJs', 'return');" >
collections =/
=..%{unv[1]}% -- onclick="Toast('- iHeart -'); App('radio', 'iHeart', 'web search', 'Powered by iHeart,Search iHeart', 'return;;active.src=`https://iheart.com/search/?q=` + prompt(`Search iHeart?`, ``)')" >
library_music =/
=..%{unv[1]}% -- onclick="popOut('https://youtube.com', true, true)" >
video_library =/
=..%{unv[1]}% -- onclick="popOut('https://netflix.com', true, true)" >
movie =/
=..%{unv[1]}% -- onclick="Toast('- Games -'); App('games', 'Games', 'chevron_left', 'back to games', 'history.back()');" >
gamepad =/
%br/
=..%{unv[1]}% -- onclick="Alert('app not found');" >
settings_applications =/
=..%{unv[1]}% -- onclick="Toast('- TextNow -'); App('textnow', 'TextNow', 'message account_circle stay_current_portrait system_update_alt help exit_to_app', 'Conversations,Account,Phones & Plans,Downloads,Support,Sign Out', 'active.src=`https://textnow.com/messaging`;;active.src=`https://textnow.com/account`;;active.src=`https://textnow.com/wireless`;;active.src=`https://textnow.com/downloads`;;Poke(`This is a web-app of TextNow`);popOut(`https://supportwireless.textnow.com/access/login`);;active.src=`https://textnow.com/logout`')" >
textsms =/
=..%{unv[1]}% -- onclick="popOut('https://codepen.io');" >
developer_board =/
=..%{unv[1]}% -- onclick="App('relax', 'le Flame', 'web', 'ykob/debug/ZbGdKv', 'return')" >
whatshot =/
=..%{unv[1]}% -- onclick="Toast('- Like Blush -'); App('blush', 'Blush', 'share', 'Follow Ephellon', 'window.open(followMe)');" >
favorite =/
=..%{unv[1]}% -- onclick="popOut('https://www.youtube.com/embed/H86Ts5-vwEk')" >
new_releases =/
/div/
/div/
[- Generated Style -]
[- Applications -]
%app app-browser >
%iframe app-browser class="page paper-like fullscreen" $="https://bing.com" target="_top" sandbox="%{unv[2]}%" oncontextmenu="return false;" > /iframe/
/app/
%app app-gallery >
%iframe app-gallery class="page paper-like fullscreen" $="https://codepen.io/cabrera/debug/KFaJs" target="_top" sandbox="%{unv[2]}%" oncontextmenu="return false;" > /iframe/
/app/
%app app-radio >
%iframe app-radio class="page paper-like fullscreen" $="https://iheart.com" target="_top" sandbox="%{unv[2]}%" oncontextmenu="return false;" > /iframe/
/app/
%app app-games >
%iframe app-games class="page paper-like fullscreen" $="https://codepen.io/Ephellon/debug/QbejBe" sandbox="%{unv[2]}%" > /iframe/
/app/
%app app-relax >
%iframe ap-relax class="page paper-like fullscreen" $="https://codepen.io/Ephellon/debug/YyyrpY" sandbox="%{unv[2]}%" > /iframe/
/app/
%app app-textnow >
%iframe app-textnow class="page paper-like fullscreen" $="https://textnow.com/messaging" sandbox="%{unv[2]}%" > /iframe/
/app/
[- Universal Scripts -]
@set cbos-loading-animation {%..cbos-loading-dots -- >@for i loop(5x) %span class="super-paper"> /span/ @end i /div>};
--!--
</node-mode>
<app app-blush id=about class="no-display">
<div class="page paper-like text-to-none .apply-text-transform background=black color=white fill--axis segoe"><br/>
<div class="background=transparent .background">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/200597/Blush.png" class="page background=transparent fill-no-axis close-">
<h1 class="page color=hot-pink">- Blush -</h1>
<h2>
About <span class="color=hot-pink">Blush</span>
</h2>
<h4>
<span class="color=hot-pink">Blush</span>, is an open-source, HTML5, OS-type web page.<br>
<span class="color=hot-pink">Blush</span> is free-to-use, (unless told otherwise) and meant to be edited to your heart's content.<br>
<span class="color=hot-pink">Blush</span> uses <a href="//codepen.io/Ephellon/pen/ByPOee">KolorPill</a>, <a href="//codepen.io/Ephellon/pen/YXWqdz">node-mode 4.0.Baysx</a>, misc. plugins, links to <a href="//codepen.io/cabrera">cabera</a>, <a href="//codepen.io/nauzilus">nauzilus</a>, <a href="//codepen.io/matthewwilliams">matthewwilliams</a>, <a href="//codepen.io/ykob">ykob</a>, Bing, iHeart, YouTube, YQL, and Google/Polymer "Material Design" project.<br>
</h4>
</div>
</div>
</app>
<script src="https://codepen.io/Ephellon/pen/YXWqdz.js"></script>
</body>
var nm;
nm = nm || { // nm
get: {
form: {
data: function() {
var x = 0;
var l = window.location.search + "";
if (/\?/.test(l) === !1) return !1;
l = l
.replace("?", "")
.replace(/\\("|')/g, "\\\\\\$1")
.replace(/[^\\]("|')/g, "\\$1");
if (!l || "" === l) return !1;
var a = encodeURI(l)
.replace(/=/g, '":"').split("&");
var R = '{"';
for (;x < a.length - 1;) {
R += a[x] + '","';
x++;
}
R += a[x] + '"}';
R = (R + "")
.replace(",\n", ",");
R = JSON.parse(decodeURI(R));
return R;
}
}
},
storage: {
set: function() {
for (var e = 0, t = false; e < arguments.length;) {
if ("undefined" != typeof Storage) {
localStorage.setItem(arguments[e], arguments[e + 1]);
e += 2;
t = true;
}
e += 2;
}
return t;
},
check: function(e) {
return !!tux.storage.get(e);
},
get: function(e) {
return localStorage.getItem(e);
},
"delete": function(e) {
localStorage.setItem(e, null);
return !tux.storage.check(e);
}
},
attr: function(e, t, a) {
if (e) if (!a) return e.getAttribute(t); else return "!" != a ? e.setAttribute(t, a) : e.getAttribute(t);
},
id: function(e, t, a) {
if ("!" != e && e) {
var g = document.getElementById(e) || document.getElementById(e + " ");
if (a) return tux.attr(g, t, a);
if (t) if ("$html" != t) g.innerHTML = t; else return g.innerHTML;
return g;
}
},
"class": function(e, t, a, r) {
if ("!" != e && e) {
var g = document.getElementsByClassName(e);
if (!r) {
if (a) if ("$html" != a) g[t].innerHTML = a; else return g[t].innerHTML;
return g;
} else tux.attr(g[t], a, r);
}
},
tag: function(e, t, a, r) {
if ("!" != e && e) {
var g = document.getElementsByTagName(e);
if (!r) {
if (a) if ("$html" != a) g[t].innerHTML = a; else return g[t].innerHTML;
return g;
} else tux.attr(g[t], a, r);
}
},
ele: function(e, t, a, r) {
if ("!" != e && e) {
var g = document.querySelectorAll(e);
if (g.length < 2) t = 0;
if (!r) {
if (a) if ("$html" != a) g[t].innerHTML = a; else return g[t].innerHTML;
return g;
} else tux.attr(g[t], a, r);
}
},
save: function(e, t) {
var k = window.location.pathname + "";
t = t || k.substring(k.lastIndexOf("/") + 1, k.length) + ".cache";
tux.storage.set(t, e);
return tux.storage.check(t);
},
load: function(e, a) {
a = a || !1;
e = a ? encodeURI(e) : e;
var k = window.location.pathname + "";
e = e || k.substring(k.lastIndexOf("/") + 1, k.length) + ".cache";
return tux.storage.get(e);
},
"delete": function(e) {
var k = window.location.pathname + "";
e = e || k.substring(k.lastIndexOf("/") + 1, k.length) + ".cache";
var g = tux.storage.delete(name);
return g;
},
"typeof": function(e) {
var n = "";
switch(typeof e) {
case typeof Boolean():
n = "";
break;
case typeof Function():
n = "";
break;
case typeof Number():
n = "";
break;
case typeof Object():
switch(e.constructor) {
case RegExp:
n = "";
break;
case Array:
n = "[]";
break;
default:
n = "{}";
break;
}
break;
case typeof String():
n = "\"\"";
break;
case typeof Symbol():
n = ["(@@", ")"];
e = e.toString();
break;
case typeof null:
n = "";
break;
case typeof undefined:
n = "";
break;
}
return (n[0] || "") + e + (n[1] || "");
}
};
if(history.length > 1) {
// window.open(window.location);
// window.close();
}
if( nm.get.form.data().full == 'true' ) {
fullscreen();
KP.Qy('#blush').map.setAttribute('onclick', "Alert('already in Blush+')");
}
var home, toast, ___, common, types, active, background, blush;
home = KP.Qy('.cbos-desktop').map.innerHTML;
toast = KP.Qy('#cbos-toast-element').map;
background = [];
common = {
url: 'URL: ',
text: 'Input: ',
username: 'Username: ',
passowrd: 'Password: ',
no: 'Number: ',
search: 'Search: '
}
types = {
url: 'text',
text: 'text',
username: 'text',
password: 'password',
no: 'tel',
search: 'text'
}
setTimeout(function(){
Toast('Blush will try ' + saying);
KP.Qy('node-mode').$('.$no-display $display');
setTimeout(function(){
Toast('f11 for fullscreen');
KP.Qy('body').$('$random:background>ready');
KP.Qy('node-mode').$(':$display');
KP.Qy('.cbos-home-screen,.cbos-task-bar,.cbos-desktop').$('$no-display>display');
}, 5000 + (Math.random() * 3000));
}, 10000 + (Math.random() * 5000));
function Toast(m, t, c, e) {
t = t || 5000;
c = c || 'white';
w = toast.getAttribute('time') || 0;
if(m != '!') {
if(toast.getAttribute('busy') != '!') {
toast.setAttribute('class', 'page paper-like open- fill-x-axis fixed-to-top text-to-none text-center opacity=10 opacity:5 :700ms background=' + c);
toast.setAttribute('style', 'z-index:18');
toast.innerHTML = '' + m;
toast.setAttribute('busy', '!');
toast.setAttribute('time', t);
} else {
//setTimeout(function(){
Toast("!", 0);
Toast(m, t, c, e);
//}, w + 1505);
}
} else {
clearTimeout(window.toast_time);
toast.setAttribute('class', 'opacity=0 :700ms');
toast.innerHTML = '';
toast.setAttribute('busy', 'false');
toast.setAttribute('time', '0');
}
if(!e){
window.toast_time = setTimeout(function(){
toast.setAttribute('class', 'page paper-like open- fill-x-axis fixed-to-top opacity=0 :700ms');
toast.innerHTML = '';
toast.setAttribute('busy', 'false');
}, t);
} else {
r = document.createElement('input');
o = document.createElement('input');
g = document.createElement('input');
if(typeof e == 'function') {
e = e.name;
}
r.setAttribute('id', 'cbos-toast-input');
r.setAttribute('type', types[common['"' + m.split(' - ')[1] + '"']] || 'text');
r.setAttribute('class', 'page paper-like background=black color=hot-pink no-border text-to-none segoe');
o.setAttribute('value', 'go');
o.setAttribute('class', 'page paper-like background=black color=hot-pink segoe');
o.setAttribute('type', 'button');
o.setAttribute('onclick', e + '(KP.Qy("#cbos-toast-input").map.value); Toast("!", 0);');
g.setAttribute('value', 'X');
g.setAttribute('class', 'page paper-like background=red color=white segoe');
g.setAttribute('type', 'button');
g.setAttribute('onclick', 'Toast("!", 0); return false;');
toast.appendChild(r);
toast.appendChild(o);
toast.appendChild(g);
}
return true;
}
function Notify(m, t, i, c, x) {
if(!m){return}
t = t || 'An app says';
Toast('<span class="material-icons">' + i + '</span> ' + t + ' - ' + m, 7000, c, x);
}
function Alert(m) {
Notify(m, 'Oops', 'error', 'pastel:red');
}
function Poke(m) {
Notify(m, 'Psst', 'warning', 'gold');
}
function OK(m) {
Notify(m, 'OK', 'done', 'pastel:green');
}
function Ask(f, m) {
m = m || 'Input needed: ';
Notify(m, ' ', 'mode_edit', 'update-darker opacity:7 color=update!', f);
}
function App(n, t, p, f, c) { // name, title, params, function | name, title, titles, actions, cbos-task-bar buttons
___ = KP.Qy('.cbos-desktop').map;
tb = KP.Qy('.cbos-task-bar div').map[1];
if(!!n && f != 'close') {
app = {
build: KP.Qy('app[app-'+n+']').map,
name: (t || n),
process: n,
arguments: p,
actions: f,
buttons: c
};
El = document.createElement('span');
El.setAttribute('class', unv[0] + ' button-' + app.process);
El.setAttribute('title', 'Pop-out ' + app.name);
El.setAttribute('onclick', 'popOut(active.src)');
El.appendChild(document.createTextNode("launch"));
el = document.createElement('span');
el.setAttribute('class', unv[0] + ' button-' + app.process);
el.setAttribute('title', 'Close ' + app.name);
el.setAttribute('args', app.arguments);
el.setAttribute('onclick', 'App("' + app.process + '","' + app.name + '","' + app.arguments + '","close");');
el.appendChild(document.createTextNode("clear"));
tb.appendChild(El);
tb.appendChild(el);
___.innerHTML = app.build.innerHTML;
active = ___.querySelector('iframe');
active.setAttribute('src', active.getAttribute('$'));
KP.Qy('.button-' + app.process).$('active');
} else {
KP.Qy('.button-' + app.process).$('$active>no-display');
___.innerHTML = home;
Toast("- Blush Home - ");
app = {};
//tb.removeChild(tb.childNodes[x]);
}
if(!!c) {
q = c.replace(/`/g, '\'').split(';;'); // actions: close();;remove()
e = f.split(','); // titles: close,remove
w = p.split(' '); // buttons: clear backspace
for(var x = 0; x < q.length; x++) {
KP.Qy('.cbos-task-bar').map.innerHTML += '<span class="button-' + app.process + ' ' + unv[0] + '" title="' + app.name + ' - ' + e[x] + '" onclick="' + q[x] + '">' + w[x] + '</span>';
}
} else {
___.setAttribute('params', p);
}
}
KP.update(function(){
date = new Date();
switch(date.getDay()) {
case 0:
day = 'Sun'
break;
case 1:
day = 'Mon'
break;
case 2:
day = 'Tue'
break;
case 3:
day = 'Wed'
break;
case 4:
day = 'Thur'
break;
case 5:
day = 'Fri'
break;
case 6:
day = 'Sat'
break;
}
switch(date.getMonth()) {
case 0:
mon = 'Jan';
break;
case 1:
mon = 'Feb';
break;
case 2:
mon = 'Mar';
break;
case 3:
mon = 'Apr';
break;
case 4:
mon = 'May';
break;
case 5:
mon = 'June';
break;
case 6:
mon = 'July';
break;
case 7:
mon = 'Aug';
break;
case 8:
mon = 'Sept';
break;
case 9:
mon = 'Oct';
break;
case 10:
mon = 'Nov';
break;
case 11:
mon = 'Dec';
break;
}
_day = date.getDate();
year = date.getFullYear();
KP.Qy('.time').map.innerHTML = 'Now: ' + day + ' ' + mon + ' ' + _day + ', ' + year + ' - ' + KP.time.return(12);
}, 1000);
function frameBrowse(url, n){
active.setAttribute('src', '//codepen.io/Ephellon/debug/qdzebY?url=' + url);
}
function Background(){
if(background[0] != 1){
background[1] = active;
background[2] = app;
location.hash = app.process;
___.innerHTML = home;
KP.Qy(".button-" + app.process).$(".no-display");
Toast("- " + app.name + " minified -", 3000);
KP.Qy('#tasks').$('.rotate-180').map.setAttribute('title', 'Open ' + app.name);
background[0] = 1;
} else {
App();
app = background[2];
location.hash = '';
App(app.process, app.name, app.arguments, app.actions, app.buttons);
KP.Qy('#tasks').$(':rotate-180').map.setAttribute('title', 'Minimize');
background[0] = 0;
Toast("- " + app.name + " -", 3000);
}
}
function popOut(x, w, h) {
t = !(!!h);
l = !(!!w);
w = (w == true)?screen.availWidth:parseInt(screen.availWidth/2.6);
h = (h == true)?screen.availHeight:parseInt(screen.availHeight/2.6);
t = (t == true)?parseInt(h/2):0;
l = (l == true)?parseInt(w/2):0;
window.open(x || active.src, "_blank", "menu=no, status=no, titlebar=no, resizeable=no, top=" + t + ", left=" + l + ", width=" + w + ", height=" + h);
}
function fullscreen() {
var el = document.body;
// Supports most browsers and their versions.
var requestMethod = el.requestFullScreen || el.webkitRequestFullScreen
|| el.mozRequestFullScreen || el.msRequestFullScreen;
if (requestMethod) {
// Native full screen.
requestMethod.call(el);
} else if (typeof window.ActiveXObject !== "undefined") {
// Older IE.
var wscript = new ActiveXObject("WScript.Shell");
if (wscript !== null) {
wscript.SendKeys("{F11}");
}
}
}
blush = {
toast: Toast,
alert: Alert,
poke: Poke,
ok: OK,
notify: Notify,
ask: Ask
};
@import url('//codepen.io/Ephellon/pen/yNdZzR.css');
@import url('//codepen.io/Ephellon/pen/YXWqdz.css');
@import url('//codepen.io/Ephellon/pen/ByPOee.css');
@import url('//fonts.googleapis.com/css?family=Lato:100');
@font-face {
src: url('//c.s-microsoft.com/static/fonts/segoe-ui/west-european/light/Segoe UI Light.ttf');
font-family: Segoe UI Light;
}
html, body {
width: 100vw;
height: 100vh;
z-index: 9;
overflow: hidden;
}
#blush-background {
display: inline;
width: 100vw;
height: 100vh;
z-index: 0;
}
body, *, .segoe {
font-family: Segoe UI Light, Lato, Calibri, Helvetica, Arial, Sans, monospace;
}
a {
color: inherit;
}
sup {
font-size: 65%;
vertical-align: super;
}
.cbos-task-bar {
cursor: pointer;
padding-top: 0;
top: -2vh;
font-size: intial;
}
.type-button.active {
font-size: 12px;
}
.shrc {
cursor: pointer;
background: linear-gradient(0deg, rgba(78,81,80,0.3) 0%, #ddd 100%);
}
.shrc:hover {
background: linear-gradient(0deg, rgba(0,0,0,0.3) 0%, #000 100%);
}
.cbos-task-bar:hover {
top: 0;
}
.cbos-task-bar, .fill--axis, .fullscreen {
width: 100vw;
}
.fullscreen {
width: 97.55859375vw;
height: 92.1875vh;
top: 0;
overflow: scroll;
}
app {
display: none;
}
.type-button:not(.stock) {
margin-right: 1vw;
}
.100px {
font-size: 100px;
} .200px {
font-size: 200px;
} .300px {
font-size: 300px;
} .400px {
font-size: 400px;
} .500px {
font-size: 500px;
}
.welcome {
top: 25vh;
left: 10vw;
}
/* Windows loading dots: http://codepen.io/nauzilus/pen/rFovs */
.cbos-loading-dots{position:absolute;width:100vw;top:calc(50vh - 1vw)}.cbos-loading-dots span:nth-child(1){animation-delay:.05s}.cbos-loading-dots span:nth-child(1):after{left:-20px}.cbos-loading-dots span:nth-child(2){animation-delay:.1s}.cbos-loading-dots span:nth-child(2):after{left:-40px}.cbos-loading-dots span:nth-child(3){animation-delay:.15s}.cbos-loading-dots span:nth-child(3):after{left:-60px}.cbos-loading-dots span:nth-child(4){animation-delay:.2s}.cbos-loading-dots span:nth-child(4):after{left:-80px}.cbos-loading-dots span:nth-child(5){animation-delay:.25s}.cbos-loading-dots span:nth-child(5):after{left:-100px}.cbos-loading-dots span{display:inline-block;position:absolute;animation-duration:4s;animation-iteration-count:infinite;animation-name:cbos-loading-dots}.cbos-loading-dots span:after{content:"";position:absolute;display:inline-block;background-color:hotpink;width:1vw;height:1vw;border-radius:50%}@keyframes cbos-loading-dots{0%,20%{left:0;animation-timing-function:ease-out;opacity:0}25%,75%{opacity:1}35%{left:45%;animation-timing-function:linear}65%{left:55%;animation-timing-function:ease-in}100%,80%{left:100%;opacity:0}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment