テーマを更新 (#47)

* カラーテーマと背景を変更 * 見た目の変更など * サンプルを更新 * 引用符にシャドウを追加 * リンクのサンプルを追加
ken7253 · Jan 12, 2024 · 20030c4 · 20030c4
1 parent 5f20e3b
commit 20030c4
Show file tree

Hide file tree

Showing 6 changed files with 252 additions and 38 deletions.
diff --git a/2023-03-26/public/img/logo-slidev.png b/2023-03-26/public/img/logo-slidev.png
diff --git 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<T extends {}> = {
+  dirList: T[] | string;
+  bar: Readonly<T>;
+};
+
+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
+<script>
+  const foo = (prefix) => `${prefix}-foo`;
+  class SomeError extends Error {};
+</script>
+<div style="display: flex; justify-content: space-between;">
+  <div style="display: flex; flex-direction: column; gap: 16px;">
+    <h1 style="margin: 0 0 0 -3px; line-height: 1;">ken7253</h1>
+    <p style="margin: 0;">Frontend developer</p>
+  </div>
+  <!-- アイコン画像 -->
+  <img alt="" src="https://dairoku-studio.com/ogp-thumbnail.png" style="position:fixed;">
+</div>
+
+<div>
+  <p style="font-size: 1rem; line-height: 2.1;">
+    技術記事を書いたりするのが趣味。<br>
+    最近はNext.jsを使ったアプリケーションを書いています。<br>
+    インターフェイス設計やアクセシビリティ・SSG関連の技術に興味があります。
+  </p>
+</div>
+```
diff --git a/reuse/me.md b/reuse/me.md
@@ -13,7 +13,7 @@ layout: cover
       <h1 style="margin: 0 0 0 -3px; line-height: 1;">ken7253</h1>
       <p style="margin: 0;">Frontend developer</p>
     </div>
-    <img src="https://dairoku-studio.com/ogp-thumbnail.png" style="width: 120px; border-radius: 10px;">
+    <img alt="" src="https://dairoku-studio.com/ogp-thumbnail.png" style="position:fixed; top: 75px; right: 100px; width:220px; mix-blend-mode:soft-light; border-radius: 100%;">
   </div>
 
   <div>

diff --git 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
diff --git 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);
 }