prehistoric-systems/itty-bitty
1
0
Fork 0
mirror of https://github.com/arfct/itty-bitty.git synced 2026-03-11 08:54:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add loader and manifest

Browse source
This commit is contained in:
Nicholas Jitkoff 2022-06-11 08:48:32 -07:00
parent 3aafb96af3
commit 1dba42e430
4 changed files with 106 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

71
docs/index.css
View file

@ -110,5 +110,74 @@ body:not(.download) #download {
background:black;
}
#dl-name {
margin-bottom:2em;
margin-bottom:2em;
}
.loader{
border-radius:50%;
width: 1em;
height: 1em;
font-size: 10px;
margin: 0 auto;
position: relative;
text-indent: -9999em;
color:white;
display:none;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: turntable 2.8s infinite ease-in-out;
animation: turntable 2.8s infinite ease-in-out;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
animation-timing-function: ease-in-out;
--ld0: 0.00em 2.25em 0 0.20em rgba(127,127,127,1.50);
--ld1: 0.93em 2.24em 0 0.20em rgba(127,127,127,1.45);
--ld2: 1.76em 2.20em 0 0.18em rgba(127,127,127,1.31);
--ld3: 2.43em 2.15em 0 0.16em rgba(127,127,127,1.09);
--ld4: 2.85em 2.08em 0 0.13em rgba(127,127,127,0.81);
--ld5: 3.00em 2.00em 0 0.10em rgba(127,127,127,0.50);
--ld6: 2.85em 1.92em 0 0.07em rgba(127,127,127,0.19);
--ld7: 2.43em 1.85em 0 0.04em rgba(127,127,127,-0.09);
--ld8: 1.76em 1.80em 0 0.02em rgba(127,127,127,-0.31);
--ld9: 0.93em 1.76em 0 0.00em rgba(127,127,127,-0.45);
--ld10: 0.00em 1.75em 0 0.00em rgba(127,127,127,-0.50);
--ld11: -0.93em 1.76em 0 0.00em rgba(127,127,127,-0.45);
--ld12: -1.76em 1.80em 0 0.02em rgba(127,127,127,-0.31);
--ld13: -2.43em 1.85em 0 0.04em rgba(127,127,127,-0.09);
--ld14: -2.85em 1.92em 0 0.07em rgba(127,127,127,0.19);
--ld15: -3.00em 2.00em 0 0.10em rgba(127,127,127,0.50);
--ld16: -2.85em 2.08em 0 0.13em rgba(127,127,127,0.81);
--ld17: -2.43em 2.15em 0 0.16em rgba(127,127,127,1.09);
--ld18: -1.76em 2.20em 0 0.18em rgba(127,127,127,1.31);
--ld19: -0.93em 2.24em 0 0.20em rgba(127,127,127,1.45);
}
@keyframes turntable {
100%,
0% {box-shadow:var(--ld0),var(--ld4), var(--ld8),var(--ld12),var(--ld16)}
5% {box-shadow:var(--ld1),var(--ld5), var(--ld9),var(--ld13),var(--ld17)}
10% {box-shadow:var(--ld2),var(--ld6), var(--ld10),var(--ld14),var(--ld18)}
15% {box-shadow:var(--ld3),var(--ld7), var(--ld11),var(--ld15),var(--ld19)}
20% {box-shadow:var(--ld4),var(--ld8), var(--ld12),var(--ld16),var(--ld0)}
25% {box-shadow:var(--ld5),var(--ld9), var(--ld13),var(--ld17),var(--ld1)}
30% {box-shadow:var(--ld6),var(--ld10), var(--ld14),var(--ld18),var(--ld2)}
35% {box-shadow:var(--ld7),var(--ld11), var(--ld15),var(--ld19),var(--ld3)}
40% {box-shadow:var(--ld8),var(--ld12), var(--ld16),var(--ld0),var(--ld4)}
45% {box-shadow:var(--ld9),var(--ld13), var(--ld17),var(--ld1),var(--ld5)}
50% {box-shadow:var(--ld10),var(--ld14), var(--ld18),var(--ld2),var(--ld6)}
55% {box-shadow:var(--ld11),var(--ld15), var(--ld19),var(--ld3),var(--ld7)}
60% {box-shadow:var(--ld12),var(--ld16), var(--ld0),var(--ld4),var(--ld8)}
65% {box-shadow:var(--ld13),var(--ld17), var(--ld1),var(--ld5),var(--ld9)}
70% {box-shadow:var(--ld14),var(--ld18), var(--ld2),var(--ld6),var(--ld10)}
75% {box-shadow:var(--ld15),var(--ld19), var(--ld3),var(--ld7),var(--ld11)}
80% {box-shadow:var(--ld16),var(--ld0), var(--ld4),var(--ld8),var(--ld12)}
85% {box-shadow:var(--ld17),var(--ld1), var(--ld5),var(--ld9),var(--ld13)}
90% {box-shadow:var(--ld18),var(--ld2), var(--ld6),var(--ld10),var(--ld14)}
95% {box-shadow:var(--ld19),var(--ld3), var(--ld7),var(--ld11),var(--ld15)}
}

5
docs/index.html
View file

@ -4,10 +4,11 @@
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, viewport-fit=cover">
<meta name="description" content="itty bitty things can be conveyed in a link.">
<meta id="themeColor" name="theme-color" content="#ebeff9">
<meta id="themeColor" name="theme-color">
<link id="favicon" rel="icon" href='/favicon.svg'>
<link rel="stylesheet" href="/index.css">
<script src="/js/lzma/lzma-d-min.js"></script>
<link rel="manifest" href="/manifest.json">
<script src="/js/lzma/lzma-d-min.js"></script>
<script src="/js/lzma/lzma_worker-min.js"></script>
<script src="/index.js" type="module"></script>

7
docs/index.js
View file

@ -24,6 +24,12 @@
// <br><br><button onclick="dismiss()">I understand</button> <input id="never" type="checkbox"><label for="never">Never show this</label>
// </div>`
}
function addLoader() {
let el = document.createElement("div");
el.className = "loader";
document.body.appendChild(el);
}
function setThemeColor(color) {
document.getElementById("themeColor").content = color;
@ -44,6 +50,7 @@
"application/ld+json": {script:"recipe"},
"text/rawhtml": {script:"parse"},
"javascript": {script:"bookmarklet"},
"ipfs": {script:"ipfs"},
"web3": {script:"web3", mode:"frame"},
"text/directory": {script:"download", args: {extension:"vcf", filename:"contact"}}
}

26
docs/manifest.json Normal file
View file

@ -0,0 +1,26 @@
{
"short_name": "itty.bitty",
"name": "itty.bitty.app",
"description": "itty.bitty.app",
"icons": [
{
"src": "/favicon.svg",
"type": "image/svg+xml",
"sizes": "32x32"
}
],
"start_url": "/edit",
"background_color": "#3367D6",
"display": "browser",
"scope": "/",
"theme_color": "#3367D6",
"shortcuts": [
{
"name": "New",
"short_name": "New Site",
"description": "New Site",
"url": "/edit",
"icons": [{ "src": "/favicon.svg", "sizes": "32x32" }]
}
]
}