browser and UI#2

browser-and-ui-2/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@slide/browser-and-ui-2",
+  "version": "1.0.0",
+  "main": "index.js",
+  "scripts": {
+    "dev": "slidev",
+    "build": "slidev build",
+    "export": "slidev export"
+  },
+  "keywords": [],
+  "author": "ken7253 <[email protected]>",
+  "license": "MIT",
+  "description": ""
+}

browser-and-ui-2/slides.md

@@ -0,0 +1,50 @@
+---
+theme: ../theme-browser-and-ui
+titleTemplate: '%s - ken7253'
+layout: intro
+---
+
+# Browser and UI
+\#2 HTML/ARIA
+
+---
+src: "../theme-browser-and-ui/me.md"
+---
+
+---
+src: "../theme-browser-and-ui/description.md"
+---
+---
+layout: section
+---
+
+# Opening Talk
+
+---
+layout: section
+---
+
+## summary要素の不思議
+
+---
+
+## このHTMLは仕様違反なのか？
+
+```html
+<details>
+  <summary><a href="http://example.com">example.com</a>について</summary>
+  <p>http://example.com は、documentなどでよく例示用に使われるドメインです。</p>
+</details>
+```
+
+---
+layout: center
+---
+
+## 仕様違反ではない
+
+---
+
+## 仕様違反ではない
+
+![](/img/nu-html-checker-summary.png)

browser-and-ui-2/styles/index.ts

@@ -0,0 +1 @@
+import "./mod.css";

package.json

@@ -26,7 +26,8 @@
     "review-comment",
     "browser-and-ui-1",
     "theme-browser-and-ui",
-    "pepc"
+    "pepc",
+    "browser-and-ui-2"
   ],
   "devDependencies": {
     "@chromatic-com/storybook": "^3.2.4",

theme-browser-and-ui/description.md

@@ -0,0 +1,72 @@
+---
+theme: .
+titleTemplate: '%s - ken7253'
+layout: section
+---
+
+## Browser and UI とはなにか
+
+---
+layout: section
+---
+
+### **狭義の**フロントエンドエンジニアの勉強会
+
+<!--
+フロントエンドがどんどん発展するに従って、フロントエンドエンジニアがやることもどんどん増えていった。
+アプリケーション開発はフレームワークの上で行うことが当たり前になりサーバーサイドのコードも書くようになった
+ただ、どんなフレームワークの上で開発していようが自分たちはブラウザというプラットフォームの上にいることは変わらないはずで
+どんな環境にいるフロントエンドエンジニア同士でも共通の話題として「狭義のフロントエンド」の話をする場を作りたかった。
+-->
+
+---
+
+### **狭義の**フロントエンドエンジニアの勉強会
+
+#### 話していきたいこと
+
+- ブラウザの仕様・標準化の話
+- ブラウザの実装について
+- UI・デザインの話
+- UI実装を支えるツール
+- フォント・画像とかのアセット系の話とかも
+
+<!--
+画像やフォントの話とかもしたい
+-->
+
+---
+
+### **狭義の**フロントエンドエンジニアの勉強会
+
+#### 積極的にはやらないこと
+
+- ライブラリ・フレームワーク論
+- （サービス全体の）設計論・アーキテクチャ
+- サーバーサイドの話
+- 技術以外の話
+
+<!--
+この話ちょっとネガティブっぽい感じだから話すか迷ったけど、やらないことを決めるのも大切だしこういう話できる場って結構あると思ってるので
+最近Denoが面白いと思ってるけど勉強会ではやらない。
+ただ、1か0ではないのでそこはアナログな感じで
+-->
+
+---
+layout: section
+---
+
+## お願いしたいこと
+
+---
+
+### お願いしたいこと
+
+- 誰かを不快にさせる行動・発表はしないでください。
+- ミニマムな開催にご協力をお願いします。
+- 次回以降の会場提供できそうな人は教えて下さい。
+- また次回やるので来てください！
+
+<!--
+勉強会についての説明はここまででちょっと技術の話をします。
+-->

theme-browser-and-ui/me.md

@@ -1,9 +1,6 @@
 ---
-theme: default
+theme: .
 titleTemplate: '%s - ken7253'
-fonts:
-  sans: 'M PLUS 2'
-  mono: 'M PLUS 1 Code'
 layout: cover
 ---
 <!-- markdownlint-disable first-line-h1 -->

theme-browser-and-ui/styles/layout.css

@@ -4,8 +4,7 @@
 }
 
 #app {
-  .slide-content,
-  .print-slide-container {
+  :is(#slide-content, .print-slide-container) {
     background-color: var(--theme-c-background);
     color: var(--theme-c-text);
     font-weight: 600;
@@ -26,6 +25,23 @@
       font-weight: 900;
     }
 
+    .slidev-layout.default h2 {
+      position: relative;
+      padding-bottom: 12px;
+
+      &::after {
+        content: "";
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        height: 10%;
+        width: 100%;
+        background-color: #333;
+        opacity: 0.6;
+        border-radius: 100vh;
+      }
+    }
+
     code {
       margin: 0 4px;
       color: var(--theme-c-background);