Add single-file version
This commit is contained in:
parent
09b7279e40
commit
909f6ac6a1
|
@ -15,6 +15,6 @@ Fonts used:
|
||||||
|
|
||||||
The Firefox CSS is taken from [here](https://github.com/evanswa0606/firefox-simpletheme) with some minor changes.
|
The Firefox CSS is taken from [here](https://github.com/evanswa0606/firefox-simpletheme) with some minor changes.
|
||||||
|
|
||||||
### :camera: And it looks like this:
|
### :camera: And it looks like this :camera:
|
||||||
|
|
||||||
![screenshot](./images/screenshot.png)
|
![screenshot](./images/screenshot.png)
|
||||||
|
|
|
@ -0,0 +1,213 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<title>~</title>
|
||||||
|
<style type="text/css">
|
||||||
|
:root {
|
||||||
|
--black: #1b2229;
|
||||||
|
--red: #e06c75;
|
||||||
|
--yellow: #ebcb8b;
|
||||||
|
|
||||||
|
--fg: #81a1c1;
|
||||||
|
--bg: #3b4252;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
background: #2e3440;
|
||||||
|
}
|
||||||
|
|
||||||
|
main {
|
||||||
|
margin: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rose1 {
|
||||||
|
float: left;
|
||||||
|
margin-top: 12px;
|
||||||
|
width: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rose2 {
|
||||||
|
float: right;
|
||||||
|
margin-top: 12px;
|
||||||
|
width: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 56px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--red);
|
||||||
|
display: inline;
|
||||||
|
text-shadow: 4px 4px 6px var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.cardtitle {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.searchbox {
|
||||||
|
background-color: var(--bg);
|
||||||
|
border-radius: 8px;
|
||||||
|
box-shadow: 8px 8px 5px var(--black);
|
||||||
|
height: 48px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
form label {
|
||||||
|
font-size: 24px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--red);
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
form input[type="search"] {
|
||||||
|
font-size: 24px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: bold;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
color: var(--fg);
|
||||||
|
width: 96%;
|
||||||
|
}
|
||||||
|
|
||||||
|
form:focus-within input::placeholder {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bookmarks {
|
||||||
|
margin-top: 40px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
background-color: var(--bg);
|
||||||
|
width: 240px;
|
||||||
|
height: 420px;
|
||||||
|
box-shadow: 8px 8px 5px var(--black);
|
||||||
|
border-radius: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.group {
|
||||||
|
color: var(--red);
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
text-shadow: 2px 2px 4px var(--black);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
list-style-type: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: normal;
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--fg);
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
color: var(--yellow);
|
||||||
|
}
|
||||||
|
|
||||||
|
footer {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
font-size: 14px;
|
||||||
|
font-style: italic;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
<div class="cardtitle">
|
||||||
|
<h1 class="title">
|
||||||
|
Welcome back
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="searchbox">
|
||||||
|
<form action="https://duckduckgo.com/" method="GET" autocomplete="off">
|
||||||
|
<label>$</label>
|
||||||
|
<input type="search" name="q" placeholder="Duck something..." />
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bookmarks">
|
||||||
|
<div class="card">
|
||||||
|
<h1 class="group">Linux/BSD</h1>
|
||||||
|
<div>
|
||||||
|
<li><a href="https://wiki.archlinux.org/">Arch</a></li>
|
||||||
|
<li><a href="https://artixlinux.org/">Artix</a></li>
|
||||||
|
<li><a href="https://wiki.alpinelinux.org/wiki/Main_Page">Alpine</a></li>
|
||||||
|
<li><a href="https://docs.voidlinux.org/">Void</a></li>
|
||||||
|
<li><a href="https://nixos.org/manual/nix/stable/">Nix</a></li>
|
||||||
|
<li><a href="https://nixos.org/manual/nixos/stable/">NixOS</a></li>
|
||||||
|
<li><a href="https://wiki.gentoo.org/wiki/Handbook:Main_Page">Gentoo</a></li>
|
||||||
|
<li><a href="https://www.debian.org/doc/manuals/debian-reference/">Debian</a></li>
|
||||||
|
<li><a href="https://docs.fedoraproject.org/en-US/docs/">Fedora</a></li>
|
||||||
|
<li><a href="https://www.freebsd.org/doc/en_US.ISO8859-1/books/handbook/">FreeBSD</a></li>
|
||||||
|
<li><a href="https://www.openbsd.org/faq/index.html">OpenBSD</a></li>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card" style="margin-left: 40px;">
|
||||||
|
<h1 class="group">Coding</h1>
|
||||||
|
<div>
|
||||||
|
<li><a href="https://reactjs.org/docs/getting-started.html">React</a></li>
|
||||||
|
<li><a href="https://nodejs.org/en/docs/">Nodejs</a></li>
|
||||||
|
<li><a href="https://www.electronjs.org/docs">Electron</a></li>
|
||||||
|
<li><a href="https://developer.mozilla.org/en-US/docs/Web">MDN</a></li>
|
||||||
|
<li><a href="https://en.cppreference.com/w/">C++</a></li>
|
||||||
|
<li><a href="https://doc.qt.io/">Qt</a></li>
|
||||||
|
<li><a href="https://projecteuler.net/archives">Euler</a></li>
|
||||||
|
<li><a href="https://leetcode.com/problemset/all/">LeetCode</a></li>
|
||||||
|
<li><a
|
||||||
|
href="https://github.com/EbookFoundation/free-programming-books/blob/master/free-programming-books.md#c-1">Books</a>
|
||||||
|
</li>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card" style="margin-left: 40px;">
|
||||||
|
<h1 class="group">Stuff</h1>
|
||||||
|
<div>
|
||||||
|
<li><a href="https://github.com/FollieHiyuki">Github</a></li>
|
||||||
|
<li><a href="https://gitlab.com/FollieHiyuki">GitLab</a></li>
|
||||||
|
<li><a href="https://git.disroot.org/FollieHiyuki">Gitea</a></li>
|
||||||
|
<li><a href="https://www.openstreetmap.org/">Map</a></li>
|
||||||
|
<li><a href="https://www.deepl.com/translator">DeepL</a></li>
|
||||||
|
<li><a href="https://iqdb.org/">Images</a></li>
|
||||||
|
<li><a href="https://www.reddit.com/r/Animewallpaper/">Reddit</a></li>
|
||||||
|
<li><a href="https://odysee.com/">Odysee</a></li>
|
||||||
|
<li><a href="https://www.phoronix.com/scan.php?page=home">Phoronix</a></li>
|
||||||
|
<li><a href="https://news.ycombinator.com/news">HackerNews</a></li>
|
||||||
|
<li><a href="https://www.protondb.com/">ProtonDB</a></li>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<footer>
|
||||||
|
<div style="color: #81a1c1;">Made by @FollieHiyuki</div>
|
||||||
|
</footer>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
Reference in New Issue