From 9509badb77ca765bd3d6011a81d27599eadd28dd Mon Sep 17 00:00:00 2001 From: ache Date: Sun, 3 Dec 2023 12:00:37 +0100 Subject: Corrige l'alignement de la section des kudos --- src/css/_contenu.scss | 85 +++++++++++++++++++++++++++------------------------ 1 file changed, 45 insertions(+), 40 deletions(-) (limited to 'src/css/_contenu.scss') 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% { -- cgit v1.2.3