switch to scss

10 files changed, 154 insertions, 131 deletions

diff --git a/sass/app.scss b/sass/app.scss
new file mode 100644
index 0000000..39726d8
--- /dev/null
+++ b/sass/app.scss
@@ -0,0 +1,128 @@
+body {
+	margin: 0;
+	color: black;
+	background-color: white;
+}
+
+html {
+	font-family: Sans-Serif;
+}
+
+.container {
+	max-width: 60em;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+ul.departures {
+	position:relative;
+	width:100%;
+
+	border-width:1px 2px;
+	margin-bottom: 5em;
+
+	list-style-type:none;
+	margin:0;
+	padding:0;
+
+	> li {
+		display: block;
+		height: 3em;
+		width: 100%;
+		position: relative;
+		cursor: pointer;
+		border-bottom: 1px solid grey;
+		background-color: white;
+
+		&.cancelled {
+			background-color: #ffe7d0;
+		}
+	}
+
+	.line {
+		position: absolute;
+		bottom: 2px;
+		left: 2px;
+		max-width: 6em;
+		max-height: 3ex;
+		max-width: 5em;
+		overflow: hidden;
+		font-size: 140%;
+		background-color: #eeeeee;
+		font-weight: bold;
+		padding-left: 0.1em;
+		padding-right: 0.1em;
+	}
+
+	.tram {
+		background-color:#ffcccc;
+	}
+
+	.suburban {
+		background-color:#aaffba;
+		border-radius: 30px;
+	}
+
+	.subway {
+		background-color:#aac0ff;
+	}
+
+	.bus {
+		background-color:#eeaaee;
+		border-radius: 10px;
+	}
+
+	.dest {
+		position: absolute;
+		bottom: 0;
+		left: 5em;
+		width: 70%;
+		overflow: hidden;
+		background-color: transparent;
+		font-size: 150%;
+		color: black;
+	}
+
+	.destsuffix {
+		position: absolute;
+		top: 1px;
+		left: 7.6em;
+		width: 70%;
+		height: 1.2em;
+		overflow: hidden;
+	}
+
+	.time {
+		position: absolute;
+		right: 5px;
+		top: 1px;
+		background-color: transparent;
+		padding-left: 0.2em;
+		color: black;
+
+		.delay {
+			padding-right: 1ex;
+			color: #ff0000;
+		}
+	}
+
+	.platform {
+		position: absolute;
+		bottom: 0;
+		right: 5px;
+		overflow: hidden;
+		background-color: transparent;
+		font-size: 140%;
+		font-weight: bold;
+		color: black;
+	}
+}
+
+@media only screen and (max-width: 600px) {
+	ul.departures > li {
+		font-size: 85%;
+	}
+}
+
+@media only screen and (min-width: 600px) {
+}
diff --git a/sass/dark.scss b/sass/dark.scss
new file mode 100644
index 0000000..96db6ba
--- /dev/null
+++ b/sass/dark.scss
@@ -0,0 +1,6 @@
+/*
+ * Copyright (C) 2021 Daniel Friesel
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+@import 'app.scss';
diff --git a/sass/light.scss b/sass/light.scss
new file mode 100644
index 0000000..96db6ba
--- /dev/null
+++ b/sass/light.scss
@@ -0,0 +1,6 @@
+/*
+ * Copyright (C) 2021 Daniel Friesel
+ *
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+@import 'app.scss';
diff --git a/scripts/asset-rebuild b/scripts/asset-rebuild
new file mode 100755
index 0000000..c2c722b
--- /dev/null
+++ b/scripts/asset-rebuild
@@ -0,0 +1,9 @@
+#!/bin/sh
+# Copyright (C) 2021 Daniel Friesel
+#
+# SPDX-License-Identifier: CC0-1.0
+
+set -ex
+
+sassc -t compressed sass/dark.scss static/v0/css/dark.min.css
+sassc -t compressed sass/light.scss static/v0/css/light.min.css
diff --git a/static/v0/css/dark.min.css b/static/v0/css/dark.min.css
new file mode 100644
index 0000000..68e086d
--- /dev/null
+++ b/static/v0/css/dark.min.css
@@ -0,0 +1 @@
+body{margin:0;color:black;background-color:white}html{font-family:Sans-Serif}.container{max-width:60em;margin-left:auto;margin-right:auto}ul.departures{position:relative;width:100%;border-width:1px 2px;margin-bottom:5em;list-style-type:none;margin:0;padding:0}ul.departures>li{display:block;height:3em;width:100%;position:relative;cursor:pointer;border-bottom:1px solid grey;background-color:white}ul.departures>li.cancelled{background-color:#ffe7d0}ul.departures .line{position:absolute;bottom:2px;left:2px;max-width:6em;max-height:3ex;max-width:5em;overflow:hidden;font-size:140%;background-color:#eeeeee;font-weight:bold;padding-left:0.1em;padding-right:0.1em}ul.departures .tram{background-color:#ffcccc}ul.departures .suburban{background-color:#aaffba;border-radius:30px}ul.departures .subway{background-color:#aac0ff}ul.departures .bus{background-color:#eeaaee;border-radius:10px}ul.departures .dest{position:absolute;bottom:0;left:5em;width:70%;overflow:hidden;background-color:transparent;font-size:150%;color:black}ul.departures .destsuffix{position:absolute;top:1px;left:7.6em;width:70%;height:1.2em;overflow:hidden}ul.departures .time{position:absolute;right:5px;top:1px;background-color:transparent;padding-left:0.2em;color:black}ul.departures .time .delay{padding-right:1ex;color:#ff0000}ul.departures .platform{position:absolute;bottom:0;right:5px;overflow:hidden;background-color:transparent;font-size:140%;font-weight:bold;color:black}@media only screen and (max-width: 600px){ul.departures>li{font-size:85%}}
diff --git a/static/v0/css/light.min.css b/static/v0/css/light.min.css
new file mode 100644
index 0000000..68e086d
--- /dev/null
+++ b/static/v0/css/light.min.css
@@ -0,0 +1 @@
+body{margin:0;color:black;background-color:white}html{font-family:Sans-Serif}.container{max-width:60em;margin-left:auto;margin-right:auto}ul.departures{position:relative;width:100%;border-width:1px 2px;margin-bottom:5em;list-style-type:none;margin:0;padding:0}ul.departures>li{display:block;height:3em;width:100%;position:relative;cursor:pointer;border-bottom:1px solid grey;background-color:white}ul.departures>li.cancelled{background-color:#ffe7d0}ul.departures .line{position:absolute;bottom:2px;left:2px;max-width:6em;max-height:3ex;max-width:5em;overflow:hidden;font-size:140%;background-color:#eeeeee;font-weight:bold;padding-left:0.1em;padding-right:0.1em}ul.departures .tram{background-color:#ffcccc}ul.departures .suburban{background-color:#aaffba;border-radius:30px}ul.departures .subway{background-color:#aac0ff}ul.departures .bus{background-color:#eeaaee;border-radius:10px}ul.departures .dest{position:absolute;bottom:0;left:5em;width:70%;overflow:hidden;background-color:transparent;font-size:150%;color:black}ul.departures .destsuffix{position:absolute;top:1px;left:7.6em;width:70%;height:1.2em;overflow:hidden}ul.departures .time{position:absolute;right:5px;top:1px;background-color:transparent;padding-left:0.2em;color:black}ul.departures .time .delay{padding-right:1ex;color:#ff0000}ul.departures .platform{position:absolute;bottom:0;right:5px;overflow:hidden;background-color:transparent;font-size:140%;font-weight:bold;color:black}@media only screen and (max-width: 600px){ul.departures>li{font-size:85%}}
diff --git a/static/v0/css/wip.css b/static/v0/css/wip.css
deleted file mode 100644
index a5f9424..0000000
--- a/static/v0/css/wip.css
+++ /dev/null
@@ -1,128 +0,0 @@
-body {
-	margin: 0;
-	color: black;
-	background-color: white;
-}
-
-html {
-	font-family: Sans-Serif;
-}
-
-.container {
-	max-width: 60em;
-	margin-left: auto;
-	margin-right: auto;
-}
-
-ul.departures {
-	position:relative;
-	width:100%;
-
-	border-width:1px 2px;
-	margin-bottom: 5em;
-
-	list-style-type:none;
-	margin:0;
-	padding:0;
-}
-
-ul.departures > li {
-	display: block;
-	height: 3em;
-	width: 100%;
-	position: relative;
-	cursor: pointer;
-	border-bottom: 1px solid grey;
-	background-color: white;
-}
-
-ul.departures > li.cancelled {
-	background-color: #ffe7d0;
-}
-
-ul.departures li .line {
-	position: absolute;
-	bottom: 2px;
-	left: 2px;
-	max-width: 6em;
-	max-height: 3ex;
-	max-width: 5em;
-	overflow: hidden;
-	font-size: 140%;
-	background-color: #eeeeee;
-	font-weight: bold;
-	padding-left: 0.1em;
-	padding-right: 0.1em;
-}
-
-ul.departures li .tram {
-	background-color:#ffcccc;
-}
-
-ul.departures li .suburban {
-	background-color:#aaffba;
-	border-radius: 30px;
-}
-
-ul.departures li .subway {
-	background-color:#aac0ff;
-}
-
-ul.departures li .bus {
-	background-color:#eeaaee;
-	border-radius: 10px;
-}
-
-ul.departures li .dest {
-	position: absolute;
-	bottom: 0;
-	left: 5em;
-	width: 70%;
-	overflow: hidden;
-	background-color: transparent;
-	font-size: 150%;
-	color: black;
-}
-
-ul.departures li .destsuffix {
-	position: absolute;
-	top: 1px;
-	left: 7.6em;
-	width: 70%;
-	height: 1.2em;
-	overflow: hidden;
-}
-
-ul.departures li .time .delay {
-	padding-right: 1ex;
-	color: #ff0000;
-}
-
-ul.departures li .time {
-	position: absolute;
-	right: 5px;
-	top: 1px;
-	background-color: transparent;
-	padding-left: 0.2em;
-	color: black;
-}
-
-ul.departures li .platform {
-	position: absolute;
-	bottom: 0;
-	right: 5px;
-	overflow: hidden;
-	background-color: transparent;
-	font-size: 140%;
-	font-weight: bold;
-	color: black;
-}
-
-@media only screen and (max-width: 600px) {
-	ul.departures > li {
-		font-size: 85%;
-	}
-}
-
-@media only screen and (min-width: 600px) {
-}
diff --git a/static/v0/js/geolocation.js b/static/v0/js/geolocation.js
index 7efffe0..1e93c88 100644
--- a/static/v0/js/geolocation.js
+++ b/static/v0/js/geolocation.js
@@ -2,8 +2,8 @@ document.addEventListener("DOMContentLoaded", function() {
 	const geoLocationButton = document.getElementById('geolocationsearch');
 
 	const processResult = function(results) {
-		console.log(results);
 		const list = document.createElement("ul");
+		list.class = "stops";
 		for (var result in results) {
 			result = results[result];
 			var listentry = document.createElement("li");
diff --git a/templates/header.html b/templates/header.html
index 5d62fda..b7260a5 100644
--- a/templates/header.html
+++ b/templates/header.html
@@ -10,4 +10,4 @@
 <link rel="apple-touch-icon" sizes="180x180" href="/static/icons/icon-180x180.png">
 <link rel="apple-touch-icon" sizes="152x152" href="/static/icons/icon-152x152.png">
 <link rel="apple-touch-icon" sizes="167x167" href="/static/icons/icon-167x167.png">
-<link href="/static/v0/css/wip.css" id="theme" rel="stylesheet">
+<link href="/static/v0/css/light.min.css" id="theme" rel="stylesheet">
diff --git a/templates/stops.html b/templates/stops.html
index 2cbac8e..b762958 100644
--- a/templates/stops.html
+++ b/templates/stops.html
@@ -7,7 +7,7 @@
 <body>
 <div class="container">
 	<div class="content">
-		<ul>
+		<ul class="stops">
 			{% for stop in stops %}
 				<li><a href="/board/{{ stop['id'] }}">{{ stop['name'] }}</a></li>
 			{% endfor %}