Skip to content

Commit d719d98

Browse files
fiveseven-lambdafiveseven-lambda
committed
アイコン追加 & 画像最適化
1 parent 4e6df13 commit d719d98

File tree

9 files changed

+38
-6
lines changed

9 files changed

+38
-6
lines changed

‎public/2331964-2.output.png‎

52.4 KB
Loading

‎public/RustCoder.png‎

63.4 KB
Loading

‎public/favicon.ico‎

11.7 KB
Binary file not shown.

‎public/favicon.jpg‎

-85.4 KB
Binary file not shown.

‎public/icon.jpg‎

83.7 KB
Loading

‎src/assets/2331964-2.output.png‎

52.4 KB
Loading

‎src/assets/icon.jpg‎

83.7 KB
Loading

‎src/layouts/Layout.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width" />
6-
<link rel="icon" type="image/jpg" href="/favicon.jpg" />
6+
<link rel="icon" type="image/jpg" href="/favicon.ico" />
77
<title>とがのプロフィール</title>
88
</head>
99
<body>

‎src/pages/index.astro‎

Lines changed: 37 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
---
22
import Layout from '../layouts/Layout.astro';
33
import Card from '../components/Card.astro';
4+
import { Image } from 'astro:assets';
5+
import icon from '../assets/icon.jpg';
6+
import icon2 from '../assets/2331964-2.output.png';
47
import RustCoder from '../assets/RustCoder.png';
58
---
69

@@ -17,8 +20,17 @@ import RustCoder from '../assets/RustCoder.png';
1720
</Card>
1821
<Card>
1922
<h2>アイコン</h2>
20-
<img src="favicon.jpg"/>
21-
<p><a href="https://x.com/Cafrette">@Cafrette</a> さんに書いていただきました。</p>
23+
<p>（クリック／タップで拡大）</p>
24+
<Image id="icon" class="image" src={icon} alt="とがのアイコン（Cafrette さん）" width="144" />
25+
<dialog id="iconDialog">
26+
<Image src="/icon.jpg" alt="とがのアイコン" width="1080" height="1080" />
27+
</dialog>
28+
<p>Cafrette さんに描いていただきました。</p>
29+
<Image id="icon2" class="image" src={icon2} alt="とがのアイコン（ふいしゆさん）" width="144" />
30+
<dialog id="icon2Dialog">
31+
<Image src="/2331964-2.output.png" alt="とがのアイコン" width="400" height="400"/>
32+
</dialog>
33+
<p>ふいしゆさんに描いていただきました。</p>
2234
</Card>
2335
<Card>
2436
<h2>OSS Contribution</h2>
@@ -35,7 +47,10 @@ import RustCoder from '../assets/RustCoder.png';
3547
<li>ICPC 2021 … アジア横浜地区大会出場（<b>t</b>oxic）</li>
3648
<li>ICPC 2022 … アジア横浜地区大会出場（h<b>a</b>unting）</li>
3749
</ul>
38-
<img src={RustCoder.src} alt="とが『RustCoder ―― AtCoder と Rust で始める競技プログラミング入門』の表紙"/>
50+
<Image id="rustCoder" src={RustCoder} class="image" alt="とが『RustCoder ―― AtCoder と Rust で始める競技プログラミング入門』の表紙" width="144" />
51+
<dialog id="rustCoderDialog">
52+
<Image src="/RustCoder.png" alt="とが『RustCoder ―― AtCoder と Rust で始める競技プログラミング入門』の表紙" width="1043" height="1459" />
53+
</dialog>
3954
<p>『RustCoder――AtCoder と Rust で始める競技プログラミング入門』は<a href="https://zenn.dev/toga/books/rust-atcoder/viewer/intro">終了しました</a>。</p>
4055
</Card>
4156
<Card>
@@ -68,6 +83,15 @@ import RustCoder from '../assets/RustCoder.png';
6883
</footer>
6984
</Layout>
7085

86+
<script>
87+
icon.addEventListener("click", () => iconDialog.showModal());
88+
iconDialog.addEventListener("click", () => iconDialog.close());
89+
icon2.addEventListener("click", () => icon2Dialog.showModal());
90+
icon2Dialog.addEventListener("click", () => icon2Dialog.close());
91+
rustCoder.addEventListener("click", () => rustCoderDialog.showModal());
92+
rustCoderDialog.addEventListener("click", () => rustCoderDialog.close());
93+
</script>
94+
7195
<style>
7296
body {
7397
font-family: "Noto Sans CJK JP", sans-serif;
@@ -110,9 +134,17 @@ import RustCoder from '../assets/RustCoder.png';
110134
}
111135
}
112136

137+
.image {
138+
width: 30%;
139+
max-width: 144px;
140+
cursor: pointer;
141+
}
142+
dialog {
143+
text-align: center;
144+
}
113145
img {
114-
width: 60%;
115-
max-width: 270px;
146+
width: 100%;
147+
height: auto;
116148
}
117149

118150
h2, p {

0 commit comments

Comments
 (0)