First implementation of Likes

1 files changed, 111 insertions, 0 deletions

diff --git a/src/css/_contenu.scss b/src/css/_contenu.scss
index 4dab365..c261aff 100755
--- a/src/css/_contenu.scss
+++ b/src/css/_contenu.scss
@@ -281,6 +281,116 @@ code {
     }
 }
 
+section.likes {
+  display: flex;
+  justify-content: center;
+
+  .likesBox {
+    padding: 20px;
+    border-radius: 8px;
+    background-color: #CDE3EC;
+    display: flex;
+
+    .likesTitle {
+      font: monospace;
+      font-family: Source Sans Pro,Segoe UI,Trebuchet MS,Helvetica,Helvetica Neue,Arial,sans-serif;
+      font-weight: 800;
+    }
+    .likesText {
+      font-size: 0.8em;
+    }
+    .likesNotes {
+      font-size: 0.8em;
+      color: #777;
+      &.err {
+        color: red;
+      }
+    }
+
+
+    .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;
+      }
+
+      .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;
+      }
+
+      .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;
+        color: #00324D;
+        text-align: center;
+        position: relative;
+        top: -10px;
+        height: 0;
+      }
+    }
+
+    @keyframes stroke-animation {
+      0% {
+        fill: transparent;
+        transform: scale(1);
+      }
+      50% {
+        fill: pink;
+        transform: scale(1.1);
+      }
+      70% {
+        transform: scale(1);
+      }
+      100% {
+        stroke-dashoffset: 0;
+        fill: pink;
+      }
+    }
+
+    @keyframes fade-animation {
+      0% {
+        fill: transparent;
+        transform: scale(1);
+      }
+      13% {
+        fill: lightpink;
+        transform: scale(1.2);
+        opacity: 1;
+      }
+      66% {
+        opacity: 0.8;
+      }
+      100% {
+        transform: scale(2);
+        opacity: 0;
+      }
+    }
+  }
+}
+
 .tags {
   display: flex;
   gap: 10px;
@@ -293,6 +403,7 @@ code {
     padding: 0px 8px;
     border-radius: 3px;
   }
+  
 }
 .inline-tag {
   position: relative;