aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorkenneth <kennethcheo1@gmail.com>2021-12-03 18:18:41 +0800
committerkenneth <kennethcheo1@gmail.com>2021-12-03 18:22:15 +0800
commite43602181f23e4b0ce31406bf1d1de76b973f2ce (patch)
tree2382403a7c6032a23beb7015fcecebb1932215b9
parentf9e1a163ee7c5ca4acb689634e77f073f536d56a (diff)
downloadstartpage-e43602181f23e4b0ce31406bf1d1de76b973f2ce.tar.xz
startpage-e43602181f23e4b0ce31406bf1d1de76b973f2ce.zip
Defined color variables for easy configuration.
+ Changed username
-rw-r--r--README.md10
-rw-r--r--index.html2
-rw-r--r--style.css18
3 files changed, 18 insertions, 12 deletions
diff --git a/README.md b/README.md
index c180174..e547e6e 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,12 @@
# Startpage
-Custom browser startpage:
+[Live Preview](https://kencx.github.io/startpage/)
+
+Feel free to fork and make your own changes!
+
- Font: Fira Code
- Colorscheme: Gruvbox Dark
- Cat Gif: [Here](https://twitter.com/avogado6/status/1165595520967954432?s=19)
-[Live Preview](https://kennethcheo.github.io/startpage/)
-
![startpage](startpage.gif)
-<p style="text-align: center;">cat</p>
-## Todo:
-- Turn blinking caret into working search bar
diff --git a/index.html b/index.html
index b2a2a53..88421d1 100644
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
- <title>HOME</title>
+ <title>~/startpage</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
diff --git a/style.css b/style.css
index 96fee77..d1364b3 100644
--- a/style.css
+++ b/style.css
@@ -1,7 +1,15 @@
+:root {
+ --color-bg: #282828;
+ --color-fg: #EADBB2;
+ --color-link: #8F9191;
+ --color-link-visited: #668F8B;
+ --color-link-hover: #FA7921 ;
+}
+
html, body {
- background:#282828;
+ background: var(--color-bg);
+ color: var(--color-fg);
font-family: "Fira Code";
- color: #EADBB2;
height: 100%;
width: 100%;
margin: 0;
@@ -74,15 +82,15 @@ li {
a:link {
text-decoration: none;
- color: #8F9191;
+ color: var(--color-link);
}
a:visited {
- color: #668F8B;
+ color: var(--color-link-visited);
}
a:hover {
- color: #FA7921;
+ color: var(--color-link-hover);
}
.blinking {