mirror of
https://github.com/10h30/astroplate.git
synced 2026-07-14 04:06:21 +09:00
added tailwind v4, remove sass dependency
This commit is contained in:
Somrat
+3
-14
@@ -8,11 +8,7 @@
|
||||
"theme_light": "#f6f6f6",
|
||||
"theme_dark": ""
|
||||
},
|
||||
"text_color": {
|
||||
"default": "#444444",
|
||||
"dark": "#040404",
|
||||
"light": "#717171"
|
||||
}
|
||||
"text_color": { "text": "#444444", "dark": "#040404", "light": "#717171" }
|
||||
},
|
||||
"darkmode": {
|
||||
"theme_color": {
|
||||
@@ -22,11 +18,7 @@
|
||||
"theme_light": "#222222",
|
||||
"theme_dark": ""
|
||||
},
|
||||
"text_color": {
|
||||
"default": "#B4AFB6",
|
||||
"dark": "#fff",
|
||||
"light": "#B4AFB6"
|
||||
}
|
||||
"text_color": { "text": "#B4AFB6", "dark": "#fff", "light": "#B4AFB6" }
|
||||
}
|
||||
},
|
||||
"fonts": {
|
||||
@@ -36,9 +28,6 @@
|
||||
"secondary": "Signika:wght@500;700",
|
||||
"secondary_type": "sans-serif"
|
||||
},
|
||||
"font_size": {
|
||||
"base": "16",
|
||||
"scale": "1.2"
|
||||
}
|
||||
"font_size": { "base": "16", "scale": "1.2" }
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@ import theme from "@/config/theme.json";
|
||||
import { plainify } from "@/lib/utils/textConverter";
|
||||
import Footer from "@/partials/Footer.astro";
|
||||
import Header from "@/partials/Header.astro";
|
||||
import "@/styles/main.scss";
|
||||
import "@/styles/main.css";
|
||||
import { AstroFont } from "astro-font";
|
||||
import { ClientRouter } from "astro:transitions";
|
||||
import SearchModal from "./helpers/SearchModal";
|
||||
|
||||
@@ -3,7 +3,7 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-body dark:bg-darkmode-body font-primary font-normal leading-relaxed text-text dark:text-darkmode-text;
|
||||
@apply bg-body text-base dark:bg-darkmode-body font-primary font-normal leading-relaxed text-text dark:text-darkmode-text;
|
||||
}
|
||||
|
||||
h1,
|
||||
@@ -55,5 +55,5 @@ code {
|
||||
}
|
||||
|
||||
blockquote > p {
|
||||
@apply my-0 #{!important};
|
||||
@apply my-0!;
|
||||
}
|
||||
Executable
+170
@@ -0,0 +1,170 @@
|
||||
/* 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-[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;
|
||||
}
|
||||
|
||||
/* notice */
|
||||
.notice {
|
||||
@apply mb-6 rounded-lg border px-8 py-6;
|
||||
}
|
||||
|
||||
.notice-head {
|
||||
@apply flex items-center;
|
||||
}
|
||||
|
||||
.notice-head svg {
|
||||
@apply mr-3;
|
||||
}
|
||||
|
||||
.notice-head p {
|
||||
@apply font-secondary text-xl font-semibold text-dark dark:text-darkmode-light;
|
||||
}
|
||||
|
||||
.notice-body {
|
||||
@apply mt-3;
|
||||
}
|
||||
|
||||
.notice-body p {
|
||||
@apply my-0;
|
||||
}
|
||||
|
||||
.notice.note {
|
||||
@apply text-[#1B83E2];
|
||||
@apply border-current;
|
||||
}
|
||||
|
||||
.notice.tip {
|
||||
@apply text-[#40D294];
|
||||
@apply border-current;
|
||||
}
|
||||
|
||||
.notice.info {
|
||||
@apply text-[#E3A72C];
|
||||
@apply border-current;
|
||||
}
|
||||
|
||||
.notice.warning {
|
||||
@apply text-[#DB2C23];
|
||||
@apply border-current;
|
||||
}
|
||||
|
||||
/* tab */
|
||||
.tab {
|
||||
@apply overflow-hidden rounded-lg border border-border dark:border-darkmode-border;
|
||||
}
|
||||
|
||||
.tab-nav {
|
||||
@apply flex border-b border-border bg-theme-light dark:border-darkmode-border dark:bg-darkmode-theme-light !m-0 !list-none;
|
||||
}
|
||||
|
||||
.tab-nav-item {
|
||||
@apply cursor-pointer border-b-[3px] border-border py-2 text-lg text-dark opacity-80 dark:border-light !my-0 !px-8;
|
||||
}
|
||||
|
||||
.tab-nav-item.active {
|
||||
@apply border-b-[3px] border-dark opacity-100 dark:border-darkmode-primary;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
@apply px-5;
|
||||
}
|
||||
|
||||
.tab-content-panel {
|
||||
@apply p-8;
|
||||
}
|
||||
|
||||
.tab-content-panel p {
|
||||
@apply mb-0;
|
||||
}
|
||||
|
||||
.tab-content-panel.active {
|
||||
@apply block;
|
||||
}
|
||||
|
||||
/* accordion */
|
||||
.accordion {
|
||||
@apply mb-6 overflow-hidden rounded-lg border border-border bg-theme-light dark:border-darkmode-border dark:bg-darkmode-theme-light;
|
||||
}
|
||||
|
||||
.accordion-header {
|
||||
@apply flex w-full cursor-pointer items-center justify-between px-8 py-4 text-lg text-dark dark:bg-darkmode-theme-light dark:text-darkmode-light;
|
||||
}
|
||||
|
||||
.accordion-icon {
|
||||
@apply h-[.8em] w-[.8em] rotate-[-90deg] transition-transform duration-200;
|
||||
}
|
||||
|
||||
.accordion-content {
|
||||
@apply max-h-0 overflow-hidden px-8 py-0;
|
||||
}
|
||||
|
||||
.accordion.active .accordion-icon {
|
||||
@apply rotate-0;
|
||||
}
|
||||
|
||||
.accordion.active .accordion-content {
|
||||
@apply max-h-screen;
|
||||
}
|
||||
|
||||
/* modal */
|
||||
.modal {
|
||||
@apply fixed inset-0 z-40 hidden h-full w-full overflow-auto;
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
@apply fixed inset-0 z-40 hidden h-full w-full bg-black/40;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
@apply relative top-1/2 z-50 mx-auto max-w-[90%] -translate-y-1/2 rounded-lg bg-body p-8 dark:bg-darkmode-body;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
@apply absolute right-3 top-3 h-8 w-8 rounded-full bg-theme-light text-center leading-8 text-dark dark:bg-darkmode-theme-light dark:text-darkmode-dark;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
@@ -1,176 +0,0 @@
|
||||
// section style
|
||||
.section {
|
||||
@apply py-24 xl:py-28;
|
||||
&-sm {
|
||||
@apply py-16 xl:py-20;
|
||||
}
|
||||
}
|
||||
|
||||
// container
|
||||
.container {
|
||||
@apply mx-auto max-w-[1320px] px-4;
|
||||
}
|
||||
|
||||
// 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 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;
|
||||
}
|
||||
|
||||
// social icons
|
||||
.social-icons {
|
||||
@apply space-x-4;
|
||||
li {
|
||||
@apply inline-block;
|
||||
a {
|
||||
@apply flex h-9 w-9 items-center justify-center rounded bg-primary text-center leading-9 text-white dark:bg-darkmode-primary dark:text-dark;
|
||||
svg {
|
||||
@apply h-5 w-5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// notice
|
||||
.notice {
|
||||
@apply mb-6 rounded-lg border px-8 py-6;
|
||||
&-head {
|
||||
@apply flex items-center;
|
||||
svg {
|
||||
@apply mr-3;
|
||||
}
|
||||
p {
|
||||
@apply font-secondary text-xl font-semibold text-dark dark:text-darkmode-light;
|
||||
}
|
||||
}
|
||||
.notice-body {
|
||||
@apply mt-3;
|
||||
p {
|
||||
@apply my-0;
|
||||
}
|
||||
}
|
||||
|
||||
&.note {
|
||||
@apply text-[#1B83E2];
|
||||
@apply border-current;
|
||||
}
|
||||
|
||||
&.tip {
|
||||
@apply text-[#40D294];
|
||||
@apply border-current;
|
||||
}
|
||||
|
||||
&.info {
|
||||
@apply text-[#E3A72C];
|
||||
@apply border-current;
|
||||
}
|
||||
|
||||
&.warning {
|
||||
@apply text-[#DB2C23];
|
||||
@apply border-current;
|
||||
}
|
||||
}
|
||||
|
||||
// swiper pagination
|
||||
.testimonial-slider-pagination {
|
||||
.swiper-pagination-bullet {
|
||||
@apply h-2.5 w-2.5 bg-theme-light opacity-100 dark:bg-darkmode-theme-light;
|
||||
|
||||
&-active {
|
||||
@apply h-4 w-4 bg-primary dark:bg-darkmode-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// tab
|
||||
.tab {
|
||||
@apply overflow-hidden rounded-lg border border-border dark:border-darkmode-border;
|
||||
&-nav {
|
||||
@apply flex border-b border-border bg-theme-light dark:border-darkmode-border dark:bg-darkmode-theme-light;
|
||||
@apply m-0 #{!important};
|
||||
@apply list-none #{!important};
|
||||
|
||||
&-item {
|
||||
@apply cursor-pointer border-b-[3px] border-border py-2 text-lg text-dark opacity-80 dark:border-light;
|
||||
@apply my-0 #{!important};
|
||||
@apply px-8 #{!important};
|
||||
|
||||
&.active {
|
||||
@apply border-b-[3px] border-dark opacity-100 dark:border-darkmode-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-content {
|
||||
&-panel {
|
||||
@apply p-8;
|
||||
p {
|
||||
@apply mb-0;
|
||||
}
|
||||
&.active {
|
||||
@apply block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// accordion
|
||||
.accordion {
|
||||
@apply mb-6 overflow-hidden rounded-lg border border-border bg-theme-light dark:border-darkmode-border dark:bg-darkmode-theme-light;
|
||||
&-header {
|
||||
@apply flex w-full cursor-pointer items-center justify-between px-8 py-4 text-lg text-dark dark:bg-darkmode-theme-light dark:text-darkmode-light;
|
||||
}
|
||||
&-icon {
|
||||
@apply ml-auto h-[.8em] w-[.8em] rotate-[-90deg] transition-transform duration-200;
|
||||
}
|
||||
&-content {
|
||||
@apply max-h-0 overflow-hidden px-8 py-0;
|
||||
}
|
||||
&.active {
|
||||
.accordion-icon {
|
||||
@apply rotate-0;
|
||||
}
|
||||
.accordion-content {
|
||||
@apply max-h-screen;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// modal
|
||||
.modal {
|
||||
@apply fixed inset-0 z-40 hidden h-full w-full overflow-auto;
|
||||
&-overlay {
|
||||
@apply fixed inset-0 z-40 hidden h-full w-full bg-black bg-opacity-40;
|
||||
}
|
||||
&-content {
|
||||
@apply relative top-1/2 z-50 mx-auto max-w-[90%] -translate-y-1/2 rounded-lg bg-body p-8 dark:bg-darkmode-body;
|
||||
}
|
||||
&-close {
|
||||
@apply absolute right-3 top-3 h-8 w-8 rounded-full bg-theme-light text-center leading-8 text-dark dark:bg-darkmode-theme-light dark:text-darkmode-dark;
|
||||
}
|
||||
}
|
||||
|
||||
// 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:text-primary prose-code:dark:text-darkmode-primary;
|
||||
@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;
|
||||
}
|
||||
Executable
+24
@@ -0,0 +1,24 @@
|
||||
@import "tailwindcss";
|
||||
@plugin "../tailwind-plugin/tw-theme";
|
||||
@plugin "../tailwind-plugin/tw-bs-grid";
|
||||
@plugin "@tailwindcss/forms";
|
||||
@plugin "@tailwindcss/typography";
|
||||
|
||||
@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";
|
||||
@import "./search.css";
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
@import "./utilities.css";
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
@use "sass:meta";
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
@include meta.load-css("base");
|
||||
}
|
||||
|
||||
@layer components {
|
||||
@include meta.load-css("components");
|
||||
@include meta.load-css("navigation");
|
||||
@include meta.load-css("buttons");
|
||||
@include meta.load-css("search");
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
@include meta.load-css("utilities");
|
||||
}
|
||||
Executable
+70
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
// 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 py-6 dark:bg-darkmode-body;
|
||||
}
|
||||
|
||||
// navbar items
|
||||
.navbar {
|
||||
@apply relative flex flex-wrap items-center justify-between;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
@apply text-xl font-semibold text-dark dark:text-darkmode-dark;
|
||||
image {
|
||||
@apply max-h-full max-w-full;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
@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 font-semibold transition lg:px-2 lg:py-3;
|
||||
}
|
||||
|
||||
.nav-dropdown {
|
||||
@apply mr-0;
|
||||
}
|
||||
|
||||
.nav-dropdown-list {
|
||||
@apply z-10 min-w-[180px] rounded bg-body p-4 shadow dark:bg-darkmode-body;
|
||||
}
|
||||
|
||||
.nav-dropdown-item {
|
||||
@apply mb-2;
|
||||
}
|
||||
|
||||
.nav-dropdown-link {
|
||||
@apply block py-1 font-semibold text-dark transition hover:text-primary dark:text-darkmode-text dark:hover:text-darkmode-primary;
|
||||
}
|
||||
|
||||
//theme-switcher
|
||||
.theme-switcher {
|
||||
@apply inline-flex;
|
||||
|
||||
label {
|
||||
@apply relative inline-block h-4 w-6 cursor-pointer rounded-2xl bg-border lg:w-10;
|
||||
}
|
||||
|
||||
input {
|
||||
@apply absolute opacity-0;
|
||||
}
|
||||
|
||||
span {
|
||||
@apply absolute -top-1 left-0 flex h-6 w-6 items-center justify-center rounded-full bg-dark transition-all duration-300 dark:bg-white;
|
||||
}
|
||||
|
||||
input:checked + label {
|
||||
span {
|
||||
@apply lg:left-4;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,10 @@
|
||||
/* swiper pagination */
|
||||
.testimonial-slider-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;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,97 @@
|
||||
.search-modal {
|
||||
@apply z-50 fixed top-0 left-0 w-full h-full flex items-start justify-center invisible opacity-0;
|
||||
}
|
||||
.search-modal.show {
|
||||
@apply visible opacity-100;
|
||||
}
|
||||
.search-modal-overlay {
|
||||
@apply fixed top-0 left-0 w-full h-full bg-black opacity-50;
|
||||
}
|
||||
.search-wrapper {
|
||||
@apply bg-white dark:bg-darkmode-body w-[660px] max-w-[96%] mt-24 rounded shadow-lg relative z-10;
|
||||
}
|
||||
.search-wrapper-header {
|
||||
@apply p-4 relative;
|
||||
}
|
||||
.search-wrapper-header-input {
|
||||
@apply border border-solid w-full focus:ring-0 focus:border-dark border-border rounded-[4px] h-12 pr-4 pl-10 transition duration-200 outline-none dark:bg-darkmode-theme-light dark:text-darkmode-text dark:border-darkmode-border dark:focus:border-darkmode-primary;
|
||||
}
|
||||
.search-wrapper-body {
|
||||
@apply dark:bg-darkmode-theme-light dark:shadow-none max-h-[calc(100vh-350px)] overflow-y-auto bg-theme-light shadow-[inset_0_2px_18px_#ddd] p-4 rounded;
|
||||
}
|
||||
.search-wrapper-footer {
|
||||
@apply text-xs select-none leading-none md:flex items-center px-3.5 py-2 hidden;
|
||||
}
|
||||
.search-wrapper-footer kbd {
|
||||
@apply bg-theme-light dark:bg-darkmode-theme-light text-xs leading-none text-center mr-[3px] px-1 py-0.5 rounded-[3px];
|
||||
}
|
||||
.search-wrapper-footer span:not(:last-child) {
|
||||
@apply mr-4;
|
||||
}
|
||||
.search-wrapper-footer span:last-child {
|
||||
@apply ml-auto;
|
||||
}
|
||||
.search-result-empty {
|
||||
@apply text-center cursor-text select-none px-0 py-8;
|
||||
}
|
||||
.search-result-group {
|
||||
@apply mb-4;
|
||||
}
|
||||
.search-result-group-title {
|
||||
@apply text-lg text-dark dark:text-darkmode-dark mb-[5px] px-3;
|
||||
}
|
||||
.search-result-item {
|
||||
@apply rounded border bg-white dark:bg-darkmode-body dark:border-darkmode-border flex items-start mb-1 p-4 scroll-my-[30px] border-solid border-border relative;
|
||||
}
|
||||
.search-result-item mark {
|
||||
@apply bg-yellow-200 rounded-[2px];
|
||||
}
|
||||
.search-result-item-title {
|
||||
@apply text-lg font-bold text-dark dark:text-darkmode-dark leading-none;
|
||||
}
|
||||
.search-result-item-link::after {
|
||||
@apply absolute top-0 right-0 bottom-0 left-0 z-10 content-[""];
|
||||
}
|
||||
.search-result-item-image {
|
||||
@apply shrink-0 mr-3.5;
|
||||
}
|
||||
.search-result-item-image img {
|
||||
@apply w-[60px] h-[60px] md:w-[100px] md:h-[100px] rounded-[4px] object-cover;
|
||||
}
|
||||
.search-result-item-description {
|
||||
@apply text-sm line-clamp-1 mt-1;
|
||||
}
|
||||
.search-result-item-content {
|
||||
@apply mx-0 my-1.5 empty:hidden line-clamp-1;
|
||||
}
|
||||
.search-result-item-taxonomies {
|
||||
@apply text-sm flex flex-wrap items-center text-light dark:text-darkmode-light;
|
||||
}
|
||||
.search-result-item-taxonomies svg {
|
||||
@apply inline-block mr-1;
|
||||
}
|
||||
.search-result-item-active,
|
||||
.search-result-item:focus,
|
||||
.search-result-item:hover {
|
||||
@apply bg-dark dark:bg-dark;
|
||||
}
|
||||
.search-result-item-active .search-result-item-title,
|
||||
.search-result-item:focus .search-result-item-title,
|
||||
.search-result-item:hover .search-result-item-title {
|
||||
@apply text-white;
|
||||
}
|
||||
.search-result-item-active .search-result-item-description,
|
||||
.search-result-item:focus .search-result-item-description,
|
||||
.search-result-item:hover .search-result-item-description {
|
||||
@apply text-white/80;
|
||||
}
|
||||
.search-result-item-active .search-result-item-content,
|
||||
.search-result-item:focus .search-result-item-content,
|
||||
.search-result-item:hover .search-result-item-content {
|
||||
@apply text-white/90;
|
||||
}
|
||||
.search-result-item-active .search-result-item-taxonomies,
|
||||
.search-result-item:focus .search-result-item-taxonomies,
|
||||
.search-result-item:hover .search-result-item-taxonomies {
|
||||
@apply text-white/90;
|
||||
}
|
||||
@@ -1,96 +0,0 @@
|
||||
.search {
|
||||
&-modal {
|
||||
@apply z-50 fixed -top-10 left-0 w-full h-full flex items-start justify-center invisible opacity-0;
|
||||
&.show {
|
||||
@apply visible opacity-100;
|
||||
}
|
||||
&-overlay {
|
||||
@apply fixed top-0 left-0 w-full h-full bg-black opacity-50;
|
||||
}
|
||||
}
|
||||
&-wrapper {
|
||||
@apply bg-white dark:bg-darkmode-body w-[660px] max-w-[96%] mt-24 rounded shadow-lg relative z-10;
|
||||
&-header {
|
||||
@apply p-4 relative;
|
||||
&-input {
|
||||
@apply border border-solid w-full focus:ring-0 focus:border-dark border-border rounded-[4px] h-12 pr-4 pl-10 transition duration-200 outline-none dark:bg-darkmode-theme-light dark:text-darkmode-text dark:border-darkmode-border dark:focus:border-darkmode-primary;
|
||||
}
|
||||
}
|
||||
&-body {
|
||||
@apply dark:bg-darkmode-theme-light dark:shadow-none max-h-[calc(100vh-350px)] overflow-y-auto bg-theme-light shadow-[inset_0_2px_18px_#ddd] p-4 rounded;
|
||||
}
|
||||
&-footer {
|
||||
@apply text-xs select-none leading-none md:flex items-center px-3.5 py-2 hidden;
|
||||
kbd {
|
||||
@apply bg-theme-light dark:bg-darkmode-theme-light text-xs leading-none text-center mr-[3px] px-1 py-0.5 rounded-[3px];
|
||||
}
|
||||
span:not(:last-child) {
|
||||
@apply mr-4;
|
||||
}
|
||||
span:last-child {
|
||||
@apply ml-auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-result {
|
||||
&-empty {
|
||||
@apply text-center cursor-text select-none px-0 py-8;
|
||||
}
|
||||
&-group {
|
||||
@apply mb-4;
|
||||
&-title {
|
||||
@apply text-lg text-dark dark:text-darkmode-dark mb-[5px] px-3;
|
||||
}
|
||||
}
|
||||
&-item {
|
||||
@apply rounded border bg-white dark:bg-darkmode-body dark:border-darkmode-border flex items-start mb-1 p-4 scroll-my-[30px] border-solid border-border relative;
|
||||
mark {
|
||||
@apply bg-yellow-200 rounded-[2px];
|
||||
}
|
||||
&-title {
|
||||
@apply text-lg font-bold text-dark dark:text-darkmode-dark leading-none;
|
||||
}
|
||||
&-link::after {
|
||||
@apply absolute top-0 right-0 bottom-0 left-0 z-10 content-[""];
|
||||
}
|
||||
&-image {
|
||||
@apply shrink-0 mr-3.5;
|
||||
img {
|
||||
@apply w-[60px] h-[60px] md:w-[100px] md:h-[100px] rounded-[4px] object-cover;
|
||||
}
|
||||
}
|
||||
&-description {
|
||||
@apply text-sm line-clamp-1 mt-1;
|
||||
}
|
||||
&-content {
|
||||
@apply mx-0 my-1.5 empty:hidden line-clamp-1;
|
||||
}
|
||||
&-taxonomies {
|
||||
@apply text-sm flex flex-wrap items-center text-light dark:text-darkmode-light;
|
||||
svg {
|
||||
@apply inline-block mr-1;
|
||||
}
|
||||
}
|
||||
|
||||
&-active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
@apply bg-dark dark:bg-dark;
|
||||
.search-result-item {
|
||||
&-title {
|
||||
@apply text-white;
|
||||
}
|
||||
&-description {
|
||||
@apply text-white/80;
|
||||
}
|
||||
&-content {
|
||||
@apply text-white/90;
|
||||
}
|
||||
&-taxonomies {
|
||||
@apply text-white/90;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Executable
+29
@@ -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;
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
.bg-gradient {
|
||||
@apply bg-gradient-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;
|
||||
}
|
||||
|
||||
.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);
|
||||
}
|
||||
@@ -0,0 +1,103 @@
|
||||
import plugin from "tailwindcss/plugin";
|
||||
|
||||
module.exports = plugin.withOptions(() => {
|
||||
return ({ addComponents }) => {
|
||||
const gridColumns = 12;
|
||||
const gridGutterWidth = "1.5rem";
|
||||
const gridGutters = {
|
||||
0: "0",
|
||||
1: "0.25rem",
|
||||
2: "0.5rem",
|
||||
3: "1rem",
|
||||
4: "1.5rem",
|
||||
5: "3rem",
|
||||
};
|
||||
const respectImportant = true;
|
||||
const columns = Array.from({ length: gridColumns }, (_, i) => i + 1);
|
||||
const rowColsSteps = columns.slice(0, Math.floor(gridColumns / 2));
|
||||
|
||||
// row
|
||||
addComponents(
|
||||
{
|
||||
".row": {
|
||||
"--bs-gutter-x": gridGutterWidth,
|
||||
"--bs-gutter-y": 0,
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
marginTop: "calc(var(--bs-gutter-y) * -1)",
|
||||
marginRight: "calc(var(--bs-gutter-x) / -2)",
|
||||
marginLeft: "calc(var(--bs-gutter-x) / -2)",
|
||||
"& > *": {
|
||||
boxSizing: "border-box",
|
||||
flexShrink: 0,
|
||||
width: "100%",
|
||||
maxWidth: "100%",
|
||||
paddingRight: "calc(var(--bs-gutter-x) / 2)",
|
||||
paddingLeft: "calc(var(--bs-gutter-x) / 2)",
|
||||
marginTop: "var(--bs-gutter-y)",
|
||||
},
|
||||
},
|
||||
},
|
||||
{ respectImportant },
|
||||
);
|
||||
|
||||
// columns
|
||||
addComponents(
|
||||
[
|
||||
{
|
||||
".col": { flex: "1 0 0%" },
|
||||
".row-cols-auto": { "& > *": { flex: "0 0 auto", width: "auto" } },
|
||||
},
|
||||
...rowColsSteps.map((num) => ({
|
||||
[`.row-cols-${num}`]: {
|
||||
"& > *": { flex: "0 0 auto", width: `${100 / num}%` },
|
||||
},
|
||||
})),
|
||||
{ ".col-auto": { flex: "0 0 auto", width: "auto" } },
|
||||
...columns.map((num) => ({
|
||||
[`.col-${num}`]: {
|
||||
flex: "0 0 auto",
|
||||
width: `${(100 / gridColumns) * num}%`,
|
||||
},
|
||||
})),
|
||||
],
|
||||
{ respectImportant },
|
||||
);
|
||||
|
||||
// offset
|
||||
addComponents(
|
||||
[0, ...columns.slice(0, -1)].map((num) => ({
|
||||
[`.offset-${num}`]: { marginLeft: `${(100 / gridColumns) * num}%` },
|
||||
})),
|
||||
{ respectImportant },
|
||||
);
|
||||
|
||||
// gutters
|
||||
if (Object.keys(gridGutters).length) {
|
||||
const gutterComponents = Object.entries(gridGutters).reduce(
|
||||
(acc, [key, value]) => {
|
||||
acc[`.g-${key}`] = { "--bs-gutter-x": value, "--bs-gutter-y": value };
|
||||
acc[`.gx-${key}`] = { "--bs-gutter-x": value };
|
||||
acc[`.gy-${key}`] = { "--bs-gutter-y": value };
|
||||
return acc;
|
||||
},
|
||||
{},
|
||||
);
|
||||
addComponents(gutterComponents, { respectImportant });
|
||||
}
|
||||
|
||||
// order
|
||||
addComponents(
|
||||
[
|
||||
{
|
||||
".order-first": { order: "-1" },
|
||||
".order-last": { order: gridColumns + 1 },
|
||||
},
|
||||
...[0, ...columns].map((num) => ({
|
||||
[`.order-${num}`]: { order: String(num) },
|
||||
})),
|
||||
],
|
||||
{ respectImportant },
|
||||
);
|
||||
};
|
||||
});
|
||||
@@ -0,0 +1,94 @@
|
||||
import plugin from "tailwindcss/plugin";
|
||||
import themeConfig from "../config/theme.json";
|
||||
|
||||
// Find font name from font string
|
||||
const findFont = (fontStr) =>
|
||||
fontStr.replace(/\+/g, " ").replace(/:[^:]+/g, "");
|
||||
|
||||
// Set font families dynamically, filtering out 'type' keys
|
||||
const fontFamilies = Object.entries(themeConfig.fonts.font_family)
|
||||
.filter(([key]) => !key.includes("type"))
|
||||
.reduce((acc, [key, font]) => {
|
||||
acc[key] =
|
||||
`${findFont(font)}, ${themeConfig.fonts.font_family[`${key}_type`] || "sans-serif"}`;
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
module.exports = plugin.withOptions(() => {
|
||||
return ({ addBase, addUtilities }) => {
|
||||
const rootVars = {};
|
||||
|
||||
const baseSize = Number(themeConfig.fonts.font_size.base);
|
||||
const scale = Number(themeConfig.fonts.font_size.scale);
|
||||
|
||||
// Set font sizes
|
||||
const fontSizes = {
|
||||
base: `${baseSize}px`,
|
||||
"base-sm": `${baseSize * 0.8}px`,
|
||||
h1: `${scale ** 5}rem`,
|
||||
"h1-sm": `${scale ** 5 * 0.9}rem`,
|
||||
h2: `${scale ** 4}rem`,
|
||||
"h2-sm": `${scale ** 4 * 0.9}rem`,
|
||||
h3: `${scale ** 3}rem`,
|
||||
"h3-sm": `${scale ** 3 * 0.9}rem`,
|
||||
h4: `${scale ** 2}rem`,
|
||||
h5: `${scale}rem`,
|
||||
h6: `${scale}rem`,
|
||||
};
|
||||
Object.entries(fontSizes).forEach(([k, v]) => {
|
||||
rootVars[`--text-${k}`] = v;
|
||||
});
|
||||
|
||||
Object.entries(fontFamilies).forEach(([key, font]) => {
|
||||
rootVars[`--font-${key}`] = font;
|
||||
});
|
||||
|
||||
// Define color groups
|
||||
const groups = [
|
||||
{ colors: themeConfig.colors.default.theme_color, prefix: "" },
|
||||
{ colors: themeConfig.colors.default.text_color, prefix: "" },
|
||||
{ colors: themeConfig.colors.darkmode.theme_color, prefix: "darkmode-" },
|
||||
{ colors: themeConfig.colors.darkmode.text_color, prefix: "darkmode-" },
|
||||
];
|
||||
|
||||
// Set color variables
|
||||
groups.forEach(({ colors, prefix }) => {
|
||||
Object.entries(colors).forEach(([k, v]) => {
|
||||
rootVars[`--color-${prefix}${k.replace(/_/g, "-")}`] = v;
|
||||
});
|
||||
});
|
||||
|
||||
// Add variables to root
|
||||
addBase({ ":root": rootVars });
|
||||
|
||||
// Generate color utilities
|
||||
const colorUtils = {};
|
||||
groups.forEach(({ colors, prefix }) => {
|
||||
Object.keys(colors).forEach((k) => {
|
||||
const cls = k.replace(/_/g, "-");
|
||||
const varRef = `var(--color-${prefix}${cls})`;
|
||||
colorUtils[`.bg-${prefix}${cls}`] = { backgroundColor: varRef };
|
||||
colorUtils[`.text-${prefix}${cls}`] = { color: varRef };
|
||||
colorUtils[`.border-${prefix}${cls}`] = { borderColor: varRef };
|
||||
colorUtils[`.fill-${prefix}${cls}`] = { fill: varRef };
|
||||
colorUtils[`.from-${prefix}${cls}`] = { "--tw-gradient-from": varRef };
|
||||
colorUtils[`.to-${prefix}${cls}`] = { "--tw-gradient-to": varRef };
|
||||
colorUtils[`.via-${prefix}${cls}`] = { "--tw-gradient-stops": varRef };
|
||||
});
|
||||
});
|
||||
|
||||
// Generate font utilities dynamically
|
||||
const fontUtils = {};
|
||||
Object.keys(fontFamilies).forEach((key) => {
|
||||
fontUtils[`.font-${key}`] = { fontFamily: `var(--font-${key})` };
|
||||
});
|
||||
Object.keys(fontSizes).forEach((k) => {
|
||||
fontUtils[`.text-${k}`] = { fontSize: `var(--text-${k})` };
|
||||
});
|
||||
|
||||
addUtilities(
|
||||
{ ...colorUtils, ...fontUtils },
|
||||
{ variants: ["responsive", "hover", "focus", "active", "disabled"] },
|
||||
);
|
||||
};
|
||||
});
|
||||
Reference in New Issue
Block a user