update tailwind v4, remove sass and postcss dependency
This commit is contained in:
Somrat
@@ -55,5 +55,5 @@ code {
|
||||
}
|
||||
|
||||
blockquote > p {
|
||||
@apply my-0 #{!important};
|
||||
@apply my-0!;
|
||||
}
|
||||
54
assets/css/components.css
Executable file
54
assets/css/components.css
Executable file
@@ -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;
|
||||
}
|
||||
2
assets/css/custom.css
Normal file
2
assets/css/custom.css
Normal file
@@ -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. */
|
||||
37
assets/css/main.css
Executable file
37
assets/css/main.css
Executable file
@@ -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";
|
||||
54
assets/css/module-overrides.css
Normal file
54
assets/css/module-overrides.css
Normal file
@@ -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;
|
||||
}
|
||||
@@ -1,21 +1,8 @@
|
||||
// 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;
|
||||
}
|
||||
|
||||
.header {
|
||||
@apply bg-body dark:bg-darkmode-body py-6;
|
||||
}
|
||||
|
||||
// navbar items
|
||||
/* navbar items */
|
||||
.navbar {
|
||||
@apply relative flex flex-wrap items-center justify-between;
|
||||
}
|
||||
@@ -31,24 +18,20 @@ input#nav-toggle:checked ~ #nav-menu {
|
||||
@apply text-center lg:text-left;
|
||||
}
|
||||
|
||||
// .nav-item {
|
||||
// @apply mx-3;
|
||||
// }
|
||||
|
||||
.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;
|
||||
& > svg {
|
||||
@apply pointer-events-none;
|
||||
}
|
||||
&.active {
|
||||
.nav-dropdown-list {
|
||||
@apply block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-dropdown > svg {
|
||||
@apply pointer-events-none;
|
||||
}
|
||||
|
||||
.nav-dropdown.active .nav-dropdown-list {
|
||||
@apply block;
|
||||
}
|
||||
|
||||
.nav-dropdown-list {
|
||||
@@ -63,7 +46,7 @@ input#nav-toggle:checked ~ #nav-menu {
|
||||
@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 */
|
||||
.theme-switcher {
|
||||
@apply inline-flex;
|
||||
|
||||
8
assets/css/safe.css
Normal file
8
assets/css/safe.css
Normal file
@@ -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;
|
||||
}
|
||||
29
assets/css/utilities.css
Executable file
29
assets/css/utilities.css
Executable file
@@ -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;
|
||||
}
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
dropdownMenuToggler.forEach((toggler) => {
|
||||
toggler?.addEventListener("click", (e) => {
|
||||
e.target.closest('.nav-item').classList.toggle("active");
|
||||
e.target.closest(".nav-item").classList.toggle("active");
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -1,74 +0,0 @@
|
||||
main {
|
||||
min-height: 70vh;
|
||||
}
|
||||
|
||||
// section style
|
||||
.section {
|
||||
@apply py-24 xl:py-28;
|
||||
&-sm {
|
||||
@apply py-16 xl:py-20;
|
||||
}
|
||||
}
|
||||
|
||||
// container
|
||||
.container {
|
||||
@apply mx-auto px-4 2xl:max-w-[1320px];
|
||||
}
|
||||
|
||||
// form style
|
||||
.form-input {
|
||||
@apply bg-theme-light text-dark placeholder:text-light focus:border-primary dark:border-darkmode-border dark:bg-darkmode-theme-light dark:text-darkmode-light w-full rounded border-transparent px-6 py-4 focus:ring-transparent;
|
||||
}
|
||||
|
||||
.form-label {
|
||||
@apply font-secondary text-dark dark:text-darkmode-light mb-4 block text-xl font-normal;
|
||||
}
|
||||
|
||||
// social icons
|
||||
.social-icons {
|
||||
@apply space-x-4;
|
||||
li {
|
||||
@apply inline-block;
|
||||
a {
|
||||
@apply bg-primary dark:bg-darkmode-primary dark:text-dark flex h-9 w-9 items-center justify-center rounded text-center leading-9 text-white;
|
||||
svg {
|
||||
@apply h-5 w-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// swiper pagination
|
||||
.swiper-pagination-bullet {
|
||||
@apply bg-theme-light dark:bg-darkmode-theme-light h-2.5 w-2.5 opacity-100 mx-1.5 #{!important};
|
||||
|
||||
&-active {
|
||||
@apply bg-primary dark:bg-darkmode-primary h-4 w-4 #{!important};
|
||||
}
|
||||
}
|
||||
|
||||
// content style
|
||||
.content {
|
||||
@apply prose max-w-none;
|
||||
@apply prose-headings:mb-[.3em] prose-headings:mt-[.6em] prose-headings:text-dark prose-headings:dark: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 prose-hr:dark:border-darkmode-border;
|
||||
@apply prose-p:text-base prose-p:text-text prose-p:dark: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 prose-blockquote:dark:border-darkmode-primary prose-blockquote:dark:bg-darkmode-theme-light prose-blockquote:dark:text-darkmode-light;
|
||||
@apply prose-pre:rounded-lg prose-pre:bg-theme-light prose-pre:dark:bg-darkmode-theme-light;
|
||||
@apply prose-code:px-1 prose-code:dark:text-darkmode-light;
|
||||
@apply prose-strong:text-dark prose-strong:dark:text-darkmode-text;
|
||||
@apply prose-a:text-text prose-a:underline hover:prose-a:text-primary prose-a:dark:text-darkmode-text hover:prose-a:dark:text-darkmode-primary;
|
||||
@apply prose-li:text-text prose-li:dark: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-[""] prose-table:before:dark:border-darkmode-border;
|
||||
@apply prose-thead:border-border prose-thead:bg-theme-light prose-thead:dark:border-darkmode-border prose-thead:dark:bg-darkmode-theme-light;
|
||||
@apply prose-th:relative prose-th:z-10 prose-th:px-4 prose-th:py-[18px] prose-th:text-dark prose-th:dark:text-darkmode-text;
|
||||
@apply prose-tr:border-border prose-tr:dark:border-darkmode-border;
|
||||
@apply prose-td:relative prose-td:z-10 prose-td:px-3 prose-td:py-[18px] prose-td:dark:text-darkmode-text;
|
||||
.btn {
|
||||
@apply dark:hover:text-dark no-underline hover:text-white #{!important};
|
||||
}
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
// DO NOT WRITE ANY STYLE IN THIS FILE
|
||||
// If you want to add your own styles, please write it in the `./assets/scss/custom.scss` file.
|
||||
@@ -1,30 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
@import "base";
|
||||
}
|
||||
|
||||
@layer components {
|
||||
@import "components";
|
||||
@import "navigation";
|
||||
@import "buttons";
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
@import "utilities";
|
||||
}
|
||||
|
||||
@import "search";
|
||||
@import "social-share";
|
||||
@import "gallery-slider";
|
||||
@import "images";
|
||||
@import "toc";
|
||||
@import "tab";
|
||||
@import "accordion";
|
||||
@import "modal";
|
||||
@import "notice";
|
||||
|
||||
@import "module-overrides";
|
||||
@import "custom";
|
||||
@@ -1,58 +0,0 @@
|
||||
// table of contents
|
||||
.table-of-content {
|
||||
@apply overflow-hidden rounded;
|
||||
}
|
||||
|
||||
// share icons
|
||||
.share-icons {
|
||||
.share-link {
|
||||
@apply h-9 w-9 rounded leading-9;
|
||||
@apply bg-primary hover:bg-primary dark:bg-darkmode-primary dark:hover:bg-darkmode-primary;
|
||||
}
|
||||
.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;
|
||||
&-nav {
|
||||
@apply border-border bg-theme-light dark:border-darkmode-border dark:bg-darkmode-theme-light pl-4;
|
||||
|
||||
&-item {
|
||||
@apply text-dark dark:text-darkmode-dark px-8 text-lg #{!important};
|
||||
&.active {
|
||||
@apply border-dark dark:border-darkmode-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
&-panel {
|
||||
@apply px-4 pt-0 #{!important};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// accordion
|
||||
.accordion {
|
||||
@apply border-border bg-theme-light dark:border-darkmode-border dark:bg-darkmode-theme-light mb-6 overflow-hidden rounded-lg border;
|
||||
&-header {
|
||||
@apply text-dark dark:text-darkmode-dark;
|
||||
}
|
||||
}
|
||||
|
||||
// cookie consent
|
||||
.cookie-box {
|
||||
@apply rounded-lg #{!important};
|
||||
}
|
||||
|
||||
// slider
|
||||
.gallery-slider {
|
||||
@apply ml-0 #{!important};
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
.bg-gradient {
|
||||
@apply dark:from-darkmode-theme-light dark:to-darkmode-body bg-gradient-to-b from-[rgba(249,249,249,1)] from-[0.53%] to-white to-[83.28%];
|
||||
}
|
||||
|
||||
.rounded-sm {
|
||||
@apply rounded-[4px];
|
||||
}
|
||||
.rounded {
|
||||
@apply rounded-[6px];
|
||||
}
|
||||
.rounded-lg {
|
||||
@apply rounded-[12px];
|
||||
}
|
||||
.rounded-xl {
|
||||
@apply rounded-[16px];
|
||||
}
|
||||
|
||||
.shadow {
|
||||
box-shadow: 0px 4px 40px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
Reference in New Issue
Block a user