user set underline position on single

bdthemes · Jan 24, 2015 · c68543d · c68543d
1 parent f3c1228
commit c68543d
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 73 deletions.
diff --git a/css/animation.css b/css/animation.css
diff --git a/css/animation.css.map b/css/animation.css.map
diff --git a/css/animation.scss b/css/animation.scss
@@ -34,32 +34,23 @@
 
 @-webkit-keyframes iconAnimation {
     0% {
-        -webkit-transform: translateY(0px);
-    }
-    50% {
-        -webkit-transform: translateY(-20px);
+        -webkit-transform: translateY(-40px);
     }
     90% {
         -webkit-transform: translateY(0px);
     }
 }
 @-moz-keyframes iconAnimation {
     0% {
-        -moz-transform: translateY(0px);
-    }
-    50% {
-        -moz-transform: translateY(-20px);
+        -moz-transform: translateY(-40px);
     }
     90% {
         -moz-transform: translateY(0px);
     }
 }
 @keyframes iconAnimation {
     0% {
-        transform: translateY(0px);
-    }
-    50% {
-        transform: translateY(-20px);
+        transform: translateY(-40px);
     }
     90% {
         transform: translateY(0px);

diff --git a/css/stylesheet.css b/css/stylesheet.css
diff --git a/css/stylesheet.css.map b/css/stylesheet.css.map
diff --git a/css/stylesheet.scss b/css/stylesheet.scss
@@ -200,9 +200,9 @@ header {
         display: block;
         margin: 200px auto 0 auto;
         position: relative;
-        -webkit-animation: iconAnimation 8s 0s linear infinite none;
-        -moz-animation: iconAnimation 8s 0s linear infinite none;
-        animation: iconAnimation 8s 0s linear infinite none;
+        -webkit-animation: iconAnimation 0.5s 0s ease-out none;
+        -moz-animation: iconAnimation 0.5s 0s ease-out none;
+        animation: iconAnimation 0.5s 0s ease-out none;
         span {
             position: absolute;
             display: inline;
@@ -226,7 +226,7 @@ header {
             left: 0;
             top: 0;
             background: url(../i/grid.svg) no-repeat right bottom;
-            opacity: 0.5;
+            opacity: 0;
             -webkit-animation: opacityAnimation 8s 0s linear infinite none;
             -moz-animation: opacityAnimation 8s 0s linear infinite none;
             animation: opacityAnimation 8s 0s linear infinite none;

diff --git a/index.html b/index.html
@@ -25,15 +25,16 @@
         <a href="#" class="icon-coffee">Buy me a coffee</a> -->
     </div>
     <div class="fullLogo">
-        <span>
+        <span >
             underline.js
         </span>
     </div>
     <h1>A quest to pixel-perfect underline <br>
 with canvas, and music</h1>
 </header>
 <article>
-<a href="#" class="underline" style="line-height: 1.4em; font-size: 24px">parapsychologist</a>
+<a href="#" class="underline" style="line-height: 1.4em; font-size: 124px">parapsychologist</a>
+<a href="#" class="underline" style="font-style: italic; line-height: 1.4em; font-size: 120px">underline.js</a>
     <h2>Manifesto</h2>
 
     <p>A javascript library that sets out to do one simple job: draw and animate the most perfect and playful text underline</p>