-

ueckoken · Nov 23, 2023 · d6fb640 · d6fb640
1 parent 1a6c145
commit d6fb640
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 239 deletions.
diff --git a/chofusai2023/about.html b/chofusai2023/about.html
@@ -15,20 +15,19 @@
 	<meta property="twitter:url" content="https://www.koken.club.uec.ac.jp/chofusai2023/about.html">
 	<link rel="apple-touch-icon" href="fig/koken_icon_large.png">
 
-	<link rel="stylesheet" href="style.css">
 	<script src="style.js"></script>
 </head>
 <body>
 <main>
 	<section>
-		<h4 style="text-align: center;">工学研究部について<hr></h4>
+		<h2 style="text-align: center;">工学研究部について</h2><hr>
 		<p>
 			工学研究部はソフトウェアやハードウェア、その他工学に関することなど幅広く活動している技術系サークルです。普段は部員がそれぞれ自由にものづくりを行っています。<br>
 			<a href="https://www.koken.club.uec.ac.jp/" target="_blank">工学研究部公式WEbサイト</a></p>
 	</section>
 
 	<section>
-	<h4 style="text-align: center;">調布祭について<hr></h4>
+	<h2 style="text-align: center;">調布祭について</h2><hr>
 	<p>
 		調布祭は毎年11月に行われる電気通信大学の学園祭です。毎年多くの来場者でにぎわっており、各サークルが露店や教室展示、ステージ企画などを行っています。<br>
 		<a href="https://www.chofusai.jp/" target="_blank">第73回調布祭公式Webサイト</a>

diff --git a/chofusai2023/fig/koken_icon_large_indexed.png b/chofusai2023/fig/koken_icon_large_indexed.png
diff --git a/chofusai2023/index.html b/chofusai2023/index.html
@@ -15,47 +15,45 @@
 	<meta property="twitter:url" content="https://www.koken.club.uec.ac.jp/chofusai2023/">
 	<link rel="apple-touch-icon" href="fig/koken_icon_large.png">
 
-	<link rel="stylesheet" href="style.css">
 	<script src="style.js"></script>
 </head>
 <body>
 <main>
-	<h2 style="text-align: center;">第73回調布祭特設サイト
-		<hr>
-	</h2>
+	<h1 style="text-align: center;">第73回調布祭特設サイト</h1>
 	<p>
 		工学研究部は2023年度の調布祭で、部員の作品展示、フリーマーケット、部報の頒布、プラレール企画などを行います。
 	</p>
+	<hr>
 	<section>
-		<h4>作品展示</h4>
+		<h2>作品展示</h2>
 		<p>
 			部員が製作した作品を展示します。部員の作品一覧は<a href="works/">Works</a>を見てください。
 		</p>
 	</section>
 	<section>
-		<h4>部報・グッズ頒布</h4>
+		<h2>部報・グッズ頒布</h2>
 		<p>
-			<img src="fig/menu.png" alt="ueckoken" style="width: 100%; max-width: 400px;">
+			<img src="fig/menu.png" alt="ueckoken" style="width: 100%; max-width: 400px;background-color: #fff8;">
 		</p>
 	</section>
 	<section>
-		<h4>プラレール企画</h4>
+		<h2>プラレール企画</h2>
 		<p>
 			今年度の調布祭もプラレール企画を行います。部員が一致団結して行っている一大プロジェクトとなっています。
 		</p>
 	</section>
 	<section>
-		<h4>フリーマーケット</h4>
+		<h2>フリーマーケット</h2>
 		<p>
 			部員が作製したもの、持ち寄ったもの、部室で不要になったものをお値打ち価格で販売します。ジャンキーな品物など各種取り揃えております。掘り出し物が見つかるかも…??
 		</p>
 	</section>
 	<section>
-		<h4><a href="./machineRace/index.html">調布機械制作奨励競馬大会</a></h4>
+		<h2><a href="./machineRace/index.html">調布機械制作奨励競馬大会</a></h2>
 		<p>部内外の参加者が作成した4足歩行ロボットによる競争です。</p>
 	</section>
 	<section>
-		<h4>アクセス</h4>
+		<h2>アクセス</h2>
 		<p>
 			電気通信大学は調布駅から徒歩5分の場所にあります。調布祭当日は西10-103教室と西10-105教室でお待ちしております。
 		</p>

diff --git a/chofusai2023/style.css b/chofusai2023/style.css
diff --git a/chofusai2023/style.js b/chofusai2023/style.js
@@ -4,35 +4,45 @@
 	(w=>d.readyState=='loading'?addEventListener('DOMContentLoaded',w,{once:1}):w())(
 		_=>(
 			[['afterbegin',`
+<style>
+	:root{--red:#f00c;--gray:#8884;--white:#fee;--black:#223;--fg:var(--black);--bg:var(--white);color:var(--fg);background-color:var(--bg);}
+	@media(prefers-color-scheme:dark){:root{--fg:var(--white);--bg:var(--black);}:link{color:#8cf;}:visited{color:#c8f;}:link:active,:visited:active{color:#f8c;}}
+	main{max-width:800px;margin:auto;}
+
+	header{position:sticky;top:8px;display:flex;justify-content:space-between;pointer-events:none;z-index:10;}
+	header>a,header>nav>a,main img,iframe{background:var(--gray);backdrop-filter:blur(4px);border-radius:12px;box-sizing:border-box;padding:8px;}
+	header a{text-decoration:none;color:var(--fg) !important;}
+	header>*{display:flex;align-items:center;pointer-events:auto;}
+	header>a *{margin:0;}
+	header>a::before{content:"";background:0 0/cover url(${root}fig/koken_icon_large.png);width:64px;height:64px;margin-right:8px;border-radius:4px;}
+	header>nav>a{padding:8px;border:8px solid #0000;margin:8px;}
+	header>nav>a.active{border-bottom-color:var(--red);}
+	@media(max-width:640px){header>a{font-size:0;}header>a::before{margin:unset;}}
+
+	footer{text-align:center;}
+	footer img{width:32px;}
+</style>
 <header>
+	<a href="${root}"><div><h4>電気通信大学</h4><h2>工学研究部</h2></div></a>
 	<nav>
-		<a href="${root}" class="image1" style="padding:0;margin:0;"><img src="${root}fig/logo.png"></a>
-		<a href="${root}" class="image2" style="padding:0;margin:0;"><img src="${root}fig/koken_icon_large.png"></a>
-		<ul class="internal-links">
-			<li><a href="${root}">Home</a></li>
-			<li><a href="${root}works">Works</a></li>
-			<li><a href="${root}about.html">About</a></li>
-		</ul>
+		<a href="${root}">Home</a>
+		<a href="${root}works">Works</a>
+		<a href="${root}about.html">About</a>
 	</nav>
 </header>
 			`],['beforeend',`
+<hr>
 <footer>
 	&copy; 2023 UEC Koken. All rights reserved.
 	<div class="social-links">
-		<a href="https://twitter.com/ueckoken" target="_blank">
-			<span class="sr-only">X(旧Twitter)</span>
-			<svg role="img" width="32" height="32" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><title>Twitter</title><path d="M21.543 7.104c.015.211.015.423.015.636 0 6.507-4.954 14.01-14.01 14.01v-.003A13.94 13.94 0 0 1 0 19.539a9.88 9.88 0 0 0 7.287-2.041 4.93 4.93 0 0 1-4.6-3.42 4.916 4.916 0 0 0 2.223-.084A4.926 4.926 0 0 1 .96 9.167v-.062a4.887 4.887 0 0 0 2.235.616A4.928 4.928 0 0 1 1.67 3.148 13.98 13.98 0 0 0 11.82 8.292a4.929 4.929 0 0 1 8.39-4.49 9.868 9.868 0 0 0 3.128-1.196 4.941 4.941 0 0 1-2.165 2.724A9.828 9.828 0 0 0 24 4.555a10.019 10.019 0 0 1-2.457 2.549z"/></svg>
-		</a>
-		<a href="../${root}" target="_blank">
-			<span class="sr-only">WebSite</span>
-			<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="32" height="32" fill="currentColor"><path d="M12.97 2.59a1.5 1.5 0 0 0-1.94 0l-7.5 6.363A1.5 1.5 0 0 0 3 10.097V19.5A1.5 1.5 0 0 0 4.5 21h4.75a.75.75 0 0 0 .75-.75V14h4v6.25c0 .414.336.75.75.75h4.75a1.5 1.5 0 0 0 1.5-1.5v-9.403a1.5 1.5 0 0 0-.53-1.144l-7.5-6.363Z"></path></svg>
-		</a>
+		<a href="https://twitter.com/ueckoken" target="_blank"><img src="https://api.iconify.design/simple-icons/twitter.svg?color=%23888888" alt="X(旧Twitter)"></a>
+		<a href="../${root}" target="_blank"><img src="https://api.iconify.design/octicon/home-fill-24.svg?color=%23888888" alt="WebSite"></a>
 	</div>
 </footer>
 			`]].map(x=>d.body.insertAdjacentHTML(...x)),
 
 			//現在表示されているページを<title>から判別
-			[...d.querySelectorAll('header li>a')].forEach(x=>x.textContent==d.title.split(' ').reverse()[0]&&x.classList.add('active'))
+			[...d.querySelectorAll('header nav>a')].forEach(x=>x.textContent==d.title.split(' ').reverse()[0]&&x.classList.add('active'))
 		)
 	)
 ))(document);