add TOC overview bar

1 files changed, 33 insertions, 0 deletions

diff --git a/css/read.css b/css/read.css
index 35226ce..f7a9e2d 100644
--- a/css/read.css
+++ b/css/read.css
@@ -67,6 +67,20 @@
 
 .footer .spacer {
 	flex-grow : 2;
+	position : relative;
+	height : 12px;
+}
+
+.footer .spacer .toc-bar-entry {
+	position : absolute;
+	background: #999;
+	top: 0;
+	bottom : 0;
+	width : 1px;
+}
+
+.footer .spacer .toc-bar-entry.current-position {
+	background : #C33;
 }
 
 .footer .location {
@@ -74,6 +88,25 @@
 	text-align : right;
 }
 
+@media (max-width: 539px) {
+	.spacer > .toc-bar-entry {
+		display : none;
+	}
+}
+
+@media (min-width: 540px) {
+	.footer .chapter_wrapper, .footer .location {
+		width : 25%;
+	}
+}
+
+@media (min-width: 800px) {
+	.footer .chapter_wrapper, .footer .location {
+		width : 20%;
+	}
+}
+
+
 .toolbar {
 	text-align : right;
 	display : flex;