Upgrade Astro and Astro Paper to v5
This commit is contained in:
tiff
parent
8ebf7d5996
commit
e719f7ccca
105 changed files with 7099 additions and 1939 deletions
|
|
@ -1,151 +0,0 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root,
|
||||
html[data-theme="light"] {
|
||||
--color-fill: 238, 238, 238;
|
||||
--color-text-base: 53, 53, 56;
|
||||
--color-accent: 210, 104, 120;
|
||||
--color-card: 206, 213, 180;
|
||||
--color-card-muted: 187, 199, 137;
|
||||
--color-border: 124, 173, 255;
|
||||
}
|
||||
html[data-theme="dark"] {
|
||||
--color-fill: 53, 54, 64;
|
||||
--color-text-base: 233, 237, 241;
|
||||
--color-card: 75, 76, 89;
|
||||
--color-card-muted: 113, 85, 102;
|
||||
--color-border: 134, 67, 107;
|
||||
--color-accent: 210, 104, 120;
|
||||
}
|
||||
#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/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 prose-a:!text-skin-base prose-a:!decoration-dashed prose-a:underline-offset-8 hover:prose-a:text-skin-accent prose-blockquote:!border-l-skin-accent/50 prose-blockquote:opacity-80 prose-figcaption:!text-skin-base prose-figcaption:opacity-70 prose-strong:!text-skin-base prose-code:rounded prose-code:bg-skin-card/75 prose-code:p-1 prose-code:before:!content-none prose-code:after:!content-none prose-ol:!text-skin-base prose-ul:overflow-x-clip prose-ul:!text-skin-base prose-li:marker:!text-skin-accent prose-table:text-skin-base prose-th:border prose-th:border-skin-line prose-td:border prose-td:border-skin-line prose-img:!my-2 prose-img:mx-auto 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;
|
||||
}
|
||||
|
||||
/* ===== scrollbar ===== */
|
||||
html {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
/* width */
|
||||
::-webkit-scrollbar {
|
||||
@apply w-3;
|
||||
}
|
||||
|
||||
/* Track */
|
||||
::-webkit-scrollbar-track {
|
||||
@apply bg-slate-100;
|
||||
}
|
||||
|
||||
/* Handle */
|
||||
::-webkit-scrollbar-thumb {
|
||||
@apply bg-slate-100;
|
||||
}
|
||||
|
||||
/* Handle on hover */
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
@apply bg-slate-100;
|
||||
}
|
||||
|
||||
/* ===== Code Blocks & Syntax Highlighting ===== */
|
||||
pre:has(code) {
|
||||
@apply border border-gray-200;
|
||||
}
|
||||
code,
|
||||
blockquote {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.prose
|
||||
:is(
|
||||
:where(code):not(:where([class~="not-prose"], [class~="not-prose"] *))
|
||||
) {
|
||||
border-radius: 0.25rem !important;
|
||||
color: #d26878 !important;
|
||||
background-color: #e8e8e8;
|
||||
padding: 0.25rem !important;
|
||||
}
|
||||
|
||||
.prose a {
|
||||
color: #d26878 !important;
|
||||
text-decoration: underline !important;
|
||||
text-decoration-style: solid !important;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.prose a:hover {
|
||||
text-color: #f2435d !important;
|
||||
}
|
||||
pre > code {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
button.copy-code {
|
||||
@apply bg-slate-200;
|
||||
}
|
||||
|
||||
/* Apply Dark Theme (if multi-theme specified) */
|
||||
html[data-theme="dark"] pre:has(code),
|
||||
html[data-theme="dark"] pre:has(code) span {
|
||||
color: var(--shiki-dark) !important;
|
||||
background-color: var(--shiki-dark-bg) !important;
|
||||
font-style: var(--shiki-dark-font-style) !important;
|
||||
font-weight: var(--shiki-dark-font-weight) !important;
|
||||
text-decoration: var(--shiki-dark-text-decoration) !important;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.display-none {
|
||||
@apply hidden;
|
||||
}
|
||||
.focus-outline {
|
||||
@apply outline-2 outline-offset-1 outline-skin-fill focus-visible:no-underline focus-visible:outline-dashed;
|
||||
}
|
||||
}
|
||||
64
src/styles/global.css
Normal file
64
src/styles/global.css
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
@import "tailwindcss";
|
||||
@import "./typography.css";
|
||||
|
||||
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
|
||||
|
||||
:root,
|
||||
html[data-theme="light"] {
|
||||
--background: #EEE;
|
||||
--foreground: #282728;
|
||||
--accent: #D26878;
|
||||
--muted: #e6e6e6;
|
||||
--border: #ece9e9;
|
||||
}
|
||||
|
||||
html[data-theme="dark"] {
|
||||
--background: #212737;
|
||||
--foreground: #eaedf3;
|
||||
--accent: #F43F5D;
|
||||
--muted: #353640;
|
||||
--border: #D26878;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-muted: var(--muted);
|
||||
--color-border: var(--border);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border outline-accent/75;
|
||||
scrollbar-width: auto;
|
||||
scrollbar-color: var(--color-muted) transparent;
|
||||
}
|
||||
|
||||
html {
|
||||
@apply overflow-y-scroll scroll-smooth;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply flex min-h-svh flex-col bg-background font-mono text-foreground selection:bg-accent/75 selection:text-background;
|
||||
}
|
||||
|
||||
a,
|
||||
button {
|
||||
@apply outline-offset-1 outline-accent focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-dashed;
|
||||
}
|
||||
|
||||
button:not(:disabled),
|
||||
[role="button"]:not(:disabled) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
section,
|
||||
footer {
|
||||
@apply mx-auto max-w-3xl px-4;
|
||||
}
|
||||
}
|
||||
|
||||
.active-nav {
|
||||
@apply underline decoration-wavy decoration-2 underline-offset-4;
|
||||
}
|
||||
64
src/styles/typography.css
Normal file
64
src/styles/typography.css
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
@plugin '@tailwindcss/typography';
|
||||
|
||||
@layer base {
|
||||
.prose {
|
||||
@apply prose-headings:!mb-3 prose-headings:!text-foreground prose-h3:italic prose-p:!text-foreground prose-a:!text-foreground prose-a:!decoration-dashed prose-a:underline-offset-8 hover:prose-a:text-accent prose-blockquote:!border-l-accent/50 prose-blockquote:opacity-80 prose-figcaption:!text-foreground prose-figcaption:opacity-70 prose-strong:!text-foreground prose-code:rounded prose-code:bg-muted/75 prose-code:p-1 prose-code:!text-foreground prose-code:before:!content-none prose-code:after:!content-none prose-ol:!text-foreground prose-ul:overflow-x-clip prose-ul:!text-foreground prose-li:marker:!text-accent prose-table:text-foreground prose-th:border prose-th:border-border prose-td:border prose-td:border-border prose-img:mx-auto prose-img:!my-2 prose-img:border-2 prose-img:border-border prose-hr:!border-border;
|
||||
}
|
||||
|
||||
.prose a {
|
||||
@apply break-words hover:!text-accent;
|
||||
}
|
||||
|
||||
.prose a {
|
||||
color: #d26878 !important;
|
||||
text-decoration: underline !important;
|
||||
text-decoration-style: solid !important;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.prose thead th:first-child,
|
||||
tbody td:first-child,
|
||||
tfoot td:first-child {
|
||||
padding-inline-start: 0.5714286em !important;
|
||||
}
|
||||
|
||||
.prose h2#table-of-contents {
|
||||
@apply mb-2;
|
||||
}
|
||||
|
||||
.prose details {
|
||||
@apply inline-block cursor-pointer text-foreground select-none;
|
||||
}
|
||||
|
||||
.prose summary {
|
||||
@apply focus-visible:no-underline focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-accent focus-visible:outline-dashed;
|
||||
}
|
||||
|
||||
.prose h2#table-of-contents+p {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
/* ===== Code Blocks & Syntax Highlighting ===== */
|
||||
pre:has(code) {
|
||||
@apply border border-border;
|
||||
}
|
||||
|
||||
code,
|
||||
blockquote {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
pre>code {
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
/* Apply Dark Theme (if multi-theme specified) */
|
||||
html[data-theme="dark"] pre:has(code),
|
||||
html[data-theme="dark"] pre:has(code) span {
|
||||
color: var(--shiki-dark) !important;
|
||||
background-color: var(--shiki-dark-bg) !important;
|
||||
font-style: var(--shiki-dark-font-style) !important;
|
||||
font-weight: var(--shiki-dark-font-weight) !important;
|
||||
text-decoration: var(--shiki-dark-text-decoration) !important;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue