LidaChk · LidaChk · Mar 12, 2023 · Mar 12, 2023 · Mar 12, 2023 · Mar 12, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "svg.preview.background": "editor"
+}
diff --git a/cssBayan/assets/bg.png b/cssBayan/assets/bg.png
diff --git a/cssBayan/assets/bg.svg b/cssBayan/assets/bg.svg
diff --git a/cssBayan/assets/control.min.svg b/cssBayan/assets/control.min.svg
diff --git a/cssBayan/assets/control.svg b/cssBayan/assets/control.svg
diff --git a/cssBayan/assets/filter.svg b/cssBayan/assets/filter.svg
diff --git a/cssBayan/assets/filter_alt.svg b/cssBayan/assets/filter_alt.svg
diff --git a/cssBayan/assets/grid_0.png b/cssBayan/assets/grid_0.png
diff --git a/cssBayan/assets/header.svg b/cssBayan/assets/header.svg
diff --git a/cssBayan/assets/item1.png b/cssBayan/assets/item1.png
diff --git a/cssBayan/assets/item1_s0nms6_c_scale,w_320.png b/cssBayan/assets/item1_s0nms6_c_scale,w_320.png
diff --git a/cssBayan/assets/item1_s0nms6_c_scale,w_469.png b/cssBayan/assets/item1_s0nms6_c_scale,w_469.png
diff --git a/cssBayan/assets/item1_s0nms6_c_scale,w_589.png b/cssBayan/assets/item1_s0nms6_c_scale,w_589.png
diff --git a/cssBayan/assets/item2.png b/cssBayan/assets/item2.png
diff --git a/cssBayan/assets/item2_adicjm_c_scale,w_320.png b/cssBayan/assets/item2_adicjm_c_scale,w_320.png
diff --git a/cssBayan/assets/item2_adicjm_c_scale,w_468.png b/cssBayan/assets/item2_adicjm_c_scale,w_468.png
diff --git a/cssBayan/assets/item2_adicjm_c_scale,w_589.png b/cssBayan/assets/item2_adicjm_c_scale,w_589.png
diff --git a/cssBayan/assets/item3.png b/cssBayan/assets/item3.png
diff --git a/cssBayan/assets/item3_qsf05m_c_scale,w_320.png b/cssBayan/assets/item3_qsf05m_c_scale,w_320.png
diff --git a/cssBayan/assets/item3_qsf05m_c_scale,w_468.png b/cssBayan/assets/item3_qsf05m_c_scale,w_468.png
diff --git a/cssBayan/assets/item3_qsf05m_c_scale,w_589.png b/cssBayan/assets/item3_qsf05m_c_scale,w_589.png
diff --git a/cssBayan/assets/item4.png b/cssBayan/assets/item4.png
diff --git a/cssBayan/assets/item4_tegqz2_c_scale,w_320.png b/cssBayan/assets/item4_tegqz2_c_scale,w_320.png
diff --git a/cssBayan/assets/item4_tegqz2_c_scale,w_468.png b/cssBayan/assets/item4_tegqz2_c_scale,w_468.png
diff --git a/cssBayan/assets/item4_tegqz2_c_scale,w_589.png b/cssBayan/assets/item4_tegqz2_c_scale,w_589.png
diff --git a/cssBayan/assets/item5.png b/cssBayan/assets/item5.png
diff --git a/cssBayan/assets/item5_smyiw6_c_scale,w_320.png b/cssBayan/assets/item5_smyiw6_c_scale,w_320.png
diff --git a/cssBayan/assets/item5_smyiw6_c_scale,w_468.png b/cssBayan/assets/item5_smyiw6_c_scale,w_468.png
diff --git a/cssBayan/assets/item5_smyiw6_c_scale,w_589.png b/cssBayan/assets/item5_smyiw6_c_scale,w_589.png
diff --git a/cssBayan/assets/lbg.png b/cssBayan/assets/lbg.png
diff --git a/cssBayan/assets/lbg_317.png b/cssBayan/assets/lbg_317.png
diff --git a/cssBayan/assets/lbg_470.png b/cssBayan/assets/lbg_470.png
diff --git a/cssBayan/assets/lbg_50.png b/cssBayan/assets/lbg_50.png
diff --git a/cssBayan/assets/lbg_581.png b/cssBayan/assets/lbg_581.png
diff --git a/cssBayan/index.html b/cssBayan/index.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <link rel="icon" href="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>cssBayan</title>
+    <link href="style.css" rel="stylesheet" type="text/css" />
+    <link rel="icon" href="./assets/control.svg" />
+</head>
+
+<body>
+    <main>
+        <h1 class="head">Cthulhu Codewars</h1>
+        <ul class="item-list">
+            <li class="item1">
+                <input type="radio" name="point" id="slide1" checked>
+                <label for="slide1" class="label">
+                    <h4>Codewars call to me,<br>
+                        Challenging my skills to slay<br>
+                        Cthulhu with code.</h4><span class="control"></span>
+                    <div class="slider ">
+                        <img sizes="(max-width: 589px) 100vw" srcset="
+                        ./assets/item1_s0nms6_c_scale,w_320.png 320w,
+                        ./assets/item1_s0nms6_c_scale,w_469.png 469w,
+                        ./assets/item1_s0nms6_c_scale,w_589.png 589w" src="./assets/item1_s0nms6_c_scale,w_589.png"
+                            alt="slay Cthulhu with code" />
+                    </div>
+                </label>
+            </li>
+            <li class="item2">
+                <input type="radio" name="point" id="slide2">
+                <label for="slide2" class="label">
+                    <h4>Cthulhu lurks deep down,<br>
+                        Codewars my weapon to fight,<br>
+                        Code my mighty shield.</h4><span class="control"></span>
+                    <div class="slider ">
+                        <img sizes="(max-width: 589px) 100vw" srcset="
+                        ./assets/item2_adicjm_c_scale,w_320.png 320w,
+                        ./assets/item2_adicjm_c_scale,w_468.png 468w,
+                        ./assets/item2_adicjm_c_scale,w_589.png 589w" src="./assets/item2_adicjm_c_scale,w_589.png"
+                            alt="Code my mighty shield" />
+                    </div>
+                </label>
+            </li>
+            <li class="item3">
+                <input type="radio" name="point" id="slide3">
+                <label for="slide3" class="label">
+                    <h4>Code challenges rise,<br>
+                        With Cthulhu's tentacles,<br>
+                        Codewars my fortress.</h4><span class="control"></span>
+                    <div class="slider ">
+                        <img sizes="(max-width: 589px) 100vw" srcset="
+                        ./assets/item3_qsf05m_c_scale,w_320.png 320w,
+                        ./assets/item3_qsf05m_c_scale,w_468.png 468w,
+                        ./assets/item3_qsf05m_c_scale,w_589.png 589w" src="./assets/item3_qsf05m_c_scale,w_589.png"
+                            alt=" Cthulhu's tentacles" />
+                    </div>
+                </label>
+            </li>
+            <li class="item4">
+                <input type="radio" name="point" id="slide4">
+                <label for="slide4" class="label">
+                    <h4>
+                        Codewars and Cthulhu,<br>
+                        Strange bedfellows in the night,<br>
+                        Code warriors unite.</h4><span class="control"></span>
+                    <div class="slider ">
+                        <img sizes="(max-width: 589px) 100vw" srcset="
+                        ./assets/item4_tegqz2_c_scale,w_320.png 320w,
+                        ./assets/item4_tegqz2_c_scale,w_468.png 468w,
+                        ./assets/item4_tegqz2_c_scale,w_589.png 589w" src="./assets/item4_tegqz2_c_scale,w_589.png"
+                            alt=" Codewars and Cthulhu" />
+                    </div>
+                </label>
+            </li>
+            <li class="item5">
+                <input type="radio" name="point" id="slide5">
+                <label for="slide5" class="label">
+                    <h4>Mad skills on display<br>
+                        Cthulhu's code no match for me<br>
+                        Victory is mine</h4><span class="control"></span>
+                    <div class="slider ">
+                        <img sizes="(max-width: 589px) 100vw" srcset="
+                        ./assets/item5_smyiw6_c_scale,w_320.png 320w,
+                        ./assets/item5_smyiw6_c_scale,w_468.png 468w,
+                        ./assets/item5_smyiw6_c_scale,w_589.png 589w" src="./assets/item5_smyiw6_c_scale,w_589.png"
+                            alt="Cthulhu's code no match for me" />
+                    </div>
+                </label>
+            </li>
+        </ul>
+    </main>
+</body>
+
+</html>
diff --git a/cssBayan/style.css b/cssBayan/style.css
@@ -0,0 +1,389 @@
+@import url('https://fonts.googleapis.com/css2?family=BIZ+UDGothic&display=swap');
+
+:root {
+  --color-one: #130e23;
+  --color-two: #364b44;
+  --text-color: #c2e6ef;
+  --mem-width: min(38em, calc(100vw - 4em));
+  --mem-height: min(36em, calc(100vw - 6em));
+  --slide-duration: 0.9s;
+  --text-duration: 0.9s;
+  --text-l-height: 1.5em;
+  --lbg: "./assets/lbg370.png";
+  --lbg-50: "./assets/lbg50.png";
+}
+
+
+
+
+
+* {
+  box-sizing: border-box;
+}
+
+ul {
+  padding: 0;
+  list-style: none;
+}
+
+
+body,
+h1,
+h4,
+p,
+ul,
+ol,
+li {
+  margin: 0;
+}
+
+* {
+  margin: 0;
+}
+
+body {
+  font-family: 'BIZ UDGothic', sans-serif;
+  min-height: 100vh;
+  scroll-behavior: smooth;
+  text-rendering: optimizeSpeed;
+  line-height: 1.5;
+
+  color: var(--text-color);
+
+  background-color: #140f22;
+  background-image: url("./assets/lbg_317.png"), url("./assets/filter.svg"), linear-gradient(90deg, #261947, #63339c, #140f22);
+  background-repeat: no-repeat, repeat, repeat;
+  background-position:  0% 100%, 0 0, center;
+  background-blend-mode: lighten;
+  background-attachment: fixed;
+  background-size: 100vmin, auto, auto; 
+  animation: start1 2s ease-in-out;
+}
+
+
+@keyframes start {
+  0%{
+    background-blend-mode: color-burn;
+  }
+  50% {
+    background-blend-mode: darken;
+  }
+ 100% {
+    background-blend-mode: lighten;
+  }
+}
+  @keyframes start1 {
+    0%{
+      background-position:  -100% 0, 0 0, center;
+    }
+   100% {
+    background-position:  0 100%, 0 0, center;
+    }
+
+
+}
+
+
+input,
+button,
+textarea,
+select {
+  font: inherit;
+}
+
+main {
+  margin: 1em auto;
+  width: var(--mem-width);
+  max-width: 100%;
+  font-size: 0.7rem;
+}
+
+.head {
+  display: block;
+  width: 100%;
+  height: auto;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+  margin: 1em 0;
+  text-transform: uppercase;
+    text-align: center;
+    text-transform: uppercase;
+
+}
+
+ul.item-list {
+  max-width: var(--mem-width);
+  margin: 0 auto;
+}
+
+img {
+  max-width: 100%;
+
+}
+
+img[width][height] {
+  height: auto;
+}
+
+/* Let SVG scale without boundaries */
+img[src$=".svg"] {
+  width: 100%;
+  height: auto;
+  max-width: none;
+}
+
+
+
+input {
+  display: none;
+}
+
+label {
+  width: 100%;
+  /*   display: flex;
+  flex-direction: row;
+  flex-wrap: wrap; */
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto auto;
+  grid-template-areas: "h4 control" "img img";
+  margin-bottom: 1em;
+  border-radius: 0.5em;
+  background-color: #45186b;
+  transition: all 0.35s ease-in-out;
+  padding: 0.5em;
+}
+
+label>h4 {
+  height: var(--text-l-height);
+  overflow: hidden;
+  /*   text-overflow: ellipsis;
+  animation: text-hide var(--text-duration) ease-in-out; */
+  transition: height var(--text-duration) ease-in-out;
+  grid-area: h4;
+
+}
+
+label>.control {
+  grid-area: control;
+}
+
+label>.slider {
+  grid-area: img;
+}
+
+.slider {
+  margin-top: 1em;
+  overflow: hidden;
+  transition: all var(--slide-duration);
+  height: 0;
+}
+
+input:checked+label>.slider {
+  /*  animation: details-show var(--slide-duration) ease-in-out; */
+  transition: height var(--slide-duration) ease-in-out;
+  height: var(--mem-height);
+}
+
+input:checked+label>h4 {
+  height: calc(var(--text-l-height)*3);
+  /* animation: text-show var(--text-duration) ease-in-out; */
+  transition: height var(--text-duration) ease-in-out;
+}
+
+input:not(:checked)+label>.slider {
+  /* animation: details-hide var(--slide-duration) ease-in-out; */
+  transition: height var(--slide-duration)ease-in-out;
+  height: 0;
+}
+
+.control {
+  display: block;
+  width: var(--text-l-height);
+  height: var(--text-l-height);
+  background: url(./assets/control.svg);
+  filter: invert(1%) sepia(42%) saturate(1672%) hue-rotate(167deg) brightness(101%) contrast(87%);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
+
+  transition: all 0.3s ease;
+  -webkit-transition: all 0.3s ease;
+  -moz-transition: all 0.3s ease;
+  -ms-transition: all 0.3s ease;
+  -o-transition: all 0.3s ease;
+
+  opacity: 0;
+}
+
+
+
+input:checked~label>.control {
+  transform: rotate(-1.5turn);
+  -webkit-transform: rotate(-1.5turn);
+  -moz-transform: rotate(-1.5turn);
+  -ms-transform: rotate(-1.5turn);
+  -o-transform: rotate(-1.5turn);
+}
+
+
+@keyframes details-show {
+  0% {
+    height: 0;
+  }
+
+  100% {
+    height: var(--mem-height);
+  }
+}
+
+@keyframes details-hide {
+  0% {
+    height: var(--mem-height);
+  }
+
+  100% {
+    height: 0;
+  }
+}
+
+@keyframes text-show {
+  0% {
+    height: var(--text-l-height);
+  }
+
+  100% {
+    height: calc(var(--text-l-height)*3);
+  }
+}
+
+@keyframes text-hide {
+  0% {
+    height: calc(var(--text-l-height)*3);
+  }
+
+  100% {
+    height: var(--text-l-height);
+  }
+}
+
+@keyframes glow {
+  0% {
+    filter: drop-shadow(0 -0.2em 0.5em #5ed8d8);
+  }
+
+  100% {
+    filter: drop-shadow(0 -0.2em 0.8em #5ed8d8);
+  }
+}
+
+.label:active>.control,
+.label:active {
+  opacity: 1;
+  animation: 0.9s glow ease-in-out infinite alternate;
+}
+
+@media (hover: hover) {
+
+  li,
+  label {
+    cursor: pointer;
+  }
+
+  input:not(:checked)+label:hover>.slider {
+    /* animation: details-show var(--slide-duration) ease-in-out; */
+    transition: height var(--slide-duration) ease-in-out;
+    height: var(--mem-height);
+  }
+
+  input:not(:checked)+label:not(:hover)>.slider {
+    /* animation: details-hide var(--slide-duration) ease-in-out; */
+    transition: height var(--slide-duration) ease-in-out;
+    height: 0;
+  }
+
+  input:not(:checked)+label:hover>h4 {
+    /* animation: text-show var(--text-duration) ease-in-out; */
+    transition: height var(--text-duration) ease-in-out;
+    height: calc(var(--text-l-height)*3);
+  }
+
+  input:not(:checked)+label:not(:hover)>h4 {
+    /* animation: text-hide var(--text-duration) ease-in-out; */
+    transition: height var(--text-duration) ease-in-out;
+    height: var(--text-l-height);
+  }
+
+
+
+
+  ul:hover .control {
+    opacity: 1;
+  }
+
+  input:not(:checked)+label:hover>.control {
+    transform: rotate(1.25turn);
+    -webkit-transform: rotate(1.25turn);
+    -moz-transform: rotate(1.25turn);
+    -ms-transform: rotate(1.25turn);
+    -o-transform: rotate(1.25turn);
+    filter: drop-shadow(0 -0.2em 0.5em #5ed8d8);
+  }
+
+}
+
+
+
+
+@media all and (min-width: 820px) and (max-width: 1022px) {
+
+  /*tablet*/
+  body {
+
+    background-image: url("./assets/lbg_470.png"),url("./assets/filter.svg"), linear-gradient(90deg, #261947, #63339c, #140f22);
+  }
+
+  .label {
+    padding: 1em;
+  }
+
+  main {
+    font-size: 1rem;
+  }
+}
+
+@media all and (min-width: 1023px) {
+
+  /*descktop*/
+  :root {
+    --mem-width: 38rem;
+    --mem-height: 36rem;
+
+
+  }
+
+  body {
+
+    background-image: url("./assets/lbg.png"), url("./assets/filter.svg"), linear-gradient(90deg, #261947, #63339c, #140f22);
+  }
+
+  .head {
+    margin: 1em 0;
+    text-align: center;
+    text-transform: uppercase;
+  }
+
+  .label {
+    padding: 1rem;
+  }
+
+  body {
+    background-size: min(calc(50wv-20rem), 100vmin), auto, auto;
+  }
+
+  main {
+    font-size: 1.5rem;
+  }
+
+}