diff --git a/README.es.md b/README.es.md new file mode 100644 index 0000000..0e40289 --- /dev/null +++ b/README.es.md @@ -0,0 +1,58 @@ +# 🍥Fuwari + +Un tema estático para blogs construido con [Astro](https://astro.build). + +[**🖥️ Demostración en Vivo (Vercel)**](https://fuwari.vercel.app)   /    +[**📦 Versión Antigua de Hexo**](https://github.com/saicaca/hexo-theme-vivia)   /    + +> Versión del README: `2024-04-07` + +![Imagen de Vista Previa](https://raw.githubusercontent.com/saicaca/resource/main/fuwari/home.png) + +## ✨ Características + +- [x] Construido con [Astro](https://astro.build) y [Tailwind CSS](https://tailwindcss.com) +- [x] Animaciones suaves y transiciones de página +- [x] Modo claro / oscuro +- [x] Colores del tema y banner personalizables +- [x] Diseño responsivo +- [ ] Comentarios +- [x] Buscador +- [ ] TOC (Tabla de Contenidos) + +## 🚀 Cómo Usar + +1. [Genera un nuevo repositorio](https://github.com/saicaca/fuwari/generate) desde esta plantilla o haz un fork de este repositorio. +2. Para editar tu blog localmente, clona tu repositorio, ejecuta `pnpm install` y `pnpm add sharp` para instalar las dependencias. + - Instala [pnpm](https://pnpm.io) `npm install -g pnpm` si aún no lo tienes. +3. Edita el archivo de configuración `src/config.ts` para personalizar tu blog. +4. Ejecuta `pnpm new-post ` para crear una nueva entrada y edítala en `src/content/posts/`. +5. Despliega tu blog en Vercel, Netlify, GitHub Pages, etc., siguiendo [las guías](https://docs.astro.build/en/guides/deploy/). Necesitas editar la configuración del sitio en `astro.config.mjs` antes del despliegue. + +## ⚙️ Cabecera de las Entradas + +```yaml +--- +title: Mi Primer Post en el Blog +published: 2023-09-09 +description: Esta es la primera entrada de mi nuevo blog con Astro. +image: /images/cover.jpg +tags: [Foo, Bar] +category: Front-end +draft: false +--- +``` + +## 🧞 Comandos + +Todos los comandos se ejecutan desde la raíz del proyecto, desde una terminal: + +| Comando | Acción | +|:------------------------------------|:--------------------------------------------------| +| `pnpm install` y `pnpm add sharp` | Instala las dependencias | +| `pnpm dev` | Inicia el servidor de desarrollo local en `localhost:4321` | +| `pnpm build` | Compila tu web para producción en `./dist/` | +| `pnpm preview` | Previsualiza la web localmente, antes del despliegue | +| `pnpm new-post ` | Crea una nueva entrada | +| `pnpm astro ...` | Ejecuta comandos CLI como `astro add`, `astro check` | +| `pnpm astro --help` | Obtén ayuda para usar el CLI de Astro | diff --git a/README.ko.md b/README.ko.md new file mode 100644 index 0000000..75b7918 --- /dev/null +++ b/README.ko.md @@ -0,0 +1,57 @@ +# 🍥Fuwari + +[Astro](https://astro.build)로 구축된 정적 블로그 템플릿입니다. + +[**🖥️미리보기 (Vercel)**](https://fuwari.vercel.app)   /    +[**📦Old Hexo Version**](https://github.com/saicaca/hexo-theme-vivia) + +> README 버전: `2024-04-07` + +![Preview Image](https://raw.githubusercontent.com/saicaca/resource/main/fuwari/home.png) + +## ✨ 특징 + +- [x] [Astro](https://astro.build) 및 [Tailwind CSS](https://tailwindcss.com)로 구축됨 +- [x] 부드러운 애니메이션 및 페이지 전환 +- [x] 라이트 모드 / 다크 모드 +- [x] 사용자 정의 가능한 테마 색상 및 배너 +- [x] 반응형 디자인 +- [ ] 댓글 +- [x] 검색 +- [ ] 목차 +## 🚀 사용하는 방법 + +1. 이 템플릿에서 [새 저장소를 생성](https://github.com/saicaca/fuwari/generate)하거나 이 저장소를 포크하세요. +2. 블로그를 로컬에서 편집하려면 저장소를 복제하고 `pnpm install` 및 `pnpm add sharp`를 실행하여 종속성을 설치하세요. + - 아직 [pnpm](https://pnpm.io)을 설치하지 않았다면 `npm install -g pnpm`을 실행하여 [pnpm](https://pnpm.io)을 설치하세요. +3. 블로그를 사용자 정의하려면 `src/config.ts` 구성 파일을 편집하세요. +4. `pnpm new-post `을 실행하여 새 게시물을 만들고 `src/content/posts/`에서 편집하세요. +5. [가이드](https://docs.astro.build/en/guides/deploy/)에 따라 블로그를 Vercel, Netlify, GitHub 페이지 등에 배포하세요. 배포하기 전에 `astro.config.mjs`에서 사이트 구성을 편집해야 합니다. + +## ⚙️ 게시물의 머리말 설정 + +```yaml +--- +title: 내 첫 블로그 게시물 +published: 2023-09-09 +description: 내 새로운 Astro 블로그의 첫 번째 게시물입니다! +image: /images/cover.jpg +tags: [푸, 바, 오] +category: 앞-끝 +draft: false +--- +``` + +## 🧞 명령어 + +모든 명령어는 프로젝트 최상단, 터미널에서 실행됩니다: + +| Command | Action | +|:------------------------------------|:-------------------------------------------------| +| `pnpm install` AND `pnpm add sharp` | 종속성을 설치합니다. | +| `pnpm dev` | `localhost:4321`에서 로컬 개발 서버를 시작합니다. | +| `pnpm build` | `./dist/`에 프로덕션 사이트를 구축합니다. | +| `pnpm preview` | 배포하기 전에 로컬에서 빌드 미리보기 | +| `pnpm new-post ` | 새 게시물 작성 | +| `pnpm astro ...` | `astro add`, `astro check`와 같은 CLI 명령어 실행 | +| `pnpm astro --help` | Astro CLI를 사용하여 도움 받기 | diff --git a/README.th.md b/README.th.md new file mode 100644 index 0000000..6767f3d --- /dev/null +++ b/README.th.md @@ -0,0 +1,59 @@ +# 🍥Fuwari + +แม่แบบสำหรับเว็บบล็อกแบบ static สร้างด้วย [Astro](https://astro.build) + +[**🖥️ ตัวอย่างการใช้งานจริง (Vercel)**](https://fuwari.vercel.app)   /    +[**📦 เวอร์ชั่นเก่าสำหรับ Hexo**](https://github.com/saicaca/hexo-theme-vivia) + +> เวอร์ชั่นของ README: `2024-09-10` + +![ภาพตัวอย่าง](https://raw.githubusercontent.com/saicaca/resource/main/fuwari/home.png) + +## ✨ คุณสมบัติ + +- [x] สร้างด้วย [Astro](https://astro.build) และ [Tailwind CSS](https://tailwindcss.com) +- [x] มีอนิเมชั่นและการเปลี่ยนหน้าอย่างลื่นไหล +- [x] รองรับโหมดสว่าง / โหมดมืด +- [x] ปรับแต่งสีธีมและแบนเนอร์ได้ +- [x] Responsive design (หน้าตาเว็บปรับเปลี่ยนตามขนาดจอ) +- [ ] การแสดงความคิดเห็น +- [x] การค้นหา +- [ ] TOC (สารบัญ) + +## 🚀 วิธีใช้งาน + +1. [Generate repository ใหม่](https://github.com/saicaca/fuwari/generate)ขึ้นมาจากแม่แบบนี้ หรือจะ fork repository นี้ก็ได้ +2. เริ่มแก้ไขบล็อกของคุณแบบ local โดยการ clone repository ของคุณ (จากข้อ 1) ไว้ในเครื่องของคุณ แล้วรันคำสั่ง `pnpm install` และ `pnpm add sharp` เพื่อติดตั้ง dependencies ที่จำเป็น + - ติดตั้ง [pnpm](https://pnpm.io) ด้วยคำสั่ง `npm install -g pnpm` ถ้ายังไม่เคยติดตั้ง +3. แก้ไขไฟล์การตั้งค่า `src/config.ts` เพื่อปรับแต่งบล็อกของคุณ +4. รันคำสั่ง `pnpm new-post ` เพื่อสร้างโพสต์ใหม่ใน `src/content/posts/` และแก้ไขไฟล์โพสต์นั้นๆ ให้สมบูรณ์ +5. Deploy เว็บบล็อกของคุณไปยัง Vercel, Netlify, GitHub Pages หรือบริการอื่นๆ โดยอ้างอิงวิธีการจาก[คู่มือนี้](https://docs.astro.build/en/guides/deploy/) อย่าลืมแก้ไขการตั้งค่าเว็บไซต์ในไฟล์ `astro.config.mjs` ก่อนที่คุณจะ deploy เว็บ + +## ⚙️ Frontmatter ของโพสต์ + +```yaml +--- +title: โพสต์แรกของฉัน +published: 2023-09-09 +description: นี่คือโพสต์แรกของเว็บบล็อก Astro อันใหม่ของฉัน +image: ./cover.jpg +tags: [Foo, Bar] +category: Front-end +draft: false +lang: jp # เขียนค่านี้เมื่อภาษาของโพสต์นั้นๆ แตกต่างจากภาษาของเว็บไซต์ที่ตั้งค่าไว้ใน `config.ts` เท่านั้น +--- +``` + +## 🧞 คำสั่ง + +คำสั่งที่รันได้ใน terminal จาก root ของโปรเจค: + +| คำสั่ง | ผลที่เกิด | +|:------------------------------------|:--------------------------------------------------| +| `pnpm install` และ `pnpm add sharp` | ติดตั้ง dependencies | +| `pnpm dev` | เปิดเซิร์ฟเวอร์เพื่อพัฒนาเว็บแบบ local ที่ `localhost:4321` | +| `pnpm build` | Build เว็บไซต์แบบพร้อมใช้งานจริงไปยังโฟลเดอร์ `./dist/` | +| `pnpm preview` | ดูตัวอย่าง build ของคุณแบบ local ก่อนที่จะ deploy จริง | +| `pnpm new-post ` | สร้างโพสต์ใหม่ | +| `pnpm astro ...` | รันคำสั่ง CLI เช่น `astro add`, `astro check` | +| `pnpm astro --help` | ดูข้อมูลเพิ่มเติมเกี่ยวกับ Astro CLI | diff --git a/postcss.config.mjs b/postcss.config.mjs new file mode 100644 index 0000000..632eeda --- /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/assets/images/demo-avatar.png b/src/assets/images/demo-avatar.png new file mode 100644 index 0000000..84320d4 Binary files /dev/null and b/src/assets/images/demo-avatar.png differ diff --git a/src/components/widget/TOC.astro b/src/components/widget/TOC.astro new file mode 100644 index 0000000..8ac3e5a --- /dev/null +++ b/src/components/widget/TOC.astro @@ -0,0 +1,261 @@ +--- +import type { MarkdownHeading } from 'astro'; +import { siteConfig } from "../../config"; + +interface Props { + class?: string + headings: MarkdownHeading[] +} + +let { headings = [] } = Astro.props; + +let minDepth = 10; +for (const heading of headings) { + minDepth = Math.min(minDepth, heading.depth); +} + +const className = Astro.props.class + +const removeTailingHash = (text: string) => { + let lastIndexOfHash = text.lastIndexOf('#'); + if (lastIndexOfHash != text.length - 1) { + return text; + } + + return text.substring(0, lastIndexOfHash); +} + +let heading1Count = 1; + +const maxLevel = siteConfig.toc.depth; +--- + + {headings.filter((heading) => heading.depth < minDepth + maxLevel).map((heading) => + +
+ {heading.depth == minDepth && heading1Count++} + {heading.depth == minDepth + 1 &&
} + {heading.depth == minDepth + 2 &&
} +
+
{removeTailingHash(heading.text)}
+ + )} +
+ + + + \ No newline at end of file diff --git a/src/content/posts/2025-01-05-low-buy-year.md b/src/content/posts/2025-01-05-low-buy-year.md new file mode 100644 index 0000000..a1ed53c --- /dev/null +++ b/src/content/posts/2025-01-05-low-buy-year.md @@ -0,0 +1,27 @@ +--- +title: A No/Low Buy Year & Some Other Resolutions +description: So I have been wanting to write up and talk about this for a while, I feel the need to talk about this because too much content is getting removed or kicked off of other platforms due to provider policy changes. By this I mean creators I... +tags: [Personal, Mental Health, Fediverse, Social Media] +published: 2025-01-15 +category: Thoughts +draft: false +--- + +So I am dealing with a with the issue of a form of "Retail Therapy" that I been doing over the past year. This has pushed me into debt, nothing I cannot get myself out of but... I shouldn't have gotten myself into in the first place. So this year I wanna focus on trying not to buy anything, and actually start budgeting. I know it is a silly thing to do every year, to do some sorta resolution, but then fail partly through the year and not keeping yourself accountable... but I am hoping to keep myself accountable this year. + +With that said, my biggest goal for this year is to claw myself out of most of my debt. I know I will not get out of all of it... but I want to at least stop purchasing things on Credit Cards (that I don't pay off monthly), and also focus on getting some sort of decent emergency fund so I don't need to worry about getting back in debt if I screw up too badly. + +Now, I do wanna go into a few other resolutions I want to try and accomplish for this year. These things are stuff I don't know if I can accomplish, but they are mainly for setting goal posts for myself, and I hope to use this blog as a way of keeping myself accountable. + +My Main Goals +- Focus on getting out of debt +- Write at least two blog posts a month on this blog +- Go to the gym at least 3 times a week +- Work on coding projects + - FurryFediverse + - D.A.M. (Digital Asset Manager) + - Personal Site + +Stretch Goals +- Create videos to upload at least once a month +- Launch some paid services from CyberFurz to hopefully make self-sustainment diff --git a/src/global.d.ts b/src/global.d.ts new file mode 100644 index 0000000..3584d67 --- /dev/null +++ b/src/global.d.ts @@ -0,0 +1,8 @@ +import type { AstroIntegration } from '@swup/astro' + +declare global { + interface Window { + // type from '@swup/astro' is incorrect + swup: AstroIntegration + } +} diff --git a/src/i18n/languages/es.ts b/src/i18n/languages/es.ts new file mode 100644 index 0000000..24008e1 --- /dev/null +++ b/src/i18n/languages/es.ts @@ -0,0 +1,38 @@ +import Key from '../i18nKey' +import type { Translation } from '../translation' + +export const es: Translation = { + [Key.home]: 'Inicio', + [Key.about]: 'Sobre mí', + [Key.archive]: 'Archivo', + [Key.search]: 'Buscar', + + [Key.tags]: 'Etiquetas', + [Key.categories]: 'Categorías', + [Key.recentPosts]: 'Publicaciones recientes', + + [Key.comments]: 'Comentarios', + + [Key.untitled]: 'Sin título', + [Key.uncategorized]: 'Sin categoría', + [Key.noTags]: 'Sin etiquetas', + + [Key.wordCount]: 'palabra', + [Key.wordsCount]: 'palabras', + [Key.minuteCount]: 'minuto', + [Key.minutesCount]: 'minutos', + [Key.postCount]: 'publicación', + [Key.postsCount]: 'publicaciones', + + [Key.themeColor]: 'Color del tema', + + [Key.lightMode]: 'Claro', + [Key.darkMode]: 'Oscuro', + [Key.systemMode]: 'Sistema', + + [Key.more]: 'Más', + + [Key.author]: 'Autor', + [Key.publishedAt]: 'Publicado el', + [Key.license]: 'Licencia', +} diff --git a/src/i18n/languages/ko.ts b/src/i18n/languages/ko.ts new file mode 100644 index 0000000..c636d21 --- /dev/null +++ b/src/i18n/languages/ko.ts @@ -0,0 +1,38 @@ +import Key from '../i18nKey' +import type { Translation } from '../translation' + +export const ko: Translation = { + [Key.home]: '홈', + [Key.about]: '소개', + [Key.archive]: '아카이브', + [Key.search]: '검색', + + [Key.tags]: '태그', + [Key.categories]: '카테고리', + [Key.recentPosts]: '최근 게시물', + + [Key.comments]: '댓글', + + [Key.untitled]: '제목 없음', + [Key.uncategorized]: '분류되지 않음', + [Key.noTags]: '태그 없음', + + [Key.wordCount]: '단어', + [Key.wordsCount]: '단어', + [Key.minuteCount]: '분', + [Key.minutesCount]: '분', + [Key.postCount]: '게시물', + [Key.postsCount]: '게시물', + + [Key.themeColor]: '테마 색상', + + [Key.lightMode]: '밝은 모드', + [Key.darkMode]: '어두운 모드', + [Key.systemMode]: '시스템 모드', + + [Key.more]: '더 보기', + + [Key.author]: '저자', + [Key.publishedAt]: '게시일', + [Key.license]: '라이선스', +} diff --git a/src/i18n/languages/th.ts b/src/i18n/languages/th.ts new file mode 100644 index 0000000..44787e7 --- /dev/null +++ b/src/i18n/languages/th.ts @@ -0,0 +1,38 @@ +import Key from '../i18nKey' +import type { Translation } from '../translation' + +export const th: Translation = { + [Key.home]: 'หน้าแรก', + [Key.about]: 'เกี่ยวกับ', + [Key.archive]: 'คลัง', + [Key.search]: 'ค้นหา', + + [Key.tags]: 'ป้ายกำกับ', + [Key.categories]: 'หมวดหมู่', + [Key.recentPosts]: 'โพสต์ล่าสุด', + + [Key.comments]: 'ความคิดเห็น', + + [Key.untitled]: 'ไม่ได้ตั้งชื่อ', + [Key.uncategorized]: 'ไม่ได้จัดหมวดหมู่', + [Key.noTags]: 'ไม่มีป้ายกำกับ', + + [Key.wordCount]: 'คำ', + [Key.wordsCount]: 'คำ', + [Key.minuteCount]: 'นาที', + [Key.minutesCount]: 'นาที', + [Key.postCount]: 'โพสต์', + [Key.postsCount]: 'โพสต์', + + [Key.themeColor]: 'สีของธีม', + + [Key.lightMode]: 'สว่าง', + [Key.darkMode]: 'มืด', + [Key.systemMode]: 'ตามระบบ', + + [Key.more]: 'ดูเพิ่ม', + + [Key.author]: 'ผู้เขียน', + [Key.publishedAt]: 'เผยแพร่เมื่อ', + [Key.license]: 'สัญญาอนุญาต', +} diff --git a/src/plugins/remark-excerpt.js b/src/plugins/remark-excerpt.js new file mode 100644 index 0000000..c88a045 --- /dev/null +++ b/src/plugins/remark-excerpt.js @@ -0,0 +1,16 @@ +import { toString } from 'mdast-util-to-string' + +/* Use the post's first paragraph as the excerpt */ +export function remarkExcerpt() { + return (tree, { data }) => { + let excerpt = '' + for (let node of tree.children) { + if (node.type !== 'paragraph') { + continue + } + excerpt = toString(node) + break + } + data.astro.frontmatter.excerpt = excerpt + } +} diff --git a/src/styles/main.css b/src/styles/main.css new file mode 100644 index 0000000..f517d8c --- /dev/null +++ b/src/styles/main.css @@ -0,0 +1,157 @@ +@tailwind components; + +@layer components { + .card-base { + @apply rounded-[var(--radius-large)] overflow-hidden bg-[var(--card-bg)] transition; + } + h1, h2, h3, h4, h5, h6, p, a, span, li, ul, ol, blockquote, code, pre, table, th, td, strong { + @apply transition; + } + .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 + } + .link { + @apply transition rounded-md p-1 -m-1 expand-animation; + } + .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)] + } + + .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)] + } + .btn-card.disabled { + @apply pointer-events-none text-black/10 dark:text-white/10 + } + .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)]; + &:not(.scale-animation) { + @apply hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--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)] + } + } + } + .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] + } + + .toc-hide, + .toc-not-ready { + @apply opacity-0 pointer-events-none + } + + #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))] + } + + .copy-btn-icon { + @apply absolute top-1/2 left-1/2 transition -translate-x-1/2 -translate-y-1/2 + } + .copy-btn .copy-icon { + @apply opacity-100 fill-white dark:fill-white/75 + } + .copy-btn.success .copy-icon { + @apply opacity-0 fill-[var(--deep-text)] + } + .copy-btn .success-icon { + @apply opacity-0 + } + .copy-btn.success .success-icon { + @apply opacity-100 + } +} + +.custom-md img, #post-cover img { + @apply cursor-zoom-in +} + +::selection { + background-color: var(--selection-bg) +} + +.dash-line { + position: relative; +} + +.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 { + height: var(--collapsedHeight); +} \ No newline at end of file diff --git a/src/styles/markdown-extend.styl b/src/styles/markdown-extend.styl new file mode 100644 index 0000000..687be28 --- /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 0000000..815324f --- /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 0000000..8335717 --- /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 0000000..ff25757 --- /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 0000000..76884a2 --- /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 0000000..9bccc09 --- /dev/null +++ b/src/styles/variables.styl @@ -0,0 +1,97 @@ +/* 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)) + --toc-width: calc((100vw - var(--page-width)) / 2 - 1rem) + --toc-item-active: oklch(0.70 0.13 var(--hue)) oklch(0.35 0.07 var(--hue)) +}) diff --git a/svelte.config.js b/svelte.config.js new file mode 100644 index 0000000..d8f72ef --- /dev/null +++ b/svelte.config.js @@ -0,0 +1,5 @@ +import { vitePreprocess } from "@astrojs/svelte"; + +export default { + preprocess: [vitePreprocess({ script: true })], +};