From 272a67d7a8b8752dda3cddf44482e9d85de2c4d0 Mon Sep 17 00:00:00 2001 From: Eltrac Date: Tue, 15 Jul 2025 14:17:39 +0800 Subject: refactor: replace _footer.scss and _shortcode.scss with UnoCSS --- assets/css/components/_footer.scss | 64 ------ assets/css/components/_post.scss | 56 +++++ assets/css/components/_shortcodes.scss | 226 --------------------- assets/css/global.scss | 2 - content/linkroll.md | 4 +- ...230\257\345\245\275\350\257\273\350\200\205.md" | 8 +- ...201\232\347\232\204\350\211\272\346\234\257.md" | 7 +- layouts/_partials/footer.html | 20 +- layouts/_shortcodes/callout.html | 6 +- layouts/_shortcodes/link.html | 27 +-- layouts/_shortcodes/quotecard.html | 12 +- layouts/_shortcodes/sidenote.html | 4 - uno.config.js | 5 +- 13 files changed, 108 insertions(+), 333 deletions(-) delete mode 100644 assets/css/components/_footer.scss delete mode 100644 assets/css/components/_shortcodes.scss delete mode 100644 layouts/_shortcodes/sidenote.html diff --git a/assets/css/components/_footer.scss b/assets/css/components/_footer.scss deleted file mode 100644 index d4996ab7..00000000 --- a/assets/css/components/_footer.scss +++ /dev/null @@ -1,64 +0,0 @@ -#footer { - margin: 2rem auto; - font-family: var(--mono-font-family); - - @media screen and (min-width: 768px) { - width: var(--page-width); - display: flex; - justify-content: space-between; - } - - #footer-copyright { - .word-count { - font-family: var(--serif-font-family); - font-size: .9rem; - color: var(--secondary-text-color) - } - } - - #footer-links { - display: flex; - flex-direction: column; - - @media screen and (min-width: 768px) { - align-items: flex-end; - } - - ul.footer-navigation { - list-style: none; - display: flex; - gap: 0.5rem; - padding-inline-start: 0; - margin: .5rem 0; - - @media screen and (min-width: 768px) { - justify-content: flex-end; - } - - li { - display: inline-flex; - align-items: center; - img, svg { - height: 1rem; - width: auto; - display: inline-block; - border-radius: 100%; - filter: grayscale(1); - @media (prefers-color-scheme: dark) { - filter: grayscale(1) invert(1); - } - } - } - - /* internal links */ - &.footer-navigation-internal { - gap: 0.25rem; - li:not(:last-child)::after { - color: var(--secondary-text-color); - content: '/'; - margin-left: 0.25rem; - } - } - } - } -} diff --git a/assets/css/components/_post.scss b/assets/css/components/_post.scss index e93f9b77..10c7900d 100644 --- a/assets/css/components/_post.scss +++ b/assets/css/components/_post.scss @@ -97,3 +97,59 @@ } } } + +/* gallery shortcode */ + +.gallery { + display: flex; + overflow-x: auto; + scroll-behavior: smooth; + gap: 0.5rem; + white-space: nowrap; + + & > figure, & > a:has(> figure) { + margin: 0; + flex-shrink: 0; + display: inline-block; + max-width: 100%; + position: relative; + box-shadow: inset 0 -2rem 2rem -2rem rgba(0, 0, 0, 0.1); + img { + height: 20rem; + display: block; + border-radius: 4px; + margin: 0; + } + figcaption { + position: absolute; + bottom: 0; + left: 0; + padding: 0.35rem; + h4 { + font-size: 0.8rem; + margin: 0; + text-align: left; + width: fit-content; + color: var(--text-color); + background-color: rgba(var(--block-background-color-rgb), 0.75); + backdrop-filter: blur(0.5rem); + padding: 0.2rem 0.35rem; + border-radius: 3px; + line-height: 1.2; + } + } + } + & > p { display: none } + + &.center { + justify-content: center; + } + &.full-width { + & > figure { + flex-shrink: unset; + img { + width: 100%; + } + } + } +} diff --git a/assets/css/components/_shortcodes.scss b/assets/css/components/_shortcodes.scss deleted file mode 100644 index 5c4e893a..00000000 --- a/assets/css/components/_shortcodes.scss +++ /dev/null @@ -1,226 +0,0 @@ -/* callouts */ - -.callout { - background-color: rgba(var(--block-background-color-rgb), 0.5); - border-radius: .25rem; - padding: 1rem 1.25rem; - line-height: 1.75; - - display: flex; - gap: .75rem; - - margin: 0.5rem 0; -} - -.callout .callout-content p { - margin: 0; -} - -/* quote shortcode */ - -.quote-card { - --card-bg: rgba(255,255,255,0.25); - --card-bg-lighter: rgba(255,255,255,0.1); - --card-noise: rgba(255,255,255,0.04); - - font-size: 1.5rem; - font-style: italic; - text-align: center; - margin: 5rem 3rem; - padding: 1rem; - border: 1px solid var(--border-color); - border-radius: 1rem; - box-shadow: 0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a; - transform: rotate(3deg); - background-color: rgba(255,255,255,0.35); - - background: linear-gradient(var(--card-bg-lighter), var(--card-bg-lighter)), - repeating-radial-gradient(var(--card-bg) 0 0.0001%, var(--card-noise) 0 0.0002%) 50% 0 / 2500px 2500px, - repeating-conic-gradient(var(--card-bg) 0 0.0001%, var(--card-noise) 0 0.0002%) 60% 60% / 2500px 2500px; - background-blend-mode: normal, difference; -} - -@media screen and (max-width: 768px) { - .quote-card { - font-size: 1.2rem; - margin: 3rem 1rem; - } -} - -/* book showcase shortcode */ - -.book-showcase { - display: flex; - gap: 2rem; - line-height: 1.5; - margin: 2rem 0 -} - -.book-showcase .book-cover { - width: 25%; - flex-shrink: 0; -} - -.book-description-header .book-title { - margin: 0 -} - -.book-description-header p { - font-size: 1rem; - margin: 0.1rem -} - -/* gallery shortcode */ - -.gallery { - display: flex; - overflow-x: auto; - scroll-behavior: smooth; - gap: 0.5rem; - white-space: nowrap; - - & > figure, & > a:has(> figure) { - margin: 0; - flex-shrink: 0; - display: inline-block; - max-width: 100%; - position: relative; - box-shadow: inset 0 -2rem 2rem -2rem rgba(0, 0, 0, 0.1); - img { - height: 20rem; - display: block; - border-radius: 4px; - margin: 0; - } - figcaption { - position: absolute; - bottom: 0; - left: 0; - padding: 0.35rem; - h4 { - font-size: 0.8rem; - margin: 0; - text-align: left; - width: fit-content; - color: var(--text-color); - background-color: rgba(var(--block-background-color-rgb), 0.75); - backdrop-filter: blur(0.5rem); - padding: 0.2rem 0.35rem; - border-radius: 3px; - line-height: 1.2; - } - } - } - & > p { display: none } - - &.center { - justify-content: center; - } - &.full-width { - & > figure { - flex-shrink: unset; - img { - width: 100%; - } - } - } -} - -/* sidenote shortcode */ - -@media screen and (max-width: 1199px) { - .sidenote { - border: 1px solid var(--block-background-color); - padding: .75rem 1rem; - border-radius: 0.5rem; - line-height: 1.5; - } - .sidenote-title { - font-size: 1rem; - text-align: right; - font-style: italic - } -} - -@media screen and (min-width: 1200px) { - .sidenote { - position: absolute; - left: calc(50% + var(--page-width) / 2); - margin-left: 2rem; - max-width: 20rem - } -} - -.sidenote-title { - margin: 0.5rem 0 -} - -.sidenote-content { - font-size: 1rem -} - -/* blog links */ - -.linkroll { - display: flex; - flex-wrap: wrap; - gap: 1rem; -} - -a.blog-link { - position: relative; - background-color: var(--block-background-color); - text-decoration: none; - color: var(--text-color); - padding: 1rem 2rem; - padding-right: 4rem; - border-radius: 1rem; - width: calc(50% - 2rem); - box-sizing: border-box; - overflow: hidden; - - h4, p { - margin: 0; - font-size: 1.2rem; - } - - p { - line-height: 1.5; - } - - .link-content { - z-index: 10; - } - - img { - --size: 5rem; - display: block; - position: absolute; - right: -1rem; - bottom: -1rem; - width: var(--size); - height: var(--size); - border-radius: 100%; - z-index: 0; - } -} - -@media screen and (max-width: 768px) { - a.blog-link { - font-size: 1.2rem; - padding: 0.5rem 1rem; - padding-right: 2rem; - width: 100%; - } -} - -a.podcast-link { - text-decoration: none; - color: inherit; - width: calc(25% - 1rem); - .link-image { - overflow: hidden; - border-radius: 5px; - img { margin: 0 } - } -} diff --git a/assets/css/global.scss b/assets/css/global.scss index 51261ee8..2cfdb01f 100644 --- a/assets/css/global.scss +++ b/assets/css/global.scss @@ -8,7 +8,5 @@ @import "components/pages"; @import "components/taxonomy"; @import "components/postlist"; -@import "components/shortcodes"; @import "components/card"; -@import "components/footer"; @import "components/global-search"; diff --git a/content/linkroll.md b/content/linkroll.md index f87cc821..59e0bd37 100644 --- a/content/linkroll.md +++ b/content/linkroll.md @@ -11,7 +11,7 @@ aliases: ## 我常读的中文博客 -
+
{{< link link="https://www.velasx.com/" title="Velas 电波站" >}} {{< link link="https://brocalife.com/" title="白洛嘉" >}} {{< link link="https://onojyun.com/" title="莫比乌斯" >}} @@ -33,7 +33,7 @@ aliases: ## 我常听的中文播客 -
+
{{< link type="podcast" title="独树不成林" link="https://podcasts.apple.com/cn/podcast/%E7%8B%AC%E6%A0%91%E4%B8%8D%E6%88%90%E6%9E%97/id1711052890" image="https://image.guhub.cn/uPic/2025/06/Fp3PROfjHhWN5OjBQf6Y8lUh3KkB.png@small.png" >}} {{< link type="podcast" title="碳基生物生存指南" link="https://podcasts.apple.com/cn/podcast/%E7%A2%B3%E5%9F%BA%E7%94%9F%E7%89%A9%E7%94%9F%E5%AD%98%E6%8C%87%E5%8D%97/id1707385930" image="https://image.guhub.cn/uPic/2025/06/Fj8-4YU1LHRuvPF76MLRlxPjzOON.png@small.png" >}} {{< link type="podcast" title="没理想编辑部" link="https://podcasts.apple.com/cn/podcast/%E6%B2%A1%E7%90%86%E6%83%B3%E7%BC%96%E8%BE%91%E9%83%A8/id1494093522" image="https://image.guhub.cn/uPic/2025/06/aHR0cHM6Ly9jZG4udmlzdG9waWEuY29tLmNuL2ltZy9wb2RjYXN0LW1seGZtLXYxLmpwZw==.jpg@small.jpeg" >}} diff --git "a/content/posts/\344\270\215\344\274\232\350\257\264\344\271\246\347\203\202\347\232\204\350\257\273\350\200\205\344\270\215\346\230\257\345\245\275\350\257\273\350\200\205.md" "b/content/posts/\344\270\215\344\274\232\350\257\264\344\271\246\347\203\202\347\232\204\350\257\273\350\200\205\344\270\215\346\230\257\345\245\275\350\257\273\350\200\205.md" index 29c19504..9b85d5bf 100644 --- "a/content/posts/\344\270\215\344\274\232\350\257\264\344\271\246\347\203\202\347\232\204\350\257\273\350\200\205\344\270\215\346\230\257\345\245\275\350\257\273\350\200\205.md" +++ "b/content/posts/\344\270\215\344\274\232\350\257\264\344\271\246\347\203\202\347\232\204\350\257\273\350\200\205\344\270\215\346\230\257\345\245\275\350\257\273\350\200\205.md" @@ -3,7 +3,7 @@ title: 不会说书烂的读者不是好读者 date: 2024-12-18 22:07:00 draft: false toc: true -tags: +tags: - 阅读 --- @@ -21,10 +21,10 @@ tags: 读书很容易变成一件[为了做而做](/posts/为了做而做的问题在哪/)的事情，绝大多数读书人，也都是从「为了读书而读书」这个阶段开始的。毕竟在没读过书之前，人当然说不出读书有什么好；被「读点书吧」的思想鼓励之后，真的读了不少书，才有可能对「为什么读书？」这个问题有些思考。 -{{% sidenote "摇晃尸体的凶手如是说" "> 就我观察到的，现代的短视频、书本、各种文章，都反映了当今文化中，一种「二极管」式的思想——人们的生活被拆成了「工作学习」和「娱乐消遣」两部分，并且大家都习以为常。" %}} - 这里要给「读书」下个定义。不少人会把读书分为「为了学业而读书」和「读闲书」，这一思想和我在《[摇晃尸体的凶手如是说](/posts/摇晃尸体的凶手如是说/)》里讨论的「工作学习」和「娱乐消遣」二分法很类似。 +> 就我观察到的，现代的短视频、书本、各种文章，都反映了当今文化中，一种「二极管」式的思想——人们的生活被拆成了「工作学习」和「娱乐消遣」两部分，并且大家都习以为常。 + 有趣的就来了，一个学文学的读《尤利西斯》，和一个学工程学的读《尤利西斯》，两者的行为相同但不同质，尽管他们读的是同一本书。 可见「读书」作为一种行为，在表现上是没有多少不同的，最多有一些读书方法上的差异。「什么是读书？」其实就是在问「为了什么读书？」 @@ -57,8 +57,6 @@ tags: ## 为什么说书烂？ -{{% sidenote "[ONO](https://onojyun.com/) 说：" "看完《认知觉醒》有点被气到，然后自己做了一份认知束缚的PPT，跟助理「上课」实验理解和类比，把结构拎出来做了一个重新的整合，我舒服多了哈哈哈。很少有书可以把我气到我想要重新写一次。" %}} - 说一本书烂有很多原因，但大致上可以分为两种：一是觉得作者在放屁，观点不合；二是觉得作者屁话太多，结构混乱。这两种也可以简单地表述为一句话：这书我读起来不爽了。 说书烂，一方面显示读者敢于挑战某种意义上的权威，或者说不把书本视作权威，这是态度上的；另一方面，也证明了读者自身的思辨能力，能够看破书本看似高大上的包装和其他人的赞美之词，表达自己的独到见解。 diff --git "a/content/posts/\344\273\200\344\271\210\344\271\237\344\270\215\345\201\232\347\232\204\350\211\272\346\234\257.md" "b/content/posts/\344\273\200\344\271\210\344\271\237\344\270\215\345\201\232\347\232\204\350\211\272\346\234\257.md" index 1d9bc6ae..82222d87 100644 --- "a/content/posts/\344\273\200\344\271\210\344\271\237\344\270\215\345\201\232\347\232\204\350\211\272\346\234\257.md" +++ "b/content/posts/\344\273\200\344\271\210\344\271\237\344\270\215\345\201\232\347\232\204\350\211\272\346\234\257.md" @@ -19,9 +19,7 @@ toc: true 最近水星在白羊座逆行，做事其实会有些急躁。在结束 [Heart Hunter](https://eltrac.itch.io/heart-hunter) 的开发之后，我很快就有了新的游戏想法。由于这个新想法体量很小，需求也相对明确，所以我想要很快地就做出一个可以玩的原型出来。大概也是因为想起了之前和 [Zeee](https://www.velasx.com) 发邮件时，他引用的另一句印在我脑子里的话。[^1] -因为之前遇到怎么也修不好的 bug，绝望之中下载了 AI 驱动的代码编辑器 Cursor，居然只用了五分钟就解决了困扰我三天的问题；之后还用 Cursor 实现了一些较小且明确的需求，非常丝滑。抱着「AI 可不会水逆！」的心态，我下载了免费的 Trae，试图在一天内*用人类语言编程*做出一个可玩的原型。 - -{{< sidenote "🫤" "我不喜欢这样，我感觉我被 AI 剥夺了编程的乐趣，而且这是我自己导致的。" >}} +因为之前遇到怎么也修不好的 bug，绝望之中下载了 AI 驱动的代码编辑器 Cursor，居然只用了五分钟就解决了困扰我三天的问题；之后还用 Cursor 实现了一些较小且明确的需求，非常丝滑。抱着「AI 可不会水逆！」的心态，我下载了免费的 Trae，试图在一天内*用人类语言编程*做出一个可玩的原型。[^4] 不过，因为我的急躁，在调教 AI 的时候，我完全静不下心来写清晰的提示词，也不想仔细审查 AI 生成的代码。只要发现代码行为与预期不一致，我就描述给 AI 让它分析原因并改进。更坏的是，由于我完全不熟悉 AI 编写的代码，等我真的想要自己动手写的时候，发现完全无从下手，而且，我还在 AI 生成的代码中发现了很多冗余和不合理的地方，我也不知道从哪里改起。 @@ -69,4 +67,5 @@ toc: true [^1]: “你做的前十个游戏都是垃圾，所以赶紧做掉吧！” [^2]: 兴许是害怕自己不能做出点值得被记住的东西而引发的死亡焦虑吧 -[^3]: 好吧，或许也没那么容易，需要一些社交技巧和人际交往的经验才行 \ No newline at end of file +[^3]: 好吧，或许也没那么容易，需要一些社交技巧和人际交往的经验才行 +[^4]: 我不喜欢这样，我感觉我被 AI 剥夺了编程的乐趣，而且这是我自己导致的。 diff --git a/layouts/_partials/footer.html b/layouts/_partials/footer.html index a4fbd231..6f9a9126 100644 --- a/layouts/_partials/footer.html +++ b/layouts/_partials/footer.html @@ -1,15 +1,19 @@ -