add navbar

1 files changed, 116 insertions, 1 deletions

diff --git a/sass/app.scss b/sass/app.scss
index 4b01bf5..51fea67 100644
--- a/sass/app.scss
+++ b/sass/app.scss
@@ -14,6 +14,15 @@ html {
 	margin-right: auto;
 }
 
+.globalnote {
+	margin-top: 1em;
+	font-style: italic;
+	text-align: center;
+}
+
+.geolocation {
+	margin-bottom: 1em;
+}
 
 ul.stops {
 	position:relative;
@@ -42,7 +51,7 @@ ul.stops {
 		.name {
 			position: absolute;
 			bottom: 0;
-			left: 0;
+			left: 5px;
 			width: 70%;
 			overflow: hidden;
 			background-color: transparent;
@@ -50,6 +59,18 @@ ul.stops {
 			color: black;
 		}
 
+		.distance {
+			position: absolute;
+			top: 1px;
+			right: 5px;
+			width: 30%;
+			text-align: right;
+			height: 1.2em;
+			overflow: hidden;
+			opacity: 50%;
+		}
+
+
 		.note {
 			position: absolute;
 			top: 1px;
@@ -217,12 +238,106 @@ ul.departures {
 	}
 }
 
+.navbar-fixed {
+	position: relative;
+	z-index: 997;
+
+	nav {
+		position: fixed;
+		width: 100%;
+		box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.12), 0 1px 5px 0 rgba(0,0,0,.2);
+		overflow: hidden;
+
+		a {
+			color: #ffffff;
+		}
+
+		.container {
+			position: relative;
+			height: 100%;
+		}
+
+		.main {
+			position: absolute;
+			display: inline-block;
+			padding-left: 0.5rem;
+		}
+
+		ul {
+			float: right;
+			margin: 0;
+			padding-left: 0;
+			list-style-type: none;
+
+			li {
+				float: left;
+				padding: 0;
+				list-style-type: none;
+				padding-left: .8em;
+				padding-right: .8em;
+			}
+		}
+	}
+}
+
+@font-face {
+	font-family: 'Material Icons';
+	font-style: normal;
+	font-weight: 400;
+	src: local('Material Icons'),
+		local('MaterialIcons-Regular'),
+		url(/static/v0/font/MaterialIcons-Regular.ttf) format('truetype');
+}
+
+.material-icons {
+	font-family: 'Material Icons';
+	font-weight: normal;
+	font-style: normal;
+	font-size: 24px;
+	line-height: 1;
+	letter-spacing: normal;
+	text-transform: none;
+	display: inline-block;
+	white-space: nowrap;
+	word-wrap: normal;
+	direction: ltr;
+}
+
+
 @media only screen and (max-width: 600px) {
 	ul.departures > li,
 	ul.stops > li {
 		font-size: 85%;
 	}
+	.navbar-fixed {
+		height: 50px;
+	}
+	nav {
+		height: 50px;
+		line-height: 50px;
+		.main {
+			font-size: 120%;
+		}
+		.material-icons {
+			height: 50px;
+			line-height: 50px;
+		}
+	}
 }
 
 @media only screen and (min-width: 600px) {
+	.navbar-fixed {
+		height: 60px;
+	}
+	nav {
+		height: 60px;
+		line-height: 60px;
+		.main {
+			font-size: 140%;
+		}
+		.material-icons {
+			height: 60px;
+			line-height: 60px;
+		}
+	}
 }