blue pulse

vincentwoo · Mar 29, 2012 · 0b2ebff · 0b2ebff
1 parent 296ba1d
commit 0b2ebff
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 26 deletions.
diff --git a/public/css/main.css b/public/css/main.css
@@ -66,38 +66,44 @@ h1, h2, h3 {
 }
 h1 {
   text-align: center;
-  font-size: 1em;
+  font-size: 0.8em;
   padding: 15px 0;
-  height: 1em;
   position: relative;
+  overflow: hidden;
+}
+@-webkit-keyframes grow {
+  from {
+    width: 2px;
+    height: 2px;
+    margin-left: -6px;
+    margin-top: -6px;
+    border-width: 5px;
+    opacity: 0.4;
+  }
+  to {
+    width: 240px;
+    height: 240px;
+    margin-left: -135px;
+    margin-top: -135px;
+    border-width: 15px;
+    opacity: 0;
+  }
 }
 h1 div {
   position: absolute;
   top: 50%;
   left: 50%;
   border-radius: 100px;
-  opacity: 0.5;
-}
-#cyan {
-  width: 10px;
-  height: 10px;
-  margin-left: -5px;
-  margin-top: -5px;
   border: 2px solid #29D9C2;
-}
-#yellow {
-  width: 6px;
-  height: 6px;
-  margin-left: -3px;
-  margin-top: -3px;
-  border: 1px solid yellow;
-}
-#magenta {
-  width: 20px;
-  height: 20px;
-  margin-left: -10px;
-  margin-top: -10px;
-  border: 4px solid red;
+  -webkit-animation: grow;
+  -webkit-animation-timing-function: ease;
+  -webkit-animation-delay: 0s;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-duration: 5s;
+  z-index: -1;
+}
+h1:hover div {
+  border-color: black;
 }
 h2, h3 {
   text-align: right;

diff --git a/templates/layout.rhtml b/templates/layout.rhtml
@@ -27,9 +27,9 @@
         <div id="nav">
           <h1>
             <a href="/">vincentwoo.com</a>
-            <div id="magenta"/>
-            <div id="cyan"/>
-            <div id="yellow"/>
+
+            <div></div>
+
           </h1>
           <h3>nav</h3>
           <ul>