cool

cssandstuff · Mar 29, 2024 · 35eeec8 · 35eeec8
1 parent 72f7052
commit 35eeec8
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 4 deletions.
diff --git a/deno.json b/deno.json
@@ -1,7 +1,7 @@
 {
   "tasks": {
     "clean": "rm -rf _site",
-    "writeKVData": "deno run --allow-write server/write-data.ts",
+    "writeKVData": "deno run --allow-write --unstable-kv server/write-data.ts",
     "generate": "deno task clean && deno run --allow-read --allow-write --allow-env --allow-sys npm:@11ty/eleventy@canary",
     "generateSlim": "LAYOUT=slim deno run --allow-read --allow-write --allow-env --allow-sys npm:@11ty/eleventy@canary",
     "tscheck": "deno check server/main.ts",

diff --git a/server/service.ts b/server/service.ts
@@ -32,6 +32,8 @@ async function checkAlreadyLiked (ctx: Context){
     alreadyLiked = true;
   }
 
+  alreadyLiked = false;
+
   return {likes, alreadyLiked}
 }
 

diff --git a/src/_includes/webc/dewc-like.webc b/src/_includes/webc/dewc-like.webc
@@ -6,14 +6,15 @@
     data-hx-target="#likeme" 
     data-hx-select="#likeme" 
     data-hx-trigger="load" 
-    data-hx-get="/likes.html"></output>
+    data-hx-get="/likes.html">
+  </output>
 </div>
 
 <style>
   @keyframes fadeIn {
     0% {
         opacity: 0;
-        transform: translateY(0.5em);
+        transform: translateY(0.2em);
       }
     100% {
       opacity: 0.8;
@@ -181,6 +182,31 @@
 
 
   #likeme .button:hover{
-    transform: scale(1.1) rotate(6deg);
+    transition: 0.3s all;
+    background: /* heart */
+    linear-gradient(var(--red), var(--mauve)) calc(var(--gridwidth) * 0) calc(var(--gridwidth) * 2) / calc(var(--pixelwidth) * 1) calc(var(--gridwidth) * 5), 
+    linear-gradient(var(--red), var(--mauve)) calc(var(--gridwidth) * 1) calc(var(--gridwidth) * 1) / calc(var(--pixelwidth) * 1) calc(var(--gridwidth) * 1),
+    linear-gradient(var(--red), var(--mauve)) calc(var(--gridwidth) * 1) calc(var(--gridwidth) * 7) / calc(var(--pixelwidth) * 1) calc(var(--gridwidth) * 1),
+    linear-gradient(var(--red), var(--mauve)) calc(var(--gridwidth) * 2) calc(var(--gridwidth) * 0) / calc(var(--pixelwidth) * 4) calc(var(--gridwidth) * 1),
+    linear-gradient(var(--red), var(--mauve)) calc(var(--gridwidth) * 6) calc(var(--gridwidth) * 1) / calc(var(--pixelwidth) * 1) calc(var(--gridwidth) * 1),
+    linear-gradient(var(--red), var(--mauve)) calc(var(--gridwidth) * 7) calc(var(--gridwidth) * 2) / calc(var(--pixelwidth) * 1) calc(var(--gridwidth) * 1),
+    linear-gradient(var(--red), var(--mauve)) calc(var(--gridwidth) * 8) calc(var(--gridwidth) * 1) / calc(var(--pixelwidth) * 1) calc(var(--gridwidth) * 1),
+    linear-gradient(var(--red), var(--mauve)) calc(var(--gridwidth) * 9) calc(var(--gridwidth) * 0) / calc(var(--pixelwidth) * 4) calc(var(--gridwidth) * 1),
+    linear-gradient(var(--red), var(--mauve)) calc(var(--gridwidth) * 13) calc(var(--gridwidth) * 1) / calc(var(--pixelwidth) * 1) calc(var(--gridwidth) * 1),
+    linear-gradient(var(--red), var(--mauve)) calc(var(--gridwidth) * 14) calc(var(--gridwidth) * 2) / calc(var(--pixelwidth) * 1) calc(var(--gridwidth) * 5),
+    linear-gradient(var(--red), var(--mauve)) calc(var(--gridwidth) * 13) calc(var(--gridwidth) * 7) / calc(var(--pixelwidth) * 1) calc(var(--gridwidth) * 1),
+    linear-gradient(var(--red), var(--mauve)) calc(var(--gridwidth) * 2) calc(var(--gridwidth) * 8) / calc(var(--pixelwidth) * 1) calc(var(--gridwidth) * 1),
+    linear-gradient(var(--red), var(--mauve)) calc(var(--gridwidth) * 3) calc(var(--gridwidth) * 9) / calc(var(--pixelwidth) * 1) calc(var(--gridwidth) * 1),
+    linear-gradient(var(--red), var(--mauve)) calc(var(--gridwidth) * 4) calc(var(--gridwidth) * 9) / calc(var(--pixelwidth) * 1) calc(var(--gridwidth) * 2),
+    linear-gradient(var(--red), var(--mauve)) calc(var(--gridwidth) * 5) calc(var(--gridwidth) * 9) / calc(var(--pixelwidth) * 1) calc(var(--gridwidth) * 3),
+    linear-gradient(var(--red), var(--mauve)) calc(var(--gridwidth) * 6) calc(var(--gridwidth) * 9) / calc(var(--pixelwidth) * 1) calc(var(--gridwidth) * 4),
+    linear-gradient(var(--red), var(--mauve)) calc(var(--gridwidth) * 7) calc(var(--gridwidth) * 9) / calc(var(--pixelwidth) * 1) calc(var(--gridwidth) * 5),
+    linear-gradient(var(--red), var(--mauve)) calc(var(--gridwidth) * 8) calc(var(--gridwidth) * 9) / calc(var(--pixelwidth) * 1) calc(var(--gridwidth) * 4),
+    linear-gradient(var(--red), var(--mauve)) calc(var(--gridwidth) * 9) calc(var(--gridwidth) * 9) / calc(var(--pixelwidth) * 1) calc(var(--gridwidth) * 3),
+    linear-gradient(var(--red), var(--mauve)) calc(var(--gridwidth) * 10) calc(var(--gridwidth) * 9) / calc(var(--pixelwidth) * 1) calc(var(--gridwidth) * 2),
+    linear-gradient(var(--red), var(--mauve)) calc(var(--gridwidth) * 11) calc(var(--gridwidth) * 9) / calc(var(--pixelwidth) * 1) calc(var(--gridwidth) * 1),
+    linear-gradient(var(--red), var(--mauve)) calc(var(--gridwidth) * 12) calc(var(--gridwidth) * 8) / calc(var(--pixelwidth) * 1) calc(var(--gridwidth) * 1);    
+
+    background-repeat: no-repeat;
   }
 </style>
diff --git a/src/css/style.css b/src/css/style.css
@@ -26,6 +26,8 @@
       "b"
       "c";
     height: 100%;
+    max-width: 90ch;
+    margin: auto;
   }
 
   main{
-Original file line number
+Diff line change
@@ Expand Up / @@ -32,6 +32,8 @@ async function checkAlreadyLiked (ctx: Context){ @@
         alreadyLiked = true;
       }
+      alreadyLiked = false;
       return {likes, alreadyLiked}
     }
@@ Expand Down @@