From 7284be6f6eb39f159d1f29834790bd0275a8223c Mon Sep 17 00:00:00 2001 From: saicaca Date: Mon, 2 Dec 2024 12:26:53 +0800 Subject: [PATCH] refactor: css cleanup and style tweaks --- astro.config.mjs | 26 +- package.json | 6 +- pnpm-lock.yaml | 80 +++- postcss.config.mjs | 11 + src/components/ArchivePanel.astro | 2 +- src/components/GlobalStyles.astro | 177 --------- src/components/LightDarkSwitch.svelte | 13 +- src/components/Navbar.astro | 15 +- src/components/PostCard.astro | 4 +- src/components/Search.svelte | 11 +- src/components/misc/Markdown.astro | 378 ------------------- src/components/widget/DisplaySettings.svelte | 3 +- src/components/widget/Profile.astro | 2 +- src/components/widget/TOC.astro | 8 +- src/layouts/Layout.astro | 10 - src/pages/posts/[...slug].astro | 13 +- src/{base.css => styles/main.css} | 100 +---- src/styles/markdown-extend.styl | 245 ++++++++++++ src/styles/markdown.css | 89 +++++ src/styles/photoswipe.css | 12 + src/styles/scrollbar.css | 42 +++ src/styles/transition.css | 53 +++ src/styles/variables.styl | 95 +++++ 23 files changed, 663 insertions(+), 732 deletions(-) create mode 100644 postcss.config.mjs rename src/{base.css => styles/main.css} (71%) create mode 100644 src/styles/markdown-extend.styl create mode 100644 src/styles/markdown.css create mode 100644 src/styles/photoswipe.css create mode 100644 src/styles/scrollbar.css create mode 100644 src/styles/transition.css create mode 100644 src/styles/variables.styl diff --git a/astro.config.mjs b/astro.config.mjs index 0917fb557..c00f4e86b 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -5,7 +5,6 @@ import swup from "@swup/astro"; import Compress from "astro-compress"; import icon from "astro-icon"; import { defineConfig } from "astro/config"; -import Color from "colorjs.io"; import rehypeAutolinkHeadings from "rehype-autolink-headings"; import rehypeComponents from "rehype-components"; /* Render the custom directive content */ import rehypeKatex from "rehype-katex"; @@ -19,23 +18,17 @@ 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"; -const oklchToHex = (str) => { - const DEFAULT_HUE = 250; - const regex = /-?\d+(\.\d+)?/g; - const matches = str.string.match(regex); - const lch = [matches[0], matches[1], DEFAULT_HUE]; - return new Color("oklch", lch).to("srgb").toString({ - format: "hex", - }); -}; - // https://astro.build/config export default defineConfig({ site: "https://fuwari.vercel.app/", base: "/", trailingSlash: "always", integrations: [ - tailwind(), + tailwind( + { + nesting: true, + } + ), swup({ theme: false, animationClass: "transition-swup-", // see https://swup.js.org/options/#animationselector @@ -133,14 +126,5 @@ export default defineConfig({ }, }, }, - css: { - preprocessorOptions: { - stylus: { - define: { - oklchToHex: oklchToHex, - }, - }, - }, - }, }, }); diff --git a/package.json b/package.json index 724b712ea..ffbdb9740 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,6 @@ "astro": "^4.16.13", "astro-compress": "^2.3.5", "astro-icon": "^1.1.1", - "colorjs.io": "^0.5.2", "hastscript": "^9.0.0", "markdown-it": "^14.1.0", "mdast-util-to-string": "^4.0.0", @@ -50,7 +49,6 @@ "remark-github-admonitions-to-directives": "^1.0.5", "remark-math": "^6.0.0", "sanitize-html": "^2.13.1", - "sass": "^1.80.4", "sharp": "^0.33.5", "stylus": "^0.63.0", "svelte": "^5.2.2", @@ -64,7 +62,9 @@ "@rollup/plugin-yaml": "^4.1.2", "@types/markdown-it": "^14.1.2", "@types/mdast": "^4.0.4", - "@types/sanitize-html": "^2.13.0" + "@types/sanitize-html": "^2.13.0", + "postcss-import": "^16.1.0", + "postcss-nesting": "^13.0.1" }, "packageManager": "pnpm@9.14.4" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e303efb16..cbd0bcde5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -62,9 +62,6 @@ importers: astro-icon: specifier: ^1.1.1 version: 1.1.1 - colorjs.io: - specifier: ^0.5.2 - version: 0.5.2 hastscript: specifier: ^9.0.0 version: 9.0.0 @@ -113,9 +110,6 @@ importers: sanitize-html: specifier: ^2.13.1 version: 2.13.1 - sass: - specifier: ^1.80.4 - version: 1.80.4 sharp: specifier: ^0.33.5 version: 0.33.5 @@ -153,6 +147,12 @@ importers: '@types/sanitize-html': specifier: ^2.13.0 version: 2.13.0 + postcss-import: + specifier: ^16.1.0 + version: 16.1.0(postcss@8.4.47) + postcss-nesting: + specifier: ^13.0.1 + version: 13.0.1(postcss@8.4.47) packages: @@ -845,6 +845,18 @@ packages: cpu: [x64] os: [win32] + '@csstools/selector-resolve-nested@3.0.0': + resolution: {integrity: sha512-ZoK24Yku6VJU1gS79a5PFmC8yn3wIapiKmPgun0hZgEI5AOqgH2kiPRsPz1qkGv4HL+wuDLH83yQyk6inMYrJQ==} + engines: {node: '>=18'} + peerDependencies: + postcss-selector-parser: ^7.0.0 + + '@csstools/selector-specificity@5.0.0': + resolution: {integrity: sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==} + engines: {node: '>=18'} + peerDependencies: + postcss-selector-parser: ^7.0.0 + '@emmetio/abbreviation@2.3.3': resolution: {integrity: sha512-mgv58UrU3rh4YgbE/TzgLQwJ3pFsHHhCLqY20aJq+9comytTXUDNGG/SMtSeMJdkpxgXSXunBGLD8Boka3JyVA==} @@ -2004,9 +2016,6 @@ packages: colord@2.9.3: resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==} - colorjs.io@0.5.2: - resolution: {integrity: sha512-twmVoizEW7ylZSN32OgKdXRmo1qg+wT5/6C3xu5b9QsWzSFAhHLn2xd8ro0diCsKfCj1RdaTP/nrcW+vAoQPIw==} - combined-stream@1.0.8: resolution: {integrity: sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==} engines: {node: '>= 0.8'} @@ -3632,6 +3641,12 @@ packages: peerDependencies: postcss: ^8.0.0 + postcss-import@16.1.0: + resolution: {integrity: sha512-7hsAZ4xGXl4MW+OKEWCnF6T5jqBw80/EE9aXg1r2yyn1RsVEU8EtKXbijEODa+rg7iih4bKf7vlvTGYR4CnPNg==} + engines: {node: '>=18.0.0'} + peerDependencies: + postcss: ^8.0.0 + postcss-js@4.0.1: resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} engines: {node: ^12 || ^14 || >= 16} @@ -3733,6 +3748,12 @@ packages: peerDependencies: postcss: ^8.2.14 + postcss-nesting@13.0.1: + resolution: {integrity: sha512-VbqqHkOBOt4Uu3G8Dm8n6lU5+9cJFxiuty9+4rcoyRPO9zZS1JIs6td49VIoix3qYqELHlJIn46Oih9SAKo+yQ==} + engines: {node: '>=18'} + peerDependencies: + postcss: ^8.4 + postcss-normalize-charset@5.1.0: resolution: {integrity: sha512-mSgUJ+pd/ldRGVx26p2wz9dNZ7ji6Pn8VWBajMXFf8jk7vUoSrZ2lt/wZR7DtlZYKesmZI680qjr2CeFF2fbUg==} engines: {node: ^10 || ^12 || >=14.0} @@ -3813,6 +3834,10 @@ packages: resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==} engines: {node: '>=4'} + postcss-selector-parser@7.0.0: + resolution: {integrity: sha512-9RbEr1Y7FFfptd/1eEdntyjMwLeghW1bHX9GWjXo19vx4ytPQhANltvVxDggzJl7mnWM+dX28kb6cyS/4iQjlQ==} + engines: {node: '>=4'} + postcss-svgo@5.1.0: resolution: {integrity: sha512-D75KsH1zm5ZrHyxPakAxJWtkyXew5qwS70v56exwvw542d9CRtTo78K0WeFxZB4G7JXKKMbEZtZayTGdIky/eA==} engines: {node: ^10 || ^12 || >=14.0} @@ -5700,6 +5725,14 @@ snapshots: '@biomejs/cli-win32-x64@1.8.3': optional: true + '@csstools/selector-resolve-nested@3.0.0(postcss-selector-parser@7.0.0)': + dependencies: + postcss-selector-parser: 7.0.0 + + '@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.0.0)': + dependencies: + postcss-selector-parser: 7.0.0 + '@emmetio/abbreviation@2.3.3': dependencies: '@emmetio/scanner': 1.0.4 @@ -6043,6 +6076,7 @@ snapshots: '@parcel/watcher-win32-arm64': 2.4.1 '@parcel/watcher-win32-ia32': 2.4.1 '@parcel/watcher-win32-x64': 2.4.1 + optional: true '@pkgjs/parseargs@0.11.0': optional: true @@ -6968,8 +7002,6 @@ snapshots: colord@2.9.3: {} - colorjs.io@0.5.2: {} - combined-stream@1.0.8: dependencies: delayed-stream: 1.0.0 @@ -7804,7 +7836,8 @@ snapshots: dependencies: postcss: 8.4.47 - immutable@4.3.7: {} + immutable@4.3.7: + optional: true import-cwd@3.0.0: dependencies: @@ -8666,7 +8699,8 @@ snapshots: lower-case: 2.0.2 tslib: 2.8.0 - node-addon-api@7.1.1: {} + node-addon-api@7.1.1: + optional: true node-releases@2.0.18: {} @@ -8927,6 +8961,13 @@ snapshots: read-cache: 1.0.0 resolve: 1.22.8 + postcss-import@16.1.0(postcss@8.4.47): + dependencies: + postcss: 8.4.47 + postcss-value-parser: 4.2.0 + read-cache: 1.0.0 + resolve: 1.22.8 + postcss-js@4.0.1(postcss@8.4.47): dependencies: camelcase-css: 2.0.1 @@ -9022,6 +9063,13 @@ snapshots: postcss: 8.4.47 postcss-selector-parser: 6.1.2 + postcss-nesting@13.0.1(postcss@8.4.47): + dependencies: + '@csstools/selector-resolve-nested': 3.0.0(postcss-selector-parser@7.0.0) + '@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.0.0) + postcss: 8.4.47 + postcss-selector-parser: 7.0.0 + postcss-normalize-charset@5.1.0(postcss@8.4.47): dependencies: postcss: 8.4.47 @@ -9095,6 +9143,11 @@ snapshots: cssesc: 3.0.0 util-deprecate: 1.0.2 + postcss-selector-parser@7.0.0: + dependencies: + cssesc: 3.0.0 + util-deprecate: 1.0.2 + postcss-svgo@5.1.0(postcss@8.4.47): dependencies: postcss: 8.4.47 @@ -9516,6 +9569,7 @@ snapshots: chokidar: 4.0.1 immutable: 4.3.7 source-map-js: 1.2.1 + optional: true sax@1.3.0: {} diff --git a/postcss.config.mjs b/postcss.config.mjs new file mode 100644 index 000000000..632eeda9d --- /dev/null +++ b/postcss.config.mjs @@ -0,0 +1,11 @@ +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, + } +}; diff --git a/src/components/ArchivePanel.astro b/src/components/ArchivePanel.astro index e922b4a09..6204bf21b 100644 --- a/src/components/ArchivePanel.astro +++ b/src/components/ArchivePanel.astro @@ -79,7 +79,7 @@ function formatTag(tag: string[]) { {group.posts.map(post => (
diff --git a/src/components/GlobalStyles.astro b/src/components/GlobalStyles.astro index 4b2422de8..853d812bb 100644 --- a/src/components/GlobalStyles.astro +++ b/src/components/GlobalStyles.astro @@ -1,180 +1,3 @@ --- --- - -
- -
- - \ No newline at end of file diff --git a/src/components/LightDarkSwitch.svelte b/src/components/LightDarkSwitch.svelte index 724c0b60d..8c997ec17 100644 --- a/src/components/LightDarkSwitch.svelte +++ b/src/components/LightDarkSwitch.svelte @@ -73,21 +73,21 @@ function hidePanel() {
- - \ No newline at end of file diff --git a/src/components/Navbar.astro b/src/components/Navbar.astro index 3a5aaa494..9e58c74de 100644 --- a/src/components/Navbar.astro +++ b/src/components/Navbar.astro @@ -23,7 +23,7 @@ let links: NavBarLink[] = navBarConfig.links.map(
+ "card-base !overflow-visible max-w-[var(--page-width)] h-[4.5rem] !rounded-t-none mx-auto flex items-center justify-between px-4"]}>
@@ -44,26 +44,19 @@ let links: NavBarLink[] = navBarConfig.links.map(
- - - - - - + {!siteConfig.themeColor.fixed && ( )} -
- - - +
diff --git a/src/components/PostCard.astro b/src/components/PostCard.astro index 6ccf9b1cc..5ae303e84 100644 --- a/src/components/PostCard.astro +++ b/src/components/PostCard.astro @@ -87,7 +87,7 @@ const { remarkPluginFrontmatter } = await entry.render() } {!hasCover && -
+ max-w-[12rem] lg:max-w-none overflow-hidden rounded-xl active:scale-95">
-
{heading.depth == minDepth && heading1Count++} - {heading.depth == minDepth + 1 &&
} - {heading.depth == minDepth + 2 &&
} + {heading.depth == minDepth + 1 &&
} + {heading.depth == minDepth + 2 &&
}
-
{removeTailingHash(heading.text)}
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index af46e2c54..e28aec46c 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -1,9 +1,7 @@ --- -import GlobalStyles from '@components/GlobalStyles.astro' import '@fontsource/roboto/400.css' import '@fontsource/roboto/500.css' import '@fontsource/roboto/700.css' -import ImageWrapper from '@components/misc/ImageWrapper.astro' import { profileConfig, siteConfig } from '@/config' import ConfigCarrier from '@components/ConfigCarrier.astro' @@ -156,21 +154,13 @@ const bannerOffset = data-overlayscrollbars-initialize > - - - - diff --git a/src/base.css b/src/styles/main.css similarity index 71% rename from src/base.css rename to src/styles/main.css index 800b1b4f7..f517d8c03 100644 --- a/src/base.css +++ b/src/styles/main.css @@ -1,7 +1,4 @@ -/* The integration's default injected base.css file */ -@tailwind base; @tailwind components; -@tailwind utilities; @layer components { .card-base { @@ -96,32 +93,6 @@ @apply text-black/25 dark:text-white/25 } - html.is-changing .transition-swup-fade { - @apply transition-all duration-200 - } - html.is-animating .transition-swup-fade { - @apply opacity-0 translate-y-4 - } - - /* PhotoSwipe */ - .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; - } - .pswp__button--zoom, .pswp__button--close { - @apply mt-4 rounded-xl active:scale-90 !important; - } - .pswp__button--zoom { - @apply mr-2.5 !important; - } - .pswp__button--close { - @apply mr-4 !important; - } - .custom-md img, #post-cover img { - @apply cursor-zoom-in - } -} - -@layer components { .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 @@ -130,9 +101,7 @@ @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 } -} -@layer components { .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))] @@ -159,65 +128,28 @@ } } - -@layer components { - .dash-line { - position: relative; - } - - .dash-line::before { - content: ""; - position: absolute; - width: 10%; - height: 100%; - top: 50%; - left: calc(50% - 1px); - border-left: 2px dashed var(--line-color); - pointer-events: none; - transition: all 0.3s; - transform: translateY(-50%); - } +.custom-md img, #post-cover img { + @apply cursor-zoom-in } -@layer components { - .custom-md h1 { - @apply text-3xl - } +::selection { + background-color: var(--selection-bg) } -@keyframes fade-in-up { - 0% { - transform: translateY(2rem); - opacity: 0; - } - 100% { - transform: translateY(0); - opacity: 1; - } +.dash-line { + position: relative; } -.onload-animation { - opacity: 0; - animation: 300ms fade-in-up; - animation-fill-mode: forwards; -} -#navbar { - animation-delay: 0ms -} -#sidebar { - animation-delay: 100ms -} -#swup-container { - outline: none; -} -#content-wrapper { - animation-delay: var(--content-delay); -} -.footer { - animation-delay: 250ms; -} -#banner-credit { - animation-delay: 400ms; +.dash-line::before { + content: ""; + position: absolute; + width: 10%; + height: 100%; + left: calc(50% - 1px); + border-left: 2px dashed var(--line-color); + pointer-events: none; + transition: all 0.3s; + transform: translateY(-50%); } .collapsed { diff --git a/src/styles/markdown-extend.styl b/src/styles/markdown-extend.styl new file mode 100644 index 000000000..9311110e9 --- /dev/null +++ b/src/styles/markdown-extend.styl @@ -0,0 +1,245 @@ +.custom-md + + blockquote.admonition + .bdm-title + display: flex + align-items: center + margin-bottom: -.9rem + font-weight: bold + + &:before + content: ' ' + display: inline-block + font-size: inherit + overflow: visible + margin-right: .6rem + height: 1em + width: 1em + vertical-align: -.126em + mask-size: contain + mask-position: center + mask-repeat: no-repeat + transform: translateY(-0.0625rem) + &.bdm-tip + .bdm-title + color: var(--admonitions-color-tip) + + &:before + background: var(--admonitions-color-tip) + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath d='M8 1.5c-2.363 0-4 1.69-4 3.75 0 .984.424 1.625.984 2.304l.214.253c.223.264.47.556.673.848.284.411.537.896.621 1.49a.75.75 0 0 1-1.484.211c-.04-.282-.163-.547-.37-.847a8.456 8.456 0 0 0-.542-.68c-.084-.1-.173-.205-.268-.32C3.201 7.75 2.5 6.766 2.5 5.25 2.5 2.31 4.863 0 8 0s5.5 2.31 5.5 5.25c0 1.516-.701 2.5-1.328 3.259-.095.115-.184.22-.268.319-.207.245-.383.453-.541.681-.208.3-.33.565-.37.847a.751.751 0 0 1-1.485-.212c.084-.593.337-1.078.621-1.489.203-.292.45-.584.673-.848.075-.088.147-.173.213-.253.561-.679.985-1.32.985-2.304 0-2.06-1.637-3.75-4-3.75ZM5.75 12h4.5a.75.75 0 0 1 0 1.5h-4.5a.75.75 0 0 1 0-1.5ZM6 15.25a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5a.75.75 0 0 1-.75-.75Z'%3E%3C/path%3E%3C/svg%3E") + + &:before + background: var(--admonitions-color-tip) + &.bdm-note + .bdm-title + color: var(--admonitions-color-note) + + &:before + background: var(--admonitions-color-note) + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath fill='var(--admonitions-color-tip)' d='M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8Zm8-6.5a6.5 6.5 0 1 0 0 13 6.5 6.5 0 0 0 0-13ZM6.5 7.75A.75.75 0 0 1 7.25 7h1a.75.75 0 0 1 .75.75v2.75h.25a.75.75 0 0 1 0 1.5h-2a.75.75 0 0 1 0-1.5h.25v-2h-.25a.75.75 0 0 1-.75-.75ZM8 6a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'%3E%3C/path%3E%3C/svg%3E") + + &:before + background: var(--admonitions-color-note) + &.bdm-important + .bdm-title + color: var(--admonitions-color-important) + + &:before + background: var(--admonitions-color-important) + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath d='M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'%3E%3C/path%3E%3C/svg%3E") + + &:before + background: var(--admonitions-color-important) + &.bdm-warning + .bdm-title + color: var(--admonitions-color-warning) + + &:before + background: var(--admonitions-color-warning) + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath d='M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z'%3E%3C/path%3E%3C/svg%3E") + + &:before + background: var(--admonitions-color-warning) + &.bdm-caution + .bdm-title + color: var(--admonitions-color-caution) + + &:before + background: var(--admonitions-color-caution) + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'%3E%3Cpath d='M4.47.22A.749.749 0 0 1 5 0h6c.199 0 .389.079.53.22l4.25 4.25c.141.14.22.331.22.53v6a.749.749 0 0 1-.22.53l-4.25 4.25A.749.749 0 0 1 11 16H5a.749.749 0 0 1-.53-.22L.22 11.53A.749.749 0 0 1 0 11V5c0-.199.079-.389.22-.53Zm.84 1.28L1.5 5.31v5.38l3.81 3.81h5.38l3.81-3.81V5.31L10.69 1.5ZM8 4a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-1.5 0v-3.5A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z'%3E%3C/path%3E%3C/svg%3E") + + &:before + background: var(--admonitions-color-caution) + + img + border-radius: 0.75rem + + hr + border-color: var(--line-divider) + border-style: dashed + + iframe + border-radius: 0.75rem + margin-left: auto + margin-right: auto + max-width: 100% + +a.card-github + display: block + background: var(--license-block-bg) + position: relative + margin: 0.5rem 0 + padding: 1.1rem 1.5rem 1.1rem 1.5rem + color: var(--tw-prose-body) + border-radius: var(--radius-large) + text-decoration-thickness: 0px + text-decoration-line: none + + &:hover + background-color: var(--btn-regular-bg-hover) + + .gc-titlebar + color: var(--btn-content) + + .gc-stars, .gc-forks, .gc-license, .gc-description + color: var(--tw-prose-headings) + + &:before + background-color: var(--tw-prose-headings) + + &:active + scale: .98 + background-color: var(--btn-regular-bg-active); + + .gc-titlebar + display: flex + align-items: center + justify-content: space-between + margin-bottom: 0.5rem + color: var(--tw-prose-headings) + font-size: 1.25rem + font-weight: 500 + + .gc-titlebar-left + display: flex + flex-flow: row nowrap + gap: 0.5rem + + .gc-repo + font-weight: bold + + .gc-owner + font-weight: 300 + position: relative + display: flex + flex-flow: row nowrap + gap: 0.5rem + align-items: center + + .gc-avatar + display: block + overflow: hidden + width: 1.5rem + height: 1.5rem + margin-top: -0.1rem + background-color: var(--primary) + background-size: cover + border-radius: 50% + + .gc-description + margin-bottom: 0.7rem + font-size: 1rem + font-weight: 300 + line-height: 1.5rem + color: var(--tw-prose-body) + + .gc-infobar + display: flex + flex-flow: row nowrap + gap: 1.5rem + color: var(--tw-prose-body) + width: fit-content + + .gc-language + display: none + + .gc-stars, .gc-forks, .gc-license, .github-logo + font-weight: 500 + font-size: 0.875rem + opacity: 0.9; + + &:before + content: ' ' + display: inline-block + height: 1.3em + width: 1.3em + margin-right: .4rem + vertical-align: -.24em + font-size: inherit + background-color: var(--tw-prose-body) + overflow: visible + mask-size: contain + mask-position: center + mask-repeat: no-repeat + transition-property: background-color, background; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) + transition-duration: 0.15s + + .gc-stars + &:before + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='16' viewBox='0 0 16 16' version='1.1' width='16'%3E%3Cpath d='M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Zm0 2.445L6.615 5.5a.75.75 0 0 1-.564.41l-3.097.45 2.24 2.184a.75.75 0 0 1 .216.664l-.528 3.084 2.769-1.456a.75.75 0 0 1 .698 0l2.77 1.456-.53-3.084a.75.75 0 0 1 .216-.664l2.24-2.183-3.096-.45a.75.75 0 0 1-.564-.41L8 2.694Z'%3E%3C/path%3E%3C/svg%3E") + + .gc-license + &:before + margin-right: .5rem + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='16' viewBox='0 0 16 16' version='1.1' width='16'%3E%3Cpath d='M8.75.75V2h.985c.304 0 .603.08.867.231l1.29.736c.038.022.08.033.124.033h2.234a.75.75 0 0 1 0 1.5h-.427l2.111 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.006.005-.01.01-.045.04c-.21.176-.441.327-.686.45C14.556 10.78 13.88 11 13 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L12.178 4.5h-.162c-.305 0-.604-.079-.868-.231l-1.29-.736a.245.245 0 0 0-.124-.033H8.75V13h2.5a.75.75 0 0 1 0 1.5h-6.5a.75.75 0 0 1 0-1.5h2.5V3.5h-.984a.245.245 0 0 0-.124.033l-1.289.737c-.265.15-.564.23-.869.23h-.162l2.112 4.692a.75.75 0 0 1-.154.838l-.53-.53.529.531-.001.002-.002.002-.006.006-.016.015-.045.04c-.21.176-.441.327-.686.45C4.556 10.78 3.88 11 3 11a4.498 4.498 0 0 1-2.023-.454 3.544 3.544 0 0 1-.686-.45l-.045-.04-.016-.015-.006-.006-.004-.004v-.001a.75.75 0 0 1-.154-.838L2.178 4.5H1.75a.75.75 0 0 1 0-1.5h2.234a.249.249 0 0 0 .125-.033l1.288-.737c.265-.15.564-.23.869-.23h.984V.75a.75.75 0 0 1 1.5 0Zm2.945 8.477c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L13 6.327Zm-10 0c.285.135.718.273 1.305.273s1.02-.138 1.305-.273L3 6.327Z'%3E%3C/path%3E%3C/svg%3E") + + .gc-forks + &:before + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' aria-hidden='true' height='16' viewBox='0 0 16 16' version='1.1' width='16'%3E%3Cpath d='M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z'%3E%3C/path%3E%3C/svg%3E") + + .github-logo + font-size: 1.25rem + + &:before + background-color: var(--tw-prose-headings) + margin-right: 0 + mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='32' viewBox='0 0 496 512'%3E%3Cpath fill='%23a1f7cb' d='M165.9 397.4c0 2-2.3 3.6-5.2 3.6c-3.3.3-5.6-1.3-5.6-3.6c0-2 2.3-3.6 5.2-3.6c3-.3 5.6 1.3 5.6 3.6m-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9c2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3m44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9c.3 2 2.9 3.3 5.9 2.6c2.9-.7 4.9-2.6 4.6-4.6c-.3-1.9-3-3.2-5.9-2.9M244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2c12.8 2.3 17.3-5.6 17.3-12.1c0-6.2-.3-40.4-.3-61.4c0 0-70 15-84.7-29.8c0 0-11.4-29.1-27.8-36.6c0 0-22.9-15.7 1.6-15.4c0 0 24.9 2 38.6 25.8c21.9 38.6 58.6 27.5 72.9 20.9c2.3-16 8.8-27.1 16-33.7c-55.9-6.2-112.3-14.3-112.3-110.5c0-27.5 7.6-41.3 23.6-58.9c-2.6-6.5-11.1-33.3 2.6-67.9c20.9-6.5 69 27 69 27c20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27c13.7 34.7 5.2 61.4 2.6 67.9c16 17.7 25.8 31.5 25.8 58.9c0 96.5-58.9 104.2-114.8 110.5c9.2 7.9 17 22.9 17 46.4c0 33.7-.3 75.4-.3 83.6c0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252C496 113.3 383.5 8 244.8 8M97.2 352.9c-1.3 1-1 3.3.7 5.2c1.6 1.6 3.9 2.3 5.2 1c1.3-1 1-3.3-.7-5.2c-1.6-1.6-3.9-2.3-5.2-1m-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9c1.6 1 3.6.7 4.3-.7c.7-1.3-.3-2.9-2.3-3.9c-2-.6-3.6-.3-4.3.7m32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2c2.3 2.3 5.2 2.6 6.5 1c1.3-1.3.7-4.3-1.3-6.2c-2.2-2.3-5.2-2.6-6.5-1m-11.4-14.7c-1.6 1-1.6 3.6 0 5.9c1.6 2.3 4.3 3.3 5.6 2.3c1.6-1.3 1.6-3.9 0-6.2c-1.4-2.3-4-3.3-5.6-2'/%3E%3C/svg%3E") + +a.card-github.fetch-waiting + pointer-events: none + opacity: 0.7 + transition: opacity 0.15s ease-in-out + + .gc-description, .gc-infobar, .gc-avatar + background-color: var(--tw-prose-body) + color: transparent + opacity: 0.5; + animation: pulsate 2s infinite linear + user-select: none + + &:before + background-color: transparent + + .gc-repo + margin-left: -0.1rem + + .gc-description, .gc-infobar + border-radius: 0.5rem + +a.card-github.fetch-error + pointer-events: all + opacity: 1 + +@keyframes pulsate + 0% + opacity: 0.15 + 50% + opacity: 0.25 + 100% + opacity: 0.15 + +.card-github, .gc-description, .gc-titlebar, .gc-stars, .gc-forks, .gc-license, .gc-avatar, github-logo + transition-property: all + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) + transition-duration: 0.15s diff --git a/src/styles/markdown.css b/src/styles/markdown.css new file mode 100644 index 000000000..815324f8d --- /dev/null +++ b/src/styles/markdown.css @@ -0,0 +1,89 @@ +.custom-md { + h1 { + @apply text-3xl; + } + + 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; + + .anchor-icon { + @apply mx-[0.45ch] !important; + } + } + + &:hover { + .anchor { + @apply opacity-100 !important; + } + } + } + + a:not(.no-styling) { + @apply relative bg-none link font-medium text-[var(--primary)] + underline decoration-[var(--link-underline)] decoration-1 decoration-dashed underline-offset-4; + + &:hover, &:active { + @apply decoration-transparent; + } + } + + code { + @apply bg-[var(--inline-code-bg)] text-[var(--inline-code-color)] px-1 py-0.5 rounded-md overflow-hidden; + + font-family: 'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace; + &:before { + content:none; + } + &:after { + content:none; + } + + counter-reset: line; + span.line { + &:before { + @apply text-white/25 mr-4 w-4 inline-block; + content: counter(line); + counter-increment: line; + direction: rtl; + } + &:last-child:empty, &:last-child:has(> span:empty:only-child) { + display: none; + } + } + } + + pre { + @apply bg-[var(--codeblock-bg)] !important; + @apply rounded-xl px-5; + + code { + @apply bg-transparent text-inherit text-sm p-0; + + ::selection { + @apply bg-[var(--codeblock-selection)]; + } + } + } + + ul, ol { + li::marker { + @apply text-[var(--primary)]; + } + } + + blockquote { + @apply not-italic border-transparent relative; + font-weight: inherit; + + &:before { + @apply content-[''] absolute -left-1 block transition bg-[var(--btn-regular-bg)] h-full w-1 rounded-full; + } + + /* Remove the double quotes from default styles */ + p:before, p:after { + @apply content-none; + } + + } +} diff --git a/src/styles/photoswipe.css b/src/styles/photoswipe.css new file mode 100644 index 000000000..833571716 --- /dev/null +++ b/src/styles/photoswipe.css @@ -0,0 +1,12 @@ +.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; +} +.pswp__button--zoom, .pswp__button--close { + @apply mt-4 rounded-xl active:scale-90 !important; +} +.pswp__button--zoom { + @apply mr-2.5 !important; +} +.pswp__button--close { + @apply mr-4 !important; +} diff --git a/src/styles/scrollbar.css b/src/styles/scrollbar.css new file mode 100644 index 000000000..ff25757e5 --- /dev/null +++ b/src/styles/scrollbar.css @@ -0,0 +1,42 @@ +.scrollbar-base.os-scrollbar { + @apply transition-all; + pointer-events: unset; + + &.os-scrollbar-horizontal { + @apply py-1 px-2 h-4; + .os-scrollbar-track .os-scrollbar-handle { + @apply rounded-full h-1; + } + &:hover .os-scrollbar-track .os-scrollbar-handle { + @apply h-2; + } + } + + &.os-scrollbar-vertical { + @apply px-1 py-1 w-4; + .os-scrollbar-track .os-scrollbar-handle { + @apply rounded-full w-1; + } + &:hover .os-scrollbar-track .os-scrollbar-handle { + @apply w-2; + } + } +} + +.os-scrollbar { + &.scrollbar-auto { + --os-handle-bg: var(--scrollbar-bg); + --os-handle-bg-hover: var(--scrollbar-bg-hover); + --os-handle-bg-active: var(--scrollbar-bg-active); + } + &.scrollbar-dark { + --os-handle-bg: var(--scrollbar-bg-dark); + --os-handle-bg-hover: var(--scrollbar-bg-hover-dark); + --os-handle-bg-active: var(--scrollbar-bg-active-dark); + } + &.scrollbar-light { + --os-handle-bg: var(--scrollbar-bg-light); + --os-handle-bg-hover: var(--scrollbar-bg-hover-light); + --os-handle-bg-active: var(--scrollbar-bg-active-light); + } +} diff --git a/src/styles/transition.css b/src/styles/transition.css new file mode 100644 index 000000000..76884a2a4 --- /dev/null +++ b/src/styles/transition.css @@ -0,0 +1,53 @@ +/* Page transition animations with Swup */ +html.is-changing .transition-swup-fade { + @apply transition-all duration-200 +} +html.is-animating .transition-swup-fade { + @apply opacity-0 translate-y-4 +} + +/* Fade-in animations for components */ +@keyframes fade-in-up { + 0% { + transform: translateY(2rem); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } +} + +/* Main components */ +.onload-animation { + opacity: 0; + animation: 300ms fade-in-up; + animation-fill-mode: forwards; +} +#navbar { + animation-delay: 0ms +} +#sidebar { + animation-delay: 100ms +} +#swup-container { + outline: none; +} +#content-wrapper { + animation-delay: var(--content-delay); +} +.footer { + animation-delay: 250ms; +} +#banner-credit { + animation-delay: 400ms; +} + +/* Post content */ +#post-container :nth-child(1) { animation-delay: calc(var(--content-delay) + 0ms) } +#post-container :nth-child(2) { animation-delay: calc(var(--content-delay) + 50ms) } +#post-container :nth-child(3) { animation-delay: calc(var(--content-delay) + 100ms) } +#post-container :nth-child(4) { animation-delay: calc(var(--content-delay) + 175ms) } +#post-container :nth-child(5) { animation-delay: calc(var(--content-delay) + 250ms) } +#post-container :nth-child(6) { animation-delay: calc(var(--content-delay) + 325ms) } + diff --git a/src/styles/variables.styl b/src/styles/variables.styl new file mode 100644 index 000000000..b3465bae3 --- /dev/null +++ b/src/styles/variables.styl @@ -0,0 +1,95 @@ +/* utils */ +white(a) + rgba(255, 255, 255, a) + +black(a) + rgba(0, 0, 0, a) + +rainbow-light = linear-gradient(to right, oklch(0.80 0.10 0), oklch(0.80 0.10 30), oklch(0.80 0.10 60), oklch(0.80 0.10 90), oklch(0.80 0.10 120), oklch(0.80 0.10 150), oklch(0.80 0.10 180), oklch(0.80 0.10 210), oklch(0.80 0.10 240), oklch(0.80 0.10 270), oklch(0.80 0.10 300), oklch(0.80 0.10 330), oklch(0.80 0.10 360)) +rainbow-dark = linear-gradient(to right, oklch(0.70 0.10 0), oklch(0.70 0.10 30), oklch(0.70 0.10 60), oklch(0.70 0.10 90), oklch(0.70 0.10 120), oklch(0.70 0.10 150), oklch(0.70 0.10 180), oklch(0.70 0.10 210), oklch(0.70 0.10 240), oklch(0.70 0.10 270), oklch(0.70 0.10 300), oklch(0.70 0.10 330), oklch(0.70 0.10 360)) + +:root + --radius-large 1rem + --content-delay 150ms + +/* An util to define variables that vary with light and dark mode */ +define(vars) + :root + for key, value in vars + {key}: value[0] + :root.dark + for key, value in vars + if length(value) > 1 + {key}: value[1] + +define({ + --primary: oklch(0.70 0.14 var(--hue)) oklch(0.75 0.14 var(--hue)) + --page-bg: oklch(0.95 0.01 var(--hue)) oklch(0.16 0.014 var(--hue)) + --card-bg: white oklch(0.23 0.015 var(--hue)) + + --btn-content: oklch(0.55 0.12 var(--hue)) oklch(0.75 0.1 var(--hue)) + + --btn-regular-bg: oklch(0.95 0.025 var(--hue)) oklch(0.33 0.035 var(--hue)) + --btn-regular-bg-hover: oklch(0.9 0.05 var(--hue)) oklch(0.38 0.04 var(--hue)) + --btn-regular-bg-active: oklch(0.85 0.08 var(--hue)) oklch(0.43 0.045 var(--hue)) + + --btn-plain-bg-hover: oklch(0.95 0.025 var(--hue)) oklch(0.30 0.035 var(--hue)) + --btn-plain-bg-active: oklch(0.98 0.01 var(--hue)) oklch(0.27 0.025 var(--hue)) + + --btn-card-bg-hover: oklch(0.98 0.005 var(--hue)) oklch(0.3 0.03 var(--hue)) + --btn-card-bg-active: oklch(0.9 0.03 var(--hue)) oklch(0.35 0.035 var(--hue)) + + --enter-btn-bg: var(--btn-regular-bg) + --enter-btn-bg-hover: var(--btn-regular-bg-hover) + --enter-btn-bg-active: var(--btn-regular-bg-active) + + --deep-text: oklch(0.25 0.02 var(--hue)) + + --title-active: oklch(0.6 0.1 var(--hue)) + + --line-divider: black(0.08) white(0.08) + + --line-color: black(0.1) white(0.1) + --meta-divider: black(0.2) white(0.2) + + --inline-code-bg: var(--btn-regular-bg) + --inline-code-color: var(--btn-content) + --selection-bg: oklch(0.90 0.05 var(--hue)) oklch(0.40 0.08 var(--hue)) + --codeblock-selection: oklch(0.40 0.08 var(--hue)) + --codeblock-bg: oklch(0.2 0.015 var(--hue)) oklch(0.17 0.015 var(--hue)) + + --license-block-bg: black(0.03) var(--codeblock-bg) + + --link-underline: oklch(0.93 0.04 var(--hue)) oklch(0.40 0.08 var(--hue)) + --link-hover: oklch(0.95 0.025 var(--hue)) oklch(0.40 0.08 var(--hue)) + --link-active: oklch(0.90 0.05 var(--hue)) oklch(0.35 0.07 var(--hue)) + + --float-panel-bg: white oklch(0.19 0.015 var(--hue)) + + --scrollbar-bg-light: black(0.4) + --scrollbar-bg-hover-light: black(0.5) + --scrollbar-bg-active-light: black(0.6) + + --scrollbar-bg-dark: white(0.4) + --scrollbar-bg-hover-dark: white(0.5) + --scrollbar-bg-active-dark: white(0.6) + + --scrollbar-bg: var(--scrollbar-bg-light) var(--scrollbar-bg-dark) + --scrollbar-bg-hover: var(--scrollbar-bg-hover-light) var(--scrollbar-bg-hover-dark) + --scrollbar-bg-active: var(--scrollbar-bg-active-light) var(--scrollbar-bg-active-dark) + + --color-selection-bar: rainbow-light rainbow-dark + + --display-light-icon: 1 0 + --display-dark-icon: 0 1 + + --admonitions-color-tip: oklch(0.7 0.14 180) oklch(0.75 0.14 180) + --admonitions-color-note: oklch(0.7 0.14 250) oklch(0.75 0.14 250) + --admonitions-color-important: oklch(0.7 0.14 310) oklch(0.75 0.14 310) + --admonitions-color-warning: oklch(0.7 0.14 60) oklch(0.75 0.14 60) + --admonitions-color-caution: oklch(0.6 0.2 25) oklch(0.65 0.2 25) + + --toc-badge-bg: oklch(0.9 0.045 var(--hue)) var(--btn-regular-bg) + --toc-btn-hover: oklch(0.92 0.015 var(--hue)) oklch(0.22 0.02 var(--hue)) + --toc-btn-active: oklch(0.90 0.015 var(--hue)) oklch(0.25 0.02 var(--hue)) +})