(fonts,home) extract japanese intro
This commit is contained in:
parent
e13f53e5e3
commit
4c4eb9ed2a
13
src/components/cards/Intro.astro
Normal file
13
src/components/cards/Intro.astro
Normal file
|
@ -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>
|
|
@ -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>
|
|
7
src/content/misc/intro.md
Normal file
7
src/content/misc/intro.md
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
---
|
||||||
|
title: かもし
|
||||||
|
---
|
||||||
|
|
||||||
|
初めましての方は初めまして、ポーランド出身で日本語を勉強している人です。間違いがあったらすみません。
|
||||||
|
|
||||||
|
こちらは個人的なウェブサイトで、「かもし」というのは個人サークル名といってもいいです。日本語を練習するため日本語を使って色々なことを書きます。英語も使います。趣味はプログラミングや日本語や日本の歌や同人など色々なことです。質問があったらメールを送信してくれてください。
|
|
@ -1,7 +1,9 @@
|
||||||
---
|
---
|
||||||
|
import Intro from "@components/cards/Intro.astro";
|
||||||
import ContactCard from "../components/cards/Contact.astro";
|
import ContactCard from "../components/cards/Contact.astro";
|
||||||
import PhotoCard from "../components/cards/Photo.astro";
|
import PhotoCard from "../components/cards/Photo.astro";
|
||||||
import Base from "./Base.astro";
|
import Base from "./Base.astro";
|
||||||
|
|
||||||
---
|
---
|
||||||
<Base>
|
<Base>
|
||||||
<main class="l-home">
|
<main class="l-home">
|
||||||
|
@ -10,13 +12,7 @@ import Base from "./Base.astro";
|
||||||
</article>
|
</article>
|
||||||
<aside class="l-home__aside">
|
<aside class="l-home__aside">
|
||||||
<!-- -->
|
<!-- -->
|
||||||
<section class="p-card intro-jp">
|
<Intro />
|
||||||
<h2 class="intro-jp__heading">かもし</h2>
|
|
||||||
<div class="intro-jp__text">
|
|
||||||
<p>初めましての方は初めまして、ポーランド出身で日本語を勉強している人です。間違いがあったらすみません。</p>
|
|
||||||
<p>こちらは個人的なウェブサイトで、「かもし」というのは個人サークル名といってもいいです。日本語を練習するため日本語を使って色々なことを書きます。英語も使います。趣味はプログラミングや日本語や日本の歌や同人など色々なことです。質問があったらメールを送信してくれてください。</p>
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<!-- -->
|
<!-- -->
|
||||||
<PhotoCard />
|
<PhotoCard />
|
||||||
<!-- -->
|
<!-- -->
|
||||||
|
|
11
src/styles/_fonts.scss
Normal file
11
src/styles/_fonts.scss
Normal file
|
@ -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 ゴシック', 'MS Gothic', HiraKakuProN-W3, 'TakaoExゴシック', TakaoExGothic, 'MotoyaLCedar', 'Droid Sans Japanese', sans-serif;
|
||||||
|
--serif: 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', '游明朝', '游明朝体', YuMincho, 'Yu Mincho', 'MS 明朝', 'MS Mincho', HiraMinProN-W3, 'TakaoEx明朝', TakaoExMincho, 'MotoyaLCedar', 'Droid Sans Japanese', serif;
|
||||||
|
}
|
|
@ -15,9 +15,6 @@
|
||||||
--c-shadow: 0deg 0% 76%;
|
--c-shadow: 0deg 0% 76%;
|
||||||
--c-bg-main: hsl(0, 0%, 98%);
|
--c-bg-main: hsl(0, 0%, 98%);
|
||||||
|
|
||||||
|
|
||||||
/* Fonts */
|
|
||||||
|
|
||||||
// size
|
// size
|
||||||
--fs-xs: 0.694rem;
|
--fs-xs: 0.694rem;
|
||||||
--fs-sm: 0.833rem;
|
--fs-sm: 0.833rem;
|
||||||
|
@ -25,11 +22,6 @@
|
||||||
--fs-lg: 1.2rem;
|
--fs-lg: 1.2rem;
|
||||||
--fs-xl: 1.44rem;
|
--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
|
||||||
--shadow-l:
|
--shadow-l:
|
||||||
0.7px 0.6px 0.9px hsl(var(--c-shadow) / 0.39),
|
0.7px 0.6px 0.9px hsl(var(--c-shadow) / 0.39),
|
||||||
|
|
|
@ -39,7 +39,7 @@
|
||||||
height: 18em;
|
height: 18em;
|
||||||
|
|
||||||
&__heading {
|
&__heading {
|
||||||
font-family: serif;
|
font-family: var(--serif);
|
||||||
font-size: 2.5rem;
|
font-size: 2.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
// Config
|
// Config
|
||||||
@use 'root';
|
@use 'root';
|
||||||
@use 'reset';
|
@use 'reset';
|
||||||
|
@use 'fonts';
|
||||||
@use 'base';
|
@use 'base';
|
||||||
@use 'utils';
|
@use 'utils';
|
||||||
@use 'markdown';
|
@use 'markdown';
|
||||||
|
|
Loading…
Reference in a new issue