Implemented AH font and about page

2 years ago · 131768ed41
13 changed files with 8487 additions and 6 deletions
--- a/about.html
+++ b/about.html
@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>About - InfoTren</title>
+
+	<link rel="stylesheet" href="/base.css">
+
+	<script src="/back.js"></script>
+	<script src="/items.js"></script>
+</head>
+<body>
+	<h1>About</h1>
+
+	<div class="content">
+		<h2>InfoTren</h2>
+		<p>KaiOS webapp for <a href="https://infofer.ro" class="items inline">Informatica Feroviară</a> scraper</p>
+
+		<h4>Acknowledgements</h4>
+		<ul>
+			<li><a href="https://brailleinstitute.org/freefont" class="items">Atkinson Hyperlegible</a></li>
+		</ul>
+	</div>
+
+	<footer>
+		<div class="csk">Open</div>
+	</footer>
+</body>
+</html>
--- a/base.css
+++ b/base.css
@ -126,6 +126,8 @@ p.thi {
 p, ul {
 	font-size: 17px;
 	font-weight: 400;
+
+	margin: 0 8px;
 }

 p.link, a {
@ -162,15 +164,23 @@ li:focus {

 a {
 	display: block;
-
 	padding: 8px;
-
 	color: black;
+}
+
+a.inline {
+	display: inline;
+	padding: 2px;
+}
+
+li a {
 	text-decoration: none;
 }

 a.disabled {
 	color: grey;
+
+	text-decoration: none;
 }

 a:not(.disabled):hover:not(:focus) {
@ -181,6 +191,7 @@ a:not(.disabled):hover:not(:focus) {
 a:focus {
 	color: white;
 	background-color: blue;
+	text-decoration: none;
 }

 input {
@ -197,3 +208,31 @@ input {
 .hidden {
 	display: none;
 }
+
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	src: local(Atkinson Hyperlegible), url("/fonts/Atkinson-Hyperlegible-Regular-102.woff"), url("/fonts/Atkinson-Hyperlegible-Regular-102.svg");
+}
+
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: italic;
+	src: local(Atkinson Hyperlegible), url("/fonts/Atkinson-Hyperlegible-Italic-102.woff"), url("/fonts/Atkinson-Hyperlegible-Italic-102.svg");
+}
+
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-style: italic;
+	font-weight: bold;
+	src: local(Atkinson Hyperlegible), url("/fonts/Atkinson-Hyperlegible-BoldItalic-102.woff"), url("/fonts/Atkinson-Hyperlegible-BoldItalic-102.svg");
+}
+
+@font-face {
+	font-family: 'Atkinson Hyperlegible';
+	font-weight: bold;
+	src: local(Atkinson Hyperlegible), url("/fonts/Atkinson-Hyperlegible-Bold-102.woff"), url("/fonts/Atkinson-Hyperlegible-Bold-102.svg");
+}
+
+body {
+	font-family: 'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, Ubuntu, 'Segoe UI', 'Roboto', Sans-Serif;
+}
--- a/fonts/Atkinson-Hyperlegible-Bold-102.svg
+++ b/fonts/Atkinson-Hyperlegible-Bold-102.svg
--- a/fonts/Atkinson-Hyperlegible-Bold-102.woff
+++ b/fonts/Atkinson-Hyperlegible-Bold-102.woff
--- a/fonts/Atkinson-Hyperlegible-BoldItalic-102.svg
+++ b/fonts/Atkinson-Hyperlegible-BoldItalic-102.svg
--- a/fonts/Atkinson-Hyperlegible-BoldItalic-102.woff
+++ b/fonts/Atkinson-Hyperlegible-BoldItalic-102.woff
--- a/fonts/Atkinson-Hyperlegible-Italic-102.svg
+++ b/fonts/Atkinson-Hyperlegible-Italic-102.svg
--- a/fonts/Atkinson-Hyperlegible-Italic-102.woff
+++ b/fonts/Atkinson-Hyperlegible-Italic-102.woff
--- a/fonts/Atkinson-Hyperlegible-Regular-102.svg
+++ b/fonts/Atkinson-Hyperlegible-Regular-102.svg
--- a/fonts/Atkinson-Hyperlegible-Regular-102.woff
+++ b/fonts/Atkinson-Hyperlegible-Regular-102.woff
--- a/index.html
+++ b/index.html
@ -8,7 +8,7 @@

 	<link rel="stylesheet" href="/base.css">

-	<script src="items.js"></script>
+	<script src="/items.js"></script>
 </head>
 <body>
 	<h1>InfoTren</h1>
@ -18,6 +18,7 @@
 			<li><a class="items disabled" href="">Train routes</a></li>
 			<li><a class="items" href="train.html">My train</a></li>
 			<li><a class="items disabled" href="station.html">Station departures/arrivals</a></li>
+			<li><a class="items" href="about.html">About</a></li>
 		</ul>
 	</div>

--- a/train.html
+++ b/train.html
@ -8,8 +8,8 @@

 	<link rel="stylesheet" href="/base.css">

-	<script src="back.js"></script>
-	<script src="items.js"></script>
+	<script src="/back.js"></script>
+	<script src="/items.js"></script>
 	<script src="train.js"></script>
 </head>
 <body>
--- a/view-train.html
+++ b/view-train.html
@ -9,7 +9,7 @@
 	<link rel="stylesheet" href="/base.css">
 	<link rel="stylesheet" href="view-train.css">

-	<script src="back.js"></script>
+	<script src="/back.js"></script>
 	<script src="view-train.js"></script>
 </head>
 <body>