diff options
-rwxr-xr-x | src/css/_contenu.scss | 85 | ||||
-rw-r--r-- | src/templates/likes.tmpl | 18 |
2 files changed, 55 insertions, 48 deletions
diff --git a/src/css/_contenu.scss b/src/css/_contenu.scss index 046c723..97c3190 100755 --- a/src/css/_contenu.scss +++ b/src/css/_contenu.scss @@ -311,6 +311,7 @@ article { section.likes { display: flex; justify-content: center; + margin: 3rem 0 1rem 0; @mixin lightMode { .likesBox { @@ -364,46 +365,50 @@ section.likes { } - .icon { - fill: transparent; - stroke: pink; - stroke-width: 20; - cursor: pointer; - position: relative; - svg { - overflow: visible; - width: 10rem; - } + .layout { + display: flex; + align-items: center; + .icon { + fill: transparent; + stroke: pink; + stroke-width: 20; + cursor: pointer; + position: relative; + svg { + overflow: visible; + width: 10rem; + } - path { - stroke-dashoffset: 0; - stroke-dasharray: 1550; - transform-origin: center; - } + path { + stroke-dashoffset: 0; + stroke-dasharray: 1550; + transform-origin: center; + } - .hear-main { - z-index: 2; - } - .heart-background { - position: absolute; - left: 0; - right: 0; - z-index: 1; - stroke: none; - } - .heart-main path.anim { - animation: stroke-animation 2s ease-in-out forwards; - } + .hear-main { + z-index: 2; + } + .heart-background { + position: absolute; + left: 0; + right: 0; + z-index: 1; + stroke: none; + } + .heart-main path.anim { + animation: stroke-animation 1.5s ease-in-out forwards; + } - .heart-main ~ .heart-background path.anim-click { - animation: fade-animation 0.35s ease-in-out forwards; - } - .nbLikes { - font-family: Source Sans Pro,Segoe UI,Trebuchet MS,Helvetica,Helvetica Neue,Arial,sans-serif; - text-align: center; - position: relative; - top: -10px; - height: 0; + .heart-main ~ .heart-background path.anim-click { + animation: fade-animation 0.35s ease-in-out forwards; + } + .nbLikes { + font-family: Source Sans Pro,Segoe UI,Trebuchet MS,Helvetica,Helvetica Neue,Arial,sans-serif; + text-align: center; + position: relative; + top: -10px; + height: 0; + } } } @@ -412,11 +417,11 @@ section.likes { fill: transparent; transform: scale(1); } - 50% { + 30% { fill: pink; - transform: scale(1.1); + transform: scale(1.25); } - 70% { + 50% { transform: scale(1); } 100% { diff --git a/src/templates/likes.tmpl b/src/templates/likes.tmpl index 925d0c4..c81d936 100644 --- a/src/templates/likes.tmpl +++ b/src/templates/likes.tmpl @@ -1,13 +1,15 @@ <section class="likes" style="display: none"> <span class="likesBox"> - <div class="icon"> - <svg class="heart-main" viewBox="0 0 512 512" title="heart" z-index="1" height="100"> - <path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" class=""></path> - </svg> - <svg class="heart-background" viewBox="0 0 512 512" title="heart" z-index="1" height="100"> - <path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" class=""></path> - </svg> - <div class="nbLikes"><div></div></div> + <div class="layout"> + <div class="icon"> + <svg class="heart-main" viewBox="0 0 512 512" title="heart" z-index="1" height="100"> + <path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" class=""></path> + </svg> + <svg class="heart-background" viewBox="0 0 512 512" title="heart" z-index="1" height="100"> + <path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" class=""></path> + </svg> + <div class="nbLikes"><div></div></div> + </div> </div> <div> <span class="likesTitle">{{ like_title }}</span> |