Embed header in window controls overlay

Add icons to PWA, making it installable
2025-06-19 10:42:30 +03:00 · 2023-01-22 09:55:36 +01:00 · 2023-01-22 09:34:35 +01:00
124 changed files with 562 additions and 18 deletions
--- a/about.html
+++ b/about.html
@ -16,11 +16,12 @@
 <body>
 	<header>
 		<div class="left">
-			<img id="back-button" class="back" src="/common/back.svg"></img>
+			<img id="back-button" class="back" src="/common/back.svg" alt="Back">
 		</div>
 		<h1>About</h1>
 		<div class="right"></div>
 	</header>
+	<div class="header-placeholder"></div>

 	<div class="content">
 		<h2>InfoTren</h2>
@ -29,7 +30,8 @@
 		<div>
 			<h4>Acknowledgements</h4>
 			<ul>
-				<li><a rel="noreferrer" target="_blank" href="https://brailleinstitute.org/freefont" class="items">Atkinson Hyperlegible</a></li>
+<!--				<li><a rel="noreferrer" target="_blank" href="https://brailleinstitute.org/freefont" class="items">Atkinson Hyperlegible</a></li>-->
+				<li><a rel="noreferrer" target="_blank" href="https://www.flaticon.com/free-icons/train" class="items" title="train icons">Train icons created by Slidicon - Flaticon</a></li>
 			</ul>
 		</div>

--- a/base.css
+++ b/base.css
@ -72,10 +72,41 @@ footer .rsk {
 }

 header {
+	position: fixed;
+	left: env(titlebar-area-x, 0);
+	top: env(titlebar-area-y, 0);
+	width: env(titlebar-area-width, 100%);
+	height: env(titlebar-area-height, 36px);
+	-webkit-app-region: drag;
+	app-region: drag;
+
 	display: flex;
 	align-items: center;
 }

+.header-placeholder {
+	margin-top: env(titlebar-area-height, 36px);
+}
+
+header.embedded {
+	background-color: #0000ff;
+	color: white;
+}
+
+@media (display-mode: window-controls-overlay) {
+	header {
+		background-color: #0000ff;
+		color: white;
+	}
+
+	header .back {
+		-webkit-app-region: no-drag;
+		app-region: no-drag;
+
+		filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(83deg) brightness(104%) contrast(101%);
+	}
+}
+
 header .left, header .right {
 	flex-grow: 1;
 	flex-basis: 0;
@ -87,6 +118,13 @@ header .back {
 	cursor: pointer;
 }

+header.embedded .back {
+	-webkit-app-region: no-drag;
+	app-region: no-drag;
+
+	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(83deg) brightness(104%) contrast(101%);
+}
+
 h1 {
 	font-size: 17px;
 	font-weight: 400;
@ -202,6 +240,9 @@ li.items:not(.disabled):hover:not(:focus) {
 a:not(.no-a-custom):not(.no-custom-a) {
 	display: block;
 	padding: 8px;
+}
+
+a:not(.no-a-custom):not(.no-custom-a):not(:focus):not(:hover) {
 	color: black;
 }

@ -230,7 +271,7 @@ a:not(.disabled):hover:not(:focus) {
 	background-color: lightskyblue;
 }

-a:focus {
+a:focus, a:hover {
 	color: white;
 	background-color: blue;
 	text-decoration: none;
--- a/icons/android/android-launchericon-144-144.png
+++ b/icons/android/android-launchericon-144-144.png
--- a/icons/android/android-launchericon-192-192.png
+++ b/icons/android/android-launchericon-192-192.png
--- a/icons/android/android-launchericon-48-48.png
+++ b/icons/android/android-launchericon-48-48.png
--- a/icons/android/android-launchericon-512-512.png
+++ b/icons/android/android-launchericon-512-512.png
--- a/icons/android/android-launchericon-72-72.png
+++ b/icons/android/android-launchericon-72-72.png
--- a/icons/android/android-launchericon-96-96.png
+++ b/icons/android/android-launchericon-96-96.png
--- a/icons/ios/100.png
+++ b/icons/ios/100.png
--- a/icons/ios/1024.png
+++ b/icons/ios/1024.png
--- a/icons/ios/114.png
+++ b/icons/ios/114.png
--- a/icons/ios/120.png
+++ b/icons/ios/120.png
--- a/icons/ios/128.png
+++ b/icons/ios/128.png
--- a/icons/ios/144.png
+++ b/icons/ios/144.png
--- a/icons/ios/152.png
+++ b/icons/ios/152.png
--- a/icons/ios/16.png
+++ b/icons/ios/16.png
--- a/icons/ios/167.png
+++ b/icons/ios/167.png
--- a/icons/ios/180.png
+++ b/icons/ios/180.png
--- a/icons/ios/192.png
+++ b/icons/ios/192.png
--- a/icons/ios/20.png
+++ b/icons/ios/20.png
--- a/icons/ios/256.png
+++ b/icons/ios/256.png
--- a/icons/ios/29.png
+++ b/icons/ios/29.png
--- a/icons/ios/32.png
+++ b/icons/ios/32.png
--- a/icons/ios/40.png
+++ b/icons/ios/40.png
--- a/icons/ios/50.png
+++ b/icons/ios/50.png
--- a/icons/ios/512.png
+++ b/icons/ios/512.png
--- a/icons/ios/57.png
+++ b/icons/ios/57.png
--- a/icons/ios/58.png
+++ b/icons/ios/58.png
--- a/icons/ios/60.png
+++ b/icons/ios/60.png
--- a/icons/ios/64.png
+++ b/icons/ios/64.png
--- a/icons/ios/72.png
+++ b/icons/ios/72.png
--- a/icons/ios/76.png
+++ b/icons/ios/76.png
--- a/icons/ios/80.png
+++ b/icons/ios/80.png
--- a/icons/ios/87.png
+++ b/icons/ios/87.png
--- a/icons/windows11/LargeTile.scale-100.png
+++ b/icons/windows11/LargeTile.scale-100.png
--- a/icons/windows11/LargeTile.scale-125.png
+++ b/icons/windows11/LargeTile.scale-125.png
--- a/icons/windows11/LargeTile.scale-150.png
+++ b/icons/windows11/LargeTile.scale-150.png
--- a/icons/windows11/LargeTile.scale-200.png
+++ b/icons/windows11/LargeTile.scale-200.png
--- a/icons/windows11/LargeTile.scale-400.png
+++ b/icons/windows11/LargeTile.scale-400.png
--- a/icons/windows11/SmallTile.scale-100.png
+++ b/icons/windows11/SmallTile.scale-100.png
--- a/icons/windows11/SmallTile.scale-125.png
+++ b/icons/windows11/SmallTile.scale-125.png
--- a/icons/windows11/SmallTile.scale-150.png
+++ b/icons/windows11/SmallTile.scale-150.png
--- a/icons/windows11/SmallTile.scale-200.png
+++ b/icons/windows11/SmallTile.scale-200.png
--- a/icons/windows11/SmallTile.scale-400.png
+++ b/icons/windows11/SmallTile.scale-400.png
--- a/icons/windows11/SplashScreen.scale-100.png
+++ b/icons/windows11/SplashScreen.scale-100.png
--- a/icons/windows11/SplashScreen.scale-125.png
+++ b/icons/windows11/SplashScreen.scale-125.png
--- a/icons/windows11/SplashScreen.scale-150.png
+++ b/icons/windows11/SplashScreen.scale-150.png
--- a/icons/windows11/SplashScreen.scale-200.png
+++ b/icons/windows11/SplashScreen.scale-200.png
--- a/icons/windows11/SplashScreen.scale-400.png
+++ b/icons/windows11/SplashScreen.scale-400.png
--- a/icons/windows11/Square150x150Logo.scale-100.png
+++ b/icons/windows11/Square150x150Logo.scale-100.png
--- a/icons/windows11/Square150x150Logo.scale-125.png
+++ b/icons/windows11/Square150x150Logo.scale-125.png
--- a/icons/windows11/Square150x150Logo.scale-150.png
+++ b/icons/windows11/Square150x150Logo.scale-150.png
--- a/icons/windows11/Square150x150Logo.scale-200.png
+++ b/icons/windows11/Square150x150Logo.scale-200.png
--- a/icons/windows11/Square150x150Logo.scale-400.png
+++ b/icons/windows11/Square150x150Logo.scale-400.png
--- a/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-16.png
+++ b/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-16.png
--- a/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-20.png
+++ b/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-20.png
--- a/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-24.png
+++ b/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-24.png
--- a/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-256.png
+++ b/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-256.png
--- a/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-30.png
+++ b/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-30.png
--- a/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-32.png
+++ b/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-32.png
--- a/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-36.png
+++ b/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-36.png
--- a/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-40.png
+++ b/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-40.png
--- a/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-44.png
+++ b/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-44.png
--- a/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-48.png
+++ b/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-48.png
--- a/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-60.png
+++ b/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-60.png
--- a/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-64.png
+++ b/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-64.png
--- a/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-72.png
+++ b/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-72.png
--- a/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-80.png
+++ b/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-80.png
--- a/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-96.png
+++ b/icons/windows11/Square44x44Logo.altform-lightunplated_targetsize-96.png
--- a/icons/windows11/Square44x44Logo.altform-unplated_targetsize-16.png
+++ b/icons/windows11/Square44x44Logo.altform-unplated_targetsize-16.png
--- a/icons/windows11/Square44x44Logo.altform-unplated_targetsize-20.png
+++ b/icons/windows11/Square44x44Logo.altform-unplated_targetsize-20.png
--- a/icons/windows11/Square44x44Logo.altform-unplated_targetsize-24.png
+++ b/icons/windows11/Square44x44Logo.altform-unplated_targetsize-24.png
--- a/icons/windows11/Square44x44Logo.altform-unplated_targetsize-256.png
+++ b/icons/windows11/Square44x44Logo.altform-unplated_targetsize-256.png
--- a/icons/windows11/Square44x44Logo.altform-unplated_targetsize-30.png
+++ b/icons/windows11/Square44x44Logo.altform-unplated_targetsize-30.png
--- a/icons/windows11/Square44x44Logo.altform-unplated_targetsize-32.png
+++ b/icons/windows11/Square44x44Logo.altform-unplated_targetsize-32.png
--- a/icons/windows11/Square44x44Logo.altform-unplated_targetsize-36.png
+++ b/icons/windows11/Square44x44Logo.altform-unplated_targetsize-36.png
--- a/icons/windows11/Square44x44Logo.altform-unplated_targetsize-40.png
+++ b/icons/windows11/Square44x44Logo.altform-unplated_targetsize-40.png
--- a/icons/windows11/Square44x44Logo.altform-unplated_targetsize-44.png
+++ b/icons/windows11/Square44x44Logo.altform-unplated_targetsize-44.png
--- a/icons/windows11/Square44x44Logo.altform-unplated_targetsize-48.png
+++ b/icons/windows11/Square44x44Logo.altform-unplated_targetsize-48.png
--- a/icons/windows11/Square44x44Logo.altform-unplated_targetsize-60.png
+++ b/icons/windows11/Square44x44Logo.altform-unplated_targetsize-60.png
--- a/icons/windows11/Square44x44Logo.altform-unplated_targetsize-64.png
+++ b/icons/windows11/Square44x44Logo.altform-unplated_targetsize-64.png
--- a/icons/windows11/Square44x44Logo.altform-unplated_targetsize-72.png
+++ b/icons/windows11/Square44x44Logo.altform-unplated_targetsize-72.png
--- a/icons/windows11/Square44x44Logo.altform-unplated_targetsize-80.png
+++ b/icons/windows11/Square44x44Logo.altform-unplated_targetsize-80.png
--- a/icons/windows11/Square44x44Logo.altform-unplated_targetsize-96.png
+++ b/icons/windows11/Square44x44Logo.altform-unplated_targetsize-96.png
--- a/icons/windows11/Square44x44Logo.scale-100.png
+++ b/icons/windows11/Square44x44Logo.scale-100.png
--- a/icons/windows11/Square44x44Logo.scale-125.png
+++ b/icons/windows11/Square44x44Logo.scale-125.png
--- a/icons/windows11/Square44x44Logo.scale-150.png
+++ b/icons/windows11/Square44x44Logo.scale-150.png
--- a/icons/windows11/Square44x44Logo.scale-200.png
+++ b/icons/windows11/Square44x44Logo.scale-200.png
--- a/icons/windows11/Square44x44Logo.scale-400.png
+++ b/icons/windows11/Square44x44Logo.scale-400.png
--- a/icons/windows11/Square44x44Logo.targetsize-16.png
+++ b/icons/windows11/Square44x44Logo.targetsize-16.png
--- a/icons/windows11/Square44x44Logo.targetsize-20.png
+++ b/icons/windows11/Square44x44Logo.targetsize-20.png
--- a/icons/windows11/Square44x44Logo.targetsize-24.png
+++ b/icons/windows11/Square44x44Logo.targetsize-24.png
--- a/icons/windows11/Square44x44Logo.targetsize-256.png
+++ b/icons/windows11/Square44x44Logo.targetsize-256.png
--- a/icons/windows11/Square44x44Logo.targetsize-30.png
+++ b/icons/windows11/Square44x44Logo.targetsize-30.png
--- a/icons/windows11/Square44x44Logo.targetsize-32.png
+++ b/icons/windows11/Square44x44Logo.targetsize-32.png
--- a/icons/windows11/Square44x44Logo.targetsize-36.png
+++ b/icons/windows11/Square44x44Logo.targetsize-36.png
--- a/icons/windows11/Square44x44Logo.targetsize-40.png
+++ b/icons/windows11/Square44x44Logo.targetsize-40.png
--- a/icons/windows11/Square44x44Logo.targetsize-44.png
+++ b/icons/windows11/Square44x44Logo.targetsize-44.png
--- a/icons/windows11/Square44x44Logo.targetsize-48.png
+++ b/icons/windows11/Square44x44Logo.targetsize-48.png
--- a/icons/windows11/Square44x44Logo.targetsize-60.png
+++ b/icons/windows11/Square44x44Logo.targetsize-60.png
--- a/Show more
+++ b/Show more
Author	SHA1	Message	Date
Dan Cojocaru	b5ed00a9f1	Embed header in window controls overlay	2023-01-22 09:55:36 +01:00
Dan Cojocaru	b488d28ff9	Add icons to PWA, making it installable	2023-01-22 09:34:35 +01:00