(fonts,home) extract japanese intro

src/components/cards/Intro.astro

@@ -0,0 +1,13 @@
+---
+import { getEntryBySlug } from "astro:content";
+
+const intro = await getEntryBySlug("misc", "intro");
+const { Content } = await intro.render();
+---
+
+<section class="p-card intro-jp" lang="ja-JP">
+  <h2 class="intro-jp__heading">{intro.data.title}</h2>
+  <div class="intro-jp__text">
+    <Content />
+  </div>
+</section>

src/components/cards/Notice.astro

@@ -1,14 +0,0 @@
----
-const notice = {
-	header: "Work in Progress...",
-	content: [
-		"This website is a little bit broken, because I am rewriting the styles!"
-	]
-};
----
-<section class="p-card">
-  <h2 class="p-card__header">{notice.header}</h2>
-  {notice.content.map(item => (
-    <p>{item}</p>
-  ))}
-</section>

src/content/misc/intro.md

@@ -0,0 +1,7 @@
+---
+title: かもし
+---
+
+初めましての方は初めまして、ポーランド出身で日本語を勉強している人です。間違いがあったらすみません。
+
+こちらは個人的なウェブサイトで、「かもし」というのは個人サークル名といってもいいです。日本語を練習するため日本語を使って色々なことを書きます。英語も使います。趣味はプログラミングや日本語や日本の歌や同人など色々なことです。質問があったらメールを送信してくれてください。

src/layouts/Home.astro

@@ -1,7 +1,9 @@
 ---
+import Intro from "@components/cards/Intro.astro";
 import ContactCard from "../components/cards/Contact.astro";
 import PhotoCard from "../components/cards/Photo.astro";
 import Base from "./Base.astro";
+
 ---
 <Base>
   <main class="l-home">
@@ -10,13 +12,7 @@ import Base from "./Base.astro";
     </article>
     <aside class="l-home__aside">
       <!--  -->
-      <section class="p-card intro-jp">
-        <h2 class="intro-jp__heading">かもし</h2>
-        <div class="intro-jp__text">
-          <p>初めましての方は初めまして、ポーランド出身で日本語を勉強している人です。間違いがあったらすみません。</p>
-          <p>こちらは個人的なウェブサイトで、「かもし」というのは個人サークル名といってもいいです。日本語を練習するため日本語を使って色々なことを書きます。英語も使います。趣味はプログラミングや日本語や日本の歌や同人など色々なことです。質問があったらメールを送信してくれてください。</p>
-        </div>
-      </section>
+      <Intro />
       <!--  -->
       <PhotoCard />
 			<!--  -->

src/styles/_fonts.scss

@@ -0,0 +1,11 @@
+
+:root {
+  --san-serif: Helvetica, Arial, sans-serif;
+  --serif: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
+  --monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+}
+
+:lang(ja) {
+  --san-serif: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック', '游ゴシック体', YuGothic , 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ ゴシック', 'MS Gothic', HiraKakuProN-W3, 'TakaoExゴシック', TakaoExGothic, 'MotoyaLCedar', 'Droid Sans Japanese', sans-serif;
+  --serif: 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', '游明朝', '游明朝体', YuMincho, 'Yu Mincho', 'ＭＳ 明朝', 'MS Mincho', HiraMinProN-W3, 'TakaoEx明朝', TakaoExMincho, 'MotoyaLCedar', 'Droid Sans Japanese', serif;
+}

src/styles/_root.scss

@@ -15,9 +15,6 @@
   --c-shadow: 0deg 0% 76%;
   --c-bg-main: hsl(0, 0%, 98%);
 
-
-  /* Fonts */
-
   // size
   --fs-xs: 0.694rem;
   --fs-sm: 0.833rem;
@@ -25,11 +22,6 @@
   --fs-lg: 1.2rem;
   --fs-xl: 1.44rem;
 
-  // typeface
-  --san-serif: Helvetica, Arial, sans-serif;
-  --serif: Charter, 'Bitstream Charter', 'Sitka Text', Cambria, serif;
-  --monospace: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
-
   // shadow
   --shadow-l:
     0.7px 0.6px 0.9px hsl(var(--c-shadow) / 0.39),

src/styles/layouts/_home.scss

@@ -39,7 +39,7 @@
   height: 18em;
 
   &__heading {
-    font-family: serif;
+    font-family: var(--serif);
     font-size: 2.5rem;
   }
 

src/styles/styles.scss

@@ -1,6 +1,7 @@
 // Config
 @use 'root';
 @use 'reset';
+@use 'fonts';
 @use 'base';
 @use 'utils';
 @use 'markdown';