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>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="./style.css">
<title>Home</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="./style.css" />
<title>Home</title>
</head>
<body background="/home/samedamci/.config/wallpapers/1920x1080/wall1.png">
<form class="search-bar" action="https://duckduckgo.com/">
<input autofocus type="search" name="q" placeholder="We need go deeper..." autocomplete="off">
</form>
<div id="bookmarks">
<div class="bmark"><p><a href="https://reddit.com/">redd.it</a></p></div>
<div class="bmark"><p><a href="https://wiki.archlinux.org/">arch wiki</a></p></div>
<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"><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>
<body>
<form class="search-bar" action="https://duckduckgo.com/">
<input
autofocus
type="search"
name="q"
placeholder="We need go deeper..."
autocomplete="off"
/>
</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://kernel.org">kernel.org</a></p></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>
<div class="bmark">
<p><a href="https://minecraft.net/">minecraft</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">
<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>

View File

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