CSS et JS

This commit is contained in:
Dorian Lods 2016-01-12 20:03:08 +01:00
parent 8b59bfd582
commit 30b716df4f
19 changed files with 3410 additions and 0 deletions

Binary file not shown.

Binary file not shown.

View File

@ -0,0 +1,7 @@
/**
* Copyright (c) 2007-2015 Ariel Flesler - aflesler gmail com | http://flesler.blogspot.com
* Licensed under MIT
* @author Ariel Flesler
* @version 2.1.3
*/
;(function(f){"use strict";"function"===typeof define&&define.amd?define(["jquery"],f):"undefined"!==typeof module&&module.exports?module.exports=f(require("jquery")):f(jQuery)})(function($){"use strict";function n(a){return!a.nodeName||-1!==$.inArray(a.nodeName.toLowerCase(),["iframe","#document","html","body"])}function h(a){return $.isFunction(a)||$.isPlainObject(a)?a:{top:a,left:a}}var p=$.scrollTo=function(a,d,b){return $(window).scrollTo(a,d,b)};p.defaults={axis:"xy",duration:0,limit:!0};$.fn.scrollTo=function(a,d,b){"object"=== typeof d&&(b=d,d=0);"function"===typeof b&&(b={onAfter:b});"max"===a&&(a=9E9);b=$.extend({},p.defaults,b);d=d||b.duration;var u=b.queue&&1<b.axis.length;u&&(d/=2);b.offset=h(b.offset);b.over=h(b.over);return this.each(function(){function k(a){var k=$.extend({},b,{queue:!0,duration:d,complete:a&&function(){a.call(q,e,b)}});r.animate(f,k)}if(null!==a){var l=n(this),q=l?this.contentWindow||window:this,r=$(q),e=a,f={},t;switch(typeof e){case "number":case "string":if(/^([+-]=?)?\d+(\.\d+)?(px|%)?$/.test(e)){e= h(e);break}e=l?$(e):$(e,q);case "object":if(e.length===0)return;if(e.is||e.style)t=(e=$(e)).offset()}var v=$.isFunction(b.offset)&&b.offset(q,e)||b.offset;$.each(b.axis.split(""),function(a,c){var d="x"===c?"Left":"Top",m=d.toLowerCase(),g="scroll"+d,h=r[g](),n=p.max(q,c);t?(f[g]=t[m]+(l?0:h-r.offset()[m]),b.margin&&(f[g]-=parseInt(e.css("margin"+d),10)||0,f[g]-=parseInt(e.css("border"+d+"Width"),10)||0),f[g]+=v[m]||0,b.over[m]&&(f[g]+=e["x"===c?"width":"height"]()*b.over[m])):(d=e[m],f[g]=d.slice&& "%"===d.slice(-1)?parseFloat(d)/100*n:d);b.limit&&/^\d+$/.test(f[g])&&(f[g]=0>=f[g]?0:Math.min(f[g],n));!a&&1<b.axis.length&&(h===f[g]?f={}:u&&(k(b.onAfterFirst),f={}))});k(b.onAfter)}})};p.max=function(a,d){var b="x"===d?"Width":"Height",h="scroll"+b;if(!n(a))return a[h]-$(a)[b.toLowerCase()]();var b="client"+b,k=a.ownerDocument||a.document,l=k.documentElement,k=k.body;return Math.max(l[h],k[h])-Math.min(l[b],k[b])};$.Tween.propHooks.scrollLeft=$.Tween.propHooks.scrollTop={get:function(a){return $(a.elem)[a.prop]()}, set:function(a){var d=this.get(a);if(a.options.interrupt&&a._last&&a._last!==d)return $(a.elem).stop();var b=Math.round(a.now);d!==b&&($(a.elem)[a.prop](b),a._last=this.get(a))}};return p});

View File

@ -0,0 +1,241 @@
var _nyan = 0;
var __nyan = [["+ o + o "," + o + + ","o + "," o + + + ","+ o o + o ","-_-_-_-_-_-_-_,------, o ","_-_-_-_-_-_-_-| /\\_/\\ ","-_-_-_-_-_-_-~|__( ^ .^) + + ","_-_-_-_-_-_-_-\"\" \"\" ","+ o o + o "," + + ","o o o o + "," o + ","+ + o o + "],
["+ o + + "," o o o + ","o + "," + o + o ","o o o + o ","_-_-_-_-_-_-_-,------, + ","-_-_-_-_-_-_-_| /\\_/\\ ","_-_-_-_-_-_-_-|__( ^ .^) o + ","-_-_-_-_-_-_-_ \"\" \"\" ","+ + o + o "," o + ","+ + + + o "," + o ","+ o o o + "]]
function nyan(){
console.clear();
console.log(__nyan[_nyan].join("\n"))
if(_nyan == 0){ _nyan = 1; } else { _nyan = 0; }
}
window.setInterval(nyan, 300);
$(document).ready(function () {
jQuery.easing['jswing'] = jQuery.easing['swing'];
jQuery.extend( jQuery.easing,
{
easeOutCirc: function (x, t, b, c, d) {
return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
}
});
$('header, main').fadeOut(0);
$(window).load(function () {
setTimeout(function () {
$('#loader').fadeOut(2000);
$('#pixel-grid').animate({
opacity: 0.25
}, 2000, function() {
$('header, main').fadeIn(2000);
});
setTimeout(function () {
var $target = $('#container');
var middle = 60-(window.innerHeight/2);
$target.scrollTo($('.active'), 1500,{ easing:'easeOutCirc', offset:{ top:middle, left:0 } });
}, 4000);
}, 4000);
});
$('#container').scroll(function(){
lastTimeMouseMoved = new Date().getTime();
var t=setTimeout(function(){
var currentTime = new Date().getTime();
if(currentTime - lastTimeMouseMoved > 4000){
var $target = $('#container');
var middle = 60-(window.innerHeight/2);
$target.scrollTo($('.active'), 1500,{ easing:'easeOutCirc', offset:{ top:middle, left:0 } });
}
},4000);
});
$(function () {
var $pixelGrid = $('#pixel-grid');
var pixelGrid = {
canvas: null,
c2d: null,
canvasW: window.innerWidth,
canvasH: window.innerHeight,
bgColor: 'black',
pixelColor: '#ffffff',
numPixelsX: window.innerWidth/12,
numPixelsY: window.innerHeight/12,
pixelSize: 8,
pixelSpacing: 4,
pixelDeathFade: 100,
pixelBornFade: 50,
pixelMaxLife: 50,
pixelMinLife: 25,
pixelMaxOffLife: 50,
pixelMinOffLife: 25,
pixels: [],
init: function () {
var canvas = document.createElement('canvas');
canvas.width = this.canvasW;
canvas.height = this.canvasH;
$pixelGrid.append(canvas);
this.canvas = canvas;
this.c2d = canvas.getContext('2d');
this.initPixels();
this.renderLoop();
$pixelGrid.addClass('appear');
},
initPixels: function () {
for (var y = 0; y < this.numPixelsY; y++) {
for (var x = 0; x < this.numPixelsX; x++) {
var pixel = this.randomizePixelAttrs(x, y);
this.pixels.push(pixel);
}
}
},
randomizePixelAttrs: function (x, y) {
var alpha = this.randomAlpha(),
self = this;
var lit = true;
if (alpha === 0.1) {
lit = false;
}
return {
xPos: x * this.pixelSize + (x * this.pixelSpacing),
yPos: y * this.pixelSize + (y * this.pixelSpacing),
alpha: 0,
maxAlpha: alpha,
life: Math.floor(Math.random() * self.pixelMaxLife - self.pixelMinLife + 1) + self.pixelMinLife,
offLife: Math.floor(Math.random() * self.pixelMaxOffLife - self.pixelMinOffLife + 1) + self.pixelMinOffLife,
isLit: lit,
dying: false,
deathFade: this.pixelDeathFade,
bornFade: this.pixelBornFade,
randomizeSelf: function () {
var alpha = self.randomAlpha();
var lit = true;
if (alpha === 0.1) {
lit = false;
}
this.alpha = 0;
this.maxAlpha = alpha;
this.life = Math.floor(Math.random() * self.pixelMaxLife - self.pixelMinLife + 1) + self.pixelMinLife;
this.offLife = Math.floor(Math.random() * self.pixelMaxOffLife - self.pixelMinOffLife + 1) + self.pixelMinOffLife;
this.isLit = lit;
this.dying = false;
this.deathFade = self.pixelDeathFade;
this.bornFade = self.pixelBornFade;
}
};
},
randomAlpha: function () {
var randStartAlpha = Math.floor(Math.random() * 101);
// Fully lit (1)
if (randStartAlpha > 90) {
return 1;
}
// Halt lit (0.5)
else if (randStartAlpha > 80) {
return 0.5;
}
else {
return 0.1;
}
},
renderLoop: function () {
this.clearCanvas();
this.renderPixels();
window.requestAnimationFrame(function () {
this.renderLoop();
}.bind(this));
},
renderPixels: function () {
for (var i = 0; i < this.pixels.length; i++) {
this.drawPixel(this.pixels[i]);
}
},
drawPixel: function (pixel) {
if (pixel.alpha < 0.1) {
pixel.alpha = 0.1;
}
else if (pixel.alpha > pixel.maxAlpha) {
pixel.alpha = pixel.maxAlpha;
}
this.c2d.fillStyle = 'rgba(255, 255, 255, ' + pixel.alpha + ')';
this.c2d.fillRect(pixel.xPos, pixel.yPos, this.pixelSize, this.pixelSize);
if (pixel.isLit) {
if (pixel.bornFade <= 0) {
// Update pixel attributes
if (pixel.life <= 0) {
pixel.dying = true;
if (pixel.deathFade <= 0) {
pixel.randomizeSelf();
}
else {
var divisor = 1;
if (pixel.maxAlpha === 0.5 && pixel.alpha > 0.5) {
divisor = 2;
}
pixel.alpha = (pixel.deathFade / this.pixelDeathFade) / divisor;
pixel.deathFade--;
}
}
else {
pixel.life--;
}
}
else {
pixel.alpha = pixel.maxAlpha - pixel.bornFade / this.pixelBornFade;
pixel.bornFade--;
}
}
else {
if (pixel.offLife <= 0) {
pixel.isLit = true;
}
pixel.offLife--;
}
},
clearCanvas: function () {
this.c2d.fillStyle = this.bgColor;
this.c2d.fillRect(0, 0, this.canvasW, this.canvasH);
}
};
// Init pixel grid animation
pixelGrid.init();
});
});

View File

@ -0,0 +1,100 @@
var dateSet = $(".countdown").data("time");
$('#alertTimeout').hide();
//Countdown plugin
(function($) {
$.fn.countdown = function(options, callback) {
//custom 'this' selector
var thisEl = $(this);
//array of custom settings
var settings = {
'date': null,
'format': null
};
//append the settings array to options
if(options) {
$.extend(settings, options);
}
//main countdown function
var countdown_proc = function () {
var eventDate = Date.parse(settings['date']) / 1000;
var currentDate = Math.floor($.now() / 1000);
if(eventDate <= currentDate) {
callback.call(this);
clearInterval(interval);
};
var seconds = eventDate - currentDate;
var days = Math.floor(seconds / (60 * 60 * 24)); //calculate the number of days
seconds -= days * 60 * 60 * 24; //update the seconds variable with no. of days removed
var hours = Math.floor(seconds / (60 * 60));
seconds -= hours * 60 * 60; //update the seconds variable with no. of hours removed
var minutes = Math.floor(seconds / 60);
seconds -= minutes * 60; //update the seconds variable with no. of minutes removed
//conditional Ss
if (days == 1) { thisEl.find(".timeRefDays").text("Day"); } else { thisEl.find(".timeRefDays").text("Days"); }
if (hours == 1) { thisEl.find(".timeRefHours").text("Hour"); } else { thisEl.find(".timeRefHours").text("Hours"); }
if (minutes == 1) { thisEl.find(".timeRefMinutes").text("Minute"); } else { thisEl.find(".timeRefMinutes").text("Minutes"); }
if (seconds == 1) { thisEl.find(".timeRefSeconds").text("Second"); } else { thisEl.find(".timeRefSeconds").text("Seconds"); }
//logic for the two_digits ON setting
if(settings['format'] == "on") {
days = (String(days).length >= 2) ? days : "0" + days;
hours = (String(hours).length >= 2) ? hours : "0" + hours;
minutes = (String(minutes).length >= 2) ? minutes : "0" + minutes;
seconds = (String(seconds).length >= 2) ? seconds : "0" + seconds;
}
//update the countdown's html values.
if(!isNaN(eventDate)) {
thisEl.find(".days").text(days);
thisEl.find(".hours").text(hours);
thisEl.find(".minutes").text(minutes);
thisEl.find(".seconds").text(seconds);
} else {
alert("Invalid date. Here's an example: 12 Tuesday 2012 17:30:00");
clearInterval(interval);
}
}
//run the function
countdown_proc();
//loop the function
interval = setInterval(countdown_proc, 1000);
}
}) (jQuery);
//Call countdown plugin
$(".countdown").countdown({
date: dateSet, // add the countdown's end date (i.e. 3 november 2012 12:00:00)
format: "on" // on (03:07:52) | off (3:7:52) - two_digits set to ON maintains layout consistency
},
function() {
// the code here will run when the countdown ends
document.getElementById('alarm').play();
$('header, main').hide();
$('#alertTimeout').show();
});

View File

@ -0,0 +1,5 @@
/* Welcome to Compass. Use this file to write IE specific override styles.
* Import this file using the following HTML or equivalent:
* <!--[if IE]>
* <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
* <![endif]--> */

View File

@ -0,0 +1,3 @@
/* Welcome to Compass. Use this file to define print styles.
* Import this file using the following HTML or equivalent:
* <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */

View File

@ -0,0 +1,61 @@
/*
Error: File to import not found or unreadable: compass/css3.
on line 8 of screen.scss
3: * Import this file using the following HTML or equivalent:
4: * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> *\/
5:
6: @import url(https://fonts.googleapis.com/css?family=VT323);
7:
8: @import "compass/css3";
9:
10:
11: ::-webkit-scrollbar {
12: width: 0px; /* remove scrollbar space *\/
13: background: transparent; /* optional: just make scrollbar invisible *\/
Backtrace:
screen.scss:8
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/tree/import_node.rb:67:in `rescue in import'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/tree/import_node.rb:45:in `import'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/tree/import_node.rb:28:in `imported_file'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/tree/import_node.rb:37:in `css_import?'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/tree/visitors/perform.rb:311:in `visit_import'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/tree/visitors/base.rb:36:in `visit'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/tree/visitors/perform.rb:158:in `block in visit'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/stack.rb:79:in `block in with_base'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/stack.rb:115:in `with_frame'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/stack.rb:79:in `with_base'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/tree/visitors/perform.rb:158:in `visit'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/tree/visitors/base.rb:52:in `block in visit_children'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/tree/visitors/base.rb:52:in `map'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/tree/visitors/base.rb:52:in `visit_children'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/tree/visitors/perform.rb:167:in `block in visit_children'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/tree/visitors/perform.rb:179:in `with_environment'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/tree/visitors/perform.rb:166:in `visit_children'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/tree/visitors/base.rb:36:in `block in visit'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/tree/visitors/perform.rb:186:in `visit_root'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/tree/visitors/base.rb:36:in `visit'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/tree/visitors/perform.rb:157:in `visit'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/tree/visitors/perform.rb:8:in `visit'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/tree/root_node.rb:36:in `css_tree'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/tree/root_node.rb:29:in `render_with_sourcemap'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/engine.rb:378:in `_render_with_sourcemap'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/engine.rb:295:in `render_with_sourcemap'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/plugin/compiler.rb:490:in `update_stylesheet'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/plugin/compiler.rb:209:in `each'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/plugin/compiler.rb:209:in `update_stylesheets'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/plugin.rb:82:in `update_stylesheets'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/exec/sass_scss.rb:361:in `watch_or_update'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/exec/sass_scss.rb:51:in `process_result'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/exec/base.rb:52:in `parse'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/lib/sass/exec/base.rb:19:in `parse!'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.19/bin/scss:13:in `<top (required)>'
/usr/local/bin/scss:23:in `load'
/usr/local/bin/scss:23:in `<main>'
*/
body:before {
white-space: pre;
font-family: monospace;
content: "Error: File to import not found or unreadable: compass/css3.\A on line 8 of screen.scss\A \A 3: * Import this file using the following HTML or equivalent:\A 4: * <link href=\"/stylesheets/screen.css\" media=\"screen, projection\" rel=\"stylesheet\" type=\"text/css\" /> */\A 5: \A 6: @import url(https://fonts.googleapis.com/css?family=VT323);\A 7: \A 8: @import \"compass/css3\";\A 9: \A 10: \A 11: ::-webkit-scrollbar {\A 12: width: 0px; /* remove scrollbar space */\A 13: background: transparent; /* optional: just make scrollbar invisible */"; }

View File

@ -0,0 +1,103 @@
/* Welcome to Compass.
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
@import url(https://fonts.googleapis.com/css?family=VT323);
@import "compass/css3";
::-webkit-scrollbar {
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
@font-face {
font-family: mrRobot;
src: url(../fonts/MRROBOT.ttf);
}
body {
font-family: 'VT323',sans-serif ;
color: white;
background-color: black;
padding: 0;
margin: 0;
}
header{
width: 35%;
display: inline-block;
vertical-align: top;
padding: 30px;
h1{
font-size: 3em;
}
h2{
font-size: 2em;
}
p{
font-size: 1.2em;
}
}
main{
width: 55%;
display: inline-block;
vertical-align: top;
height: 100vh;
overflow-y: scroll;
ul{
margin-top: 60px;
list-style-type: none;
padding: 0;
li {
padding: 0 30px;
opacity: .6;
&.active{
opacity: 1;
}
}
}
}
.unavaliable{
opacity: .3;
}
.pixel-grid {
position: fixed;
top: 0;
height: 0;
z-index: -1;
opacity: 0;
transition: opacity 1000ms ease-out 500ms;
&.appear {
opacity: .8;
}
}
#loader{
display: inline;
position: fixed;
top: 50%;
width: 100%;
text-align: center;
@include translate(0, -50%);
}
#alertTimeout{
display: inline;
position: fixed;
top: 50%;
width: 100%;
text-align: center;
@include translate(0, -50%);
a{
color: white;
}
}

View File

@ -0,0 +1,5 @@
/* Welcome to Compass. Use this file to write IE specific override styles.
* Import this file using the following HTML or equivalent:
* <!--[if IE]>
* <link href="/stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
* <![endif]--> */

View File

@ -0,0 +1,3 @@
/* Welcome to Compass. Use this file to define print styles.
* Import this file using the following HTML or equivalent:
* <link href="/stylesheets/print.css" media="print" rel="stylesheet" type="text/css" /> */

View File

@ -0,0 +1,118 @@
/* Welcome to Compass.
* In this file you should write your main styles. (or centralize your imports)
* Import this file using the following HTML or equivalent:
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
@import url(https://fonts.googleapis.com/css?family=VT323);
/* line 11, ../sass/screen.scss */
::-webkit-scrollbar {
width: 0px;
/* remove scrollbar space */
background: transparent;
/* optional: just make scrollbar invisible */
}
@font-face {
font-family: mrRobot;
src: url(../fonts/MRROBOT.ttf);
}
/* line 21, ../sass/screen.scss */
body {
font-family: "VT323", sans-serif;
color: white;
background-color: black;
padding: 0;
margin: 0;
}
/* line 29, ../sass/screen.scss */
header {
width: 35%;
display: inline-block;
vertical-align: top;
padding: 30px;
}
/* line 35, ../sass/screen.scss */
header h1 {
font-size: 3em;
}
/* line 38, ../sass/screen.scss */
header h2 {
font-size: 2em;
}
/* line 42, ../sass/screen.scss */
header p {
font-size: 1.2em;
}
/* line 47, ../sass/screen.scss */
main {
width: 55%;
display: inline-block;
vertical-align: top;
height: 100vh;
overflow-y: scroll;
}
/* line 53, ../sass/screen.scss */
main ul {
margin-top: 60px;
list-style-type: none;
padding: 0;
}
/* line 57, ../sass/screen.scss */
main ul li {
padding: 0 30px;
opacity: .6;
}
/* line 60, ../sass/screen.scss */
main ul li.active {
opacity: 1;
}
/* line 67, ../sass/screen.scss */
.unavaliable {
opacity: .3;
}
/* line 71, ../sass/screen.scss */
.pixel-grid {
position: fixed;
top: 0;
height: 0;
z-index: -1;
opacity: 0;
transition: opacity 1000ms ease-out 500ms;
}
/* line 79, ../sass/screen.scss */
.pixel-grid.appear {
opacity: .8;
}
/* line 84, ../sass/screen.scss */
#loader {
display: inline;
position: fixed;
top: 50%;
width: 100%;
text-align: center;
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
/* line 93, ../sass/screen.scss */
#alertTimeout {
display: inline;
position: fixed;
top: 50%;
width: 100%;
text-align: center;
-moz-transform: translate(0, -50%);
-ms-transform: translate(0, -50%);
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
}
/* line 100, ../sass/screen.scss */
#alertTimeout a {
color: white;
}

View File

@ -0,0 +1,103 @@
@import url(https://fonts.googleapis.com/css?family=IM+Fell+DW+Pica:400,400italic);
/* Chrome, Safari, Opera */
@-webkit-keyframes glow {
0% {color: #887f76;}
50% {color: #fcf1e0;}
}
/* Standard syntax */
@keyframes glow {
0% {color: #887f76;}
50% {color: #fcf1e0;}
}
@media screen and (min-width: 480px) {
header, main, footer{
display: none !important;
}
#alert{
display: block!important;
}
}
#alert{
display: none;
}
body{
font-family: 'IM Fell DW Pica', serif;
background-color: black;
color: #aea49a;
position: relative;
}
header, .logo {
width: 200px;
height: 200px;
display: block;
background-size: cover;
background-image: url(../imgs/logo.jpg);
background-position: center;
margin: 0 auto;
}
#help{
position: absolute;
width: 100wv;
height: 100vh;
background-color: rgba(0, 0, 0, 0.9);
z-index: 2;
top: 0;
left: 0;
padding-bottom: 60px;
}
#help div{
}
p{
margin: 0 30px;
user-select :none;
}
h1, h2 {
text-align: center;
}
textarea {
margin: 5px 30px;
width: calc(100% - 60px);
height: 120px;
background-color: #212121;
border: 1px solid #aea49a;
border-radius: 5px;
color: #aea49a;
}
input{
margin: 5px 30px;
width: calc(100% - 65px);
background-color: #212121;
border: 1px solid #aea49a;
border-radius: 5px;
color: #aea49a;
padding: 5px;
}
button{
background-color: black;
font-size: 2em;
border: 1px solid #000;
width: 50px;
height: 50px;
color: #aea49a;
}
#close{
padding-top: 20px;
text-align: center;
font-style: italic;
animation: glow 2s ease infinite;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

View File

@ -0,0 +1,22 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Calque_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1000 1000" style="enable-background:new 0 0 1000 1000;" xml:space="preserve">
<style type="text/css">
.st0{fill:#8A4996;}
.st1{fill:#6D358B;}
.st2{fill:#9A5BA1;}
.st3{fill:#FFFFFF;}
.st4{font-family:'Lato-Bold';}
.st5{font-size:749.7783px;}
</style>
<polygon class="st0" points="502.6,46.5 104.7,275 502.6,503 900.5,274.8 "/>
<polygon class="st1" points="502.6,503 104.7,275 104.7,732 502.6,958.5 "/>
<polygon class="st2" points="502.6,503 900.5,275 900.5,732 502.6,958.5 "/>
<g>
<path class="st3" d="M502.6,46.5L900.5,275v457L502.6,958.5L104.7,732V275L502.6,46.5 M502.6,3.6L484,14.2L86.1,242.7l-18.7,10.7
V275v457v21.7l18.8,10.7l397.9,226.5l18.4,10.5l18.4-10.5l397.9-226.5l18.8-10.7V732V275v-21.6L919,242.7L521.1,14.2L502.6,3.6
L502.6,3.6z"/>
</g>
<text transform="matrix(1 0 0 1 332.9708 780.0419)" class="st3 st4 st5">?</text>
</svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

File diff suppressed because it is too large Load Diff

View File

@ -0,0 +1,10 @@
$(document).ready(function(){
$('main').hide();
$('footer').hide();
$('#close').click(function(){
$('main').show();
$('footer').show();
$('#help').hide();
});
});