lynnesbian
/
new-tab-page
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add searchbar and status tracker
All checks were successful
continuous-integration/drone/push Build is passing
Details

This commit is contained in:
Lynne Megido 2020-03-01 01:32:38 +10:00
parent 2147f0e269
commit fbe5d156cd
Signed by: lynnesbian
GPG Key ID: F0A184B5213D9F90
5 changed files with 62 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
_includes/links.html
View File

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

3
_includes/search.html Normal file
View File

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

5
_includes/status.html
View File

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

16
index.html
View File

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

45
style.css
View File

@ -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;