diff options
| -rw-r--r-- | README.md | 8 | ||||
| -rw-r--r-- | index.html | 20 | ||||
| -rw-r--r-- | startpage.gif | bin | 0 -> 2841925 bytes | |||
| -rw-r--r-- | style.css | 55 |
4 files changed, 19 insertions, 64 deletions
@@ -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 - -cat + +<p style="text-align: center;">cat</p> @@ -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 Binary files differnew file mode 100644 index 0000000..571ccc5 --- /dev/null +++ b/startpage.gif @@ -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; -} */ |
