mirror of
https://github.com/tiennm99/hugoDocs.git
synced 2026-10-13 16:14:59 +00:00
Fix eye blinking animation on homepage
This commit is contained in:
Ryan Watters committed
1 parent
4677cbec67
commit
1b7b1f4fcd
5 files changed
+11
-12
No files matched your search
@@ -31,10 +31,10 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="home-row features">
|
||||
<h2>What makes Hugo different?</h2>
|
||||
<h2>What Makes Hugo Special</h2>
|
||||
</div>
|
||||
<div class="home-row references">
|
||||
<h2>See what others are saying about Hugo</h2>
|
||||
{{ partial "homepage/homepage-references.html" . }}
|
||||
{{ partial "homepage/homepage-tweets.html" . }}
|
||||
</div>
|
||||
</main>
|
||||
File renamed without changes.
@@ -9,7 +9,7 @@
|
||||
<path d="M143.2,54.3C109.8,58.2 114.3,93 127.2,104.3C151.2,125.3 176.2,104.3 173.4,83.1C170.9,62.7 153.6,53.1 143.2,54.3Z" style="fill:rgb(224,222,220);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1.09329,0,0,1.09329,20.0647,-11.6982)">
|
||||
<path d="M145.5,72.9C151.792,72.9 156.9,78.008 156.9,84.3C156.9,90.592 151.792,95.7 145.5,95.7C139.208,95.7 134.1,90.592 134.1,84.3C134.1,78.008 139.208,72.9 145.5,72.9ZM71.356,72.746C77.648,72.746 82.756,77.854 82.756,84.146C82.756,90.438 77.648,95.546 71.356,95.546C65.064,95.546 59.956,90.438 59.956,84.146C59.956,77.854 65.064,72.746 71.356,72.746Z" style="fill:rgb(17,18,18);"/>
|
||||
<path class="eyes" d="M145.5,72.9C151.792,72.9 156.9,78.008 156.9,84.3C156.9,90.592 151.792,95.7 145.5,95.7C139.208,95.7 134.1,90.592 134.1,84.3C134.1,78.008 139.208,72.9 145.5,72.9ZM71.356,72.746C77.648,72.746 82.756,77.854 82.756,84.146C82.756,90.438 77.648,95.546 71.356,95.546C65.064,95.546 59.956,90.438 59.956,84.146C59.956,77.854 65.064,72.746 71.356,72.746Z" style="fill:rgb(17,18,18);"/>
|
||||
</g>
|
||||
<g transform="matrix(1.09329,0,0,1.09329,20.0647,-11.6982)">
|
||||
<path d="M142.5,75.8C144.487,75.8 146.1,77.413 146.1,79.4C146.1,81.387 144.487,83 142.5,83C140.513,83 138.9,81.387 138.9,79.4C138.9,77.413 140.513,75.8 142.5,75.8ZM74.274,75.192C76.261,75.192 77.874,76.805 77.874,78.792C77.874,80.779 76.261,82.392 74.274,82.392C72.287,82.392 70.674,80.779 70.674,78.792C70.674,76.805 72.287,75.192 74.274,75.192Z" style="fill:white;"/>
|
||||
@@ -24,7 +24,7 @@
|
||||
<path d="M99,127.7C98.1,128.1 96.6,137.9 101.2,138.4C104.3,138.7 112.8,139.7 114.8,138.4C118.7,135.9 118.3,129.9 116.1,128.4C112.4,126 100,127.2 99,127.7ZM73.6,54.3C107,58.2 102.5,93 89.6,104.3C65.6,125.3 40.6,104.3 43.4,83.1C46,62.7 63.3,53.1 73.6,54.3Z" style="fill:rgb(224,222,220);fill-rule:nonzero;"/>
|
||||
</g>
|
||||
<g transform="matrix(1.09329,0,0,1.09329,20.0647,-11.6982)">
|
||||
<circle cx="71.4" cy="84.3" r="11.4" style="fill:rgb(17,18,18);"/>
|
||||
<circle class="eyes" cx="71.4" cy="84.3" r="11.4" style="fill:rgb(17,18,18);"/>
|
||||
</g>
|
||||
<g transform="matrix(1.09329,0,0,1.09329,20.0647,-11.6982)">
|
||||
<circle cx="74.4" cy="79.4" r="3.6" style="fill:white;"/>
|
||||
|
||||
|
Before Width: | Height: | Size: 5.9 KiB After Width: | Height: | Size: 5.9 KiB |
@@ -146,6 +146,10 @@
|
||||
text-align: center;
|
||||
font-weight: 500;
|
||||
line-height: 1.3;
|
||||
margin-top: 24px;
|
||||
@include MQ(M) {
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
p {
|
||||
text-align: center;
|
||||
@@ -251,13 +255,8 @@ svg {
|
||||
}
|
||||
}
|
||||
|
||||
#hugo-home {
|
||||
width: 60px;
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
top: 33px;
|
||||
z-index: 50;
|
||||
opacity: 0;
|
||||
.eyes {
|
||||
animation: squeeze 2.4s infinite;
|
||||
}
|
||||
|
||||
@keyframes squeeze {
|
||||
|
||||
Vendored
+1
-1
@@ -4,4 +4,4 @@
|
||||
* Licensed under the MIT license - http://opensource.org/licenses/MIT
|
||||
*
|
||||
* Copyright (c) 2016 Daniel Eden
|
||||
*/.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06)}70%{-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0)}90%{-webkit-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0)}}@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06)}70%{-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0)}90%{-webkit-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05, 1.05, 1.05);transform:scale3d(1.05, 1.05, 1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05, 1.05, 1.05);transform:scale3d(1.05, 1.05, 1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25, 0.75, 1);transform:scale3d(1.25, 0.75, 1)}40%{-webkit-transform:scale3d(0.75, 1.25, 1);transform:scale3d(0.75, 1.25, 1)}50%{-webkit-transform:scale3d(1.15, 0.85, 1);transform:scale3d(1.15, 0.85, 1)}65%{-webkit-transform:scale3d(0.95, 1.05, 1);transform:scale3d(0.95, 1.05, 1)}75%{-webkit-transform:scale3d(1.05, 0.95, 1);transform:scale3d(1.05, 0.95, 1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25, 0.75, 1);transform:scale3d(1.25, 0.75, 1)}40%{-webkit-transform:scale3d(0.75, 1.25, 1);transform:scale3d(0.75, 1.25, 1)}50%{-webkit-transform:scale3d(1.15, 0.85, 1);transform:scale3d(1.15, 0.85, 1)}65%{-webkit-transform:scale3d(0.95, 1.05, 1);transform:scale3d(0.95, 1.05, 1)}75%{-webkit-transform:scale3d(1.05, 0.95, 1);transform:scale3d(1.05, 0.95, 1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px, 0, 0);transform:translate3d(-10px, 0, 0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px, 0, 0);transform:translate3d(10px, 0, 0)}}@keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px, 0, 0);transform:translate3d(-10px, 0, 0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px, 0, 0);transform:translate3d(10px, 0, 0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:trLine truncated
|
||||
*/.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}.animated.bounceIn,.animated.bounceOut,.animated.flipOutX,.animated.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s}@-webkit-keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06)}70%{-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0)}90%{-webkit-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0)}}@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);animation-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0)}40%,43%,70%{-webkit-animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06);animation-timing-function:cubic-bezier(0.755, 0.05, 0.855, 0.06)}70%{-webkit-transform:translate3d(0, -15px, 0);transform:translate3d(0, -15px, 0)}90%{-webkit-transform:translate3d(0, -4px, 0);transform:translate3d(0, -4px, 0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05, 1.05, 1.05);transform:scale3d(1.05, 1.05, 1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05, 1.05, 1.05);transform:scale3d(1.05, 1.05, 1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25, 0.75, 1);transform:scale3d(1.25, 0.75, 1)}40%{-webkit-transform:scale3d(0.75, 1.25, 1);transform:scale3d(0.75, 1.25, 1)}50%{-webkit-transform:scale3d(1.15, 0.85, 1);transform:scale3d(1.15, 0.85, 1)}65%{-webkit-transform:scale3d(0.95, 1.05, 1);transform:scale3d(0.95, 1.05, 1)}75%{-webkit-transform:scale3d(1.05, 0.95, 1);transform:scale3d(1.05, 0.95, 1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25, 0.75, 1);transform:scale3d(1.25, 0.75, 1)}40%{-webkit-transform:scale3d(0.75, 1.25, 1);transform:scale3d(0.75, 1.25, 1)}50%{-webkit-transform:scale3d(1.15, 0.85, 1);transform:scale3d(1.15, 0.85, 1)}65%{-webkit-transform:scale3d(0.95, 1.05, 1);transform:scale3d(0.95, 1.05, 1)}75%{-webkit-transform:scale3d(1.05, 0.95, 1);transform:scale3d(1.05, 0.95, 1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px, 0, 0);transform:translate3d(-10px, 0, 0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px, 0, 0);transform:translate3d(10px, 0, 0)}}@keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px, 0, 0);transform:translate3d(-10px, 0, 0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px, 0, 0);transform:translate3d(10px, 0, 0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:trLine truncated
|
||||
Reference in new issue
Block a user