Modify homepage

This commit is contained in:
samedamci 2020-03-17 15:44:26 +01:00
parent 28bb9661ce
commit 22d017977a
2 changed files with 99 additions and 44 deletions

View File

@ -1,26 +1,60 @@
<!DOCTYPE HTML> <!DOCTYPE html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="./style.css"> <link rel="stylesheet" type="text/css" href="./style.css" />
<title>Home</title> <title>Home</title>
</head> </head>
<body background="/home/samedamci/.config/wallpapers/1920x1080/wall1.png"> <body>
<form class="search-bar" action="https://duckduckgo.com/"> <form class="search-bar" action="https://duckduckgo.com/">
<input autofocus type="search" name="q" placeholder="We need go deeper..." autocomplete="off"> <input
</form> autofocus
<div id="bookmarks"> type="search"
<div class="bmark"><p><a href="https://reddit.com/">redd.it</a></p></div> name="q"
<div class="bmark"><p><a href="https://wiki.archlinux.org/">arch wiki</a></p></div> placeholder="We need go deeper..."
<div class="bmark"><p><a href="https://invidio.us/">invidio.us</a></p></div> autocomplete="off"
<div class="bmark"><p><a href="https://github.com/">github</a></p></div> />
</form>
<div id="bookmarks">
<a href="https://reddit.com/">
<div class="bmark">
<p>redd.it</p>
</div>
</a>
<a href="https://wiki.archlinux.org/">
<div class="bmark">
<p>arch wiki</p>
</div>
</a>
<div class="bmark">
<p><a href="https://invidio.us/">invidio.us</a></p>
</div>
<div class="bmark">
<p><a href="https://github.com/">github</a></p>
</div>
<div class="bmark"><p><a href="https://minecraft.net/">minecraft</a></p></div> <div class="bmark">
<div class="bmark"><p><a href="https://planetminecraft.com/">planetminecraft</a></p></div> <p><a href="https://minecraft.net/">minecraft</a></p>
<div class="bmark"><p><a href="https://gitlab.com/">gitlab</a></p></div> </div>
<div class="bmark"><p><a href="https://fontawesome.com/cheatsheet?from=io">fontawesome</a></p></div> <div class="bmark">
<p><a href="https://planetminecraft.com/">planetminecraft</a></p>
</div>
<div class="bmark">
<p><a href="https://gitlab.com/">gitlab</a></p>
</div>
<div class="bmark">
<p>
<a href="https://fontawesome.com/cheatsheet?from=io">fontawesome</a>
</p>
</div>
<div class="bmark"><p><a href="https://kernel.org">kernel.org</a></p></div> <div class="bmark">
<div class="bmark"><p><a href="https://openstreetmap.org">openstreetmap</a></p></div> <p><a href="https://kernel.org">kernel.org</a></p>
<div class="bmark"><p><a href="https://openweathermap.org/">openweathermap</a></p></div> </div>
</div> <div class="bmark">
<p><a href="https://openstreetmap.org">openstreetmap</a></p>
</div>
<div class="bmark">
<p><a href="https://openweathermap.org/">openweathermap</a></p>
</div>
</div>
</body> </body>

View File

@ -1,37 +1,58 @@
* { :root {
font-family: Monospace; --bg: #071616;
text-align: center; --fg: #dfdfdf;
color: #dfdfdf; --bru: #353234;
text-decoration: none; --brf: #144949;
} }
.search-bar input { * {
background: rgba(10, 2, 0, 0.9); font-family: Monospace;
border: none; text-align: center;
width: 100%; color: var(--fg);
height: 35px; text-decoration: none;
}
body {
background: var(--bg);
} }
.search-bar { .search-bar {
margin: 100px auto 0px auto; margin: 100px auto 0px auto;
width: 70%; width: 1100px;
}
.search-bar input {
background: var(--bg);
width: 100%;
height: 35px;
border: none;
}
.search-bar input:focus {
outline: none;
} }
#bookmarks { #bookmarks {
height: 40px; height: auto;
width: 70%; width: 1100px;
margin: 15px auto; margin: 50px auto;
display: grid;
grid-gap: 10px;
grid-template-columns: auto auto auto auto;
} }
.bmark { .bmark {
background: rgba(10, 2, 0, 0.9); background: var(--bg);
width: 24.7%; width: auto;
height: 100%; height: 40px;
float: left; margin: 0 0 3px 3px;
margin: 0 0 3px 3px;
} }
a:hover { .bmark, .search-bar {
color: #aaaaaa; border: 1px solid var(--bru);
}
.bmark:hover, .search-bar:hover {
border-color: var(--brf);
color: var(--brf);
transition: .3s; transition: .3s;
} }