Miraty
4 months ago
35 changed files with 99 additions and 1492 deletions
@ -1,3 +1,4 @@ |
|||
# Conditions d'utilisation |
|||
|
|||
## Préambule |
|||
|
|||
@ -1,3 +1,5 @@ |
|||
# Me contacter |
|||
|
|||
Vous pouvez me contacter par l'un des moyens suivants : |
|||
* Mail : [miraty+antopie@antopie.org](mailto:miraty+antopie@antopie.org) |
|||
OpenPGP : [`B16B 12A8 957B 2EC7 9659 04A6 B82D 15F0 3E67 B2B5`](<?= clearnetOrOnion("https://miraty.antopie.org", "http://miratyww5h7xhki2ttodapygnukmnrywn4osw3d32llc4sggzmyso5id.onion") ?>/B16B12A8957B2EC7965904A6B82D15F03E67B2B5.asc) |
|||
@ -1,3 +1,5 @@ |
|||
# Comment utiliser son adresse courriel Antopie |
|||
|
|||
Cette page de concerne que les personnes pour lesquelles j'ai manuellement créé un compte interne. Ce service n'est pas ouvert au public. |
|||
|
|||
## Webmail Roundcube |
|||
@ -1,21 +0,0 @@ |
|||
Font license info |
|||
|
|||
|
|||
## Font Awesome |
|||
|
|||
Copyright (C) 2016 by Dave Gandy |
|||
|
|||
Author: Dave Gandy |
|||
License: SIL () |
|||
Homepage: http://fortawesome.github.com/Font-Awesome/ |
|||
|
|||
|
|||
## Entypo |
|||
|
|||
Copyright (C) 2012 by Daniel Bruce |
|||
|
|||
Author: Daniel Bruce |
|||
License: SIL (http://scripts.sil.org/OFL) |
|||
Homepage: http://www.entypo.com |
|||
|
|||
|
|||
@ -1,75 +0,0 @@ |
|||
This webfont is generated by http://fontello.com open source project. |
|||
|
|||
|
|||
================================================================================ |
|||
Please, note, that you should obey original font licenses, used to make this |
|||
webfont pack. Details available in LICENSE.txt file. |
|||
|
|||
- Usually, it's enough to publish content of LICENSE.txt file somewhere on your |
|||
site in "About" section. |
|||
|
|||
- If your project is open-source, usually, it will be ok to make LICENSE.txt |
|||
file publicly available in your repository. |
|||
|
|||
- Fonts, used in Fontello, don't require a clickable link on your site. |
|||
But any kind of additional authors crediting is welcome. |
|||
================================================================================ |
|||
|
|||
|
|||
Comments on archive content |
|||
--------------------------- |
|||
|
|||
- /font/* - fonts in different formats |
|||
|
|||
- /css/* - different kinds of css, for all situations. Should be ok with |
|||
twitter bootstrap. Also, you can skip <i> style and assign icon classes |
|||
directly to text elements, if you don't mind about IE7. |
|||
|
|||
- demo.html - demo file, to show your webfont content |
|||
|
|||
- LICENSE.txt - license info about source fonts, used to build your one. |
|||
|
|||
- config.json - keeps your settings. You can import it back into fontello |
|||
anytime, to continue your work |
|||
|
|||
|
|||
Why so many CSS files ? |
|||
----------------------- |
|||
|
|||
Because we like to fit all your needs :) |
|||
|
|||
- basic file, <your_font_name>.css - is usually enough, it contains @font-face |
|||
and character code definitions |
|||
|
|||
- *-ie7.css - if you need IE7 support, but still don't wish to put char codes |
|||
directly into html |
|||
|
|||
- *-codes.css and *-ie7-codes.css - if you like to use your own @font-face |
|||
rules, but still wish to benefit from css generation. That can be very |
|||
convenient for automated asset build systems. When you need to update font - |
|||
no need to manually edit files, just override old version with archive |
|||
content. See fontello source code for examples. |
|||
|
|||
- *-embedded.css - basic css file, but with embedded WOFF font, to avoid |
|||
CORS issues in Firefox and IE9+, when fonts are hosted on the separate domain. |
|||
We strongly recommend to resolve this issue by `Access-Control-Allow-Origin` |
|||
server headers. But if you ok with dirty hack - this file is for you. Note, |
|||
that data url moved to separate @font-face to avoid problems with <IE9, when |
|||
string is too long. |
|||
|
|||
- animate.css - use it to get ideas about spinner rotation animation. |
|||
|
|||
|
|||
Attention for server setup |
|||
-------------------------- |
|||
|
|||
You MUST setup server to reply with proper `mime-types` for font files - |
|||
otherwise some browsers will fail to show fonts. |
|||
|
|||
Usually, `apache` already has necessary settings, but `nginx` and other |
|||
webservers should be tuned. Here is list of mime types for our file extensions: |
|||
|
|||
- `application/vnd.ms-fontobject` - eot |
|||
- `application/x-font-woff` - woff |
|||
- `application/x-font-ttf` - ttf |
|||
- `image/svg+xml` - svg |
|||
@ -1,48 +0,0 @@ |
|||
{ |
|||
"name": "", |
|||
"css_prefix_text": "icon-", |
|||
"css_use_suffix": false, |
|||
"hinting": true, |
|||
"units_per_em": 1000, |
|||
"ascent": 850, |
|||
"glyphs": [ |
|||
{ |
|||
"uid": "2a540649f305b0747c08e168c135b191", |
|||
"css": "ynh", |
|||
"code": 59392, |
|||
"src": "custom_icons", |
|||
"selected": true, |
|||
"svg": { |
|||
"path": "M1141.2 600C1117.4 658.6 1043.2 666.7 976.5 682.4 969.3 756.4 1012.4 811.2 964.7 870.6 889.3 867.5 876.8 801.7 882.4 717.6 870.6 717.6 858.8 717.6 847.1 717.6 822.5 750.2 857.6 770.8 847.1 811.8 833.9 862.8 754.4 904.8 717.6 894.1 692 886.6 647.5 816.1 658.8 752.9 692 721.1 691.3 789.6 729.4 788.2 788.8 696 616.1 687.6 635.3 588.2 649.9 512.7 772.5 474.6 811.8 576.5 829.9 626 750.9 578.4 752.9 611.8 749.7 630.8 764.1 632 764.7 647.1 794.4 656.1 784.5 621.6 800 611.8 821.9 598 836.4 602.9 870.6 600 899.4 570 883.3 495.1 917.6 470.6 963.2 476 989.2 501.1 988.2 552.9 1070.7 542.5 1109.4 541.8 1141.2 600ZM1023.5 152.9C1030.7 190.7 1050.8 211.5 1047.1 247.1 1043.1 284.8 1012.9 350.9 1000 352.9 986.2 355.1 984.2 373.9 976.5 376.5 921.6 394.9 830.7 359.1 811.8 294.1 798.1 247.4 834.1 136.8 858.8 94.1 874.1 67.6 873.2 58.9 917.6 47.1 946 39.4 960.6 20.6 988.2 47.1 993.8 52.4 1003.5 52.8 1010 57.5 1007.7 57.5 1033.5 94.5 1035.3 105.9 1039.1 130.2 1020.8 138.6 1023.5 152.9ZM929.4 258.8C950.3 236.6 968.1 211.3 964.7 164.7 911.6 145.1 878.5 250.6 929.4 258.8ZM788.2 247.1C787.4 315.4 817.4 372.9 788.2 423.5 709.1 436 703.1 375.3 658.8 352.9 636 369.3 641.3 413.9 623.5 435.3 579.1 440.5 568.4 412.1 541.2 400 570.2 308.1 556 176.7 564.7 94.1 665.6 87.3 655.1 192 705.9 235.3 712 184.2 701.7 52.7 741.2 0 827.4 38.7 789.3 152.8 788.2 247.1ZM611.8 647.1C634.5 746 613.2 914 470.6 882.4 451.9 878.2 371.5 820.9 364.7 800 345.6 741.2 368.7 643.1 400 611.8 459.2 552.6 535.1 592.5 611.8 647.1ZM458.8 776.5C512.4 787.8 532.9 727.1 505.9 694.1 463.2 694.5 454.2 728.7 458.8 776.5ZM458.8 94.1C524.5 104.7 534.1 174.2 517.6 270.6 500.8 369.2 482.1 442.2 411.8 447.1 299.2 454.7 267.6 250.7 305.9 105.9 403.8 120.8 383.4 227.8 376.5 305.9 408.4 315.6 402.4 295.9 411.8 282.4 435.9 247.5 444.9 160.1 458.8 94.1ZM329.4 729.4C330.6 796.1 381.2 862.7 352.9 929.4 302.1 917.5 275.6 881.3 247.1 847.1 210 841.4 220.5 883.2 176.5 870.6 168.6 930.1 203.4 959.6 164.7 988.2 109.4 980.8 86.4 941.2 70.6 894.1 39.9 877.9 6.1 864.5 0 823.5 1.6 782 52.7 790 82.4 776.5 87.9 711.4 65.8 618.7 105.9 588.2 203.6 594 202.5 672.1 188.2 764.7 239.5 768.1 246.4 713.5 247.1 682.4 247.8 653.8 225.6 585.2 270.6 552.9 306.6 544.4 305.2 573.3 341.2 564.7 380.6 620 328.5 675.8 329.4 729.4ZM282.4 141.2C294.9 224.4 236.9 236.9 211.8 282.4 214.2 363.3 206.2 433.6 188.2 494.1 119.3 478.6 85.9 372 117.6 294.1 113.8 252.7 55.8 244.5 35.3 200 31.8 192.2 29.8 147.9 23.5 117.6 12.8 66.2 6.5 50.7 35.3 11.8 131.3 6 120.1 107.4 141.2 176.5 200.6 181.1 187.2 112.7 235.3 105.9 246.8 121.8 266.7 129.4 282.4 141.2Z", |
|||
"width": 1153 |
|||
}, |
|||
"search": [ |
|||
"logo-ynh-white" |
|||
] |
|||
}, |
|||
{ |
|||
"uid": "e7cb72a17f3b21e3576f35c3f0a7639b", |
|||
"css": "git", |
|||
"code": 61907, |
|||
"src": "fontawesome" |
|||
}, |
|||
{ |
|||
"uid": "399ef63b1e23ab1b761dfbb5591fa4da", |
|||
"css": "right-open", |
|||
"code": 59394, |
|||
"src": "fontawesome" |
|||
}, |
|||
{ |
|||
"uid": "1d7c1d30ad49a988556273a238097c2a", |
|||
"css": "doc-text-inv", |
|||
"code": 59395, |
|||
"src": "entypo" |
|||
}, |
|||
{ |
|||
"uid": "d7271d490b71df4311e32cdacae8b331", |
|||
"css": "home", |
|||
"code": 59393, |
|||
"src": "fontawesome" |
|||
} |
|||
] |
|||
} |
|||
@ -1,85 +0,0 @@ |
|||
/* |
|||
Animation example, for spinners |
|||
*/ |
|||
.animate-spin { |
|||
-moz-animation: spin 2s infinite linear; |
|||
-o-animation: spin 2s infinite linear; |
|||
-webkit-animation: spin 2s infinite linear; |
|||
animation: spin 2s infinite linear; |
|||
display: inline-block; |
|||
} |
|||
@-moz-keyframes spin { |
|||
0% { |
|||
-moz-transform: rotate(0deg); |
|||
-o-transform: rotate(0deg); |
|||
-webkit-transform: rotate(0deg); |
|||
transform: rotate(0deg); |
|||
} |
|||
|
|||
100% { |
|||
-moz-transform: rotate(359deg); |
|||
-o-transform: rotate(359deg); |
|||
-webkit-transform: rotate(359deg); |
|||
transform: rotate(359deg); |
|||
} |
|||
} |
|||
@-webkit-keyframes spin { |
|||
0% { |
|||
-moz-transform: rotate(0deg); |
|||
-o-transform: rotate(0deg); |
|||
-webkit-transform: rotate(0deg); |
|||
transform: rotate(0deg); |
|||
} |
|||
|
|||
100% { |
|||
-moz-transform: rotate(359deg); |
|||
-o-transform: rotate(359deg); |
|||
-webkit-transform: rotate(359deg); |
|||
transform: rotate(359deg); |
|||
} |
|||
} |
|||
@-o-keyframes spin { |
|||
0% { |
|||
-moz-transform: rotate(0deg); |
|||
-o-transform: rotate(0deg); |
|||
-webkit-transform: rotate(0deg); |
|||
transform: rotate(0deg); |
|||
} |
|||
|
|||
100% { |
|||
-moz-transform: rotate(359deg); |
|||
-o-transform: rotate(359deg); |
|||
-webkit-transform: rotate(359deg); |
|||
transform: rotate(359deg); |
|||
} |
|||
} |
|||
@-ms-keyframes spin { |
|||
0% { |
|||
-moz-transform: rotate(0deg); |
|||
-o-transform: rotate(0deg); |
|||
-webkit-transform: rotate(0deg); |
|||
transform: rotate(0deg); |
|||
} |
|||
|
|||
100% { |
|||
-moz-transform: rotate(359deg); |
|||
-o-transform: rotate(359deg); |
|||
-webkit-transform: rotate(359deg); |
|||
transform: rotate(359deg); |
|||
} |
|||
} |
|||
@keyframes spin { |
|||
0% { |
|||
-moz-transform: rotate(0deg); |
|||
-o-transform: rotate(0deg); |
|||
-webkit-transform: rotate(0deg); |
|||
transform: rotate(0deg); |
|||
} |
|||
|
|||
100% { |
|||
-moz-transform: rotate(359deg); |
|||
-o-transform: rotate(359deg); |
|||
-webkit-transform: rotate(359deg); |
|||
transform: rotate(359deg); |
|||
} |
|||
} |
|||
@ -1,6 +0,0 @@ |
|||
|
|||
.icon-ynh:before { content: '\e800'; } /* '' */ |
|||
.icon-home:before { content: '\e801'; } /* '' */ |
|||
.icon-right-open:before { content: '\e802'; } /* '' */ |
|||
.icon-doc-text-inv:before { content: '\e803'; } /* '' */ |
|||
.icon-git:before { content: '\f1d3'; } /* '' */ |
|||
File diff suppressed because one or more lines are too long
@ -1,6 +0,0 @@ |
|||
|
|||
.icon-ynh { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } |
|||
.icon-home { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } |
|||
.icon-right-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } |
|||
.icon-doc-text-inv { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } |
|||
.icon-git { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } |
|||
@ -1,17 +0,0 @@ |
|||
[class^="icon-"], [class*=" icon-"] { |
|||
font-family: 'fontello'; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
|
|||
/* fix buttons height */ |
|||
line-height: 1em; |
|||
|
|||
/* you can be more comfortable with increased icons size */ |
|||
/* font-size: 120%; */ |
|||
} |
|||
|
|||
.icon-ynh { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } |
|||
.icon-home { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } |
|||
.icon-right-open { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } |
|||
.icon-doc-text-inv { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } |
|||
.icon-git { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = ' '); } |
|||
@ -1,62 +0,0 @@ |
|||
@font-face { |
|||
font-family: 'fontello'; |
|||
src: url('../font/fontello.eot?5025401'); |
|||
src: url('../font/fontello.eot?5025401#iefix') format('embedded-opentype'), |
|||
url('../font/fontello.woff2?5025401') format('woff2'), |
|||
url('../font/fontello.woff?5025401') format('woff'), |
|||
url('../font/fontello.ttf?5025401') format('truetype'), |
|||
url('../font/fontello.svg?5025401#fontello') format('svg'); |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
} |
|||
/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ |
|||
/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ |
|||
/* |
|||
@media screen and (-webkit-min-device-pixel-ratio:0) { |
|||
@font-face { |
|||
font-family: 'fontello'; |
|||
src: url('../font/fontello.svg?5025401#fontello') format('svg'); |
|||
} |
|||
} |
|||
*/ |
|||
|
|||
[class^="icon-"]:before, [class*=" icon-"]:before { |
|||
font-family: "fontello"; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
speak: never; |
|||
|
|||
display: inline-block; |
|||
text-decoration: inherit; |
|||
width: 1em; |
|||
margin-right: .2em; |
|||
text-align: center; |
|||
/* opacity: .8; */ |
|||
|
|||
/* For safety - reset parent styles, that can break glyph codes*/ |
|||
font-variant: normal; |
|||
text-transform: none; |
|||
|
|||
/* fix buttons height, for twitter bootstrap */ |
|||
line-height: 1em; |
|||
|
|||
/* Animation center compensation - margins should be symmetric */ |
|||
/* remove if not needed */ |
|||
margin-left: .2em; |
|||
|
|||
/* you can be more comfortable with increased icons size */ |
|||
/* font-size: 120%; */ |
|||
|
|||
/* Font smoothing. That was taken from TWBS */ |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
|
|||
/* Uncomment for 3D effect */ |
|||
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ |
|||
} |
|||
|
|||
.icon-ynh:before { content: '\e800'; } /* '' */ |
|||
.icon-home:before { content: '\e801'; } /* '' */ |
|||
.icon-right-open:before { content: '\e802'; } /* '' */ |
|||
.icon-doc-text-inv:before { content: '\e803'; } /* '' */ |
|||
.icon-git:before { content: '\f1d3'; } /* '' */ |
|||
@ -1 +0,0 @@ |
|||
@font-face{font-family:'fontello';src:url('../font/fontello.eot?5025401');src:url('../font/fontello.eot?5025401#iefix') format('embedded-opentype'), url('../font/fontello.woff2?5025401') format('woff2'), url('../font/fontello.woff?5025401') format('woff'), url('../font/fontello.ttf?5025401') format('truetype'), url('../font/fontello.svg?5025401#fontello') format('svg');font-weight:normal;font-style:normal;}[class^="icon-"]:before,[class*=" icon-"]:before{font-family:"fontello";font-style:normal;font-weight:normal;speak:never;display:inline-block;text-decoration:inherit;width:1em;margin-right:.2em;text-align:center;font-variant:normal;text-transform:none;line-height:1em;margin-left:.2em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}.icon-ynh:before{content:'\e800';}.icon-home:before{content:'\e801';}.icon-right-open:before{content:'\e802';}.icon-doc-text-inv:before{content:'\e803';}.icon-git:before{content:'\f1d3';} |
|||
@ -1,312 +0,0 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head><!--[if lt IE 9]><script language="javascript" type="text/javascript" src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--> |
|||
<meta charset="UTF-8"><style>/* |
|||
* Bootstrap v2.2.1 |
|||
* |
|||
* Copyright 2012 Twitter, Inc |
|||
* Licensed under the Apache License v2.0 |
|||
* http://www.apache.org/licenses/LICENSE-2.0 |
|||
* |
|||
* Designed and built with all the love in the world @twitter by @mdo and @fat. |
|||
*/ |
|||
.clearfix { |
|||
*zoom: 1; |
|||
} |
|||
.clearfix:before, |
|||
.clearfix:after { |
|||
display: table; |
|||
content: ""; |
|||
line-height: 0; |
|||
} |
|||
.clearfix:after { |
|||
clear: both; |
|||
} |
|||
html { |
|||
font-size: 100%; |
|||
-webkit-text-size-adjust: 100%; |
|||
-ms-text-size-adjust: 100%; |
|||
} |
|||
a:focus { |
|||
outline: thin dotted #333; |
|||
outline: 5px auto -webkit-focus-ring-color; |
|||
outline-offset: -2px; |
|||
} |
|||
a:hover, |
|||
a:active { |
|||
outline: 0; |
|||
} |
|||
button, |
|||
input, |
|||
select, |
|||
textarea { |
|||
margin: 0; |
|||
font-size: 100%; |
|||
vertical-align: middle; |
|||
} |
|||
button, |
|||
input { |
|||
*overflow: visible; |
|||
line-height: normal; |
|||
} |
|||
button::-moz-focus-inner, |
|||
input::-moz-focus-inner { |
|||
padding: 0; |
|||
border: 0; |
|||
} |
|||
body { |
|||
margin: 0; |
|||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
|||
font-size: 14px; |
|||
line-height: 20px; |
|||
color: #333; |
|||
background-color: #fff; |
|||
} |
|||
a { |
|||
color: #08c; |
|||
text-decoration: none; |
|||
} |
|||
a:hover { |
|||
color: #005580; |
|||
text-decoration: underline; |
|||
} |
|||
.row { |
|||
margin-left: -20px; |
|||
*zoom: 1; |
|||
} |
|||
.row:before, |
|||
.row:after { |
|||
display: table; |
|||
content: ""; |
|||
line-height: 0; |
|||
} |
|||
.row:after { |
|||
clear: both; |
|||
} |
|||
[class*="span"] { |
|||
float: left; |
|||
min-height: 1px; |
|||
margin-left: 20px; |
|||
} |
|||
.container, |
|||
.navbar-static-top .container, |
|||
.navbar-fixed-top .container, |
|||
.navbar-fixed-bottom .container { |
|||
width: 940px; |
|||
} |
|||
.span12 { |
|||
width: 940px; |
|||
} |
|||
.span11 { |
|||
width: 860px; |
|||
} |
|||
.span10 { |
|||
width: 780px; |
|||
} |
|||
.span9 { |
|||
width: 700px; |
|||
} |
|||
.span8 { |
|||
width: 620px; |
|||
} |
|||
.span7 { |
|||
width: 540px; |
|||
} |
|||
.span6 { |
|||
width: 460px; |
|||
} |
|||
.span5 { |
|||
width: 380px; |
|||
} |
|||
.span4 { |
|||
width: 300px; |
|||
} |
|||
.span3 { |
|||
width: 220px; |
|||
} |
|||
.span2 { |
|||
width: 140px; |
|||
} |
|||
.span1 { |
|||
width: 60px; |
|||
} |
|||
[class*="span"].pull-right, |
|||
.row-fluid [class*="span"].pull-right { |
|||
float: right; |
|||
} |
|||
.container { |
|||
margin-right: auto; |
|||
margin-left: auto; |
|||
*zoom: 1; |
|||
} |
|||
.container:before, |
|||
.container:after { |
|||
display: table; |
|||
content: ""; |
|||
line-height: 0; |
|||
} |
|||
.container:after { |
|||
clear: both; |
|||
} |
|||
p { |
|||
margin: 0 0 10px; |
|||
} |
|||
.lead { |
|||
margin-bottom: 20px; |
|||
font-size: 21px; |
|||
font-weight: 200; |
|||
line-height: 30px; |
|||
} |
|||
small { |
|||
font-size: 85%; |
|||
} |
|||
h1 { |
|||
margin: 10px 0; |
|||
font-family: inherit; |
|||
font-weight: bold; |
|||
line-height: 20px; |
|||
color: inherit; |
|||
text-rendering: optimizelegibility; |
|||
} |
|||
h1 small { |
|||
font-weight: normal; |
|||
line-height: 1; |
|||
color: #999; |
|||
} |
|||
h1 { |
|||
line-height: 40px; |
|||
} |
|||
h1 { |
|||
font-size: 38.5px; |
|||
} |
|||
h1 small { |
|||
font-size: 24.5px; |
|||
} |
|||
body { |
|||
margin-top: 90px; |
|||
} |
|||
.header { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 50%; |
|||
margin-left: -480px; |
|||
background-color: #fff; |
|||
border-bottom: 1px solid #ddd; |
|||
padding-top: 10px; |
|||
z-index: 10; |
|||
} |
|||
.footer { |
|||
color: #ddd; |
|||
font-size: 12px; |
|||
text-align: center; |
|||
margin-top: 20px; |
|||
} |
|||
.footer a { |
|||
color: #ccc; |
|||
text-decoration: underline; |
|||
} |
|||
.the-icons { |
|||
font-size: 14px; |
|||
line-height: 24px; |
|||
} |
|||
.switch { |
|||
position: absolute; |
|||
right: 0; |
|||
bottom: 10px; |
|||
color: #666; |
|||
} |
|||
.switch input { |
|||
margin-right: 0.3em; |
|||
} |
|||
.codesOn .i-name { |
|||
display: none; |
|||
} |
|||
.codesOn .i-code { |
|||
display: inline; |
|||
} |
|||
.i-code { |
|||
display: none; |
|||
} |
|||
@font-face { |
|||
font-family: 'fontello'; |
|||
src: url('./font/fontello.eot?44739574'); |
|||
src: url('./font/fontello.eot?44739574#iefix') format('embedded-opentype'), |
|||
url('./font/fontello.woff?44739574') format('woff'), |
|||
url('./font/fontello.ttf?44739574') format('truetype'), |
|||
url('./font/fontello.svg?44739574#fontello') format('svg'); |
|||
font-weight: normal; |
|||
font-style: normal; |
|||
} |
|||
|
|||
|
|||
.demo-icon |
|||
{ |
|||
font-family: "fontello"; |
|||
font-style: normal; |
|||
font-weight: normal; |
|||
speak: never; |
|||
|
|||
display: inline-block; |
|||
text-decoration: inherit; |
|||
width: 1em; |
|||
margin-right: .2em; |
|||
text-align: center; |
|||
/* opacity: .8; */ |
|||
|
|||
/* For safety - reset parent styles, that can break glyph codes*/ |
|||
font-variant: normal; |
|||
text-transform: none; |
|||
|
|||
/* fix buttons height, for twitter bootstrap */ |
|||
line-height: 1em; |
|||
|
|||
/* Animation center compensation - margins should be symmetric */ |
|||
/* remove if not needed */ |
|||
margin-left: .2em; |
|||
|
|||
/* You can be more comfortable with increased icons size */ |
|||
/* font-size: 120%; */ |
|||
|
|||
/* Font smoothing. That was taken from TWBS */ |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
|
|||
/* Uncomment for 3D effect */ |
|||
/* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ |
|||
} |
|||
</style> |
|||
<link rel="stylesheet" href="css/animation.css"><!--[if IE 7]><link rel="stylesheet" href="css/" + font.fontname + "-ie7.css"><![endif]--> |
|||
<script> |
|||
function toggleCodes(on) { |
|||
var obj = document.getElementById('icons'); |
|||
|
|||
if (on) { |
|||
obj.className += ' codesOn'; |
|||
} else { |
|||
obj.className = obj.className.replace(' codesOn', ''); |
|||
} |
|||
} |
|||
|
|||
</script> |
|||
</head> |
|||
<body> |
|||
<div class="container header"> |
|||
<h1>fontello <small>font demo</small></h1> |
|||
<label class="switch"> |
|||
<input type="checkbox" onclick="toggleCodes(this.checked)">show codes |
|||
</label> |
|||
</div> |
|||
<div class="container" id="icons"> |
|||
<div class="row"> |
|||
<div class="the-icons span3" title="Code: 0xe800"><i class="demo-icon icon-ynh"></i> <span class="i-name">icon-ynh</span><span class="i-code">0xe800</span></div> |
|||
<div class="the-icons span3" title="Code: 0xe801"><i class="demo-icon icon-home"></i> <span class="i-name">icon-home</span><span class="i-code">0xe801</span></div> |
|||
<div class="the-icons span3" title="Code: 0xe802"><i class="demo-icon icon-right-open"></i> <span class="i-name">icon-right-open</span><span class="i-code">0xe802</span></div> |
|||
<div class="the-icons span3" title="Code: 0xe803"><i class="demo-icon icon-doc-text-inv"></i> <span class="i-name">icon-doc-text-inv</span><span class="i-code">0xe803</span></div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="the-icons span3" title="Code: 0xf1d3"><i class="demo-icon icon-git"></i> <span class="i-name">icon-git</span><span class="i-code">0xf1d3</span></div> |
|||
</div> |
|||
</div> |
|||
<div class="container footer">Generated by <a href="http://fontello.com">fontello.com</a></div> |
|||
</body> |
|||
</html> |
|||
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 4.1 KiB |
|
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 4.1 KiB |
@ -1,3 +1,5 @@ |
|||
# Manifeste sur le contenu |
|||
|
|||
Antopie est hostile à la propagation de contenus droitistes, et est susceptible d'appliquer une modération en conséquence. |
|||
|
|||
Le terme droitiste peut par exemple comprendre *essentialiste*, *spéciste*, *genriste*, *raciste*, *nationaliste*, *autoritariste*, *capitaliste*, *propriétariste*, *productiviste*, *capacitiste*, *socio-normativiste*, *théiste*, *spiritualiste* ou *conspirationniste*. |
|||
@ -1,3 +1,4 @@ |
|||
# Utiliser Matrix |
|||
|
|||
Matrix est un protocole de communication permettant les communications instantanées sur Internet. |
|||
|
|||
@ -1,28 +0,0 @@ |
|||
<div id="nc"> |
|||
<div class="sparks-combo"> |
|||
<div class="spark"></div> |
|||
<div class="spark"></div> |
|||
<div class="spark"></div> |
|||
<div class="spark"></div> |
|||
</div> |
|||
|
|||
<div id="wave-a" class="hot rainbow"></div> |
|||
<div id="wave-a" class="cold rainbow"></div> |
|||
|
|||
<div id="wave-b" class="hot rainbow"></div> |
|||
<div id="wave-b" class="cold rainbow"></div> |
|||
|
|||
<div id="nyan-cat" class="frame1"> |
|||
<div id="tail"></div> |
|||
|
|||
<div id="paws"></div> |
|||
|
|||
<div id="pop-tarts-body"> |
|||
<div id="pop-tarts-body-cream"></div> |
|||
</div> |
|||
|
|||
<div id="head"> |
|||
<div id="face"></div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
@ -1,70 +0,0 @@ |
|||
<?php |
|||
$suffix = " · Antopie"; |
|||
function getPageMetas($pageId) { |
|||
switch ($pageId) { |
|||
case "index": |
|||
$page['titre'] = "Antopie"; |
|||
$page['description'] = "Page d'accueil d'Antopie"; |
|||
$page['type'] = "centré"; |
|||
break; |
|||
case "404": |
|||
$page['titre'] = "Erreur 404"; |
|||
$page['description'] = "Erreur 404 : la page que vous avez demandé n'existe pas"; |
|||
$page['type'] = "article"; |
|||
break; |
|||
case "cgu": |
|||
$page['titre'] = "Conditions générales d'utilisation"; |
|||
$page['h1'] = "Conditions générales d'utilisation"; |
|||
$page['description'] = "Conditions générales d'utilisation des services Antopie"; |
|||
$page['type'] = "article"; |
|||
break; |
|||
case "manifeste-sur-le-contenu": |
|||
$page['titre'] = "Manifeste sur le contenu"; |
|||
$page['h1'] = "Manifeste sur le contenu"; |
|||
$page['description'] = "Manifeste concernant le contenu hébergé par Antopie"; |
|||
$page['type'] = "article"; |
|||
break; |
|||
case "details-techniques": |
|||
$page['titre'] = "Détails techniques"; |
|||
$page['h1'] = "Détails techniques sur l'infrastructure d'Antopie"; |
|||
$page['description'] = "Détails techniques sur l'infrastructure d'Antopie"; |
|||
$page['type'] = "article"; |
|||
break; |
|||
case "contact": |
|||
$page['titre'] = "Me contacter"; |
|||
$page['h1'] = "Me contacter"; |
|||
$page['description'] = "Me contacter à propos d'Antopie"; |
|||
$page['type'] = "article"; |
|||
break; |
|||
case "nextcloud": |
|||
$page['titre'] = "Nextcloud"; |
|||
$page['h1'] = "Nextcloud"; |
|||
$page['description'] = "Aide pour utiliser le serveur Nextcloud d'Antopie"; |
|||
$page['type'] = "article"; |
|||
break; |
|||
case "courriel": |
|||
$page['titre'] = "Courriel"; |
|||
$page['h1'] = "Comment utiliser mon adresse courriel Antopie ?"; |
|||
$page['description'] = "Comment utiliser mon adresse courriel Antopie ?"; |
|||
$page['type'] = "article"; |
|||
break; |
|||
case "matrix": |
|||
$page['titre'] = "Utiliser Matrix"; |
|||
$page['h1'] = "Utiliser Matrix"; |
|||
$page['description'] = "Tutoriel pour apprendre à utiliser le protocol de communication Matrix"; |
|||
$page['type'] = "article"; |
|||
break; |
|||
case "autres-initiatives": |
|||
$page['titre'] = "Autres initiatives"; |
|||
$page['h1'] = "Autres initiatives"; |
|||
$page['description'] = "Autres initiative de décentraliser et décommercialiser Internet"; |
|||
$page['type'] = "article"; |
|||
break; |
|||
default: |
|||
$page['titre'] = "Erreur : Le titre n'a pas été trouvé dans inc/pages.php"; |
|||
$page['h1'] = "Erreur : Le titre n'a pas été trouvé dans inc/pages.php"; |
|||
$page['description'] = "Erreur : La descripiton n'a pas été trouvée dans inc/pages.php"; |
|||
$page['type'] = "article"; |
|||
} |
|||
return $page; |
|||
} |
|||
@ -1,576 +0,0 @@ |
|||
|
|||
#nc { |
|||
width: 100%; |
|||
height: 100%; |
|||
margin: 0; |
|||
padding: 0; |
|||
overflow: hidden; |
|||
} |
|||
#nc { |
|||
font: 13px/1.4 Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; |
|||
} |
|||
|
|||
/* nyan cat! */ |
|||
#nyan-cat { |
|||
position: absolute; |
|||
width: 194px; |
|||
height: 122px; |
|||
top: 50%; |
|||
left: 50%; |
|||
margin-top: -60px; |
|||
margin-left: -97px; |
|||
z-index: 2; |
|||
} |
|||
#nyan-cat.frame1, |
|||
#nyan-cat.frame2 { |
|||
margin-top: -54px; |
|||
} |
|||
/* pop-tarts body */ |
|||
#pop-tarts-body { |
|||
border: solid black; |
|||
border-width: 6px 0; |
|||
width: 97px; |
|||
height: 92px; |
|||
position: absolute; |
|||
left: 52px; |
|||
top: 0; |
|||
} |
|||
#pop-tarts-body:after { |
|||
content: ''; |
|||
border: solid black; |
|||
border-width: 0 6px; |
|||
width: 109px; |
|||
height: 80px; |
|||
position: absolute; |
|||
top: 6px; |
|||
left: -12px; |
|||
} |
|||
#pop-tarts-body:before { |
|||
content: ''; |
|||
position: absolute; |
|||
left: -6px; |
|||
top: 0; |
|||
width: 109px; |
|||
height: 92px; |
|||
background: linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat; |
|||
background-color: #fc9; |
|||
background-size: 6px 6px; |
|||
background-position: 0 0, 103px 0, 0 86px, 103px 86px; |
|||
} |
|||
#pop-tarts-body-cream { |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 80px; |
|||
top: 6px; |
|||
left: 0; |
|||
background: linear-gradient(#f39, #f39) no-repeat, linear-gradient(#f39, #f39) no-repeat, linear-gradient(#f39, #f39) no-repeat, linear-gradient(#f39, #f39) no-repeat, linear-gradient(#f39, #f39) no-repeat, linear-gradient(#f39, #f39) no-repeat, linear-gradient(#f39, #f39) no-repeat, linear-gradient(#f39, #f39) no-repeat, linear-gradient(#f39, #f39) no-repeat, linear-gradient(#f39, #f39) no-repeat; |
|||
background-color: #f9f; |
|||
background-size: 6px 6px; |
|||
background-position: 12px 12px, 40px 6px, 58px 6px, 35px 29px, 80px 18px, 18px 40px, 40px 46px, 6px 52px, 29px 63px; |
|||
} |
|||
#pop-tarts-body-cream:before { |
|||
content: ''; |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
left: 0; |
|||
top: 0; |
|||
background: linear-gradient(#fc9, #fc9) no-repeat, linear-gradient(#fc9, #fc9) no-repeat, linear-gradient(#fc9, #fc9) no-repeat, linear-gradient(#fc9, #fc9) no-repeat, linear-gradient(#fc9, #fc9) no-repeat, linear-gradient(#fc9, #fc9) no-repeat, linear-gradient(#fc9, #fc9) no-repeat, linear-gradient(#fc9, #fc9) no-repeat; |
|||
background-size: 12px 6px, 12px 6px, 12px 6px, 12px 6px, 6px 12px, 6px 12px, 6px 12px, 6px 12px; |
|||
background-position: 0 0, 85px 0, 0 74px, 85px 74px, 0 0, 91px 0, 0 68px, 91px 68px; |
|||
} |
|||
/* pseudo elems */ |
|||
#head:before, |
|||
#head:after, |
|||
#tail:before, |
|||
#nyan-cat:before, |
|||
#paws:before, |
|||
#face:before { |
|||
content: ''; |
|||
position: absolute; |
|||
} |
|||
.sparks-combo { |
|||
height: 300px; |
|||
width: 200%; |
|||
position: relative; |
|||
animation: woosh 700ms 0ms linear infinite both; |
|||
} |
|||
.spark { |
|||
z-index: 1; |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: transparent; |
|||
background: linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x; |
|||
} |
|||
.spark:before { |
|||
background: linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x; |
|||
} |
|||
.spark:after { |
|||
background: linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 11px, transparent 11px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 11px, transparent 11px, transparent 400px) repeat-x; |
|||
} |
|||
.spark:before, |
|||
.spark:after { |
|||
content: ''; |
|||
position: absolute; |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: transparent; |
|||
} |
|||
.spark:nth-child(1) { |
|||
z-index: 3; |
|||
top: 0; |
|||
left: 20px; |
|||
animation: sparkly 700ms 0ms steps(1) infinite both; |
|||
} |
|||
.spark:nth-child(1):before { |
|||
animation: sparkly-before 700ms 0ms steps(1) infinite both; |
|||
} |
|||
.spark:nth-child(1):after { |
|||
animation: sparkly-after 700ms 0ms steps(1) infinite both; |
|||
} |
|||
.spark:nth-child(2) { |
|||
top: 40px; |
|||
left: 170px; |
|||
animation: sparkly 700ms 200ms steps(1) infinite both; |
|||
} |
|||
.spark:nth-child(2):before { |
|||
animation: sparkly-before 700ms 200ms steps(1) infinite both; |
|||
} |
|||
.spark:nth-child(2):after { |
|||
animation: sparkly-after 700ms 200ms steps(1) infinite both; |
|||
} |
|||
.spark:nth-child(3) { |
|||
top: 100px; |
|||
left: 320px; |
|||
animation: sparkly 700ms 400ms steps(1) infinite both; |
|||
} |
|||
.spark:nth-child(3):before { |
|||
animation: sparkly-before 700ms 400ms steps(1) infinite both; |
|||
} |
|||
.spark:nth-child(3):after { |
|||
animation: sparkly-after 700ms 400ms steps(1) infinite both; |
|||
} |
|||
.spark:nth-child(4) { |
|||
top: 150px; |
|||
left: 200px; |
|||
animation: sparkly 700ms 600ms steps(1) infinite both; |
|||
} |
|||
.spark:nth-child(4):before { |
|||
animation: sparkly-before 700ms 600ms steps(1) infinite both; |
|||
} |
|||
.spark:nth-child(4):after { |
|||
animation: sparkly-after 700ms 600ms steps(1) infinite both; |
|||
} |
|||
@keyframes woosh { |
|||
0% { |
|||
left: 0px; |
|||
} |
|||
100% { |
|||
left: -400px; |
|||
} |
|||
} |
|||
@keyframes sparkly { |
|||
0% { |
|||
background-size: 400px 6px, 0 0, 0 0, 0 0; |
|||
background-position: 17px 17px, 0 0, 0 0, 0 0; |
|||
} |
|||
16% { |
|||
background-size: 400px 6px, 400px 6px, 400px 6px, 400px 6px; |
|||
background-position: 17px 0, 34px 17px, 17px 34px, 0 17px; |
|||
} |
|||
33% { |
|||
background-size: 400px 6px, 400px 6px, 400px 6px, 400px 6px; |
|||
background-position: 17px 0, 34px 17px, 17px 34px, 0 17px; |
|||
} |
|||
50% { |
|||
background-size: 400px 6px, 0 0, 0 0, 0 0; |
|||
background-position: 17px 17px, 0 0, 0 0, 0 0; |
|||
} |
|||
66% { |
|||
background-size: 400px 11px, 400px 11px, 0 0, 0 0; |
|||
background-position: 17px 6px, 17px 23px, 0 0, 0 0; |
|||
} |
|||
83% { |
|||
background-size: 0 0, 0 0, 400px 5px, 400px 5px; |
|||
background-position: 0 0, 0 0, 11px 17px, 22px 17px; |
|||
} |
|||
100% { |
|||
background-size: 400px 6px, 0 0, 0 0, 0 0; |
|||
background-position: 17px 17px, 0 0, 0 0, 0 0; |
|||
} |
|||
} |
|||
@keyframes sparkly-before { |
|||
0% { |
|||
background-size: 0 0, 0 0, 0 0, 0 0; |
|||
background-position: 0 0, 0 0, 0 0, 0 0; |
|||
} |
|||
16% { |
|||
background-size: 0 0, 0 0, 0 0, 0 0; |
|||
background-position: 0 0, 0 0, 0 0, 0 0; |
|||
} |
|||
33% { |
|||
background-size: 400px 5px, 400px 5px, 400px 5px, 400px 5px; |
|||
background-position: 6px 6px, 29px 6px, 29px 29px, 6px 29px; |
|||
} |
|||
50% { |
|||
background-size: 0 0, 0 0, 0 0, 0 0; |
|||
background-position: 0 0, 0 0, 0 0, 0 0; |
|||
} |
|||
66% { |
|||
background-size: 0 0, 0 0, 0 0, 0 0; |
|||
background-position: 0 0, 0 0, 0 0, 0 0; |
|||
} |
|||
83% { |
|||
background-size: 0 0, 0 0, 400px 5px, 400px 5px; |
|||
background-position: 0 0, 0 0, 17px 12px, 17px 22px; |
|||
} |
|||
100% { |
|||
background-size: 0 0, 0 0, 0 0, 0 0; |
|||
background-position: 0 0, 0 0, 0 0, 0 0; |
|||
} |
|||
} |
|||
@keyframes sparkly-after { |
|||
0% { |
|||
background-size: 0 0, 0 0, 0 0, 0 0; |
|||
background-position: 0 0, 0 0, 0 0, 0 0; |
|||
} |
|||
16% { |
|||
background-size: 0 0, 0 0, 0 0, 0 0; |
|||
background-position: 0 0, 0 0, 0 0, 0 0; |
|||
} |
|||
33% { |
|||
background-size: 0 0, 0 0, 0 0, 0 0; |
|||
background-position: 0 0, 0 0, 0 0, 0 0; |
|||
} |
|||
50% { |
|||
background-size: 400px 11px, 400px 11px, 400px 6px, 400px 6px; |
|||
background-position: 17px 0, 17px 29px, 0 17px, 29px 17px; |
|||
} |
|||
66% { |
|||
background-size: 0 0, 0 0, 400px 6px, 400px 6px; |
|||
background-position: 0 0, 0 0, 6px 17px, 23px 17px; |
|||
} |
|||
83% { |
|||
background-size: 0 0, 0 0, 0 0, 0 0; |
|||
background-position: 0 0, 0 0, 0 0, 0 0; |
|||
} |
|||
100% { |
|||
background-size: 0 0, 0 0, 0 0, 0 0; |
|||
background-position: 0 0, 0 0, 0 0, 0 0; |
|||
} |
|||
} |
|||
.rainbow { |
|||
background: none; |
|||
height: 102px; |
|||
width: 50%; |
|||
position: absolute; |
|||
top: 50%; |
|||
right: 50%; |
|||
margin-right: 45px; |
|||
z-index: 2; |
|||
} |
|||
.hot:after, |
|||
.hot:before, |
|||
.cold:after, |
|||
.cold:before { |
|||
content: ""; |
|||
position: absolute; |
|||
left: 0; |
|||
right: 0; |
|||
height: 50%; |
|||
} |
|||
.hot:after, |
|||
.hot:before { |
|||
top: 0; |
|||
} |
|||
.cold:after, |
|||
.cold:before { |
|||
bottom: 0; |
|||
} |
|||
#wave-a { |
|||
margin-top: -54px; |
|||
animation: wavy 700ms 0ms steps(2) infinite both; |
|||
} |
|||
#wave-b { |
|||
margin-top: -60px; |
|||
animation: wavy 700ms 350ms steps(2) infinite both; |
|||
} |
|||
/* red */ |
|||
.hot { |
|||
background-image: linear-gradient(to right, #f00 49px, transparent 49px, transparent 92px); |
|||
} |
|||
/* orange */ |
|||
.hot:after { |
|||
background-image: linear-gradient(to right, #f90 49px, transparent 49px, transparent 92px); |
|||
} |
|||
/* yellow */ |
|||
.hot:before { |
|||
background-image: linear-gradient(to right, #ff0 49px, transparent 49px, transparent 92px); |
|||
} |
|||
/* green */ |
|||
.cold:after { |
|||
background-image: linear-gradient(to right, #3f0 49px, transparent 49px, transparent 92px); |
|||
background-position: left top; |
|||
} |
|||
/* blue */ |
|||
.cold:before { |
|||
background-image: linear-gradient(to right, #09f 49px, transparent 49px, transparent 92px); |
|||
} |
|||
/* purple */ |
|||
.cold { |
|||
background-image: linear-gradient(to right, #63f 49px, transparent 49px, transparent 92px); |
|||
} |
|||
.rainbow, |
|||
.hot:after, |
|||
.hot:before, |
|||
.cold:after, |
|||
.cold:before { |
|||
background-size: 95px 17px; |
|||
background-repeat: repeat-x; |
|||
} |
|||
#wave-a.hot, |
|||
#wave-a.cold:after { |
|||
background-position: left top; |
|||
} |
|||
#wave-a.hot:after, |
|||
#wave-a.cold:before { |
|||
background-position: left center; |
|||
} |
|||
#wave-a.hot:before, |
|||
#wave-a.cold { |
|||
background-position: left bottom; |
|||
} |
|||
#wave-b.hot, |
|||
#wave-b.cold:after { |
|||
background-position: 46px top; |
|||
} |
|||
#wave-b.hot:after, |
|||
#wave-b.cold:before { |
|||
background-position: 46px center; |
|||
} |
|||
#wave-b.hot:before, |
|||
#wave-b.cold { |
|||
background-position: 46px bottom; |
|||
} |
|||
@keyframes wavy { |
|||
0% { |
|||
margin-top: -54px; |
|||
} |
|||
100% { |
|||
margin-top: -60px; |
|||
} |
|||
} |
|||
/* head */ |
|||
#head { |
|||
width: 80px; |
|||
height: 30px; |
|||
border: solid black; |
|||
border-width: 0 6px; |
|||
background: #999; |
|||
position: absolute; |
|||
} |
|||
/* #head:before = left ear | #head:after = right ear */ |
|||
#head:before, |
|||
#head:after { |
|||
width: 40px; |
|||
height: 30px; |
|||
top: -30px; |
|||
background: linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat; |
|||
background-size: 6px 24px, 12px 6px, 12px 6px, 6px 6px, 6px 6px, 12px 30px, 12px 12px, 12px 6px, 6px 6px; |
|||
background-position: 0 6px, 6px 0, 30px 18px, 18px 6px, 24px 12px, 6px 6px, 18px 18px, 30px 24px, 18px 12px; |
|||
} |
|||
#head:after { |
|||
right: 0; |
|||
transform: scaleX(-1); |
|||
-webkit-transform: scaleX(-1); |
|||
} |
|||
#face { |
|||
width: 80px; |
|||
height: 100%; |
|||
position: absolute; |
|||
top: 6px; |
|||
background: linear-gradient(white, white) no-repeat, linear-gradient(white, white) no-repeat, linear-gradient(#f99, #f99) no-repeat, linear-gradient(#f99, #f99) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat; |
|||
background-size: 6px 6px, 6px 6px, 12px 12px, 12px 12px, 12px 12px, 12px 12px, 6px 6px, 6px 6px, 6px 6px, 6px 6px; |
|||
background-position: 17px 0, 56px 0, 5px 12px, 68px 12px, 17px 0, 56px 0, 42px 6px, 23px 18px, 40px 18px, 56px 18px; |
|||
} |
|||
/* #face:before = chin */ |
|||
#face:before { |
|||
bottom: -12px; |
|||
width: 100%; |
|||
height: 18px; |
|||
background: linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat; |
|||
background-size: 6px 6px, 6px 6px, 6px 6px, 6px 6px, 56px 6px, 39px 6px, 68px 6px, 56px 6px; |
|||
background-position: 0 0, 6px 6px, 74px 0, 68px 6px, 12px 12px, 23px 0, 6px 0, 12px 6px; |
|||
} |
|||
/* FRAME 1 AND 5 */ |
|||
.frame1 #head, |
|||
.frame5 #head { |
|||
bottom: 36px; |
|||
right: 0; |
|||
} |
|||
/* FRAMES 2 AND 3 AND 4 */ |
|||
.frame2 #head, |
|||
.frame3 #head, |
|||
.frame4 #head { |
|||
bottom: 36px; |
|||
right: -6px; |
|||
} |
|||
/* FRAME 6 */ |
|||
.frame6 #head { |
|||
bottom: 42px; |
|||
right: 0; |
|||
} |
|||
/* paws */ |
|||
#paws { |
|||
width: 156px; |
|||
height: 30px; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 24px; |
|||
} |
|||
/* FRAME 1 */ |
|||
.frame1 #paws { |
|||
background: linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat; |
|||
background-size: 18px 18px; |
|||
background-position: 4px 6px, 10px 0, 34px 0, 40px 6px, 94px 0px, 101px 6px, 125px 0px, 131px 6px; |
|||
} |
|||
.frame1 #paws:before { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat; |
|||
background-size: 12px 12px, 12px 12px, 12px 12px, 12px 12px, 6px 6px; |
|||
background-position: 10px 6px, 40px 6px, 101px 6px, 131px 6px, 22px 6px; |
|||
} |
|||
/* FRAMES 2 AND 4 */ |
|||
.frame2 #paws, |
|||
.frame4 #paws { |
|||
background: linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat; |
|||
background-size: 18px 18px; |
|||
background-position: 10px 6px, 16px 0, 40px 0, 46px 6px, 95px 0, 101px 6px, 125px 0, 131px 6px; |
|||
} |
|||
.frame2 #paws:before, |
|||
.frame4 #paws:before { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat; |
|||
background-size: 12px 12px; |
|||
background-position: 16px 6px, 46px 6px, 101px 6px, 131px 6px; |
|||
} |
|||
/* FRAME 3 */ |
|||
.frame3 #paws { |
|||
background: linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat; |
|||
background-size: 18px 18px; |
|||
background-position: 16px 6px, 22px 0px, 46px 0px, 52px 6px, 100px 0px, 106px 6px, 131px 0px, 137px 6px; |
|||
} |
|||
.frame3 #paws:before { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat; |
|||
background-size: 12px 12px; |
|||
background-position: 22px 6px, 52px 6px, 106px 6px, 137px 6px; |
|||
} |
|||
/* FRAME 5 AND 6 */ |
|||
.frame5 #paws, |
|||
.frame6 #paws { |
|||
background: linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat; |
|||
background-size: 18px 18px; |
|||
background-position: 4px 6px, 10px 0, 34px 0, 40px 6px, 94px 0px, 101px 6px, 125px 0px, 131px 6px; |
|||
} |
|||
.frame5 #paws:before, |
|||
.frame6 #paws:before { |
|||
width: 100%; |
|||
height: 100%; |
|||
background: linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat; |
|||
background-size: 12px 12px; |
|||
background-position: 10px 6px, 16px 0, 40px 6px, 101px 6px, 131px 6px; |
|||
} |
|||
/* FRAME 6 */ |
|||
.frame6 #paws { |
|||
background-position: 4px 6px, 10px 0, 40px 0, 34px 6px, 101px 0px, 95px 6px, 125px 0px, 131px 6px; |
|||
} |
|||
/* tail */ |
|||
#tail { |
|||
width: 40px; |
|||
height: 54px; |
|||
position: absolute; |
|||
left: 0; |
|||
top: 40px; |
|||
} |
|||
/* FRAME 1 */ |
|||
.frame1 #tail { |
|||
background: linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat; |
|||
background-size: 23px 18px; |
|||
background-position: 6px 0, 11px 6px, 17px 11px, 23px 17px, 34px 23px; |
|||
} |
|||
.frame1 #tail:before { |
|||
left: 11px; |
|||
top: 6px; |
|||
width: 29px; |
|||
height: 23px; |
|||
background: linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat; |
|||
background-size: 11px 6px; |
|||
background-position: 0 0, 6px 6px, 12px 12px, 18px 18px, 24px 24px; |
|||
} |
|||
/* FRAMES 2 AND 6 */ |
|||
.frame2 #tail, |
|||
.frame6 #tail { |
|||
background: linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat; |
|||
background-size: 11px 23px, 11px 23px, 11px 23px, 6px 11px; |
|||
background-position: 12px 6px, 18px 12px, 29px 17px, 6px 12px; |
|||
} |
|||
.frame2 #tail:before, |
|||
.frame6 #tail:before { |
|||
width: 28px; |
|||
height: 23px; |
|||
left: 12px; |
|||
top: 12px; |
|||
background: linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat; |
|||
background-size: 11px 6px; |
|||
background-position: 0 0, 0 5px, 6px 11px, 17px 11px, 17px 17px; |
|||
} |
|||
/* FRAME 3 */ |
|||
.frame3 #tail { |
|||
background: linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat; |
|||
background-size: 24px 12px, 24px 12px, 24px 12px, 6px 24px; |
|||
background-position: 16px 24px, 4px 30px, 10px 36px, 34px 18px; |
|||
} |
|||
.frame3 #tail:before { |
|||
width: 30px; |
|||
height: 12px; |
|||
top: 30px; |
|||
right: 0; |
|||
background: linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat; |
|||
background-size: 24px 6px, 18px 6px; |
|||
background-position: 6px 0, 0 6px; |
|||
} |
|||
/* FRAME 4 */ |
|||
.frame4 #tail { |
|||
background: linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat; |
|||
background-size: 12px 24px, 12px 24px, 12px 24px, 6px 12px; |
|||
background-position: 28px 18px, 16px 24px, 10px 30px, 4px 36px; |
|||
} |
|||
.frame4 #tail:before { |
|||
width: 30px; |
|||
height: 24px; |
|||
top: 24px; |
|||
right: 0; |
|||
background: linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat; |
|||
background-size: 12px 12px, 12px 12px, 12px 6px; |
|||
background-position: 18px 0, 0 12px, 6px 6px; |
|||
} |
|||
/* FRAME 5 */ |
|||
.frame5 #tail { |
|||
background: linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat, linear-gradient(black, black) no-repeat; |
|||
background-size: 24px 18px, 24px 18px, 6px 12px, 6px 12px, 12px 6px; |
|||
background-position: 6px 6px, 12px 12px, 0 12px, 36px 12px, 28px 30px; |
|||
} |
|||
.frame5 #tail:before { |
|||
width: 34px; |
|||
height: 18px; |
|||
top: 12px; |
|||
right: 0; |
|||
background: linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat, linear-gradient(#999, #999) no-repeat; |
|||
background-size: 18px 6px, 22px 6px, 6px 6px; |
|||
background-position: 0 0, 6px 6px, 28px 12px; |
|||
} |
|||
@ -1,29 +0,0 @@ |
|||
console.log('Nyan!') |
|||
|
|||
function cycleFrames (_nyanCat, _currentFrame) { |
|||
_nyanCat.classList = [] |
|||
_nyanCat.classList.add(`frame${_currentFrame}`) |
|||
} |
|||
|
|||
function replicateSparks (_sparksRow) { |
|||
const numberOfRowsToCoverEntireScreen = Math.ceil(document.body.offsetHeight / _sparksRow.offsetHeight) |
|||
const newSparksRows = document.createElement('div') |
|||
|
|||
for (let a = 0; a < numberOfRowsToCoverEntireScreen-1; a++) { |
|||
newSparksRows.append(_sparksRow.cloneNode(true)) |
|||