add searchbar and status tracker

_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>

_includes/search.html

@@ -0,0 +1,3 @@
+<form id='searchbar'>
+	<input type='search'><button>Search</button>
+</form>

_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>

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>

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;