aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorkennethcheo <kennethcheo1@gmail.com>2021-09-26 02:16:49 +0800
committerkennethcheo <kennethcheo1@gmail.com>2021-09-26 02:16:49 +0800
commit5150b2ca24b92cb3534e531104cdf760e2b47574 (patch)
treef22549246d2adaa84651b3e7b26a78e020a8af1d
parentfcd352dfa70ed9e9950738552727910689d25739 (diff)
downloadstartpage-5150b2ca24b92cb3534e531104cdf760e2b47574.tar.xz
startpage-5150b2ca24b92cb3534e531104cdf760e2b47574.zip
Switched from flex to grid CSS
Diffstat
-rw-r--r--README.md7
-rw-r--r--index.html81
-rw-r--r--screenshot.JPGbin83430 -> 74177 bytes
-rw-r--r--style.css96
4 files changed, 97 insertions, 87 deletions
diff --git a/README.md b/README.md
index 4ac30e5..294198d 100644
--- a/README.md
+++ b/README.md
@@ -1,7 +1,10 @@
# Startpage
-Custom minimalist browser startpage. Heavily borrowed from [Prismatic-Night](https://github.com/3r3bu5x9/Prismatic-Night).
+Custom browser startpage. Template tweaked from [Prismatic-Night](https://github.com/3r3bu5x9/Prismatic-Night).
-Feel free to fork.
+Font: Fira Code Nerd Font
+
+Colorscheme: Gruvbox Dark
![screenshot](screenshot.JPG)
+cat
diff --git a/index.html b/index.html
index 253275f..885f58d 100644
--- a/index.html
+++ b/index.html
@@ -9,60 +9,65 @@
<body>
<div class="container">
- <div class="gif">
- <img src="cat.gif" />
- </div>
- <div class="head">
- <p>> cd ~/<span class="blinking">_</span></p>
+ <div class="left-container">
+ <div class="gif">
+ <img src="cat.gif" />
+ </div>
</div>
- <!-- <div class="search_box">
+ <div class="right-container">
+ <div class="head">
+ <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="bookmark">
- <div class="category">
- <div class="bookmarks">
- <li class="title">work</li>
- <li><a href="https://gmail.com" target="_blank" rel="noopener noreferrer">gmail</a></li>
- <li><a href="https://outlook.office.com">outlook</a></li>
- <li><a href="https://linkedin.com">linkedin</a></li>
+ <div class="category">
+ <div class="bookmarks">
+ <li class="title">work</li>
+ <li><a href="https://gmail.com" target="_blank" rel="noopener noreferrer">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>
- <div class="category">
- <div class="bookmarks">
- <li class="title">dev</li>
- <li><a href="https://github.com/">github</a></li>
- <li><a href="https://github.com/">lobste.rs</a></li>
- <li><a href="https://mankier.com/">mankier</a></li>
- <li><a href="https://devdocs.io/">devdocs</a></li>
+ <div class="category">
+ <div class="bookmarks">
+ <li class="title">dev</li>
+ <li><a href="https://github.com/">github</a></li>
+ <li><a href="https://github.com/">lobste.rs</a></li>
+ <li><a href="https://mankier.com/">mankier</a></li>
+ <li><a href="https://devdocs.io/">devdocs</a></li>
+ </div>
</div>
- </div>
- <div class="category">
- <div class="bookmarks">
- <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>
- <li><a href="https://reddit.com/r/unixporn/">unixporn</a></li>
- <li><a href="https://reddit.com/r/mechanicalkeyboards/">mk</a></li>
+ <div class="category">
+ <div class="bookmarks">
+ <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>
+ <li><a href="https://reddit.com/r/unixporn/">unixporn</a></li>
+ <li><a href="https://reddit.com/r/mechanicalkeyboards/">mk</a></li>
+ </div>
</div>
- </div>
- <div class="category">
- <div class="bookmarks">
- <li class="title">play</li>
- <li><a href="https://monkeytype.com/">monkeytype</a></li>
- <li><a href="https://youtube.com/">youtube</a></li>
- <li><a href="https://twitch.tv/">twitch</a></li>
- <li><a href="https://netflix.com/">netflix</a></li>
+ <div class="category">
+ <div class="bookmarks">
+ <li class="title">play</li>
+ <li><a href="https://monkeytype.com/">monkeytype</a></li>
+ <li><a href="https://youtube.com/">youtube</a></li>
+ <li><a href="https://twitch.tv/">twitch</a></li>
+ <li><a href="https://netflix.com/">netflix</a></li>
+ </div>
</div>
</div>
-
</div>
</div>
</body>
diff --git a/screenshot.JPG b/screenshot.JPG
index 597cbfa..c67a43f 100644
--- a/screenshot.JPG
+++ b/screenshot.JPG
Binary files differ
diff --git a/style.css b/style.css
index cd70df2..2f1cba0 100644
--- a/style.css
+++ b/style.css
@@ -1,16 +1,11 @@
html{
- display: flex;
- flex-flow: row nowrap;
- justify-content: center;
- align-content: center;
- align-items: center;
+ background:#282828;
+ font-family: "Fira Code";
height: 100%;
width: 100%;
margin: 0;
padding: 0;
- background:#282828;
- font-family: "Fira Code";
- }
+}
body {
background: #282828;
@@ -22,20 +17,26 @@ body {
}
.container {
- display: flex;
- flex-direction: column;
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr 1fr;
+ grid-template-areas:
+ ". left right .";
+ justify-items: center;
+ align-items: center;
height: 100%;
width: 100%;
- justify-content: center;
- align-items: center;
}
-.gif {
- display: flex;
- flex-direction: column;
- align-items: center;
- height: 500px;
- width: 500px;
+.left-container {
+ grid-area: left;
+ height: 400px;
+ width: 400px;
+}
+
+.right-container {
+ grid-area: right;
+ height: 50%;
+ width: 80%;
}
.gif img {
@@ -48,37 +49,9 @@ body {
flex-direction: column;
align-items: center;
font-size: 40px;
+ padding-top: 60px;
}
-/* 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;
-} */
-
.category {
display: flex;
flex-direction: column;
@@ -139,3 +112,32 @@ 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;
+} */
generated by cgit v1.2.3 (git 2.25.1) at 2024-07-03 12:47:02 +0000