7 files changed, 182 insertions, 0 deletions
diff --git a/assets/css/components/cards.css b/assets/css/components/cards.css
new file mode 100644
index 0000000..f867274
--- /dev/null
+++ b/assets/css/components/cards.css
@@ -0,0 +1,29 @@
+.hextra-cards {
+  grid-template-columns: repeat(auto-fill, minmax(max(250px, calc((100% - 1rem * 2) / var(--rows))), 1fr));
+}
+
+.hextra-card img {
+  user-select: none;
+}
+
+.hextra-card:hover svg {
+  color: currentColor;
+}
+
+.hextra-card svg {
+  width: 1.5rem;
+  color: #00000033;
+  transition: color 0.3s ease;
+}
+
+.hextra-card p {
+  margin-top: 0.5rem;
+}
+
+.dark .hextra-card svg {
+  color: #ffffff66;
+}
+
+.dark .hextra-card:hover svg {
+  color: currentColor;
+}
diff --git a/assets/css/components/code-copy.css b/assets/css/components/code-copy.css
new file mode 100644
index 0000000..4547fea
--- /dev/null
+++ b/assets/css/components/code-copy.css
@@ -0,0 +1,7 @@
+@supports (
+  (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
+) {
+  .code-copy-btn {
+    @apply backdrop-blur-md bg-opacity-[.85] dark:bg-opacity-80;
+  }
+}
diff --git a/assets/css/components/navbar.css b/assets/css/components/navbar.css
new file mode 100644
index 0000000..8bca91d
--- /dev/null
+++ b/assets/css/components/navbar.css
@@ -0,0 +1,55 @@
+nav {
+  .search-wrapper {
+    @apply hidden md:inline-block;
+  }
+}
+
+@supports (
+  (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))
+) {
+  .nav-container-blur {
+    @apply backdrop-blur-md bg-white/[.85] dark:!bg-dark/80;
+  }
+}
+
+.hamburger-menu svg {
+  g {
+    @apply origin-center;
+    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1);
+  }
+  path {
+    opacity: 1;
+    transition:
+      transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s,
+      opacity 0.2s ease 0.2s;
+  }
+
+  &.open {
+    path {
+      transition:
+        transform 0.2s cubic-bezier(0.25, 1, 0.5, 1),
+        opacity 0s ease 0.2s;
+    }
+    g {
+      transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1) 0.2s;
+    }
+  }
+
+  &.open > {
+    path {
+      @apply opacity-0;
+    }
+    g:nth-of-type(1) {
+      @apply rotate-45;
+      path {
+        transform: translate3d(0, 4px, 0);
+      }
+    }
+    g:nth-of-type(2) {
+      @apply -rotate-45;
+      path {
+        transform: translate3d(0, -4px, 0);
+      }
+    }
+  }
+}
diff --git a/assets/css/components/scrollbar.css b/assets/css/components/scrollbar.css
new file mode 100644
index 0000000..e60c1d1
--- /dev/null
+++ b/assets/css/components/scrollbar.css
@@ -0,0 +1,21 @@
+.hextra-scrollbar {
+  scrollbar-width: thin; /* Firefox */
+  scrollbar-color: oklch(55.55% 0 0 / 40%) transparent; /* Firefox */
+
+  scrollbar-gutter: stable;
+  &::-webkit-scrollbar {
+    @apply w-3 h-3;
+  }
+  &::-webkit-scrollbar-track {
+    @apply bg-transparent;
+  }
+  &::-webkit-scrollbar-thumb {
+    @apply rounded-[10px];
+  }
+  &:hover::-webkit-scrollbar-thumb {
+    border: 3px solid transparent;
+    background-color: var(--tw-shadow-color);
+    background-clip: content-box;
+    @apply shadow-neutral-500/20 hover:shadow-neutral-500/40;
+  }
+}
diff --git a/assets/css/components/search.css b/assets/css/components/search.css
new file mode 100644
index 0000000..1994f84
--- /dev/null
+++ b/assets/css/components/search.css
@@ -0,0 +1,38 @@
+.search-wrapper {
+  li {
+    @apply mx-2.5 break-words rounded-md contrast-more:border text-gray-800 contrast-more:border-transparent dark:text-gray-300;
+    a {
+      @apply block scroll-m-12 px-2.5 py-2;
+    }
+
+    .title {
+      @apply text-base font-semibold leading-5;
+    }
+
+    .active {
+      @apply rounded-md bg-primary-500/10 contrast-more:border-primary-500;
+    }
+  }
+
+  .no-result {
+    @apply block select-none p-8 text-center text-sm text-gray-400;
+  }
+
+  .prefix {
+    @apply mx-2.5 mb-2 mt-6 select-none border-b border-black/10 px-2.5 pb-1.5 text-xs font-semibold
+    uppercase text-gray-500 first:mt-0 dark:border-white/20 dark:text-gray-300 contrast-more:border-gray-600
+    contrast-more:text-gray-900 contrast-more:dark:border-gray-50 contrast-more:dark:text-gray-50;
+  }
+
+  .excerpt {
+    @apply overflow-hidden text-ellipsis mt-1 text-sm leading-[1.35rem] text-gray-600 dark:text-gray-400 contrast-more:dark:text-gray-50;
+    display: -webkit-box;
+    line-clamp: 1;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+  }
+
+  .match {
+    @apply text-primary-600;
+  }
+}
diff --git a/assets/css/components/sidebar.css b/assets/css/components/sidebar.css
new file mode 100644
index 0000000..0ccbfb9
--- /dev/null
+++ b/assets/css/components/sidebar.css
@@ -0,0 +1,21 @@
+@media (max-width: 767px) {
+  .sidebar-container {
+    @apply fixed pt-[calc(var(--navbar-height))] top-0 w-full bottom-0 z-[15] overscroll-contain bg-white dark:bg-dark;
+    transition: transform 0.8s cubic-bezier(0.52, 0.16, 0.04, 1);
+    will-change: transform, opacity;
+    contain: layout style;
+    backface-visibility: hidden;
+  }
+}
+
+.sidebar-container {
+  li > div {
+    @apply h-0;
+  }
+  li.open > div {
+    @apply h-auto pt-1;
+  }
+  li.open > a > span > svg > path {
+    @apply rotate-90;
+  }
+}
diff --git a/assets/css/components/steps.css b/assets/css/components/steps.css
new file mode 100644
index 0000000..680d02d
--- /dev/null
+++ b/assets/css/components/steps.css
@@ -0,0 +1,11 @@
+.steps h3 {
+  counter-increment: step;
+
+  &:before {
+    @apply absolute w-[33px] h-[33px];
+    @apply border-4 border-white bg-gray-100 dark:border-dark dark:bg-neutral-800;
+    @apply rounded-full text-neutral-400 text-base font-normal text-center -indent-px;
+    @apply mt-[3px] ml-[-41px];
+    content: counter(step);
+  }
+}