From 682e13e031601b7e0da09a463f6c6cda5e2b9c45 Mon Sep 17 00:00:00 2001 From: asandikci Date: Sun, 25 Jun 2023 21:46:44 +0300 Subject: [PATCH] feat: playground template and collapsable blocks --- assets/js/collapse.js | 15 +++ dev/playground/index.php | 204 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 219 insertions(+) create mode 100644 assets/js/collapse.js create mode 100644 dev/playground/index.php diff --git a/assets/js/collapse.js b/assets/js/collapse.js new file mode 100644 index 0000000..4719eaf --- /dev/null +++ b/assets/js/collapse.js @@ -0,0 +1,15 @@ +var coll = document.getElementsByClassName("collapsed"); +var i; + +for (i = 0; i < coll.length; i++) { + coll[i].nextElementSibling.style.display = "none"; + coll[i].addEventListener("click", function() { + this.classList.toggle("active"); + var content = this.nextElementSibling; + if (content.style.display === "block") { + content.style.display = "none"; + } else { + content.style.display = "block"; + } + }); +} \ No newline at end of file diff --git a/dev/playground/index.php b/dev/playground/index.php new file mode 100644 index 0000000..7b431a7 --- /dev/null +++ b/dev/playground/index.php @@ -0,0 +1,204 @@ + + + +

Error: [$errno] $errstr
in file $errfile line $errline

"; +} +set_error_handler("warnError"); + +if (!$_SERVER['DOCUMENT_ROOT']) { + $_SERVER['DOCUMENT_ROOT'] = '/weblink'; +} +# TODO separate file +?> + + + + + + + isDot()) && str_ends_with($file, ".css")) { + echo '' . PHP_EOL . ' '; + } + } ?> + DEV PLAYGROUND + + + + + + + +

PLAYGROUND

+
+ Trying random stuff that i see on the web (websites, insta reels etc.) +

TODO: CATEGORIZE

+ + +
+ +
+ Before
+ + +
+ After
+ + + +
+ 

+      .images{
+        width: 15%;
+        aspect-ratio: 3/2;
+        object-fit: contain;
+        mix-blend-mode: color-burn;
+      }
+
+
+ + +
+ +
+
+ example image +
Example Image
+
+
Create grid and place both image and figcaption on it. add gradient effect and transition to figcaption. Then make opacity: 1 when hover
+ + 
+      
+        <figure class="card">
+          <img src="image.jpg" alt="...">
+          <figcaption>Example Image</figcaption>
+        </figure>
+
+ 
+      
+        .card {
+          width: 30rem;
+          overflow: hidden;
+          display: grid;
+          grid-template-areas: "stack";
+        }
+        .card>*{
+          grid-area: stack;
+        }
+        .card>figcaption {
+          display: grid;
+          align-items: end;
+          padding: 1.5rem 2rem;
+          background-image: linear-gradient(to bottom,
+          rgb(33 44 55 / 0),
+          rgb(33 44 55 / 0),
+          rgb(33 44 55 / 0.75)
+          );
+          opacity: 0;
+          transition: opacity 300ms;
+        }
+        .card:hover figcaption{
+          opacity:1; 
+        }
+
+ +
+
+ + + +
Footer
+ + isDot()) && str_ends_with($file, ".js") && $file != "jquery.js") { + echo '' . PHP_EOL . ' '; + } + } ?> + + + \ No newline at end of file