update tailwind v4, remove sass and postcss dependency

assets/css/base.css

@@ -0,0 +1,59 @@
+html {
+  @apply text-base-sm md:text-base;
+}
+
+body {
+  @apply bg-body text-base dark:bg-darkmode-body font-primary font-normal leading-relaxed text-text dark:text-darkmode-text;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @apply font-secondary font-bold leading-tight text-dark dark:text-darkmode-dark;
+}
+
+h1,
+.h1 {
+  @apply text-h1-sm md:text-h1;
+}
+
+h2,
+.h2 {
+  @apply text-h2-sm md:text-h2;
+}
+
+h3,
+.h3 {
+  @apply text-h3-sm md:text-h3;
+}
+
+h4,
+.h4 {
+  @apply text-h4;
+}
+
+h5,
+.h5 {
+  @apply text-h5;
+}
+
+h6,
+.h6 {
+  @apply text-h6;
+}
+
+b,
+strong {
+  @apply font-semibold;
+}
+
+code {
+  @apply after:border-none;
+}
+
+blockquote > p {
+  @apply my-0!;
+}

assets/css/buttons.css

@@ -0,0 +1,15 @@
+.btn {
+  @apply inline-block rounded border border-transparent px-5 py-2 font-semibold capitalize transition;
+}
+
+.btn-sm {
+  @apply rounded-sm px-4 py-1.5 text-sm;
+}
+
+.btn-primary {
+  @apply border-primary bg-primary dark:border-darkmode-primary dark:text-dark text-white dark:bg-darkmode-primary;
+}
+
+.btn-outline-primary {
+  @apply border-dark text-dark hover:bg-dark dark:hover:text-dark bg-transparent hover:text-white dark:border-darkmode-primary dark:text-white dark:hover:bg-darkmode-primary;
+}

assets/css/components.css

@@ -0,0 +1,54 @@
+/* section style */
+.section {
+  @apply py-24 xl:py-28;
+}
+
+.section-sm {
+  @apply py-16 xl:py-20;
+}
+
+/* container */
+.container {
+  @apply mx-auto max-w-[1320px] px-4;
+}
+
+/* social icons */
+.social-icons {
+  @apply space-x-4;
+}
+.social-icons li {
+  @apply inline-block;
+}
+.social-icons li a {
+  @apply flex h-9 w-9 items-center justify-center rounded-sm bg-primary text-center leading-9 text-white dark:bg-darkmode-primary dark:text-dark;
+}
+.social-icons li a svg {
+  @apply h-5 w-5;
+}
+
+/* content style */
+.content {
+  @apply prose max-w-none;
+  @apply prose-headings:mb-[.3em] prose-headings:mt-[.6em] prose-headings:text-dark dark:prose-headings:text-darkmode-dark;
+  @apply prose-h1:text-h1-sm md:prose-h1:text-h1;
+  @apply prose-h2:text-h2-sm md:prose-h2:text-h2;
+  @apply prose-h3:text-h3-sm md:prose-h3:text-h3;
+  @apply prose-img:max-w-full prose-img:rounded;
+  @apply prose-hr:border-border dark:prose-hr:border-darkmode-border;
+  @apply prose-p:text-base prose-p:text-text dark:prose-p:text-darkmode-text;
+  @apply prose-blockquote:rounded-lg prose-blockquote:border prose-blockquote:border-l-[10px] prose-blockquote:border-primary prose-blockquote:bg-theme-light prose-blockquote:px-8 prose-blockquote:py-10 prose-blockquote:font-secondary prose-blockquote:text-2xl prose-blockquote:not-italic prose-blockquote:text-dark dark:prose-blockquote:border-darkmode-primary dark:prose-blockquote:bg-darkmode-theme-light dark:prose-blockquote:text-darkmode-light;
+  @apply prose-pre:rounded-lg prose-pre:bg-theme-light dark:prose-pre:bg-darkmode-theme-light;
+  @apply prose-code:px-1 prose-code:text-primary dark:prose-code:text-darkmode-primary;
+  @apply prose-strong:text-dark dark:prose-strong:text-darkmode-text;
+  @apply prose-a:text-text prose-a:underline prose-a:hover:text-primary dark:prose-a:text-darkmode-text dark:prose-a:hover:text-darkmode-primary;
+  @apply prose-li:text-text dark:prose-li:text-darkmode-text;
+  @apply prose-table:relative prose-table:overflow-hidden prose-table:rounded-lg prose-table:before:absolute prose-table:before:left-0 prose-table:before:top-0 prose-table:before:h-full prose-table:before:w-full prose-table:before:rounded-[inherit] prose-table:before:border prose-table:before:content-[""] dark:prose-table:before:border-darkmode-border;
+  @apply prose-thead:border-border prose-thead:bg-theme-light dark:prose-thead:border-darkmode-border dark:prose-thead:bg-darkmode-theme-light;
+  @apply prose-th:relative prose-th:z-10 prose-th:px-4 prose-th:py-[18px] prose-th:text-dark dark:prose-th:text-darkmode-text;
+  @apply prose-tr:border-border dark:prose-tr:border-darkmode-border;
+  @apply prose-td:relative prose-td:z-10 prose-td:px-3 prose-td:py-[18px] dark:prose-td:text-darkmode-text;
+}
+
+.content .btn {
+  @apply dark:hover:text-dark no-underline hover:!text-white;
+}

assets/css/custom.css

@@ -0,0 +1,2 @@
+/* DO NOT WRITE ANY STYLE IN THIS FILE */
+/* If you want to add your own styles, please write it in the `./assets/css/custom.css` file. */

assets/css/main.css

@@ -0,0 +1,37 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/forms";
+@plugin "@tailwindcss/typography";
+@plugin "./tailwind-plugin/tw-theme";
+@plugin "./tailwind-plugin/tw-bs-grid";
+@source "hugo_stats.json";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@import "./safe.css";
+
+@layer base {
+  @import "./base.css";
+}
+
+@layer components {
+  @import "./components.css";
+  @import "./navigation.css";
+  @import "./buttons.css";
+}
+
+@layer utilities {
+  @import "./utilities.css";
+}
+
+@import "search.css";
+@import "social-share.css";
+@import "gallery-slider.css";
+@import "images.css";
+@import "toc.css";
+@import "tab.css";
+@import "accordion.css";
+@import "modal.css";
+@import "notice.css";
+
+@import "module-overrides.css";
+@import "custom.css";

assets/css/module-overrides.css

@@ -0,0 +1,54 @@
+/* table of contents */
+.table-of-content {
+  @apply overflow-hidden rounded;
+}
+
+/* share icons */
+.share-icons .share-link {
+  @apply h-9 w-9 rounded leading-9 bg-primary hover:bg-primary dark:bg-darkmode-primary dark:hover:bg-darkmode-primary;
+}
+
+.share-icons .share-icon svg {
+  @apply dark:fill-dark;
+}
+
+/* notice */
+.notice {
+  @apply rounded-lg;
+}
+
+/* tab */
+.tab {
+  @apply border-border dark:border-darkmode-border overflow-hidden rounded-lg border;
+}
+.tab-nav {
+  @apply border-border bg-theme-light dark:border-darkmode-border dark:bg-darkmode-theme-light pl-4;
+}
+.tab-nav-item {
+  @apply text-dark dark:text-darkmode-dark px-8 !text-lg;
+}
+.tab-nav-item.active {
+  @apply border-dark dark:border-darkmode-primary;
+}
+
+.tab-content-panel {
+  @apply px-4 !pt-0;
+}
+
+/* accordion */
+.accordion {
+  @apply border-border bg-theme-light dark:border-darkmode-border dark:bg-darkmode-theme-light mb-6 overflow-hidden rounded-lg border;
+}
+.accordion-header {
+  @apply text-dark dark:text-darkmode-dark;
+}
+
+/* cookie consent */
+.cookie-box {
+  @apply !rounded-lg;
+}
+
+/* slider */
+.gallery-slider {
+  @apply !ml-0;
+}

assets/css/navigation.css

@@ -0,0 +1,70 @@
+.header {
+  @apply bg-body dark:bg-darkmode-body py-6;
+}
+
+/* navbar items */
+.navbar {
+  @apply relative flex flex-wrap items-center justify-between;
+}
+
+.navbar-brand {
+  @apply text-dark dark:text-darkmode-dark text-xl font-semibold;
+  image {
+    @apply max-h-full max-w-full;
+  }
+}
+
+.navbar-nav {
+  @apply text-center lg:text-left;
+}
+
+.nav-link {
+  @apply text-dark hover:text-primary dark:text-darkmode-dark dark:hover:text-darkmode-primary block p-3 cursor-pointer font-semibold transition lg:px-2 lg:py-3;
+}
+
+.nav-dropdown {
+  @apply mr-0;
+}
+
+.nav-dropdown > svg {
+  @apply pointer-events-none;
+}
+
+.nav-dropdown.active .nav-dropdown-list {
+  @apply block;
+}
+
+.nav-dropdown-list {
+  @apply bg-body dark:bg-darkmode-body z-10 min-w-[180px] rounded p-4 shadow hidden lg:invisible lg:absolute lg:block lg:opacity-0;
+}
+
+.nav-dropdown-item {
+  @apply [&:not(:last-child)]:mb-2;
+}
+
+.nav-dropdown-link {
+  @apply text-dark hover:text-primary dark:text-darkmode-text dark:hover:text-darkmode-primary block py-1 font-semibold transition;
+}
+
+/* theme-switcher */
+.theme-switcher {
+  @apply inline-flex;
+
+  label {
+    @apply bg-border relative inline-block h-4 w-6 cursor-pointer rounded-2xl lg:w-10;
+  }
+
+  input {
+    @apply absolute opacity-0;
+  }
+
+  span {
+    @apply bg-dark absolute -top-1 left-0 flex h-6 w-6 items-center justify-center rounded-full transition-all duration-300 dark:bg-white;
+  }
+
+  input:checked + label {
+    span {
+      @apply lg:left-4;
+    }
+  }
+}

assets/css/safe.css

@@ -0,0 +1,8 @@
+/* swiper pagination */
+.swiper-pagination-bullet {
+  @apply !h-2.5 !w-2.5 !bg-theme-light !opacity-100 dark:!bg-darkmode-theme-light;
+}
+
+.swiper-pagination-bullet-active {
+  @apply !h-4 !w-4 !bg-primary dark:!bg-darkmode-primary;
+}

assets/css/utilities.css

@@ -0,0 +1,29 @@
+/* navbar toggler */
+input#nav-toggle:checked + label #show-button {
+  @apply hidden;
+}
+
+input#nav-toggle:checked + label #hide-button {
+  @apply block;
+}
+
+input#nav-toggle:checked ~ #nav-menu {
+  @apply block;
+}
+
+.bg-gradient {
+  @apply bg-linear-to-b from-[rgba(249,249,249,1)] from-[0.53%] to-white to-[83.28%] dark:from-darkmode-theme-light dark:to-darkmode-body;
+}
+
+.shadow {
+  @apply shadow-[0px_4px_40px_rgba(0,0,0,0.05)];
+}
+
+/* form style */
+.form-input {
+  @apply w-full rounded border-transparent bg-theme-light px-6 py-4 text-dark placeholder:text-light focus:border-primary dark:focus:border-darkmode-primary focus:ring-transparent dark:border-darkmode-border dark:bg-darkmode-theme-light dark:text-darkmode-light;
+}
+
+.form-label {
+  @apply mb-4 block font-secondary text-xl font-normal text-dark dark:text-darkmode-light;
+}