From 22d017977aa8db1948d126f99b6aafee231400b2 Mon Sep 17 00:00:00 2001 From: samedamci Date: Tue, 17 Mar 2020 15:44:26 +0100 Subject: [PATCH] Modify homepage --- botfiles/.config/homepage/index.html | 78 ++++++++++++++++++++-------- botfiles/.config/homepage/style.css | 65 +++++++++++++++-------- 2 files changed, 99 insertions(+), 44 deletions(-) diff --git a/botfiles/.config/homepage/index.html b/botfiles/.config/homepage/index.html index 78e35d8..5b6cd65 100644 --- a/botfiles/.config/homepage/index.html +++ b/botfiles/.config/homepage/index.html @@ -1,26 +1,60 @@ - + - - - Home + + + Home - -
- -
-
-

redd.it

-

arch wiki

-

invidio.us

-

github

- -

minecraft

-

planetminecraft

-

gitlab

-

fontawesome

+ +
+ +
+ +
+

minecraft

+
+
+

planetminecraft

+
+
+

gitlab

+
+
+

+ fontawesome +

+
+ +
+

kernel.org

+
+
+

openstreetmap

+
+
+

openweathermap

+
+
diff --git a/botfiles/.config/homepage/style.css b/botfiles/.config/homepage/style.css index 6dabee0..975da99 100644 --- a/botfiles/.config/homepage/style.css +++ b/botfiles/.config/homepage/style.css @@ -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; }