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