Modify homepage
This commit is contained in:
parent
28bb9661ce
commit
22d017977a
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
x
Reference in New Issue
Block a user