+
+ Obtain a command block
diff --git a/js/main.js b/js/main.js
index 606a6f7..d41eeae 100644
--- a/js/main.js
+++ b/js/main.js
@@ -124,6 +124,29 @@ $(document).ready(function(){
}
});
+ // Animate donation div
+ var donationheight = $("#donationanim").height() * 1.5;
+ $("#donationanim").css({
+ "transform" : "translateY(-"+donationheight+"px)",
+ "visibility" : "visible"
+ });
+
+ // Slide in
+ setTimeout(function(){
+ $("#donationanim").css({
+ "transform" : "translateY(0px)",
+ "transition" : "400ms",
+ });
+
+ // Slide out
+ setTimeout(function(){
+ $("#donationanim").css({
+ "transform" : "translateY(-"+donationheight+"px)",
+ });
+ }, 4000);
+
+ }, 2000);
+
});
function setup(){
diff --git a/style.css b/style.css
index f755f2a..8b62d65 100644
--- a/style.css
+++ b/style.css
@@ -30,20 +30,14 @@ a{
color: #000000;
}
-#donate{
- width: 64px;
- height: 64px;
- display: inline;
- position: relative;
-}
-#donate .colorful{
- opacity: 0;
+#donationanim{
position: absolute;
- left: 0;
- transition: 0.5s;
-}
-#donate:hover .colorful{
- opacity: 1;
+ width: 300px;
+ left: 50%;
+ margin-left: -150px;
+ padding: 5px;
+ text-align: center;
+ visibility: hidden;
}
#gl{
@@ -54,10 +48,14 @@ a{
position: fixed;
}
-#card{
+.card{
background-color: #ffffff;
box-shadow: 0 2px 4px #555555;
margin: 0.5em;
+ border-radius: 3px;
+}
+
+.right{
margin-left: 60%;
}
@@ -70,6 +68,7 @@ a{
padding: 1em;
font-family: monospace;
background-color: #37474f;
+ border-radius: 3px;
color: #ffffff;
}