feat: migrate Hugo Bootstrap theme to latest Hugo with Tailwind CSS and refactor codebase

* replace Bootstrap-based styling with Tailwind CSS
* update theme compatibility for latest Hugo version
* refactor templates and partials
* fix outdated code and broken components
* improve project structure and maintainability
* optimize styling and frontend build setup

assets/css/base.css

@@ -0,0 +1,62 @@
+html {
+  @apply text-base-sm md:text-base;
+}
+
+body {
+  @apply bg-body text-base font-primary font-normal leading-relaxed text-text overflow-x-hidden;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @apply font-secondary font-bold leading-tight text-text-dark;
+  span {
+    @apply text-primary;
+  }
+}
+
+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,44 @@
+.btn {
+  @apply inline-block border-0 rounded-none px-10 py-3.75 font-secondary font-light text-white transition-colors duration-300 cursor-pointer;
+
+  &:focus {
+    box-shadow: none;
+  }
+
+  .btn-area {
+    @apply block overflow-hidden;
+
+    span {
+      @apply relative inline-block py-[2px] origin-left transition-transform duration-[900ms];
+      transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1);
+
+      &::after {
+        content: attr(data-text);
+        @apply absolute left-0 top-[150%] origin-left;
+        transform: skewY(30deg);
+        transition: transform 0.9s cubic-bezier(0.19, 1, 0.22, 1);
+      }
+    }
+  }
+
+  &:hover,
+  &:visited {
+    .btn-area {
+      span {
+        transform: translateY(-150%) skewY(7deg);
+
+        &::after {
+          transform: skewY(-7deg);
+        }
+      }
+    }
+  }
+}
+
+.btn-primary {
+  @apply border-primary bg-primary/85 hover:bg-primary text-text-light;
+}
+
+.btn-secondary {
+  @apply border-secondary bg-secondary/85 hover:bg-secondary text-text-light;
+}

assets/css/components.css

@@ -0,0 +1,67 @@
+/* section style */
+.section {
+  @apply py-24 xl:py-28;
+}
+
+.section-sm {
+  @apply py-16 xl:py-20;
+}
+
+/* container */
+.container {
+  @apply mx-auto xl:max-w-[1140px]! px-4;
+}
+
+/* social icons */
+.social-icons {
+  @apply space-x-3;
+}
+.social-icons li {
+  @apply inline-block;
+}
+.social-icons li a {
+  @apply flex h-6 w-6 items-center justify-center text-center leading-9 text-text-dark;
+}
+.social-icons li a svg {
+  @apply h-5 w-5;
+}
+
+/* Form Controls */
+.form-control {
+  @apply bg-transparent border-0 border-b border-primary mb-7 px-0 pb-2.5 pt-0 rounded-none font-light tracking-wider appearance-none h-10 transition-all duration-200 text-text-dark placeholder-text-dark outline-0 focus:ring-0;
+}
+
+.form-control:focus {
+  @apply shadow-none bg-transparent border-b border-text-dark outline-none;
+}
+
+select.form-control {
+  @apply h-10 cursor-pointer;
+}
+
+textarea.form-control {
+  @apply h-auto;
+}
+
+/* content style */
+.content {
+  @apply prose max-w-none;
+  @apply prose-headings:mb-[.3em] prose-headings:mt-[.6em] prose-headings:text-text-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-p:text-base prose-p:text-text;
+  @apply prose-a:text-text prose-a:[&.btn]:no-underline;
+  @apply prose-img:max-w-full prose-img:rounded;
+  @apply prose-strong:text-text-dark;
+  @apply prose-hr:border-border;
+  @apply prose-pre:rounded-lg prose-pre:bg-light;
+
+  @apply prose-li:text-text;
+  @apply prose-blockquote:rounded-lg prose-blockquote:border prose-blockquote:border-l-[10px] prose-blockquote:border-primary prose-blockquote:bg-light prose-blockquote:px-8 prose-blockquote:py-10 prose-blockquote:font-secondary prose-blockquote:text-2xl prose-blockquote:not-italic prose-blockquote:text-text-dark;
+  @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:border-border prose-table:before:content-[""];
+  @apply prose-thead:border-border prose-thead:bg-light;
+  @apply prose-th:relative prose-th:z-10 prose-th:px-4 prose-th:py-[18px] prose-th:text-text-dark;
+  @apply prose-tr:border-border;
+  @apply prose-td:relative prose-td:z-10 prose-td:px-3 prose-td:py-[18px];
+}

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/generated-theme.css

@@ -0,0 +1,39 @@
+/**
+ * Auto-generated from "data/theme.json"
+ * DO NOT EDIT THIS FILE MANUALLY
+ * Run: node scripts/themeGenerator.js
+ */
+
+@theme {
+  /* === Colors === */
+  --color-primary: #E07B7B;
+  --color-secondary: #8BC5BF;
+  --color-tertiary: #F7F9FF;
+  --color-body: #fff;
+  --color-border: #eaeaea;
+  --color-light: #f6f6f6;
+  --color-dark: #040404;
+  --color-text: #9D9EA5;
+  --color-text-dark: #00113E;
+  --color-text-light: #fff;
+
+  /* === Font Families === */
+  --font-primary: Josefin Sans, sans-serif;
+  --font-secondary: Montserrat, sans-serif;
+
+  /* === Font Sizes === */
+  --text-base: 16px;
+  --text-base-sm: 12.8px;
+  --text-h6: 1.25rem;
+  --text-h6-sm: 1.125rem;
+  --text-h5: 1.5625rem;
+  --text-h5-sm: 1.40625rem;
+  --text-h4: 1.953125rem;
+  --text-h4-sm: 1.7578125rem;
+  --text-h3: 2.44140625rem;
+  --text-h3-sm: 2.197265625rem;
+  --text-h2: 3.0517578125rem;
+  --text-h2-sm: 2.74658203125rem;
+  --text-h1: 3.814697265625rem;
+  --text-h1-sm: 3.4332275390625rem;
+}

assets/css/main.css

@@ -0,0 +1,33 @@
+@import "tailwindcss";
+@plugin "@tailwindcss/forms";
+@plugin "@tailwindcss/typography";
+@plugin 'tailwind-bootstrap-grid';
+@source "hugo_stats.json";
+
+/* Auto-generated theme from "data/theme.json"*/
+@import "./generated-theme.css";
+
+@import "./safe.css";
+@import "./utilities.css";
+
+@layer base {
+  @import "./base.css";
+}
+
+@layer components {
+  @import "./components.css";
+  @import "./navigation.css";
+  @import "./buttons.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,63 @@
+/* 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;
+}
+
+.share-icons .share-icon svg {
+}
+
+.fediverse-input-wrapper {
+  @apply bg-body  rounded;
+  input {
+    @apply rounded focus:border-primary focus:ring-0;
+  }
+  button {
+    @apply rounded bg-primary  text-light  hover:bg-primary;
+  }
+}
+
+/* notice */
+.notice {
+  @apply rounded-lg;
+}
+
+/* tab */
+.tab {
+  @apply border-border  overflow-hidden rounded-lg border;
+}
+.tab-nav {
+  @apply border-border bg-light   pl-4;
+}
+.tab-nav-item {
+  @apply text-text-dark  px-8 !text-lg;
+}
+.tab-nav-item.active {
+  @apply border-dark;
+}
+
+.tab-content-panel {
+  @apply px-4 !pt-0;
+}
+
+/* accordion */
+.accordion {
+  @apply border-border bg-light   mb-6 overflow-hidden rounded-lg border;
+}
+.accordion-header {
+  @apply text-text-dark;
+}
+
+/* cookie consent */
+.cookie-box {
+  @apply !rounded-lg;
+}
+
+/* slider */
+.gallery-slider {
+  @apply !ml-0;
+}

assets/css/navigation.css

@@ -0,0 +1,43 @@
+.header {
+  @apply bg-body  py-6;
+}
+
+/* navbar items */
+.navbar {
+  @apply relative flex flex-wrap items-center justify-between;
+}
+
+.navbar-brand {
+  @apply text-text-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-text-dark hover:text-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-list {
+  @apply bg-body  z-10 min-w-[180px] rounded p-4 shadow-sm;
+}
+
+.nav-dropdown-item {
+  @apply [&:not(:last-child)]:mb-2;
+}
+
+.nav-dropdown-link {
+  @apply text-text-dark hover:text-primary   block py-1 font-semibold transition;
+}

assets/css/safe.css

@@ -0,0 +1,12 @@
+/* navbar toggler */
+input#nav-toggle:checked + label #show-button {
+  @apply hidden;
+}
+
+input#nav-toggle:checked + label #hide-button {
+  @apply block;
+}
+
+input#nav-toggle:checked ~ div #nav-menu {
+  @apply max-lg:block;
+}