Merge pull request #58 from brklntmhwk/57-tweak

refactor(overall): ✨ tweak

.github/PULL_REQUEST_TEMPLATE/03_tweak.md

@@ -1,3 +1,5 @@
+<!-- Title Format of Pull Request: refactor(overall) ✨ tweak -->
+
 ## Changes
 <!-- List up changes you've made below. -->
 
@@ -6,7 +8,7 @@
 ## Checklist
 <!-- Let team members know what to check in the peer review process. -->
 
-- Potential side-effects arisen from the changes
+- Potential side-effects arising from the changes
 
 ## Notes
 <!-- Add whatever you want to let team members know about the changes. Write "Nothing" if you have nothing special. -->

src/components/Card/Card.astro

@@ -32,17 +32,17 @@ if (isElementCard(Astro.props)) {
   .card {
     background-color: var(--bg);
     max-width: 100%;
-    height: 15rem;
+    height: 12rem;
     display: flex;
     flex-direction: column;
-    gap: 0.525rem;
+    gap: 0.325rem;
     break-inside: avoid;
     &:hover {
       background-color: var(--bg-hover);
     }
     & :global(.card-image) {
-      max-height: 8.75rem;
-      min-height: 6.75rem;
+      max-height: 7.125rem;
+      min-height: 5.25rem;
       padding: 0.25rem;
       display: flex;
       justify-content: center;
@@ -51,13 +51,34 @@ if (isElementCard(Astro.props)) {
         width: 100%;
         height: 100%;
       }
+      @media (min-width: 640px) {
+        max-height: 8.75rem;
+        min-height: 6.75rem;
+      }
     }
     & :global(.card-content) {
-      font-size: 0.925rem;
+      font-size: 0.725rem;
       padding: 0.175rem 0.325rem;
       overflow-y: auto;
+      @media (min-width: 640px) {
+        font-size: 0.925rem;
+      }
     }
     @media (min-width: 320px) {
+      max-width: 8.5rem;
+    }
+    @media (min-width: 400px) {
+      max-width: 10.25rem;
+    }
+    @media (min-width: 480px) {
+      max-width: 12.05rem;
+    }
+    @media (min-width: 640px) {
+      max-width: 14.35rem;
+      height: 15rem;
+      gap: 0.525rem;
+    }
+    @media (min-width: 820px) {
       max-width: 18rem;
     }
     @media (min-width: 1280px) {

src/components/PhotoGallery/PhotoGalleryItem.astro

@@ -31,7 +31,7 @@ const createdAt = new Date(created_at);
 const dateDiff = getTimeDiff(createdAt, locale);
 ---
 
-<Card borderType="pixel" isAnimated>
+<Card borderType="solid" isAnimated>
   <a
     aria-label={`${t.data.photo_gallery_item.photo_label}${order}`}
     href={`${links.html}?utm_source=${toSnakeCase(meta.data.site.title)}&utm_medium=referral`}
@@ -64,7 +64,7 @@ const dateDiff = getTimeDiff(createdAt, locale);
 <style>
   .photo {
     width: 100%;
-    max-height: 10.875rem;
+    max-height: 7.875rem;
     object-fit: cover;
   }
   .photo-metadata {

src/components/elements/Callout/callout.css.ts

@@ -116,7 +116,7 @@ export const calloutVariants = styleVariants({
     vars: {
       [calloutKind]: 'note',
       [fgColor]: 'hsla(51, 65%, 32%, 1)',
-      [bgColor]: 'hsla(51, 75%, 65%, 1)',
+      [bgColor]: 'hsla(55, 60%, 67%, 1)',
     },
     '@media': {
       '(prefers-color-scheme: dark)': {

src/content/blog/en/astro-and-front-matter-cms-combi.mdx

@@ -14,11 +14,14 @@ tags:
     - vscode
 level: 1
 description: Detailed explanations of how Front Matter CMS could be the best partner for Astro among all headless CMS, and the configurations I made with some demos.
-modifiedAt: 2024-08-29T02:47:27.060Z
+modifiedAt: 2024-09-11T05:07:00.580Z
 ---
 
 ## Intro
 
+> [!quote] One Phrase
+> — My favorite words: "All-in-One".
+
 Unlike other headless CMS, articles of this website are edited in and posted from local, in the VSCode editor. I believe this is especially beneficial to developers who build and run their own tech blog or the likes.
 
 Here, I'm walking you through the beautiful harmony between [Astro](https://astro.build/) and [Front Matter CMS](https://frontmatter.codes/) taking my website's example. For more information about it, see this article.

src/content/blog/en/obsidian-knowledge-base.mdx

@@ -1,11 +1,11 @@
 ---
 draft: published
-level: 2
+level: 3
 type: blog
 title: Create an Obsidian starter kit for knowledge base "NPKB"
 publishedAt: 2024-09-05T04:11:06.403Z
 fmContentType: blog
-modifiedAt: 2024-09-06T03:44:52.400Z
+modifiedAt: 2024-09-11T06:08:39.696Z
 category:
   metadata: en/categories
   slug: learning
@@ -14,7 +14,7 @@ tags:
   slugList:
     - obsidian
     - javascript
-description: Building one's own knowledge base on Obsidian is a daunting task. Here, you'll learn about the starter kit I created with some notable points like the Evergreen Note ethos.
+description: Building one's own knowledge base on Obsidian is a daunting task. Here, you'll learn about my starter kit and the notable points like the Evergreen Note ethos.
 ---
 
 ## Intro
@@ -80,7 +80,7 @@ Before getting into the details, here are some demos of NPKB.
 As a starting point rather than a hub of all notes, the home page plays a pivotal role in:
 
 - giving you access to secondarily upper-class notes
-  - Daily Notes from the calendar or the Recent Daily Notes section, [MOC](#mocmap-of-content) from the Map of Contents section, etc.
+  - More specifically, Daily Notes, [MOC](#mocmap-of-content), etd. They are accessible from the calendar or the Recent Daily Notes section, and from the Map of Contents section respectively
 - reminding you of the presence of notes waiting to be raised
   - You can see how long they've been staying floated (as a boat note) from the Floating Boat Notes section
   - As for the meaning of boat note, see [the evergreen ethos](#the-evergreen-ethos) section.
@@ -211,7 +211,7 @@ The advantages of MOC are:
     - How to prevent food from losing its nutritions during cooking
     - 10 healthy vegetables
     - A healthy miso soup with broccoli, carrot, and coriander
-- Able to create it from any angles independent of folders, categories, etc.
+- Able to create it from any free angles independent of folders, categories, etc.
 - Able to connect the dots putting related notes to the topic together
   - Helps you understand the topic more deeply
 
@@ -235,7 +235,7 @@ The advantages of this system are as follows:
 - Clearly able to tell to what extent notes have grown at a glance
   - NPKB has a data table for this
 - Helps you prioritize note-taking
-  - e.g., Make connections among this boat note and others first!
+  - e.g., This boat note has been floating around for 100 days... Maybe I should handle it first!
 - Keeps you aware of the importance of making as more connections as possible among notes
 
 Incidentally, I determined the classification above referring to [Bryan Jenks](https://notes.bryanjenks.dev/Z/HOME).

src/content/blog/en/pomodoro-shortcut.mdx

@@ -3,7 +3,7 @@ title: Free pomodoro timer shortcut built only with the genuine Apple Clock app
 draft: published
 publishedAt: 2024-08-08T03:05:43.193Z
 type: blog
-modifiedAt: 2024-08-29T02:50:20.006Z
+modifiedAt: 2024-09-11T05:14:58.431Z
 category:
   slug: learning
   metadata: en/categories
@@ -18,6 +18,9 @@ description: Learn how to create a pomodoro timer shortcut with the Apple Clock
 
 ## Intro
 
+> [!quote] ひと言
+> — Sometimes, something seemingly unproductive turns out not.
+
 [The Pomodoro® Technique](https://www.pomodorotechnique.com/) plays a pivotal role in enhancing our productivity in modern society and there has been a bunch of pomodoro timer apps available in app stores.
 
 That said, it turned out that few of them were really my cup of tea. Some have very limited features for free tier users, whereas some have a lot of bells and whistles that I mightn't use. Given that, I embarked on creating it on my own with the Apple shortcut.

src/content/blog/ja/astro-and-front-matter-cms-combi.mdx

@@ -14,11 +14,14 @@ tags:
     - vscode
 level: 1
 description: Astro製ウェブサイトのヘッドレスCMSにどうしてFront Matter CMSなのか？という疑問から、チュートリアルでは学べない詳細な設定まで実際のデモも交えて説明する
-modifiedAt: 2024-08-29T02:45:40.496Z
+modifiedAt: 2024-09-11T05:05:43.432Z
 ---
 
 ## 導入
 
+> [!quote] ひと言
+> — 好きな言葉「オールインワン」
+
 他のヘッドレス CMS と違い、当ウェブサイトの記事たちは VSCode のエディタ、つまりローカルで編集・管理されています。これは、個人ウェブサイトを開発・運営している開☆発☆者の皆さんにとっては特に大きなメリットではないでしょうか。
 
 ここからは、JS フレームワーク「[Astro](https://astro.build/)」で作ったウェブサイトを例に、[Front Matter CMS](https://frontmatter.codes/)との連携が完了するまでを見ていきます。当サイトの技術構成など、詳細についてはこちらの記事をご覧ください。

src/content/blog/ja/obsidian-knowledge-base.mdx

@@ -1,11 +1,11 @@
 ---
 draft: published
-level: 2
+level: 3
 type: blog
 title: Obsidian でナレッジベース用のスターターキット「NPKB」を作った
 publishedAt: 2024-09-05T04:10:55.070Z
 fmContentType: blog
-modifiedAt: 2024-09-06T03:49:25.367Z
+modifiedAt: 2024-09-11T06:09:30.765Z
 category:
   metadata: ja/categories
   slug: learning
@@ -30,7 +30,7 @@ description: Obsidian でナレッジベースを築き上げるのは骨が折
 
 - Obsidian を使ってナレッジベースを作りたいが、どこから始めたらいいかわからない
 - Notion や Evernote 等のノートアプリから Obsidian に移行したいが、設定が多すぎて圧倒されている
-- Obsidian の膨大な数の設定に頭を悩ませたくない(ただ快適なナレッジベースがすぐに欲しいだけなんだ！)
+- Obsidian の膨大な数の設定に頭を悩ませたくない(ただ快適なナレッジベースが早く欲しいだけなんだ！)
 
 ### 現時点での私の習熟度
 
@@ -80,8 +80,8 @@ https://github.com/brklntmhwk/npkb
 ホームページは、全ノートのハブ(中心地)というよりは始まりの場所のような位置づけになります。そして次のような重要な役割を果たします。
 
 - ホームページの次に大きなノートへのアクセスポイントになる
-  - デイリーノートはカレンダーや「Recent Daily Notes」から、[MOC](#mocmap-of-content)は「Map of Contents」からそれぞれアクセスできる
-- 育成を待つノートたちの存在に気づかせてくれる
+  - 具体的には、デイリーノートや[MOC](#mocmap-of-content)のこと。それぞれカレンダーや「Recent Daily Notes」、そして「Map of Contents」からアクセスできる
+- 世話を待つノートたちの存在に気づかせてくれる
   - 「Floating Boat Notes」で作成されてから漂流し続けているノートの一覧が確認できる
   - ボートノートの意味については、[the evergreen ethos](#エバーグリーンの精神)を参照のこと
 - 散らばったランダムな思考やアイデアをまとめて洗練させるのに役立つ
@@ -211,7 +211,7 @@ MOC のメリットは次の通りです。
     - 調理の過程でどうやったら栄養の流出を食い止められるか
     - 健康な野菜 10 選
     - ブロッコリー、人参、パクチーで作るヘルシーな味噌汁
-- フォルダ構造などに左右されずに様々な視点から作れる
+- フォルダ構造などに左右されずに様々な視点から自由に作れる
 - トピックに関連するノートを集める過程で点と点が繋がる感覚を得られる
   - トピックについてより深い理解が得られる
 
@@ -225,7 +225,7 @@ MOC のメリットは次の通りです。
 
 - `⛵ Stage 1. ボートノート(Boat note):`できたばかりのノートでまだ他のノートとの繋がりがなく孤立している
 - `🌱 Stage 2. 苗木(Seedling):`コンテンツが増え、他ノートとの繋がりも少しできたが、まだ成長過程
-- `🌿 Stage 3. 萌芽(Budding):`コンテンツが充実してきて、他ノートとの繋がりも沢山できているが、まだ成長の余地がありそう
+- `🌿 Stage 3. 萌芽(Budding):`コンテンツが充実してきて他ノートとの繋がりも沢山できているが、まだ成長の余地がありそう
 - `🌲 Stage 4. エバーグリーンの森(Evergreen forest):`十分に成熟しきった、いわゆる「エバーグリーンノート」
 
 私は、何か興味深いものを見つけたらとりあえずノートを作って、そのメディアへのリンクだけひとまず貼り付けています。そして後でコンテンツや Wiki リンクを追加しています。
@@ -235,7 +235,7 @@ MOC のメリットは次の通りです。
 - ノートがどの程度育っているのかが一目でわかる
   - NPKB にはエバーグリーン用のデータテーブルがある
 - ノートに優先順位がつけやすくなる
-  - 例:「このボートノートと他のノートのリンクを優先しよう！」
+  - 例:「このボートノートはもう 100 日漂流してるから先に編集しよう！」
 - ノート間のリンクをできる限り多く繋げようという意識づけになる
 
 ちなみに、上記の分類は[Bryan Jenks 氏](https://notes.bryanjenks.dev/Z/HOME)を参考にしました。

src/content/blog/ja/pomodoro-shortcut.mdx

@@ -1,9 +1,9 @@
 ---
-title: 【無料ダウンロード】ポモドーロタイマー用ショートカットを Apple 純正の時計アプリだけで作ってみた
+title: 【無料】ポモドーロタイマー用ショートカットを Apple 純正の時計アプリだけで作ってみた
 draft: published
 publishedAt: 2024-08-08T03:05:43.193Z
 type: blog
-modifiedAt: 2024-08-29T02:52:20.385Z
+modifiedAt: 2024-09-11T05:15:35.083Z
 category:
   slug: learning
   metadata: ja/categories
@@ -18,6 +18,9 @@ description: Apple のショートカット機能と純正時計アプリだけ
 
 ## 導入
 
+> [!quote] ひと言
+> — 一見非生産的に思えても実はそうでもないこともある
+
 [ポモドーロテクニック(The Pomodoro® Technique)](https://www.pomodorotechnique.com/)は現代社会において人々の生産性を高める重要な役割を果たしています。そしてアプリ市場には数多のポモドーロタイマーアプリがあります。
 
 しかし、私個人の要望をピッタリ満たしてくれるものは残念ながら見つかりませんでした。あるものは無料ユーザへの機能制限が厳しく、またあるものは「ポモドーロタイマーにそこまでは求めてない...」と思ってしまう程に機能が盛り沢山。

src/content/page/en/about.mdx

@@ -1,14 +1,14 @@
 ---
 title: about
 type: page
-modifiedAt: 2024-09-09T08:43:05.042Z
+modifiedAt: 2024-09-11T04:03:21.293Z
 ---
 
 ## About my website
 
 Here, I offer what I've learnt or experienced in daily lives by posting blog articles or bulletins.
 
-This website is built using [Astro](https://astro.build/), [SolidJS](https://www.solidjs.com/), [Cloudflare Pages](https://pages.cloudflare.com/), etc. If you're interested in more details, see the article below.
+This website is built using such frameworks and service as [Astro](https://astro.build/), [SolidJS](https://www.solidjs.com/), [Cloudflare Pages](https://pages.cloudflare.com/), etc. If you're interested in more details, see the article below.
 
 https://younagi.dev/blog/astro-website/
 
@@ -45,7 +45,7 @@ When it comes to what I offer, I roughly stick to the following principles:
 Articles categorized as "[Learning](https://younagi.dev/blog/categories/learning/)" have a "Level" field indicated as five stars. Bear in mind that this is totally based on my subjective judgment considering the criteria below.
 
 - Time required
-  - How long it takes for me to get it done
+  - How long and how much trouble it takes for me to get it done
 - Complexity
   - How complex it is to understand
 - Level of abstraction