From fbe5d156cdd6e7779d98f035a175bc12d65d9600 Mon Sep 17 00:00:00 2001
From: Lynne <lynne@bune.city>
Date: Sun, 1 Mar 2020 01:32:38 +1000
Subject: [PATCH] add searchbar and status tracker

---
 _includes/links.html  |  2 +-
 _includes/search.html |  3 +++
 _includes/status.html |  5 +++++
 index.html            | 16 ++++++++-------
 style.css             | 45 ++++++++++++++++++++++++++++++++++++++++++-
 5 files changed, 62 insertions(+), 9 deletions(-)
 create mode 100644 _includes/search.html

diff --git a/_includes/links.html b/_includes/links.html
index a96f00f..e5097a5 100644
--- a/_includes/links.html
+++ b/_includes/links.html
@@ -1,5 +1,5 @@
 <ul>
 {%- for item in site.data.links %}
-	<li><a href='{{ item.link }}'>{{ item.name }} </a></li>
+	<li><a href='{{ item.link }}'>{{ item.name }}</a></li>
 {%- endfor %}
 </ul>
diff --git a/_includes/search.html b/_includes/search.html
new file mode 100644
index 0000000..f321aed
--- /dev/null
+++ b/_includes/search.html
@@ -0,0 +1,3 @@
+<form id='searchbar'>
+	<input type='search'><button>Search</button>
+</form>
diff --git a/_includes/status.html b/_includes/status.html
index e69de29..dac822d 100644
--- a/_includes/status.html
+++ b/_includes/status.html
@@ -0,0 +1,5 @@
+<ul id='statuses'>
+{%- for item in site.data.status %}
+	<li><a class='status checking' href='{{ item.link }}'>{{ item.name }}</a></li>
+{%- endfor %}
+</ul>
diff --git a/index.html b/index.html
index a44efa8..14c78d3 100644
--- a/index.html
+++ b/index.html
@@ -2,13 +2,15 @@
 layout: default
 title: New Tab
 ---
+{% include search.html %}
 <div id='boxes'>
-  <div class='box'>
-    <h2>Status</h2>
-  </div>
+	<div class='box'>
+		<h2>Status</h2>
+		{% include status.html %}
+	</div>
 
-  <div class='box'>
-    <h2>Links</h2>
-    {% include links.html %}
-  </div>
+	<div class='box'>
+		<h2>Links</h2>
+		{% include links.html %}
+	</div>
 </div>
diff --git a/style.css b/style.css
index 29bc9b2..f8f83c2 100644
--- a/style.css
+++ b/style.css
@@ -41,6 +41,27 @@ a {
 	text-decoration: none;
 }
 
+#searchbar {
+	text-align: center;
+	margin: 0 auto 30px;
+	width: max-content;
+	min-width: 500px;
+	max-width: 90%;
+	display: flex;
+}
+#searchbar input {
+	border: thin #ccc solid;
+	height: 100%;
+	padding: 8px 0;
+	flex-grow: 1;
+	border-radius: 5px 0 0 5px;
+}
+#searchbar button {
+	background: #0001;
+	border: none;
+	border-radius: 0 5px 5px 0;
+}
+
 #boxes {
 	text-align: center;
 }
@@ -50,7 +71,7 @@ a {
 	min-height: 300px;
 	min-width: 300px;
 	border-radius: 3px;
-	box-shadow: 0 0 5px black;
+	box-shadow: 0 0 20px #99999922;
 	display: inline-block;
 	background: transparent;
 	transition: 0.2s all linear;
@@ -72,6 +93,28 @@ a {
 	background: radial-gradient(at 0% 0%, #99999911, 80%, #99999944);
 }
 
+.status::after {
+	margin-left: 5px;
+	color: white;
+	font-size: 0.6em;
+	text-transform: uppercase;
+	padding: 0 3px;
+	border-radius: 5px;
+	vertical-align: text-bottom;
+}
+.status.checking::after {
+	background: orange;
+	content: "checking";
+}
+.status.ok::after {
+	content: "ok";
+	background: #5c5;
+}
+.status.down::after {
+	content: "down";
+	background: red;
+}
+
 footer {
 	text-align: center;
 	color: grey;