aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--README.md8
-rw-r--r--index.html20
-rw-r--r--startpage.gifbin0 -> 2841925 bytes
-rw-r--r--style.css55
4 files changed, 19 insertions, 64 deletions
diff --git a/README.md b/README.md
index 294198d..2bd75c1 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,10 @@
# Startpage
-Custom browser startpage. Template tweaked from [Prismatic-Night](https://github.com/3r3bu5x9/Prismatic-Night).
+Custom browser startpage.
-Font: Fira Code Nerd Font
+Font: Fira Code
Colorscheme: Gruvbox Dark
-![screenshot](screenshot.JPG)
-cat
+![startpage](startpage.gif)
+<p style="text-align: center;">cat</p>
diff --git a/index.html b/index.html
index 885f58d..9c9e2c7 100644
--- a/index.html
+++ b/index.html
@@ -20,26 +20,18 @@
<p>> cd ~/<span class="blinking">_</span></p>
</div>
- <!-- search bar -->
- <!-- <div class="search_box">
- <form action="https://duckduckgo.com/" method="get">
- <input class="input_box" type="text" placeholder="ddg" autocomplete="off">
- </form>
- </div> -->
-
- <div class="bookmark">
-
+ <div class="bookmarks">
<div class="category">
- <div class="bookmarks">
+ <div class="links">
<li class="title">work</li>
- <li><a href="https://gmail.com" target="_blank" rel="noopener noreferrer">gmail</a></li>
+ <li><a href="https://gmail.com">gmail</a></li>
<li><a href="https://outlook.office.com">outlook</a></li>
<li><a href="https://linkedin.com">linkedin</a></li>
</div>
</div>
<div class="category">
- <div class="bookmarks">
+ <div class="links">
<li class="title">dev</li>
<li><a href="https://github.com/">github</a></li>
<li><a href="https://github.com/">lobste.rs</a></li>
@@ -49,7 +41,7 @@
</div>
<div class="category">
- <div class="bookmarks">
+ <div class="links">
<li class="title"><a style="color: #EADBB2" href="https://reddit.com">reddit</a></li>
<li><a href="https://reddit.com/r/programming/">programming</a></li>
<li><a href="https://reddit.com/r/selfhosted/">selfhosted</a></li>
@@ -59,7 +51,7 @@
</div>
<div class="category">
- <div class="bookmarks">
+ <div class="links">
<li class="title">play</li>
<li><a href="https://monkeytype.com/">monkeytype</a></li>
<li><a href="https://youtube.com/">youtube</a></li>
diff --git a/startpage.gif b/startpage.gif
new file mode 100644
index 0000000..571ccc5
--- /dev/null
+++ b/startpage.gif
Binary files differ
diff --git a/style.css b/style.css
index 2f1cba0..bbf506a 100644
--- a/style.css
+++ b/style.css
@@ -1,14 +1,6 @@
-html{
+html, body {
background:#282828;
font-family: "Fira Code";
- height: 100%;
- width: 100%;
- margin: 0;
- padding: 0;
-}
-
-body {
- background: #282828;
color: #EADBB2;
height: 100%;
width: 100%;
@@ -18,25 +10,25 @@ body {
.container {
display: grid;
- grid-template-columns: 1fr 1fr 1fr 1fr;
+ grid-template-columns: 1fr 460px 600px 1fr;
grid-template-areas:
". left right .";
+ column-gap: 80px;
justify-items: center;
align-items: center;
- height: 100%;
- width: 100%;
+ min-height: 100%;
}
.left-container {
grid-area: left;
- height: 400px;
- width: 400px;
+ aspect-ratio: 1/1;
}
.right-container {
grid-area: right;
height: 50%;
- width: 80%;
+ width: 100%;
+ /* border: 1px solid white; */
}
.gif img {
@@ -58,12 +50,12 @@ body {
width: 180px;
}
-.bookmark {
+.bookmarks {
display: flex;
justify-content: center;
}
-.bookmarks {
+.links {
display: flex;
flex-direction: column;
align-items: center;
@@ -112,32 +104,3 @@ a:hover {
opacity: 1;
}
}
-
-/* form {
- margin: 0px;
- padding: 0px;
-}
-
-.search_box {
- display: flex;
- align-self: center;
- border: 4px solid;
- border-color: rgba(234, 219, 178,0.6);
- border-radius: 10px;
- width: 400px;
- height: 48px;
- margin-bottom: 40px;
-}
-
-.input_box {
- border: none;
- outline: none;
- background: none;
- width: 380px;
- padding-top: 12px;
-
- text-align:center;
- font-family: "Fira Code";
- font-size: 20px;
- color: #EADBB2;
-} */