diff --git a/2023-03-26/public/img/logo-slidev.png b/2023-03-26/public/img/logo-slidev.png new file mode 100644 index 0000000..e8d59d1 Binary files /dev/null and b/2023-03-26/public/img/logo-slidev.png differ diff --git a/2023-03-26/slides.md b/2023-03-26/slides.md index ff7b136..9c39f77 100644 --- a/2023-03-26/slides.md +++ b/2023-03-26/slides.md @@ -18,44 +18,175 @@ src: "../reuse/me.md" ## 見出し2 +### 見出し3 + +#### 見出し4 + +##### 見出し5 + +--- +layout: two-cols +--- + +## リスト + - foo - bar + - piyo + - fuga + - hoge +- buzz + +::right:: + +## 順序つきリスト 1. foo 2. bar + 1. piyo + 2. fuga + 1. hoge +3. buzz -### 見出し3 +--- -#### 見出し4 +## テキスト てすとてすと`slidev`てすと -~~てすとてすと~~ +テキスト~~てすとてすと~~テキスト + +テキスト*てすとてすとてすと*テキスト + +テキスト**てすとてすとてすと**テキスト + +> テストテストテストテストテストテストテストテストテストテストテストテスト + +[リンクテキスト](https://ja.sli.dev/) + +--- + +## テーブル + +| Header | Header | 見出し | +| ------ | ------ | ------ | +| Sell | Sell | セル | +| Sell | Sell | セル | + +| Header | Header | 見出し | +| :----- | :----: | -----: | +| Sell | Sell | セル | +| Sell | Sell | セル | + +--- +layout: section +--- + +## セクション見出し Level 2 + +--- +layout: section +--- + +### セクション見出し Level 3 + +--- +layout: center +--- + +## 中央揃え見出し Level 2 + +--- +layout: center +--- + +### 中央揃え見出し Level 3 + +--- +layout: image-left +image: public/img/logo-slidev.png +--- + +## 画像組み合わせ + +--- +layout: quote +--- + +> 引用文 --- +## TypeScript + ```ts import path from "node:path"; import { readdir } from "node:fs"; -type Foo = { - dirList: string[]; -} +/** + * @ref https://ja.sli.dev/ + */ +export type Foo = { + dirList: T[] | string; + bar: Readonly; +}; + +export class SomeError extends Error {}; // exec -(() => { - const dirList = readdir(path.join(process.cwd(), 'src')); -})(); +((args: string) => { + const dirList = readdir(path.join(process.cwd(), args)); +})('src'); ``` -てすとてすとてすと -*てすとてすとてすと* -**てすとてすとてすと** - --- -## てすと +## CSS + +```css +/* セクション見出し用 */ +#app .slidev-layout.section[data-page] { + & h2 { + font-size: 2.5rem; + line-height: 1.4; + color: var(--c-main); + + &::after { + width: 100%; + margin: 0.25em auto 0 auto; + opacity: 0.5; + } + } + + & h3 { + padding: 0; + } +} +``` -| Header | Header | 見出し | -| ------ | ------ | ------ | -| Sell | Sell | セル | +--- + +## HTML + +```html + +
+
+

ken7253

+

Frontend developer

+
+ + +
+ +
+

+ 技術記事を書いたりするのが趣味。
+ 最近はNext.jsを使ったアプリケーションを書いています。
+ インターフェイス設計やアクセシビリティ・SSG関連の技術に興味があります。 +

+
+``` diff --git a/reuse/me.md b/reuse/me.md index 3d308f9..241b119 100644 --- a/reuse/me.md +++ b/reuse/me.md @@ -13,7 +13,7 @@ layout: cover

ken7253

Frontend developer

- +
diff --git a/reuse/styles/base.css b/reuse/styles/base.css index 7fcbf57..be51e5d 100644 --- a/reuse/styles/base.css +++ b/reuse/styles/base.css @@ -5,6 +5,10 @@ font-feature-settings: "palt"; } +#app #slide-content { + border: solid 2px var(--c-base); +} + #app .slidev-layout, #app .slidev-layout { background: var(--c-main-gradient); @@ -39,7 +43,7 @@ deepl-inline-trigger { #app h2 { margin: 0 0 0.25em 0; - padding: 0.25em; + padding: 0.25em 0; border-radius: 7px; letter-spacing: 0.03em; } @@ -53,17 +57,10 @@ deepl-inline-trigger { margin-top: 0.25em; } -/* 中央揃えの場合のレイアウト */ -#app .slidev-layout.center h2::after { - width: 100%; - margin: 0.25em auto 0 auto; - opacity: 0.5; -} - #app h3 { position: relative; width: fit-content; - padding: 0 5px; + padding: 0; } #app h3::after { @@ -78,6 +75,37 @@ deepl-inline-trigger { opacity: 0.3; } +#app h5 { + color: var(--c-accent); +} + +/* 中央揃えの場合のレイアウト */ +#app .slidev-layout.center h2 { + &::after { + width: 100%; + margin: 0.25em auto 0 auto; + opacity: 0.5; + } +} + +/* セクション見出し用 */ +#app .slidev-layout.section { + & h2 { + font-size: 2.5rem; + line-height: 1.4; + + &::after { + width: 100%; + margin: 0.25em auto 0 auto; + opacity: 0.5; + } + } + + & h3 { + padding: 0; + } +} + /* List */ #app ol, #app ul { @@ -117,9 +145,28 @@ deepl-inline-trigger { } /* Table */ -#app th { - font-weight: 700; +#app table { + background-color: #3334; + border-radius: 4px; letter-spacing: 0.05em; + margin-bottom: 8px; + overflow: hidden; + + & tr:hover { + color: var(--c-accent); + } + + & th { + font-weight: 700; + } + + & td { + font-weight: 400; + } + + & tbody tr:last-child { + border: none; + } } /* Paragraph */ @@ -140,9 +187,37 @@ deepl-inline-trigger { /* blockquote */ #app blockquote { - padding-left: 1rem; -} -#app blockquote p, -#app blockquote li { - font-size: 0.95rem; + font-family: monospace; + position: relative; + padding: 8px 1rem 4px 1rem; + border: none; + border-radius: 0; + background-color: #333c; + margin: 0.75rem 0; + + &::before, + &::after { + position: absolute; + display: block; + font-size: 2.5rem; + line-height: 1; + text-shadow: 3px 3px 0 var(--c-main); + } + + &::before { + content: "“"; + top: -0.85rem; + left: 0; + } + + &::after { + content: "”"; + bottom: -1.5rem; + right: 0; + } + + & p, + & li { + font-size: 0.95rem; + } } diff --git a/reuse/styles/filter.svg b/reuse/styles/filter.svg new file mode 100644 index 0000000..a6caeb8 --- /dev/null +++ b/reuse/styles/filter.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/reuse/styles/theme.css b/reuse/styles/theme.css index 995ab8b..a74c0fa 100644 --- a/reuse/styles/theme.css +++ b/reuse/styles/theme.css @@ -1,6 +1,8 @@ :root { - --c-main: red; - --c-secondary: blue; - --c-accent: orange; - --c-main-gradient: linear-gradient(45deg, var(--c-main), var(--c-secondary)); + --c-main: #3d387b; + --c-secondary: #337885; + --c-base: #dbedf3; + --c-accent: #fc6b6b; + --c-main-gradient: linear-gradient(45deg, var(--c-main), rgba(0, 0, 0, 0)), + url("./filter.svg"), var(--c-secondary); }