Git_Mirror/Werewolf
1
0
Fork 0
mirror of https://github.com/AlecM33/Werewolf.git synced 2025-12-26 15:57:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

cleanud up gradient, attempted fix for killed animation in safari

Browse Source
This commit is contained in:
Maier
2020-01-10 10:11:20 -05:00
parent f7154f45c2
commit 9b3ced1b58
3 changed files with 22 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
static/game.js
View File

@@ -54,14 +54,14 @@ function triggerExitAnimation(e) {
e.target.offsetWidth;
e.target.classList.add(e.target.exitClass);
window.setTimeout(()=>{
e.target.addEventListener('animationend', hideAfterExit, {"capture": true, "once": true});
e.target.addEventListener('animationend', hideAfterExit, true);
},0);
}
function triggerEntranceAnimation(selector, entranceClass, exitClass, image) {
let transitionEl = document.querySelector(selector);
transitionEl.style.display = 'flex';
transitionEl.addEventListener('animationend', triggerExitAnimation, {"capture": true, "once": true});
transitionEl.addEventListener('animationend', triggerExitAnimation, true);
transitionEl.classList.remove(entranceClass);
transitionEl.entranceClass = entranceClass;
transitionEl.exitClass = exitClass;

12
static/styles.css
View File

@@ -55,7 +55,6 @@
.app-title img {
width: 100%;
filter: drop-shadow(45px -15px 100px rgba(255,255,255, 1));
}
#card-select-header, #game-start {
@@ -98,8 +97,6 @@
}
#overlay {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
@@ -164,7 +161,6 @@
.app-title img {
width: 35em;
filter: drop-shadow(45px -15px 100px rgba(255,255,255, 1));
}
#main-buttons a {
@@ -231,6 +227,7 @@
html, body {
margin: 0 auto;
width: 100%;
height: 100%;
color: #bfb8b8;
font-family: 'sitewide-sans-serif', sans-serif;
background-color: #23282b !important;
@@ -264,6 +261,13 @@ html, body {
position: relative;
}
#landing-container {
width: 100%;
height: 100%;
text-align: center;
background: linear-gradient(0deg, rgba(35,40,43,0.7959558823529411) 18%, rgba(131,131,131,0.6222864145658263) 100%);
}
.app-title .app-header {
width: 6em;
display: flex;

24
views/index.html
View File

@@ -7,23 +7,23 @@
<script src="../node_modules/socket.io-client/dist/socket.io.js"></script>
</head>
<body>
<div id="app-content">
<div id="landing-container">
<a href="/">
<div class="app-title">
<img src="../assets/images/Wolf_Logo.gif" alt="Where Are the Wolves?" />
</div>
</a>
</div>
<div id="main-buttons">
<a href="/create">
<button class="app-btn">Create Game</button>
</a>
<a href="/join">
<button class="app-btn">Join</button>
</a>
<a href="/learn">
<button class="app-btn">Learn the Game</button>
</a>
<div id="main-buttons">
<a href="/create">
<button class="app-btn">Create Game</button>
</a>
<a href="/join">
<button class="app-btn">Join</button>
</a>
<a href="/learn">
<button class="app-btn">Learn the Game</button>
</a>
</div>
</div>
<footer id="footer">
<div>