mirror of
https://github.com/saicaca/fuwari.git
synced 2026-01-11 14:52:52 +01:00
Refactor styles and remove Tailwind configuration
- Deleted postcss.config.mjs as it is no longer needed. - Updated Layout.astro to reference main.css instead of using @tailwind components. - Modified expressive-code.css to include a reference to Tailwind CSS. - Reworked main.css to use @import for Tailwind and added custom variants and utilities. - Updated markdown.css to reference main.css and adjusted anchor styles. - Enhanced photoswipe.css and scrollbar.css with Tailwind references and applied important modifiers. - Updated transition.css to include Tailwind reference. - Removed tailwind.config.cjs as part of the cleanup.
This commit is contained in:
L4Ph
@@ -1,12 +1,12 @@
|
||||
import sitemap from "@astrojs/sitemap";
|
||||
import svelte from "@astrojs/svelte";
|
||||
import tailwind from "@astrojs/tailwind";
|
||||
import { pluginCollapsibleSections } from "@expressive-code/plugin-collapsible-sections";
|
||||
import { pluginLineNumbers } from "@expressive-code/plugin-line-numbers";
|
||||
import swup from "@swup/astro";
|
||||
import tailwindcss from "@tailwindcss/vite";
|
||||
import { defineConfig } from "astro/config";
|
||||
import expressiveCode from "astro-expressive-code";
|
||||
import icon from "astro-icon";
|
||||
import { defineConfig } from "astro/config";
|
||||
import rehypeAutolinkHeadings from "rehype-autolink-headings";
|
||||
import rehypeComponents from "rehype-components"; /* Render the custom directive content */
|
||||
import rehypeKatex from "rehype-katex";
|
||||
@@ -16,13 +16,13 @@ import remarkGithubAdmonitionsToDirectives from "remark-github-admonitions-to-di
|
||||
import remarkMath from "remark-math";
|
||||
import remarkSectionize from "remark-sectionize";
|
||||
import { expressiveCodeConfig } from "./src/config.ts";
|
||||
import { pluginCustomCopyButton } from "./src/plugins/expressive-code/custom-copy-button.js";
|
||||
import { pluginLanguageBadge } from "./src/plugins/expressive-code/language-badge.ts";
|
||||
import { AdmonitionComponent } from "./src/plugins/rehype-component-admonition.mjs";
|
||||
import { GithubCardComponent } from "./src/plugins/rehype-component-github-card.mjs";
|
||||
import { parseDirectiveNode } from "./src/plugins/remark-directive-rehype.js";
|
||||
import { remarkExcerpt } from "./src/plugins/remark-excerpt.js";
|
||||
import { remarkReadingTime } from "./src/plugins/remark-reading-time.mjs";
|
||||
import { pluginCustomCopyButton } from "./src/plugins/expressive-code/custom-copy-button.js";
|
||||
|
||||
// https://astro.build/config
|
||||
export default defineConfig({
|
||||
@@ -30,9 +30,6 @@ export default defineConfig({
|
||||
base: "/",
|
||||
trailingSlash: "always",
|
||||
integrations: [
|
||||
tailwind({
|
||||
nesting: true,
|
||||
}),
|
||||
swup({
|
||||
theme: false,
|
||||
animationClass: "transition-swup-", // see https://swup.js.org/options/#animationselector
|
||||
@@ -61,12 +58,12 @@ export default defineConfig({
|
||||
pluginCollapsibleSections(),
|
||||
pluginLineNumbers(),
|
||||
pluginLanguageBadge(),
|
||||
pluginCustomCopyButton()
|
||||
pluginCustomCopyButton(),
|
||||
],
|
||||
defaultProps: {
|
||||
wrap: true,
|
||||
overridesByLang: {
|
||||
'shellsession': {
|
||||
shellsession: {
|
||||
showLineNumbers: false,
|
||||
},
|
||||
},
|
||||
@@ -76,7 +73,8 @@ export default defineConfig({
|
||||
borderRadius: "0.75rem",
|
||||
borderColor: "none",
|
||||
codeFontSize: "0.875rem",
|
||||
codeFontFamily: "'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
|
||||
codeFontFamily:
|
||||
"'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace",
|
||||
codeLineHeight: "1.5rem",
|
||||
frames: {
|
||||
editorBackground: "var(--codeblock-bg)",
|
||||
@@ -87,17 +85,17 @@ export default defineConfig({
|
||||
editorActiveTabIndicatorBottomColor: "var(--primary)",
|
||||
editorActiveTabIndicatorTopColor: "none",
|
||||
editorTabBarBorderBottomColor: "var(--codeblock-topbar-bg)",
|
||||
terminalTitlebarBorderBottomColor: "none"
|
||||
terminalTitlebarBorderBottomColor: "none",
|
||||
},
|
||||
textMarkers: {
|
||||
delHue: 0,
|
||||
insHue: 180,
|
||||
markHue: 250
|
||||
}
|
||||
markHue: 250,
|
||||
},
|
||||
},
|
||||
frames: {
|
||||
showCopyToClipboardButton: false,
|
||||
}
|
||||
},
|
||||
}),
|
||||
svelte(),
|
||||
sitemap(),
|
||||
@@ -154,6 +152,7 @@ export default defineConfig({
|
||||
],
|
||||
},
|
||||
vite: {
|
||||
plugins: [tailwindcss()],
|
||||
build: {
|
||||
rollupOptions: {
|
||||
onwarn(warning, warn) {
|
||||
|
||||
@@ -20,7 +20,6 @@
|
||||
"@astrojs/rss": "^4.0.12",
|
||||
"@astrojs/sitemap": "^3.4.1",
|
||||
"@astrojs/svelte": "7.1.0",
|
||||
"@astrojs/tailwind": "^6.0.2",
|
||||
"@expressive-code/core": "^0.41.3",
|
||||
"@expressive-code/plugin-collapsible-sections": "^0.41.3",
|
||||
"@expressive-code/plugin-line-numbers": "^0.41.3",
|
||||
@@ -33,6 +32,7 @@
|
||||
"@iconify/svelte": "^4.2.0",
|
||||
"@swup/astro": "^1.7.0",
|
||||
"@tailwindcss/typography": "^0.5.16",
|
||||
"@tailwindcss/vite": "^4.1.11",
|
||||
"astro": "5.12.3",
|
||||
"astro-expressive-code": "^0.41.3",
|
||||
"astro-icon": "^1.1.5",
|
||||
@@ -57,7 +57,7 @@
|
||||
"sharp": "^0.34.3",
|
||||
"stylus": "^0.64.0",
|
||||
"svelte": "^5.36.16",
|
||||
"tailwindcss": "^3.4.17",
|
||||
"tailwindcss": "^4.1.11",
|
||||
"typescript": "^5.8.3",
|
||||
"unist-util-visit": "^5.0.0"
|
||||
},
|
||||
|
||||
652
pnpm-lock.yaml
generated
652
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,11 +0,0 @@
|
||||
import postcssImport from 'postcss-import';
|
||||
import postcssNesting from 'tailwindcss/nesting/index.js';
|
||||
import tailwindcss from 'tailwindcss';
|
||||
|
||||
export default {
|
||||
plugins: {
|
||||
'postcss-import': postcssImport, // to combine multiple css files
|
||||
'tailwindcss/nesting': postcssNesting,
|
||||
tailwindcss: tailwindcss,
|
||||
}
|
||||
};
|
||||
@@ -164,7 +164,7 @@ const bannerOffset =
|
||||
'banner-height-home': `${BANNER_HEIGHT_HOME}vh`,
|
||||
'banner-height': `${BANNER_HEIGHT}vh`,
|
||||
}}>
|
||||
@tailwind components;
|
||||
@reference "../styles/main.css";
|
||||
@layer components {
|
||||
.enable-banner.is-home #banner-wrapper {
|
||||
@apply h-[var(--banner-height-home)] translate-y-[var(--banner-height-extend)]
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@reference "tailwindcss";
|
||||
|
||||
.expressive-code .frame {
|
||||
@apply !shadow-none;
|
||||
}
|
||||
|
||||
@@ -1,115 +1,156 @@
|
||||
@tailwind components;
|
||||
@import "tailwindcss";
|
||||
@plugin '@tailwindcss/typography';
|
||||
|
||||
@layer components {
|
||||
.card-base {
|
||||
@apply rounded-[var(--radius-large)] overflow-hidden bg-[var(--card-bg)] transition;
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
@theme {
|
||||
--font-sans:
|
||||
Roboto, sans-serif, ui-sans-serif, system-ui, sans-serif,
|
||||
'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
|
||||
}
|
||||
h1, h2, h3, h4, h5, h6, p, a, span, li, ul, ol, blockquote, code, pre, table, th, td, strong {
|
||||
@apply transition;
|
||||
|
||||
@utility card-base {
|
||||
@apply rounded-(--radius-large) overflow-hidden bg-(--card-bg) transition;
|
||||
}
|
||||
.card-shadow {
|
||||
@apply drop-shadow-[0_2px_4px_rgba(0,0,0,0.005)]
|
||||
|
||||
@utility card-shadow {
|
||||
@apply drop-shadow-[0_2px_4px_rgba(0,0,0,0.005)];
|
||||
}
|
||||
.expand-animation {
|
||||
@apply relative before:ease-out before:transition active:bg-none hover:before:bg-[var(--btn-plain-bg-hover)] active:before:bg-[var(--btn-plain-bg-active)] z-0
|
||||
before:absolute before:rounded-[inherit] before:inset-0 before:scale-[0.85] hover:before:scale-100 before:-z-10
|
||||
|
||||
@utility expand-animation {
|
||||
@apply relative before:ease-out before:transition active:bg-none hover:before:bg-(--btn-plain-bg-hover) active:before:bg-(--btn-plain-bg-active) z-0
|
||||
before:absolute before:rounded-[inherit] before:inset-0 before:scale-[0.85] hover:before:scale-100 before:-z-10;
|
||||
}
|
||||
.link {
|
||||
|
||||
@utility link {
|
||||
@apply transition rounded-md p-1 -m-1 expand-animation;
|
||||
}
|
||||
.link-lg {
|
||||
|
||||
@utility link-lg {
|
||||
@apply transition rounded-md p-1.5 -m-1.5 expand-animation;
|
||||
}
|
||||
.float-panel {
|
||||
@apply top-[5.25rem] rounded-[var(--radius-large)] overflow-hidden bg-[var(--float-panel-bg)] transition shadow-xl dark:shadow-none
|
||||
}
|
||||
.float-panel-closed {
|
||||
@apply -translate-y-1 opacity-0 pointer-events-none
|
||||
}
|
||||
.search-panel mark {
|
||||
@apply bg-transparent text-[var(--primary)]
|
||||
|
||||
@utility float-panel {
|
||||
@apply top-21 rounded-(--radius-large) overflow-hidden bg-(--float-panel-bg) transition shadow-xl dark:shadow-none;
|
||||
}
|
||||
|
||||
.btn-card {
|
||||
@apply transition flex items-center justify-center bg-[var(--card-bg)] hover:bg-[var(--btn-card-bg-hover)]
|
||||
active:bg-[var(--btn-card-bg-active)]
|
||||
@utility float-panel-closed {
|
||||
@apply -translate-y-1 opacity-0 pointer-events-none;
|
||||
}
|
||||
.btn-card.disabled {
|
||||
@apply pointer-events-none text-black/10 dark:text-white/10
|
||||
|
||||
@utility search-panel {
|
||||
& mark {
|
||||
@apply bg-transparent text-(--primary);
|
||||
}
|
||||
.btn-plain {
|
||||
}
|
||||
|
||||
@utility btn-card {
|
||||
@apply transition flex items-center justify-center bg-(--card-bg) hover:bg-(--btn-card-bg-hover)
|
||||
active:bg-(--btn-card-bg-active);
|
||||
&.disabled {
|
||||
@apply pointer-events-none text-black/10 dark:text-white/10;
|
||||
}
|
||||
}
|
||||
|
||||
@utility disabled {
|
||||
&.btn-card {
|
||||
@apply pointer-events-none text-black/10 dark:text-white/10;
|
||||
}
|
||||
}
|
||||
|
||||
@utility btn-plain {
|
||||
@apply transition relative flex items-center justify-center bg-none
|
||||
text-black/75 hover:text-[var(--primary)] dark:text-white/75 dark:hover:text-[var(--primary)];
|
||||
text-black/75 hover:text-(--primary) dark:text-white/75 dark:hover:text-(--primary);
|
||||
&:not(.scale-animation) {
|
||||
@apply hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)]
|
||||
@apply hover:bg-(--btn-plain-bg-hover) active:bg-(--btn-plain-bg-active);
|
||||
}
|
||||
&.scale-animation {
|
||||
@apply expand-animation;
|
||||
&.current-theme-btn {
|
||||
@apply before:scale-100 before:opacity-100 before:bg-[var(--btn-plain-bg-hover)] text-[var(--primary)]
|
||||
@apply before:scale-100 before:opacity-100 before:bg-(--btn-plain-bg-hover) text-(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
.btn-regular {
|
||||
@apply transition flex items-center justify-center bg-[var(--btn-regular-bg)] hover:bg-[var(--btn-regular-bg-hover)] active:bg-[var(--btn-regular-bg-active)]
|
||||
text-[var(--btn-content)] dark:text-white/75
|
||||
}
|
||||
|
||||
.link-underline {
|
||||
@apply transition underline decoration-2 decoration-dashed decoration-[var(--link-underline)]
|
||||
hover:decoration-[var(--link-hover)] active:decoration-[var(--link-active)] underline-offset-[0.25rem]
|
||||
@utility btn-regular {
|
||||
@apply transition flex items-center justify-center bg-(--btn-regular-bg) hover:bg-(--btn-regular-bg-hover) active:bg-(--btn-regular-bg-active)
|
||||
text-(--btn-content) dark:text-white/75;
|
||||
}
|
||||
|
||||
.toc-hide,
|
||||
.toc-not-ready {
|
||||
@apply opacity-0 pointer-events-none
|
||||
@utility link-underline {
|
||||
@apply transition underline decoration-2 decoration-dashed decoration-(--link-underline)
|
||||
hover:decoration-(--link-hover) active:decoration-(--link-active) underline-offset-[0.25rem];
|
||||
}
|
||||
|
||||
@utility toc-hide {
|
||||
@apply opacity-0 pointer-events-none;
|
||||
}
|
||||
|
||||
@utility toc-not-ready {
|
||||
@apply opacity-0 pointer-events-none;
|
||||
}
|
||||
|
||||
@utility hide-scrollbar {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
&::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@utility text-90 {
|
||||
@apply text-black/90 dark:text-white/90;
|
||||
}
|
||||
|
||||
@utility text-75 {
|
||||
@apply text-black/75 dark:text-white/75;
|
||||
}
|
||||
|
||||
@utility text-50 {
|
||||
@apply text-black/50 dark:text-white/50;
|
||||
}
|
||||
|
||||
@utility text-30 {
|
||||
@apply text-black/30 dark:text-white/30;
|
||||
}
|
||||
|
||||
@utility text-25 {
|
||||
@apply text-black/25 dark:text-white/25;
|
||||
}
|
||||
|
||||
@utility meta-icon {
|
||||
@apply w-8 h-8 transition rounded-md flex items-center justify-center bg-(--btn-regular-bg)
|
||||
text-(--btn-content) mr-2;
|
||||
}
|
||||
|
||||
@utility with-divider {
|
||||
@apply before:content-['/'] before:ml-1.5 before:mr-1.5 before:text-(--meta-divider) before:text-sm
|
||||
before:font-medium first-of-type:before:hidden before:transition;
|
||||
}
|
||||
|
||||
@utility btn-regular-dark {
|
||||
@apply flex items-center justify-center
|
||||
bg-[oklch(0.45_0.01_var(--hue))] hover:bg-[oklch(0.50_0.01_var(--hue))] active:bg-[oklch(0.55_0.01_var(--hue))]
|
||||
dark:bg-[oklch(0.30_0.02_var(--hue))] dark:hover:bg-[oklch(0.35_0.03_var(--hue))] dark:active:bg-[oklch(0.40_0.03_var(--hue))];
|
||||
&.success {
|
||||
@apply bg-[oklch(0.75_0.14_var(--hue))] dark:bg-[oklch(0.75_0.14_var(--hue))];
|
||||
}
|
||||
}
|
||||
|
||||
@utility success {
|
||||
&.btn-regular-dark {
|
||||
@apply bg-[oklch(0.75_0.14_var(--hue))] dark:bg-[oklch(0.75_0.14_var(--hue))];
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
h1, h2, h3, h4, h5, h6, p, a, span, li, ul, ol, blockquote, code, pre, table, th, td, strong {
|
||||
@apply transition;
|
||||
}
|
||||
|
||||
#toc-inner-wrapper {
|
||||
mask-image: linear-gradient(to bottom, transparent 0%, black 2rem, black calc(100% - 2rem), transparent 100%);
|
||||
}
|
||||
|
||||
.hide-scrollbar {
|
||||
scrollbar-width: none;
|
||||
-ms-overflow-style: none;
|
||||
}
|
||||
.hide-scrollbar::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.text-90 {
|
||||
@apply text-black/90 dark:text-white/90
|
||||
}
|
||||
.text-75 {
|
||||
@apply text-black/75 dark:text-white/75
|
||||
}
|
||||
.text-50 {
|
||||
@apply text-black/50 dark:text-white/50
|
||||
}
|
||||
.text-30 {
|
||||
@apply text-black/30 dark:text-white/30
|
||||
}
|
||||
.text-25 {
|
||||
@apply text-black/25 dark:text-white/25
|
||||
}
|
||||
|
||||
.meta-icon {
|
||||
@apply w-8 h-8 transition rounded-md flex items-center justify-center bg-[var(--btn-regular-bg)]
|
||||
text-[var(--btn-content)] mr-2
|
||||
}
|
||||
.with-divider {
|
||||
@apply before:content-['/'] before:ml-1.5 before:mr-1.5 before:text-[var(--meta-divider)] before:text-sm
|
||||
before:font-medium before:first-of-type:hidden before:transition
|
||||
}
|
||||
|
||||
.btn-regular-dark {
|
||||
@apply flex items-center justify-center
|
||||
bg-[oklch(0.45_0.01_var(--hue))] hover:bg-[oklch(0.50_0.01_var(--hue))] active:bg-[oklch(0.55_0.01_var(--hue))]
|
||||
dark:bg-[oklch(0.30_0.02_var(--hue))] dark:hover:bg-[oklch(0.35_0.03_var(--hue))] dark:active:bg-[oklch(0.40_0.03_var(--hue))]
|
||||
}
|
||||
.btn-regular-dark.success {
|
||||
@apply bg-[oklch(0.75_0.14_var(--hue))] dark:bg-[oklch(0.75_0.14_var(--hue))]
|
||||
}
|
||||
}
|
||||
|
||||
.custom-md img, #post-cover img {
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@reference "./main.css";
|
||||
|
||||
.custom-md {
|
||||
h1 {
|
||||
@apply text-3xl;
|
||||
@@ -5,16 +7,16 @@
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
.anchor {
|
||||
@apply transition -m-0.5 ml-[0.2ch] p-0.5 select-none opacity-0 no-underline !important;
|
||||
@apply transition -m-0.5! ml-[0.2ch]! p-0.5! select-none! opacity-0! no-underline!;
|
||||
|
||||
.anchor-icon {
|
||||
@apply mx-[0.45ch] !important;
|
||||
@apply mx-[0.45ch]!;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.anchor {
|
||||
@apply opacity-100 !important;
|
||||
@apply opacity-100!;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,12 +1,14 @@
|
||||
@reference "tailwindcss";
|
||||
|
||||
.pswp__button {
|
||||
@apply transition bg-black/40 hover:bg-black/50 active:bg-black/60 flex items-center justify-center mr-0 w-12 h-12 !important;
|
||||
@apply transition! bg-black/40! hover:bg-black/50! active:bg-black/60! flex! items-center! justify-center! mr-0! w-12! h-12!;
|
||||
}
|
||||
.pswp__button--zoom, .pswp__button--close {
|
||||
@apply mt-4 rounded-xl active:scale-90 !important;
|
||||
@apply mt-4! rounded-xl! active:scale-90!;
|
||||
}
|
||||
.pswp__button--zoom {
|
||||
@apply mr-2.5 !important;
|
||||
@apply mr-2.5!;
|
||||
}
|
||||
.pswp__button--close {
|
||||
@apply mr-4 !important;
|
||||
@apply mr-4!;
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@reference "tailwindcss";
|
||||
|
||||
.scrollbar-base.os-scrollbar {
|
||||
@apply transition-all;
|
||||
pointer-events: unset;
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@reference "tailwindcss";
|
||||
|
||||
/* Page transition animations with Swup */
|
||||
html.is-changing .transition-swup-fade {
|
||||
@apply transition-all duration-200
|
||||
|
||||
@@ -1,14 +0,0 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
const defaultTheme = require("tailwindcss/defaultTheme")
|
||||
module.exports = {
|
||||
content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue,mjs}"],
|
||||
darkMode: "class", // allows toggling dark mode manually
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sans: ["Roboto", "sans-serif", ...defaultTheme.fontFamily.sans],
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [require("@tailwindcss/typography")],
|
||||
}
|
||||
Reference in New Issue
Block a user