From bf4aae98c8f067cff3998201395394e5d4da2a88 Mon Sep 17 00:00:00 2001 From: brklntmhwk_dev <86272619+brklntmhwk@users.noreply.github.com> Date: Thu, 12 Sep 2024 03:07:02 +0000 Subject: [PATCH] =?UTF-8?q?refactor(overall):=20=E2=9C=A8=20tweak?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit tweak blog & news articles, the frontmatter config, PR & news templates, and more ✅ Closes: #61 --- .frontmatter/templates/{news.md => news.mdx} | 8 +++ .github/PULL_REQUEST_TEMPLATE/03_tweak.md | 2 +- frontmatter.json | 2 +- src/components/BlogList/BlogList.astro | 4 +- .../BulletinBoard/BulletinBoard.astro | 5 +- src/content/blog/en/astro-website.mdx | 4 +- src/content/i18n/en/translation.yml | 4 +- src/content/i18n/ja/translation.yml | 4 +- .../news/en/created-my-personal-website.mdx | 4 +- .../news/ja/created-my-personal-website.mdx | 4 +- ...recent-activities-from-jun-to-sep-2024.mdx | 4 +- src/pages/[locale]/news/[...page].astro | 8 ++- src/pages/news/[...page].astro | 6 +- src/styles/global.css | 71 ++++++++++++------- 14 files changed, 83 insertions(+), 47 deletions(-) rename .frontmatter/templates/{news.md => news.mdx} (53%) diff --git a/.frontmatter/templates/news.md b/.frontmatter/templates/news.mdx similarity index 53% rename from .frontmatter/templates/news.md rename to .frontmatter/templates/news.mdx index 12340308..5043810a 100644 --- a/.frontmatter/templates/news.md +++ b/.frontmatter/templates/news.mdx @@ -3,3 +3,11 @@ draft: draft --- ## The gist + +- xxx + +--- + +## 概要 + +- xxx diff --git a/.github/PULL_REQUEST_TEMPLATE/03_tweak.md b/.github/PULL_REQUEST_TEMPLATE/03_tweak.md index 79ddc9ee..82d84efa 100644 --- a/.github/PULL_REQUEST_TEMPLATE/03_tweak.md +++ b/.github/PULL_REQUEST_TEMPLATE/03_tweak.md @@ -1,4 +1,4 @@ - + ## Changes diff --git a/frontmatter.json b/frontmatter.json index 45b11930..d69104a4 100644 --- a/frontmatter.json +++ b/frontmatter.json @@ -166,7 +166,7 @@ "filePrefix": null, "clearEmpty": true, "template": "[[workspace]]/.frontmatter/templates/news.md", - "fileType": "md", + "fileType": "mdx", "fields": [ { "title": "Title", diff --git a/src/components/BlogList/BlogList.astro b/src/components/BlogList/BlogList.astro index b7451340..c96b6fc7 100644 --- a/src/components/BlogList/BlogList.astro +++ b/src/components/BlogList/BlogList.astro @@ -99,8 +99,8 @@ const { entries, taxonomies } = Astro.props; font-weight: 700; line-height: 1.325; &:hover { - background-color: var(--bg-hover); - } + background-color: var(--bg-hover); + } @media (min-width: 640px) { font-size: 1.585rem; } diff --git a/src/components/BulletinBoard/BulletinBoard.astro b/src/components/BulletinBoard/BulletinBoard.astro index b7eb3222..1ecfd1a6 100644 --- a/src/components/BulletinBoard/BulletinBoard.astro +++ b/src/components/BulletinBoard/BulletinBoard.astro @@ -64,7 +64,7 @@ const t = await getEntry('i18n', `${locale}/translation`); margin: 0; padding-left: 100%; white-space: nowrap; - animation: bulletinRoll 15s linear infinite; + animation: bulletinRoll 18s linear infinite; li { display: inline; margin: 0 5rem 0 0; @@ -82,6 +82,9 @@ const t = await getEntry('i18n', `${locale}/translation`); font-size: 1.85rem; } } + @media (min-width: 768px) { + animation: bulletinRoll 16s linear infinite; + } } @media (min-width: 1024px) { max-width: 80rem; diff --git a/src/content/blog/en/astro-website.mdx b/src/content/blog/en/astro-website.mdx index 061d4b38..4739d36c 100644 --- a/src/content/blog/en/astro-website.mdx +++ b/src/content/blog/en/astro-website.mdx @@ -2,7 +2,7 @@ title: Build a Personal Website with Astro, Cloudflare Pages, D1, and Front Matter CMS description: A quick tour of my personal blog built with Astro, Cloudflare Pages, D1, and Front Matter CMS. publishedAt: 2024-07-13T00:34:54.000Z -modifiedAt: 2024-09-06T04:01:19.163Z +modifiedAt: 2024-09-12T02:58:57.715Z draft: published type: blog category: @@ -21,7 +21,7 @@ level: 4 ## Intro > [!quote] One phrase -> — In this modern video era, play it in hardcore mode with your personal blog. +> — In this modern video era, play it in hardcore mode without the video platform. It took me 4 months or so to complete the journey through building my personal website up to a minimum decent level. Here, you'll join a quick tour of the whole development experience. diff --git a/src/content/i18n/en/translation.yml b/src/content/i18n/en/translation.yml index 4901b593..e25d4449 100644 --- a/src/content/i18n/en/translation.yml +++ b/src/content/i18n/en/translation.yml @@ -71,8 +71,8 @@ og_image: pages: home: about_section: - title: About this website - description: Here is a web platform for Nagi, just another engineer & creator. He posts his work and writings every so often. + title: Enjoy Playing to The Fullest + description: Here is a web platform for Nagi to post his work and writings. He'll be happy if he can share a sense of excitement and something helpful with you or you feel like "I kind of like it" through his activities. read_more: Read more about him blog_section: title: Latest Blog Entries diff --git a/src/content/i18n/ja/translation.yml b/src/content/i18n/ja/translation.yml index 11068aa9..7cf08760 100644 --- a/src/content/i18n/ja/translation.yml +++ b/src/content/i18n/ja/translation.yml @@ -71,8 +71,8 @@ og_image: pages: home: about_section: - title: このサイトについて - description: ここは凪の作品や書き物を公開する為のプラットフォームです。更新頻度はときたまです。 + title: 遊びの限りを尽くせ + description: ここは凪の作品や書き物を公開する為のプラットフォームです。活動を通してワクワクや有益な情報を共有できたり、「何かイイ」と思ってもらえれば嬉しいです。 read_more: 運営者紹介へ blog_section: title: 最新のブログ記事 diff --git a/src/content/news/en/created-my-personal-website.mdx b/src/content/news/en/created-my-personal-website.mdx index 048e15b7..4620b921 100644 --- a/src/content/news/en/created-my-personal-website.mdx +++ b/src/content/news/en/created-my-personal-website.mdx @@ -2,8 +2,8 @@ title: My personal website built and published! type: news draft: published -publishedAt: 2024-05-13T04:42:53.561Z -modifiedAt: 2024-09-12T00:48:45.359Z +publishedAt: 2024-07-13T04:42:53.000Z +modifiedAt: 2024-09-12T02:54:10.626Z --- Since Feb 22, 2024, I set about to develop my own website, and finished it up to a minimum decent level after 4 months or so. If you're interested in the details of the development, see this article. diff --git a/src/content/news/ja/created-my-personal-website.mdx b/src/content/news/ja/created-my-personal-website.mdx index 1405e2cd..6b6925e1 100644 --- a/src/content/news/ja/created-my-personal-website.mdx +++ b/src/content/news/ja/created-my-personal-website.mdx @@ -1,9 +1,9 @@ --- title: 個人ウェブサイトを開発&立ち上げました！ type: news -publishedAt: 2024-05-13T04:42:38.854Z +publishedAt: 2024-07-13T04:42:38.000Z draft: published -modifiedAt: 2024-09-12T00:48:23.076Z +modifiedAt: 2024-09-12T02:53:55.962Z --- 2024 年 2 月 22 日から、個人サイトの開発に着手しました。そして 4 ヶ月ほどの格闘を経て、公開できる最低限のレベルまでは完成しました。開発の中身についてもし興味があれば、こちらの記事をご覧ください。 diff --git a/src/content/news/ja/recent-activities-from-jun-to-sep-2024.mdx b/src/content/news/ja/recent-activities-from-jun-to-sep-2024.mdx index 1fb02635..24395ee3 100644 --- a/src/content/news/ja/recent-activities-from-jun-to-sep-2024.mdx +++ b/src/content/news/ja/recent-activities-from-jun-to-sep-2024.mdx @@ -2,7 +2,7 @@ title: 最近の活動 2024年6月～9月 publishedAt: 2024-09-11T08:34:48.605Z fmContentType: news -modifiedAt: 2024-09-12T01:12:56.855Z +modifiedAt: 2024-09-12T02:56:01.225Z draft: published --- @@ -16,7 +16,7 @@ draft: published ![ 全てのPCパーツを調達完了 ](../../../assets/images/pc-parts.webp) -今年 8 月から、ゼロからの自作 PC 製作に取り掛かりました。初心者なりに紆余曲折ありましたが何とかやり遂げました。計画から OS のインストールが済むまでにおよそ 1 ヶ月かかりました。 +今年 8 月に、ゼロからの自作 PC 製作に取り掛かりました。初心者なりに紆余曲折ありましたが何とか完成しました。計画から OS のインストールが済むまでにおよそ 1 ヶ月。 1. **パーツ選定:** 1 週間 2. **パーツ調達:** 3～4 日 diff --git a/src/pages/[locale]/news/[...page].astro b/src/pages/[locale]/news/[...page].astro index c69e159b..3de08225 100644 --- a/src/pages/[locale]/news/[...page].astro +++ b/src/pages/[locale]/news/[...page].astro @@ -104,18 +104,22 @@ const t = await getEntry('i18n', `${locale}/translation`); gap: 0.35rem; } } - a.news-title { + .news-title { color: var(--fg); font-size: 1.5rem; font-weight: 700; line-height: 1.35; text-decoration: none; + &:hover { + text-decoration: underline; + text-underline-offset: 5px; + } } } } } @media (min-width: 768px) { - a.news-title { + .news-title { font-size: 1.85rem; } } diff --git a/src/pages/news/[...page].astro b/src/pages/news/[...page].astro index a6f01f1a..433193f3 100644 --- a/src/pages/news/[...page].astro +++ b/src/pages/news/[...page].astro @@ -102,12 +102,16 @@ const t = await getEntry('i18n', `${defaultLang}/translation`); font-weight: 700; line-height: 1.35; text-decoration: none; + &:hover { + text-decoration: underline; + text-underline-offset: 5px; + } } } } } @media (min-width: 768px) { - a.news-title { + .news-title { font-size: 1.85rem; } } diff --git a/src/styles/global.css b/src/styles/global.css index 8cafd93a..aa44b898 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -77,14 +77,10 @@ body { main { grid-area: main; padding: 2.25rem 1.5rem; -} -@media (min-width: 768px) { - main { + @media (min-width: 768px) { padding: 2.25rem 2.75rem; } -} -@media (min-width: 1024px) { - main { + @media (min-width: 1024px) { grid-area: main; padding: 3rem 4rem; overflow-y: auto; @@ -92,54 +88,72 @@ main { } h1 { - font-size: 2.25rem; + font-size: 2.125rem; font-weight: 800; line-height: 1.5; + @media (min-width: 480px) { + font-size: 2.175rem; + } + @media (min-width: 768px) { + font-size: 2.875rem; + } } h2 { - font-size: 1.875rem; + font-size: 1.785rem; font-weight: 700; line-height: 1.4; + @media (min-width: 480px) { + font-size: 1.875rem; + } + @media (min-width: 768px) { + font-size: 2.225rem; + } } h3 { - font-size: 1.625rem; + font-size: 1.615rem; font-weight: 700; line-height: 1.35; + @media (min-width: 480px) { + font-size: 1.675rem; + } + @media (min-width: 768px) { + font-size: 1.875rem; + } } h4 { font-size: 1.325rem; font-weight: 700; line-height: 1.2; + @media (min-width: 480px) { + font-size: 1.375rem; + } + @media (min-width: 768px) { + font-size: 1.585rem; + } } h5 { font-size: 1.215rem; font-weight: 700; line-height: 1.2; + @media (min-width: 480px) { + font-size: 1.275rem; + } + @media (min-width: 768px) { + font-size: 1.325rem; + } } h6 { - font-size: 1.135rem; + font-size: 1.15rem; font-weight: 700; line-height: 1.2; -} - -@media (min-width: 768px) { - h1 { - font-size: 3rem; + @media (min-width: 480px) { + font-size: 1.225rem; } - h2 { - font-size: 2.25rem; - } - h3 { - font-size: 1.875rem; - } - h4 { - font-size: 1.5rem; - } - h5, - h6 { - font-size: 1.25rem; + @media (min-width: 768px) { + font-size: 1.275rem; } } + ul, ol { padding: 0; @@ -147,16 +161,19 @@ ol { li { list-style-type: none; } + img { max-width: 100%; height: auto; border-radius: 0.15rem; } + hr { border: none; border-top: 1px solid var(--line); margin: 1.25rem 0; } + .classic-blue-link { font-size: 1.025rem; color: var(--accent);