diff --git a/public/willpower.css b/public/willpower.css index 224bf1e..c2dc184 100644 --- a/public/willpower.css +++ b/public/willpower.css @@ -6,8 +6,11 @@ html, body { margin: 0px; height: 100%; font-family: sans-serif; + background-color: black; } +.modal { opacity: 1; } + .modal.background { background-image: url('/tip.jpg'); background-position: center; @@ -17,8 +20,12 @@ html, body { width: 100%; position: absolute; display: flex; - align-items: center; justify-content: center; + -webkit-animation-name: fade_out; + -webkit-animation-duration: 1.5s; + animation-name: fade_out; + animation-duration: 1.5s; + opacity: 0.5; } .modal.box { @@ -35,6 +42,9 @@ html, body { animation-duration: 1.5s; position: absolute; z-index: 10; + top: 50%; + left: 50%; + margin: -10em auto auto -29em; } .modal.buttons { @@ -96,23 +106,23 @@ html, body { } @-webkit-keyframes fade_in { - from { - opacity: 0; - } - - to { - opacity: 1; - } + from { opacity: 0; } + to { opacity: 1; } } @keyframes fade_in { - from { - opacity: 0; - } + from { opacity: 0; } + to { opacity: 1; } +} - to { - opacity: 1; - } +@-webkit-keyframes fade_out { + from { opacity: 1; } + to { opacity: 0.5; } +} + +@keyframes fade_out { + from { opacity: 1; } + to { opacity: 0.5; } } @keyframes spin { diff --git a/views/index.erb b/views/index.erb index dbd46b2..97596b7 100644 --- a/views/index.erb +++ b/views/index.erb @@ -1,24 +1,23 @@ -