diff --git a/static/ripple.css b/static/ripple.css index 294ca63..e877b12 100644 --- a/static/ripple.css +++ b/static/ripple.css @@ -1,7 +1,54 @@ +@import url(https://fonts.googleapis.com/css?family=Pacifico); +@import url('https://fonts.googleapis.com/css?family=Anton'); + .ripple.logo { padding-top: 4px; } - +/* Chrome, Safari, Opera */ +@-webkit-keyframes rainbow{ + 0%{color: orange;} + 10%{color: purple;} + 20%{color: red;} + 30%{color: CadetBlue;} + 40%{color: yellow;} + 50%{color: coral;} + 60%{color: green;} + 70%{color: cyan;} + 80%{color: DeepPink;} + 90%{color: DodgerBlue;} + 100%{color: orange;} + } + + /* Internet Explorer */ + @-ms-keyframes rainbow{ + 0%{color: orange;} + 10%{color: purple;} + 20%{color: red;} + 30%{color: CadetBlue;} + 40%{color: yellow;} + 50%{color: coral;} + 60%{color: green;} + 70%{color: cyan;} + 80%{color: DeepPink;} + 90%{color: DodgerBlue;} + 100%{color: orange;} + } + + /* Standar Syntax */ + @keyframes rainbow{ + 0%{color: orange;} + 10%{color: purple;} + 20%{color: red;} + 30%{color: CadetBlue;} + 40%{color: yellow;} + 50%{color: coral;} + 60%{color: green;} + 70%{color: cyan;} + 80%{color: DeepPink;} + 90%{color: DodgerBlue;} + 100%{color: orange;} + } + .huge.heading { background-color: #2e2e2e; width: 100%; @@ -26,10 +73,19 @@ } .owner { - -webkit-animation: rainbow 2s infinite; - -ms-animation: rainbow 2s infinite; - animation: rainbow 2s infinite; - + + /* Font options */ + font-family: 'Pacifico', cursive; + text-shadow: 2px 2px 4px #000000; + + /* Chrome, Safari, Opera */ + -webkit-animation: rainbow 5s infinite; + + /* Internet Explorer */ + -ms-animation: rainbow 5s infinite; + + /* Standar Syntax */ + animation: rainbow 5s infinite; } .dev