From c5578f3dfe10e33fb6e1a74e5efdd86508530872 Mon Sep 17 00:00:00 2001
From: Oleksandr <hotdamnsucka@gmail.com>
Date: Sat, 22 Nov 2025 10:54:00 +0200
Subject: [PATCH] begin styling standardization

---
 src/components/hooks/CreateCopyButtons.astro | 36 -------------
 src/components/marquee/Marquee.astro         |  7 ++-
 src/layouts/DocsLayout.astro                 |  2 -
 src/styles/components/featurelist.css        | 54 ++++++++++++++------
 src/styles/components/marquee.css            | 40 ++++++++++-----
 src/styles/css-config/base.css               |  4 +-
 src/styles/css-config/entry.css              |  2 +-
 src/styles/css-config/vars.css               | 36 +++++++++++--
 src/styles/main-page.css                     | 48 ++++++++++-------
 9 files changed, 130 insertions(+), 99 deletions(-)
 delete mode 100644 src/components/hooks/CreateCopyButtons.astro

diff --git a/src/components/hooks/CreateCopyButtons.astro b/src/components/hooks/CreateCopyButtons.astro
deleted file mode 100644
index 6237a0e..0000000
--- a/src/components/hooks/CreateCopyButtons.astro
+++ /dev/null
@@ -1,36 +0,0 @@
----
-
----
-
-<script>
-  // setTimeout(() => {
-  // // code copy
-  // let blocks = document.querySelectorAll("pre");
-  // if (blocks.length > 0) {
-  //   blocks.forEach((block) => {
-  //     let button = document.createElement("button");
-  //     button.className = "copy-button";
-  //     button.innerHTML = `<svg
-  //     xmlns="http://www.w3.org/2000/svg"
-  //     width="1em"
-  //     height="1em"
-  //     viewBox="0 0 256 256"
-  //   >
-  //     <path
-  //       fill="currentColor"
-  //       d="M200 32h-36.26a47.92 47.92 0 0 0-71.48 0H56a16 16 0 0 0-16 16v168a16 16 0 0 0 16 16h144a16 16 0 0 0 16-16V48a16 16 0 0 0-16-16m-72 0a32 32 0 0 1 32 32H96a32 32 0 0 1 32-32m72 184H56V48h26.75A47.9 47.9 0 0 0 80 64v8a8 8 0 0 0 8 8h80a8 8 0 0 0 8-8v-8a47.9 47.9 0 0 0-2.75-16H200Z"
-  //     />
-  //   </svg>
-  //   `;
-  //     button.onclick = () => {
-  //       let snippet = block.innerText ?? "";
-  //       navigator.clipboard.writeText(snippet);
-  //       button.classList.toggle("copied");
-  //       setTimeout(() => button.classList.remove("copied"), 1000);
-  //     };
-  //     block.appendChild(button);
-  //   });
-  // }
-  // }, 3001)
-
-</script>
diff --git a/src/components/marquee/Marquee.astro b/src/components/marquee/Marquee.astro
index f56f54f..61fa528 100644
--- a/src/components/marquee/Marquee.astro
+++ b/src/components/marquee/Marquee.astro
@@ -46,8 +46,8 @@ const videos = [
     </div>
   </div>
   <div id="marquee-content" class="marquee-content" data-scroll="0" data-media-index="0">
-    {videos.map(({ author, source, installable, path }, index) => <div class="marquee-item">
-      <div>
+    {videos.map(({ author, source, installable, path }, index) =>
+      <div class="marquee-item">
         <video
           data-media-index={index}
           data-media-author={author}
@@ -65,18 +65,17 @@ const videos = [
           {source && !installable && <>(<a href={source}>source code</a>)</>}
           {source && installable && <>(<a href={source}>install</a>)</>}
         </p>
-      </div>
     </div>)}
   </div>
 </div>
 
 <script>
-  const videoCount = 6; // last array index
   const marquee = document.getElementById("marquee-content")!;
   marquee.style.setProperty("--scroll", "0")
 
   window.addEventListener("load", autoplayInit, false);
   const videos = document.getElementsByClassName("marquee-item-content") as HTMLCollectionOf<HTMLVideoElement>;
+  const videoCount = videos.length;
   let currentVideoIndex = 0;
   let currentVideo: HTMLVideoElement | null = null;
 
diff --git a/src/layouts/DocsLayout.astro b/src/layouts/DocsLayout.astro
index d5381a4..70fa99b 100644
--- a/src/layouts/DocsLayout.astro
+++ b/src/layouts/DocsLayout.astro
@@ -2,7 +2,6 @@
 import { Breadcrumbs } from "astro-breadcrumbs";
 import "astro-breadcrumbs/breadcrumbs.css";
 
-import CreateCopyButtons from "@components/hooks/CreateCopyButtons.astro";
 import PreTheme from "@config/PreTheme.astro";
 import Header from "@components/Header.astro";
 import Head from "@config/Head.astro";
@@ -52,7 +51,6 @@ for (const segment of url) {
   <head>
     <Head description={description} title={title} />
     <PreTheme />
-    <CreateCopyButtons />
   </head>
   <body class="docslayout">
     <Header title={title} headings={headings} type={type}/>
diff --git a/src/styles/components/featurelist.css b/src/styles/components/featurelist.css
index 1f343cb..5359ebd 100644
--- a/src/styles/components/featurelist.css
+++ b/src/styles/components/featurelist.css
@@ -12,22 +12,21 @@
 .featurelist-item {
   position: relative;
   display: flex;
-  gap: 0.618rem;
+  gap: var(--xs);
   flex-direction: column;
   align-items: center;
-  margin-block: 0.618rem;
-  border-radius: 9px;
+  margin-block: var(--xs);
+  border-radius: var(--radius-md);
   background-color: hsl(var(--blue) 60% 98%);
   padding: 0.618rem;
   border: 1px solid hsl(var(--blue) 9% 75%);
+
   &::before {
     content: "";
     position: absolute;
-    inset: 0.618rem;
-    background-image: radial-gradient(
-      hsl(var(--blue) 9% 75%) 1px,
-      transparent 1px
-    );
+    inset: var(--xs);
+    background-image: radial-gradient(hsl(var(--blue) 9% 75%) 1px,
+        transparent 1px);
     background-position: 50% 50%;
     background-size: 1.1rem 1.1rem;
   }
@@ -38,20 +37,20 @@ html.dark .featurelist-item {
   border-color: hsl(0deg 0% 100% / 0.05);
 
   &::before {
-    background-image: radial-gradient(
-      hsl(0deg 0% 100% / 0.1) 1px,
-      transparent 1px
-    );
+    background-image: radial-gradient(hsl(0deg 0% 100% / 0.1) 1px,
+        transparent 1px);
   }
 }
 
 .feature-text {
-  margin: 1rem 0;
+  margin: var(--sm) 0;
   text-align: center;
-  font-size: 1.2rem;
+  font-size: 1.2em;
+
   & .feature-title {
     margin-bottom: 0.517rem;
   }
+
   & .feature-subtitle {
     color: #303030;
   }
@@ -72,7 +71,8 @@ html.dark .feature-text {
   & video {
     width: 100%;
     aspect-ratio: 16 / 9;
-    border-radius: 0.681rem;
+    border-radius: var(--radius-sm);
+    box-shadow: var(--shadow-md);
   }
 
   & .shiki {
@@ -80,6 +80,7 @@ html.dark .feature-text {
     width: 100%;
     height: 100%;
     /*font-size: 0.55rem;*/
+    box-shadow: var(--shadow-md);
   }
 
   & .showcase-desktop {
@@ -118,6 +119,7 @@ html:not(.dark) .feature-showcase .shiki span {
     position: absolute;
     z-index: 2;
   }
+
   & .cloud-center img {
     width: 80px;
     height: 80px;
@@ -137,9 +139,10 @@ html:not(.dark) .feature-showcase .shiki span {
     transform-origin: center bottom;
     transform: translateX(-50%);
 
-    & > div {
+    &>div {
       transform: rotate(0deg);
       animation: counter-spin 40s linear infinite;
+
       & .feature-icon {
         width: 80px;
         height: 80px;
@@ -149,26 +152,34 @@ html:not(.dark) .feature-showcase .shiki span {
     &.wayland {
       transform: translate(-50%, 0) rotate(0deg);
     }
+
     &.hyprland {
       transform: translate(-50%, 0) rotate(72deg);
+
       & .feature-icon {
         transform: rotate(-72deg);
       }
     }
+
     &.pipewire {
       transform: translate(-50%, 0) rotate(144deg);
+
       & .feature-icon {
         transform: rotate(-144deg);
       }
     }
+
     &.x-org {
       transform: translate(-50%, 0) rotate(216deg);
+
       & .feature-icon {
         transform: rotate(-216deg);
       }
     }
+
     &.sway {
       transform: translate(-50%, 0) rotate(288deg);
+
       & .feature-icon {
         transform: rotate(-288deg);
       }
@@ -180,6 +191,7 @@ html:not(.dark) .feature-showcase .shiki span {
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(360deg);
   }
@@ -189,6 +201,7 @@ html:not(.dark) .feature-showcase .shiki span {
   from {
     transform: rotate(0deg);
   }
+
   to {
     transform: rotate(-360deg);
   }
@@ -213,33 +226,42 @@ html:not(.dark) .feature-showcase .shiki span {
     width: auto;
     align-items: center;
   }
+
   .feature-text {
     margin: 0 2.218rem;
   }
+
   .featurelist-item {
     width: 100%;
     padding: 1.217rem;
     justify-content: space-between;
     flex-direction: row;
   }
+
   .featurelist-item.right {
     flex-direction: row-reverse;
   }
+
   .feature-showcase {
     height: 22rem;
   }
+
   .feature-text {
     text-align: left;
   }
+
   .feature-showcase {
     width: auto;
     aspect-ratio: 16 / 9;
+
     & video {
       scale: 1;
     }
+
     & .shiki {
       font-size: 0.93rem;
     }
+
     .feature-cloud {
       margin-bottom: 0;
     }
diff --git a/src/styles/components/marquee.css b/src/styles/components/marquee.css
index b1ee0f5..1fa2493 100644
--- a/src/styles/components/marquee.css
+++ b/src/styles/components/marquee.css
@@ -2,10 +2,10 @@
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
-  gap: 2.217rem;
-  font-size: 1.874rem;
+  gap: var(--xl);
+  font-size: var(--lg);
   font-weight: 600;
-  margin-inline: 0.618rem;
+  margin-inline: var(--sm);
 }
 
 .marquee-button {
@@ -20,15 +20,16 @@
     left: 2px;
     right: 2px;
     height: 3px;
-    background-color: hsl(var(--accent-400) / 0.3);
+    background-color: hsla(var(--accent-400) / 0.3);
     z-index: -1;
   }
 }
+
 .marquee {
   position: relative;
   display: flex;
   width: 100%;
-  margin-block: 1.618rem;
+  margin-block: var(--lg);
   justify-content: center;
 }
 
@@ -40,16 +41,25 @@
 }
 
 .marquee-item {
+  position: relative;
   flex: 1 0 100%;
   transition: transform 0.3s cubic-bezier(0.46, 0.03, 0.52, 0.96);
   transform: translateX(var(--scroll));
   display: flex;
-  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--md);
   padding-inline: 0.5rem;
 
-  & > div {
+  &>* {
+    z-index: 11;
+  }
+
+  & video {
+    position: relative;
     max-width: 75rem;
-    width: 100%;
+
+    box-shadow: var(--shadow-md);
   }
 }
 
@@ -58,7 +68,7 @@
 }
 
 .marquee-item-content {
-  border-radius: 6px;
+  border-radius: var(--radius-sm);
 }
 
 .marquee-scroll {
@@ -68,7 +78,6 @@
   height: 100%;
   display: flex;
   justify-content: space-between;
-  align-items: center;
   transition:
     background-color 0.3s,
     opacity 0.3s;
@@ -87,7 +96,7 @@
   flex-direction: column;
   justify-content: center;
 
-  & > div {
+  &>div {
     width: 2.5rem;
     aspect-ratio: 1 / 1;
     display: flex;
@@ -95,11 +104,13 @@
     justify-content: center;
     opacity: 0.5;
     transition: opacity 0.3s ease;
+    backdrop-filter: blur(var(--2xs));
   }
 
   &:hover {
     cursor: pointer;
-    & > div {
+
+    &>div {
       opacity: 0.9;
     }
   }
@@ -132,9 +143,10 @@
 @media not (min-width: 83rem) {
   .marquee-scroll-arrow {
     height: unset;
-    & > div {
+
+    &>div {
       background-color: #55555580;
-      border-radius: 0.2rem;
+      border-radius: var(--radius-xs);
     }
   }
 
diff --git a/src/styles/css-config/base.css b/src/styles/css-config/base.css
index 6bddf3c..0424318 100644
--- a/src/styles/css-config/base.css
+++ b/src/styles/css-config/base.css
@@ -1,5 +1,6 @@
 html {
-  font-family: "Rubik Variable", Inter, system-ui, Avenir, Helvetica, Arial,
+  font-family:
+    "Rubik Variable", Inter, system-ui, Avenir, Helvetica, Arial,
     sans-serif;
   font-size: 14px;
   line-height: 1.272;
@@ -112,7 +113,6 @@ html.dark {
   --var-link-color: 190deg 85% 60%;
   --inner-param-color: 215deg 60% 70%;
   --inner-param-border-color: 215deg 26% 46%;
-  --inner-param-color: 215deg 60% 70%;
   --nav-hovered-bkg: var(--blue) 40% 10%;
   --nav-hovered-weak-bkg: var(--blue) 35% 8%;
   --nav-selected-bkg: var(--blue) 40% 13%;
diff --git a/src/styles/css-config/entry.css b/src/styles/css-config/entry.css
index 9b456fc..f82b094 100644
--- a/src/styles/css-config/entry.css
+++ b/src/styles/css-config/entry.css
@@ -1,6 +1,6 @@
 @import "normalize.css";
-@import "animations.css";
 @import "vars.css";
+@import "animations.css";
 @import "base.css";
 @import "code.css";
 @import "colors.css";
diff --git a/src/styles/css-config/vars.css b/src/styles/css-config/vars.css
index 06bdc1d..0bc81ee 100644
--- a/src/styles/css-config/vars.css
+++ b/src/styles/css-config/vars.css
@@ -37,11 +37,37 @@
   --radius-lg: var(--lg);
   --radius-xl: var(--xl);
 
-  --shadow-sm: var(--shadow-sm);
-  --shadow-md: var(--shadow-md);
-  --shadow-lg: var(--shadow-lg);
-  --shadow-xl: var(--shadow-xl);
-  --shadow-2xl: var(--shadow-2xl);
+  --shadow-sm-units: 0 0 1px 0;
+  --shadow-md-units-1: 0 4px 6px;
+  --shadow-md-units-2: 0 2px 4px;
+  --shadow-md-units-3: 0 0 1px;
+  --shadow-lg-units-1: 0 11px 15px -3px;
+  --shadow-lg-units-2: 0 2px 6px;
+  --shadow-lg-units-3: 0 0 1px;
+  --shadow-xl-units-1: 0 20px 25px;
+  --shadow-xl-units-2: 0 5px 11px;
+  --shadow-xl-units-3: 0 5px 11px;
+  --shadow-2xl-units-1: 0 25px 50px;
+  --shadow-2xl-units-2: 0 9px 18px;
+  --shadow-2xl-units-3: 0 0 1px;
+
+  --shadow-sm: var(--shadow-sm-units) rgba(0, 0, 0, 0.11);
+  --shadow-md:
+    var(--shadow-md-units-1) rgba(0, 0, 0, 0.08),
+    var(--shadow-md-units-2) rgba(0, 0, 0, 0.11),
+    var(--shadow-md-units-3) rgba(0, 0, 0, 0.4);
+  --shadow-lg:
+    var(--shadow-lg-units-1) rgba(0, 0, 0, 0.11),
+    var(--shadow-lg-units-2) rgba(0, 0, 0, 0.07),
+    var(--shadow-lg-units-3) rgba(0, 0, 0, 0.4);
+  --shadow-xl:
+    var(--shadow-xl-units-1) rgba(0, 0, 0, 0.09),
+    var(--shadow-xl-units-2) rgba(0, 0, 0, 0.12),
+    var(--shadow-xl-units-3) rgba(0, 0, 0, 0.4);
+  --shadow-2xl:
+    var(--shadow-2xl-units-1) rgba(0, 0, 0, 0.23),
+    var(--shadow-2xl-units-2) rgba(0, 0, 0, 0.1),
+    var(--shadow-2xl-units-3) rgba(0, 0, 0, 0.4);
 
   --ease-in: cubic-bezier(0.4, 0, 1, 1);
   --ease-out: cubic-bezier(0, 0, 0.2, 1);
diff --git a/src/styles/main-page.css b/src/styles/main-page.css
index 1afcb3e..5dd01fc 100644
--- a/src/styles/main-page.css
+++ b/src/styles/main-page.css
@@ -40,21 +40,15 @@
 }
 
 h1.gradient-text {
-  background: linear-gradient(
-    30deg,
-    hsl(var(--green) 80% 42%),
-    hsl(var(--blue) 80% 49%)
-  );
+  background: linear-gradient(30deg,
+      hsl(var(--green) 80% 42%),
+      hsl(var(--blue) 80% 49%));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
 
 html.dark h1.gradient-text {
-  background: linear-gradient(
-    30deg,
-    #42b96b,
-    #4281b9
-  );
+  background: linear-gradient(30deg, #42b96b, #4281b9);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
@@ -95,7 +89,9 @@ html.dark .main-page_hero-text {
   font-size: 1.1rem;
 }
 
-.about-break { display: none }
+.about-break {
+  display: none;
+}
 
 .about-buttons {
   display: flex;
@@ -130,11 +126,12 @@ html.dark .main-page_hero-text {
   align-items: center;
   width: 100%;
   height: 3.67rem;
-  border-radius: 9px;
+  border-radius: var(--radius-sm);
   overflow: hidden;
-  border: 1px solid hsl(var(--green) 10% 10%);
+  box-shadow: var(--shadow-md);
   transition:
     background-color 0.3s,
+    box-shadow 0.3s,
     border-color 0.3s;
 
   background-color: hsl(var(--green) 38% 30%);
@@ -143,17 +140,22 @@ html.dark .main-page_hero-text {
   &:hover {
     cursor: pointer;
     text-decoration: none;
-    border-color: hsl(var(--green) 20% 20%);
     background-color: hsl(var(--green) 48% 40%);
+    box-shadow:
+      var(--shadow-md-units-1) hsla(var(--green) 48 45 / 0.08),
+      var(--shadow-md-units-2) hsla(var(--green) 48 45 / 0.11),
+      var(--shadow-md-units-3) hsla(var(--green) 48 45 / 0.4);
   }
 
   &.main-page_bluecard {
-    border-color: hsl(var(--blue) 10% 10%);
     background-color: hsl(var(--blue) 38% 30%);
 
     &:hover {
-      border-color: hsl(var(--blue) 20% 20%);
       background-color: hsl(var(--blue) 48% 40%);
+      box-shadow:
+        var(--shadow-md-units-1) hsla(var(--blue) 48 45 / 0.08),
+        var(--shadow-md-units-2) hsla(var(--blue) 48 45 / 0.11),
+        var(--shadow-md-units-3) hsla(var(--blue) 48 45 / 0.4);
     }
   }
 
@@ -226,7 +228,15 @@ html.dark .main-page_link-card {
     flex-direction: row;
   }
 
-  .about-txt { max-width: 70% }
-  .about-break { display: unset }
-  .about-buttons { flex-direction: column }
+  .about-txt {
+    max-width: 70%;
+  }
+
+  .about-break {
+    display: unset;
+  }
+
+  .about-buttons {
+    flex-direction: column;
+  }
 }