Skip to content

Commit

Permalink
update:更新色彩主题
Browse files Browse the repository at this point in the history
  • Loading branch information
Parsifa1 committed Dec 20, 2023
1 parent f087611 commit 9932192
Show file tree
Hide file tree
Showing 3 changed files with 30 additions and 11 deletions.
2 changes: 1 addition & 1 deletion src/components/Footer.astro
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ const { noMarginTop = false } = Astro.props;
<div class="copyright-wrapper">
<span>Copyright &#169; {currentYear}</span>
<span class="separator">&nbsp;|&nbsp;</span>
<span>All rights reserved.</span>
<span>Build with Astro🦄 </span>
</div>
</div>
</footer>
Expand Down
2 changes: 1 addition & 1 deletion src/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ export const SITE: Site = {
title: "Parsifal's Blog",
ogImage: "astropaper-og.jpg",
lightAndDarkMode: true,
postPerPage: 3,
postPerPage: 4,
};

export const LOCALE = {
Expand Down
37 changes: 28 additions & 9 deletions src/styles/base.css
Original file line number Diff line number Diff line change
@@ -1,56 +1,68 @@
@tailwind base;

@tailwind components;

@tailwind utilities;

@layer base {
:root,
html[data-theme="light"] {
--color-fill: 251, 254, 251;
--color-text-base: 40, 39, 40;
--color-accent: 0, 108, 172;
--color-card: 230, 230, 230;
--color-card-muted: 205, 205, 205;
--color-border: 236, 233, 233;
--color-fill: 250, 252, 252;
--color-text-base: 34, 46, 54;
--color-accent: 211, 0, 106;
--color-card: 234, 206, 219;
--color-card-muted: 241, 186, 212;
--color-border: 227, 169, 198;
}

html[data-theme="dark"] {
--color-fill: 33, 39, 55;
--color-text-base: 234, 237, 243;
--color-accent: 255, 107, 1;
--color-accent: 207, 130, 158;
--color-card: 52, 63, 96;
--color-card-muted: 138, 51, 2;
--color-border: 171, 75, 8;
--color-card-muted: 207, 145, 176;
--color-border: 245, 176, 195;
}

html {
scroll-behavior: smooth;
}

#sun-svg,
html[data-theme="dark"] #moon-svg {
display: none;
}

#moon-svg,
html[data-theme="dark"] #sun-svg {
display: block;
}

body {
@apply flex min-h-[100svh] flex-col bg-skin-fill font-mono text-skin-base
selection:bg-skin-accent selection:bg-opacity-70 selection:text-skin-inverted;
}

section,
footer {
@apply mx-auto max-w-3xl px-4;
}

a {
@apply outline-2 outline-offset-1 outline-skin-fill
focus-visible:no-underline focus-visible:outline-dashed;
}

svg {
@apply inline-block h-6 w-6 fill-skin-base group-hover:fill-skin-accent;
}

svg.icon-tabler {
@apply inline-block h-6 w-6 scale-125 fill-transparent
stroke-current stroke-2 opacity-90 group-hover:fill-transparent
sm:scale-110;
}

.prose {
@apply prose-headings:!mb-3 prose-headings:!text-skin-base
prose-h3:italic prose-p:!text-skin-base
Expand All @@ -72,23 +84,29 @@
prose-img:!mt-2 prose-img:border-2
prose-img:border-skin-line prose-hr:!border-skin-line;
}

.prose a {
@apply break-words hover:!text-skin-accent;
}

.prose thead th:first-child,
tbody td:first-child,
tfoot td:first-child {
padding-left: 0.5714286em;
}

.prose h2#table-of-contents {
@apply mb-2;
}

.prose details {
@apply inline-block cursor-pointer select-none text-skin-base;
}

.prose summary {
@apply focus-outline;
}

.prose h2#table-of-contents + p {
@apply hidden;
}
Expand Down Expand Up @@ -132,6 +150,7 @@
.display-none {
@apply hidden;
}

.focus-outline {
@apply outline-2 outline-offset-1 outline-skin-fill focus-visible:no-underline focus-visible:outline-dashed;
}
Expand Down

0 comments on commit 9932192

Please sign in to comment.