Add HD marker on web page.

jmhobbs · Feb 28, 2017 · 2b7d5a3 · 2b7d5a3
1 parent b948729
commit 2b7d5a3
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 1 deletion.
diff --git a/src/parrot.css b/src/parrot.css
@@ -134,6 +134,27 @@ a.button:hover:after {
   90% {background-color:#FD5258;}
 }
 
+@keyframes hdParrot { 
+  0% {color:#FECE7A;}
+  12% {color:#7EFF7A;}
+  24% {color:#7EFFFF;}
+  36% {color:#7BA3FE;}
+  48% {color:#CB70FE;}
+  60% {color:#FC49F5;}
+  78% {color:#FC4EA7;}
+  90% {color:#FD5258;}
+}
+@-webkit-keyframes hdParrot { 
+  0% {color:#FECE7A;}
+  12% {color:#7EFF7A;}
+  24% {color:#7EFFFF;}
+  36% {color:#7BA3FE;}
+  48% {color:#CB70FE;}
+  60% {color:#FC49F5;}
+  78% {color:#FC4EA7;}
+  90% {color:#FD5258;}
+}
+
 a.button-small {
   border-radius: 5px;
   background: #444;
@@ -286,3 +307,19 @@ div.shirt img {
     height: 300px;
   }
 }
+
+span.hd {
+  font-size: 0.2em;
+  font-weight: bold;
+  vertical-align: super;
+
+  animation-name: hdParrot; 
+  animation-duration:1s; 
+  animation-direction:alternate; 
+  animation-iteration-count:infinite; 
+
+  -webkit-animation-name: hdParrot; 
+  -webkit-animation-duration:1s; 
+  -webkit-animation-direction:alternate; 
+  -webkit-animation-iteration-count:infinite;	
+}
diff --git a/templates/index.html b/templates/index.html
@@ -79,7 +79,7 @@ <h1>Cult of the Party Parrot</h1>
 
         <ul>
           {{#parrots}}
-          <li><img src="/parrots/{{#hd}}{{{hd}}}{{/hd}}{{^hd}}{{gif}}{{/hd}}" alt="{{name}}"/> {{name}}{{#tip}}<span tooltip="{{tip}}">*</span>{{/tip}}</li>
+          <li><img src="/parrots/{{#hd}}{{{hd}}}{{/hd}}{{^hd}}{{gif}}{{/hd}}" alt="{{name}}"/> {{name}}{{#hd}}<span class="hd">HD</span>{{/hd}}{{#tip}}<span tooltip="{{tip}}">*</span>{{/tip}}</li>
           {{/parrots}}
         </ul>